Phaser是一个简单易用且功能强大的html5游戏框架，利用它可以很轻松的开发出一个html5游戏。在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏：Flappy Bird，希望大家看后也能做出自己的html5游戏。大家可以先点击这里来试玩一下我已经做好的这个游戏，感受一下Phaser的游戏效果，游戏的完整代码我已经放到github上了。支持的浏览器：IE9+、Firefox、Chrome、Opera、Safari以及移动端的能支持html5的浏览器，推荐使用谷歌浏览器，因为它性能最好。

phaser.js的源码可以到它在github上的托管里去下载，游戏要用到的图片声音等素材资源请点击这里下载。Phaser的使用非常简单，只需要引入它的主文件，然后在页面中指定一个用来放置canvas的元素，然后实例化一个 Game 对象就可以了。

复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>game</title>

<script src="http://pic1.codesec.net/app_attach/20141022/20141022_32_50760_0.js"></script>

</head>

<body>

<div id="game"></div>

<script>

var game = new Phaser.Game(288,505,Phaser.AUTO,'game'); //实例化一个Phaser的游戏实例

</script>

</body>

</html>

复制代码

我们来看看Phaser.Game这个函数都有哪些参数：

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

width: 游戏的宽度,也就是用来渲染游戏的canvas的宽度，单位为px

height: 游戏的高度，也就是用来渲染游戏的canvas的高度，单位为px

renderer: 使用哪种渲染方式，Phaser.CANVAS 为使用html5画布，Phaser.WEBGL 为使用性能更加好的WebGL来渲染，Phaser.AUTO为自动侦测，如果浏览器支持WebGL则使用WebGL,否则使用Canvas

parent: 用来放置canvas元素的父元素，可以是一个元素id，也可以是dom元素本身，phaser会自动创建一个canvas并插入到这个元素中。

state: state可以理解为场景，在这里指定state表示让游戏首先加载这个场景，但也可以不在这里指定state，而在之后的代码中决定首先加载哪个state。关于state我后面还会有详细的说明。

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

antialias: 是否启用抗锯齿

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

以上所有参数都是可选的，它们的默认值以及更详细的信息可以看这里，一般我们只需指定前面那4到5个参数就行了。

实例化Game对象后，接下来要做的就是创建游戏会用到的各种场景了，也就是上面说的state，那么怎么才能创建一个state呢？state可以是一个js自定义对象，也可以是一个函数，只要它们存在preload、create、update这三个方法中的任意一个，就是一个合法的state。

复制代码

//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'; //其他属性

}

复制代码

其中的preload方法，是用来加载资源的，它会最先执行。create方法是用来初始化以及构建场景的，它要等到在preload里加载的资源全部加载完成后才执行。最后update方法是更新函数，它会在游戏的每一帧都执行，以此来创造一个动态的游戏。

在这个游戏中，我们会用到4个state，我们可以通过game.state.add()方法来给游戏添加state，然后用game.state.start()方法来调用state,详细信息请看state的文档

复制代码

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

game.States = {}; //创建一个对象来存放要用到的state

game.State.boot = function(){ ... } //boot场景，用来做一些游戏启动前的准备

game.State.prelaod = function(){ ... } //prelaod场景，用来显示资源加载进度

game.State.menu = function(){ ... } //menu场景，游戏菜单

game.State.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');

复制代码

制作资源加载进度条

游戏要用到的一些图片、声音等资源都需要提前加载，有时候如果资源很多，就有必要做一个资源加载进度的页面，提高用户等待的耐心。这里我们用一个state来实现它,命名为preload。

因为资源加载进度条需要一个进度条的背景图片，所以在制作这个state前，我们还需要另一个最基础的state,用来加载那张进度条图片，我们命名为boot。

复制代码

game.States.boot = function(){

this.preload = function(){

game.load.image('loading','assets/preloader.gif'); //加载进度条图片资源

};

this.create = function(){

game.state.start('preload'); //加载完成后，调用preload场景

};

}

复制代码

Phaser中资源的加载都是通过 Phaser.Loader 这个对象的方法来完成的,游戏实例的load属性就是指向当前游戏的Loader对象，在我们这里就是game.load。Loader对象有许多方法，不同的方法可以加载不同的资源，例如加载图片我们用的是game.load.image()方法，具体的方法列表请自行参考文档。

在preload这个场景中，我们需要把游戏后面会用到的所有资源都进行加载，然后还要展示一个加载进度条给用户看。Loader对象提供了一个 setPreloadSprite 方法，只要把一个sprite对象指定给这个方法，那么这个sprite对象的宽度或高度就会根据当前加载的百分比自动调整，达到一个动态的进度条的效果。

复制代码

game.States.preload = function(){

this.preload = function(){

var preloadSprite = game.add.sprite(50,game.height/2,'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',34,24,3); //鸟

game.load.image('btn','assets/start-button.png'); //按钮

game.load.spritesheet('pipe','assets/pipes.png',54,320,2); //管道

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游戏菜单场景了

}

}

复制代码

上面我们提到了Sprite对象，也就是游戏开发中俗称的精灵，同样在Phaser中sprite对象也是制作游戏过程中用得最多的也是最重要的一个对象之一。我们可以用一幅图片来创建一个sprite,然后用Phaser提供给我们的众多属性和方法来对它进行操作。上面我们是利用game.add.sprite()来创建sprite的，并且创建后会自动把它添加到当前的游戏中，game.add代表的是Phaser.GameObjectFactory对象，该对象提供了了一系列快捷方法来方便我们创建游戏的各种组件。我们这里制作的资源加载进度页面非常简单，大概就是下面这个样子：

1

制作游戏菜单页面

资源加载完成后就该进入到游戏菜单页面了,说是菜单页，但我们这里只是提供一个开始游戏的按钮而已，作为教程就别搞那么复杂啦。做好后的效果如下：

menu下面我们就来实现这个页面。

首先是背景图与地面，我们看到这两个东西是会动的，地面移动动的速度快一些，背景图慢一些，在Phaser中有专门的东西来处理这种效果，叫做TileSprite，什么是TileSprite呢？TileSprite本质上还是一个sprite对象，不过这个sprite的贴图是可以移动的，并且会自动平铺来弥补移动后的空缺，所以我们的素材图片要是平铺后看不出有缝隙，就可以拿来当做TileSprite的移动贴图了。TileSprite的贴图既可以水平移动也可以垂直移动，或者两者同时移动，我们只需要调用TileSprite对象的autoScroll(x,y)方法就可以使它的贴图动起来了，其中x是水平方向的速度，y是垂直方向的速度。

复制代码

game.States.menu = function(){

this.create = function(){

var bg = game.add.tileSprite(0,0,game.width,game.height,'background'); //当作背景的tileSprite

var ground = game.add.tileSprite(0,game.height-112,game.width,112,'ground').autoScroll(-100,0); //当作地面的tileSprite

bg.autoScroll(-10,0); //让背景动起来

ground.autoScroll(-100,0); //让地面动起来

}

}

复制代码

然后来制作游戏标题，游戏标题flappy bird这几个字是一张图片，然后那个鸟是一个sprite，并且我们在sprite上执行了动画，使它的翅膀看起来是在动的。我要说的是怎么在sprite对象上实现动画。首先在加载鸟的图片时，我们加载的不当当就是一张鸟的图片，我们加载的是一个这样的图片：bird

我们看到这张图片有三只鸟，更确切的说是一只鸟的三个状态，或者说是动画中的三个帧。那我们怎样让他变成动画呢？在Loader对象中有一个spritesheet的方法，就是专门用来加载这种多帧图片的，我们看一下这个方法：

spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing)

key : 给这张图片指定的名称，以后在创建sprite等对象时会要用到的

url: 图片的地址

frameWidth : 图片中每帧的宽度

frameHeight : 图片中每帧的高度

frameMax : 最多有几帧

margin : 每帧的外边距

spacing : 每帧之间的间隔

我们上面那张鸟的图片，每一个鸟的宽高分别是34px和24px,所以frameWidth应该是34，frameHeight是24，然后我们这个动画有三帧，frameMax为3，帧与帧之间没有间隙，margin与spacing都为0。实际上spritesheet方法就是能让我们加载一个图片，并在这个图片上划分出帧来，以后使用这个图片的sprite就可以用这些帧来播放动画啦。要在sprite上实现动画，我们首先还得先定义一个动画，就是定义这个动画是由哪些帧组成的。sprite对象有个animations属性，代表的是Phaser中专门管理动画的对象：AnimationManager，该对象有一个add方法，用来添加动画，还有一个play方法，用来播放动画，它们具体的参数可以参阅文档。

下面再说一个非常重要的对象：Phaser.Group，也就是组。组相当于一个父容器，我们可以把许多对象放进一个组里，然后就可以使用组提供的方法对这些对象进行一个批量或是整体的操作。比如要使组里的对象同意进行一个位移，只需要对组进行位移就可以了，又比如要对组里的所有对象都进行碰撞检测，那么就只需要对这个组对象进行碰撞检测就行了。下面我们要制作的这个游戏标题是由一张文字图片和一支鸟组成的，我们就是把这两个东西放在一个组中，然后来进行整体的操作。

复制代码

game.States.menu = function(){

this.create = function(){

......

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

titleGroup.create(0,0,'title'); //通过组的create方法创建标题图片并添加到组里

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:2881064151 },1000,null,true,0,Number.MAX_VALUE,true); //对这个组添加一个tween动画，让它不停的上下移动

}

}

复制代码

上面代码中的Tween对象，是专门用来实现补间动画的。通过game.add的tween方法得到一个Tween对象,这个方法的参数是需要进行补间动画的物体。然后我们可以使用Tween对象的to方法来实现补间动画。

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

properties : 一个js对象，里面包含着需要进行动画的属性，如上面代码中的 {y:120}

duration : 补间动画持续的时间，单位为毫秒

ease : 缓动函数，默认为匀速动画

autoStart : 是否自动开始

delay : 动画开始前的延迟时间，单位为毫秒

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

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

最后是添加一个开始游戏的按钮。Phaser提供了Button对象让我们能很简单的实现一个按钮。

复制代码

game.States.menu = function(){

this.create = function(){

......

var btn = game.add.button(game.width/2,game.height/2,'btn',function(){//添加一个按钮

game.state.start('play'); //点击按钮时跳转到play场景

});

btn.anchor.setTo(0.5,0.5); //设置按钮的中心点

}

}

复制代码

Phaser中很多对象都有一个anchor属性，它表示这个物体的中心点，物体的位置平移、旋转的轴，都是以这个中心点为参照的。所以上面代码中我们要使按钮水平垂直居中，除了要把按钮的x,y属性分别设为游戏的宽高的一半外，还要把按钮的中心点设为按钮的中心。

最后我们把所有代码合起来，得到了menu这个state的最终代码，该state只需要一个create方法就行了：

复制代码

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);

}

Phaser提供了Button对象简单的实现一个按钮的更多相关文章

  1. js获取鼠标点击的对象,点击另一个按钮删除该对象

    作为js的一名新手,对于所谓的event的了解并不是太多,仅仅根据视频教学中的例子模仿着,写了诸如: function funcname(e) { e=window.event||event };的函 ...

  2. 二十三、DBMS_METADATA(提供提取数据库对象的完整定义的接口)

    1.概述 作用:提供提取数据库对象的完整定义的接口.这些定义可以用XML或SQL DDL格式描述.提供两种类型接口:可编程控制的接口:用于Ad Hoc查询的简单接口. 2.包的组成 dbms_meta ...

  3. 必须要注意的 C++ 动态内存资源管理(二)——指针对象简单实现

    必须要注意的 C++动态内存资源管理(二)——指针对象简单实现 四.拷贝类型的资源         上节我们说过,对于图片类型的资源我们有时候往往采用拷贝(如果对于那种公共图片,可能采用唯一副本,提供 ...

  4. Button 对象

    <html> <form> <input type="button" value="提交" accesskey="b&q ...

  5. swift button一些简单设置

    1,按钮的创建(1)按钮有下面四种类型: UIButtonType.ContactAdd:前面带“+”图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果 UIButtonType.DetailDiscl ...

  6. JSP隐式对象是JSP容器为每个页面提供的Java对象

    JSP 隐式对象 JSP隐式对象是JSP容器为每个页面提供的Java对象,开发者可以直接使用它们而不用显式声明.JSP隐式对象也被称为预定义变量. JSP所支持的九大隐式对象: 对象 描述 reque ...

  7. BCG菜单button的简单使用

    一,新建一个BCGprojectCBCGPMenuButton,基于对话框. 二.添加一个button,并关联一个CButton类型的变量m_btn1.然后手动将类型改CBCGPMenuButton成 ...

  8. Button btn = sender as Button; //创建Button对象 这句话中Sencler和as是什么。怎么使用Sender和as

    ender是个object类型的变量名,通常都是事件的默认参数名,而这个变量存的是触发这个事件的控件,而as 可以理解为抽象,它把object类理的sender变量抽象成了(Button)类型.这样它 ...

  9. JavaScript-2.内置对象---简单脚本之弹出对话框显示当前时间 ---ShinePans

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

随机推荐

  1. 基于cocoStudio的UIListView的可以左右滑动翻页的ListView

    //WidgetSlideListView.h class WidgetEaseInListView : public cocos2d::gui::UIListView { public: stati ...

  2. iOS 转载一篇日期处理文章

    感谢原作者的辛勤付出,由于时间太久,记不住原来的地址了,如果你是原作者,请联系我,我会添加原文连接,谢谢! iOS处理时间的类主要包括NSDate,NSDateFormatter, NSDateCom ...

  3. MySQL 全文搜索支持, mysql 5.6.4支持Innodb的全文检索和类memcache的nosql支持

    背景:搞个个人博客的全文搜索得用like啥的,现在mysql版本号已经大于5.6.4了也就支持了innodb的全文搜索了,刚查了下目前版本号都到MySQL Community Server 5.6.1 ...

  4. VelocityTracker简介

    android.view.VelocityTracker主要用跟踪触摸屏事件(flinging事件和其他gestures手势事件)的速率.用addMovement(MotionEvent)函数将Mot ...

  5. RocketMQ最佳实践

    1.RocketMQ中的专业术语 Topic topic表示消息的第一级类型,比如一个电商系统的消息可以分为:交易消息.物流消息...... 一条消息必须有一个Topic. Tag Tag表示消息的第 ...

  6. hp unix_ssh

    http://www.cyberciti.biz/faq/howto-hpux-sshd-service-startup-shutdown/ http://searchnetworking.techt ...

  7. SQL 总汇

    /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...

  8. Java内存访问重排序笔记

    >>关于重排序 重排序通常是编译器或运行时环境为了优化程序性能而采取的对指令进行重新排序执行的一种手段. 重排序分为两类:编译期重排序和运行期重排序,分别对应编译时和运行时环境. > ...

  9. Javascript操作剪切板数据（支持IE、Chrome、360、搜狗），亲测！

    clipboarddata只能在IE浏览器中使用,在chrome下会提示对象未定义!以下的方法支持IE.Chrome.360.搜狗等浏览器,其它浏览器还未验证. <!DOCTYPE html&g ...

  10. WPF MVVM 关闭View

    在ViewModel中定义一个变量: private Action _closeAction; 在ViewModel的构造函数中这样定义:public MainWindowViewModel(Acti ...