天天看点
返回

啊哈 phaser制作小游戏flappy bird（1）

看到phaser的world和camera玩的已如此之好，果断自己操练了一个小游戏出来玩玩。记录一下啦，加深一下印象。

首先想起他引擎一样。在html5中添加一个canvas然后实例化一个游戏对象来实现的。不过phaser是通过DOM父级元素的ID，自己动态添加出这个canvas来的。所以html5的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>game</title>
<script src="js/phaser.js"></script>
</head>
<body>
<div id="game"></div>
<script>
var game = new Phaser.Game(,,Phaser.AUTO,'game'); //实例化一个Phaser的游戏实例
</script>
</body>
</html>

里面的new phaser实例化一个game出来。里面的参数情况是这样的。

Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

width是画布的宽度。

height是画布的高度。

renderer是按照什么方式渲染图像Phaser.CANVAS 为使用html5画布，Phaser.WEBGL 为使用性能更加好的WebGL来渲染，Phaser.AUTO为自动侦测，如果浏览器支持WebGL则使用WebGL,否则使用Canvas。

parent是规定这个画布的父级元素可以是id，也可以使dom元素本身。

phaser会自动创建一个canvas在这个父级元素里面的。

state是场景。虽然应该改名叫scene才对啊。后面创建了场景之后就把最先运行的场景夹在进来啦。我上面没有填。后面再加吧。

transparent: 是否使用透明的canvas背景

antialias: 是否启用抗锯齿

physicsConfig: 游戏物理系统配置参数

以上所有参数都是可选的。

创建场景。实在太简单了好吗？！只要在场景里面有下面这样的格式就可以了。就是一个合法的场景。

//state可以是一个自定义对象
var state1 = {
    preload : function(){ },
    create : function(){ },
    update : function(){ }    
}

//state也可以是一个构造函数
var state2 = function(){
    this.preload = function(){ };
    this.create = function(){ };
    this.update = function(){ };
}

//只要存在preload、create、update三个方法中的一个就可以了
var state3 = function(){
    this.update = function(){  };
}

//当然state里也可以存在其他属性或方法
var state4 = function(){
    this.create = function(){ };
    this.aaa = function(){ }; //其他方法
    this.bbb = 'hello'; //其他属性
}

哈哈太简单喽。

var game = new Phaser.Game(,,Phaser.AUTO,'game'); 

game.States = {}; //创建一个对象来存放要用到的state
game.States.boot = function(){ ... }  //boot场景，用来做一些游戏启动前的准备
game.States.prelaod = function(){ ... } //prelaod场景，用来显示资源加载进度
game.States.menu = function(){ ... } //menu场景，游戏菜单
game.States.play = function(){ ... } //play场景，正式的游戏部分

//把定义好的场景添加到游戏中
game.state.add('boot',game.States.boot);
game.state.add('preload',game.States.preload); 
game.state.add('menu',game.States.menu); 
game.state.add('play',game.States.play);

//调用boot场景来启动游戏
game.state.start('boot');

创建了四个场景。boot场景是用来加载loading界面的资源。你想，loading界面加载的是loading之后游戏的资源，那loading的资源就在loading之前加载。其他的就不说了。

然后在boot里面怎么写呢

game.States.boot = function(){
    this.preload = function(){
        game.load.image('loading','assets/preloader.gif'); //加载进度条图片资源
    };
    this.create = function(){
        game.state.start('preload'); //加载完成后，调用preload场景
    };
}

在场景加载完成前preload时，定义它夹在一个loading的gif图像。在它加载完成后就调用preload场景。

然后是preload界面。

game.States.preload = function(){
    this.preload = function(){
        var preloadSprite = game.add.sprite(,game.height/,'loading'); //创建显示loading进度的sprite
        game.load.setPreloadSprite(preloadSprite);  //用setPreloadSprite方法来实现动态进度条的效果

        //以下为要加载的资源
        game.load.image('background','assets/background.png'); //游戏背景图
        game.load.image('ground','assets/ground.png'); //地面
        game.load.image('title','assets/title.png'); //游戏标题
        game.load.spritesheet('bird','assets/bird.png',,,); //鸟
        game.load.image('btn','assets/start-button.png');  //按钮
        game.load.spritesheet('pipe','assets/pipes.png',,,); //管道
        game.load.bitmapFont('flappy_font', 'assets/fonts/flappyfont/flappyfont.png', 'assets/fonts/flappyfont/flappyfont.fnt');//显示分数的字体
        game.load.audio('fly_sound', 'assets/flap.wav');//飞翔的音效
        game.load.audio('score_sound', 'assets/score.wav');//得分的音效
        game.load.audio('hit_pipe_sound', 'assets/pipe-hit.wav'); //撞击管道的音效
        game.load.audio('hit_ground_sound', 'assets/ouch.wav'); //撞击地面的音效

        game.load.image('ready_text','assets/get-ready.png'); //get ready图片
        game.load.image('play_tip','assets/instructions.png'); //玩法提示图片
        game.load.image('game_over','assets/gameover.png'); //gameover图片
        game.load.image('score_board','assets/scoreboard.png'); //得分板
    }
    this.create = function(){
        game.state.start('menu'); //当以上所有资源都加载完成后就可以进入menu游戏菜单场景了
    }
}

game.load.preload实现加载进度条，并加载其他的资源，加载完毕就进去menu场景。

game.load.spritesheet(‘bird’,’assets/bird.png’,34,24,3); 这一段是把一张三只小鸟的图片加载成3个精灵放在sheet里面，为后面动画做准备。

下面是menu场景。

game.States.menu = function(){

this.create = function(){

game.add.tileSprite(0,0,game.width,game.height,’background’).autoScroll(-10,0); //背景图

game.add.tileSprite(0,game.height-112,game.width,112,’ground’).autoScroll(-100,0); //地板

var titleGroup = game.add.group(); //创建存放标题的组

titleGroup.create(0,0,’title’); //标题

var bird = titleGroup.create(190, 10, ‘bird’); //添加bird到组里

bird.animations.add(‘fly’); //添加动画

bird.animations.play(‘fly’,12,true); //播放动画

titleGroup.x = 35;

titleGroup.y = 100;

game.add.tween(titleGroup).to({ y:120 },1000,null,true,0,Number.MAX_VALUE,true); //标题的补间动画

var btn = game.add.button(game.width/2,game.height/2,’btn’,function(){//按钮

game.state.start(‘play’);

});

btn.anchor.setTo(0.5,0.5);

}

}

autoscroll是什么意思捏，就是自己不停的动。意思是让背景和地面不同速度地运动。

titleGroup是一个组的概念，把一个小组合放到一起操作。比如要让小鸟和文字一起上下缓动，就把它们放在一个组里面。

var titleGroup = game.add.group(); //创建存放标题的组
        titleGroup.create(,,'title'); //标题
        var bird = titleGroup.create(, , 'bird'); //添加bird到组里
        bird.animations.add('fly'); //添加动画
        bird.animations.play('fly',,true); //播放动画
        titleGroup.x = ;
        titleGroup.y = ;
        game.add.tween(titleGroup).to({ y:120 },,null,true,,Number.MAX_VALUE,true); //标题的补间动画

仔细看这一小段，发现什么了呢？就是定义一个组，再组中创建一个标题，再组中创建一个小鸟，给小鸟新建一个fly动画，让小鸟执行fly动画，最后给这个组一个动作。这个动作具体参数如下：

to(properties, duration, ease, autoStart, delay, repeat, yoyo)

properties：里面包含一个js’属性，即要让你的对象变成什么样。

duration：显而易见，间隔时间。毫秒。

ease ：是否缓动，默认为匀速动画

autostart：是否自启动

delay：动画开始的延迟时间 毫秒。

repeat：动画重复的次数，如果需要动画永远循环，则把该值设为 Number.MAX_VALUE

yoyo : 如果该值为true,则动画会自动反转

最后添加了一个btn加了点击时间又设置了锚点。menu没有家在资源，只有一个create方法就好啦。。

javascript 游戏 html5 Phaser
上一篇: Windows7社区发布活动----Windows7安全性
下一篇: phaser学习笔记：物理系统arcade基础平台

继续阅读