用Phaser来制作一个html5游戏——flappy bird (一)
用Phaser来制作一个html5游戏——flappy bird (一)
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="js/phaser.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进度的spritegame.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对象,该对象提供了了一系列快捷方法来方便我们创建游戏的各种组件。我们这里制作的资源加载进度页面非常简单,大概就是下面这个样子:
制作游戏菜单页面
资源加载完成后就该进入到游戏菜单页面了,说是菜单页,但我们这里只是提供一个开始游戏的按钮而已,作为教程就别搞那么复杂啦。做好后的效果如下:
下面我们就来实现这个页面。
首先是背景图与地面,我们看到这两个东西是会动的,地面移动动的速度快一些,背景图慢一些,在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); //当作地面的tileSpritebg.autoScroll(-10,0); //让背景动起来ground.autoScroll(-100,0); //让地面动起来 } }
然后来制作游戏标题,游戏标题flappy bird这几个字是一张图片,然后那个鸟是一个sprite,并且我们在sprite上执行了动画,使它的翅膀看起来是在动的。我要说的是怎么在sprite对象上实现动画。首先在加载鸟的图片时,我们加载的不当当就是一张鸟的图片,我们加载的是一个这样的图片:
我们看到这张图片有三只鸟,更确切的说是一只鸟的三个状态,或者说是动画中的三个帧。那我们怎样让他变成动画呢?在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:120 },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);} }
git地址https://github.com/chaping/flappy-bird
用Phaser来制作一个html5游戏——flappy bird (一)相关推荐
- 表白小游戏教程:制作一个小游戏送给喜欢的TA(不会编程也能学会哦)
大家好哇~ 欢迎翻开波波和阿菌的长篇故事~ 不过捏,今天我们不讲故事,今天将由阿菌和大家分享一个小教程:教大家制作一个小游戏,可以用来送给喜欢的人.无须任何计算机专业基础,只要能操作电脑,并在初一的数 ...
- html5 iphone菜单栏,如何制作一个HTML5的iPhone应用程序
在过去的一年里,你不是很容易踩踏,对于所有的使用Objective-C开发iPhone程序的开发者而言,日子都不那么好过,你不是为了学习开发iPhone应用程序曾经硬着头皮去读着那生涩难懂的学习教程, ...
- c语言改u3d游戏,使用Unity3D怎么制作一个五子棋游戏
使用Unity3D怎么制作一个五子棋游戏 发布时间:2021-04-17 17:56:36 来源:亿速云 阅读:106 作者:Leah 本篇文章为大家展示了使用Unity3D怎么制作一个五子棋游戏,内 ...
- python可视化迷宫求解_如何用 Python 制作一个迷宫游戏
相信大家都玩过迷宫的游戏,对于简单的迷宫,我们可以一眼就看出通路,但是对于复杂的迷宫,可能要仔细寻找好久,甚至耗费数天,然后可能还要分别从入口和出口两头寻找才能找的到通路,甚至也可能找不到通路. 虽然 ...
- 虚幻4学习笔记(8)动手制作一个小游戏
动手制作一个小游戏 新节点介绍 前期准备 搭建场景 门蓝图 灯蓝图 创建关卡蓝图 B站UP谌嘉诚课程:https://www.bilibili.com/video/BV164411Y732 新节点介绍 ...
- 使用VS制作一个小游戏(五子棋)
使用VS制作一个小游戏(五子棋) 一.前期准备: 下载Visual Studio(以下使用的是VS2017) 下载Easyx库:官方easyx库下载 右上方下载 二.思路理解 (本次是简单的单机双人五 ...
- 用js制作一个扫雷游戏(vue版)
使用js来制作一个扫雷游戏,可以分为以下几个步骤 1.根据不同难度构建扫雷游戏区域: 2.在游戏区域中放置地雷: 3.处理点击事件: 4.处理游戏结束事件 1.根据不同难度构建扫雷游戏区域 创建一个二 ...
- 游戏Flappy Bird走红启示:没人知道玩家想要什么
[导读]Flappy Bird现排名中国区App Store免费榜第四名.该游戏日平均广告收入达到了5万美元. 腾讯科技 王鑫 2月7日报道 游戏开发者一直在试图了解,到底玩家会喜欢什么样的游戏?免费 ...
- Phaser开源2d引擎 html5游戏框架中文简介
功能特点(Features) 易维护代码(Easy Asset Loading) Phaser可以加载图片,音频文件,数据文件,文本文件和自动解析精灵图和纹理地图集数据(出口纹理封隔器或Flash C ...
最新文章
- pandas使用isin函数和all函数判断dataframe特定数列中是否包含指定列表中的全部内容
- NOIP2002 均分纸牌
- 数据结构与算法JavaScript描述——链表
- BZOJ1202 [HNOI2005]狡猾的商人 【并查集】
- 计组第六章——计算机的运算方法重点总结
- rsync安装与配置使用 数据同步方案(centos6.5)
- 【图片、字符画互转】字符画实现(JAVA)
- excel 将日期转换为8位数字
- 这才叫高颜值的Markdown编辑神器!
- 项目二 管理与维护Linux系统
- Java的字面量和符号引用
- 成为IT精英,我奋斗了7年
- sketch如何做设计稿交互_用 Sketch 绘制一份美观的交互稿
- VTK:交互与拾取——点拾取
- 关于微软鼠标和键盘中心安装报错1603的解决方法
- 清除DELL电脑BIOS密码
- 考研经历贴(2023)
- UVALive 4950 Selling Land
- 怎么做安全用电培训PPT课件?
- MHDD教程,硬盘维修方法