啊哈 phaser制作小游戏flappy bird(1)
2015-07-25 19:11
232 查看
看到phaser的world和camera玩的已如此之好,果断自己操练了一个小游戏出来玩玩。记录一下啦,加深一下印象。
首先想起他引擎一样。在html5中添加一个canvas然后实例化一个游戏对象来实现的。不过phaser是通过DOM父级元素的ID,自己动态添加出这个canvas来的。所以html5的代码如下:
里面的new phaser实例化一个game出来。里面的参数情况是这样的。
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: 游戏物理系统配置参数
以上所有参数都是可选的。
创建场景。实在太简单了好吗?!只要在场景里面有下面这样的格式就可以了。就是一个合法的场景。
哈哈太简单喽。
创建了四个场景。boot场景是用来加载loading界面的资源。你想,loading界面加载的是loading之后游戏的资源,那loading的资源就在loading之前加载。其他的就不说了。
然后在boot里面怎么写呢
在场景加载完成前preload时,定义它夹在一个loading的gif图像。在它加载完成后就调用preload场景。
然后是preload界面。
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是一个组的概念,把一个小组合放到一起操作。比如要让小鸟和文字一起上下缓动,就把它们放在一个组里面。
仔细看这一小段,发现什么了呢?就是定义一个组,再组中创建一个标题,再组中创建一个小鸟,给小鸟新建一个fly动画,让小鸟执行fly动画,最后给这个组一个动作。这个动作具体参数如下:
properties:里面包含一个js’属性,即要让你的对象变成什么样。
duration:显而易见,间隔时间。毫秒。
ease :是否缓动,默认为匀速动画
autostart:是否自启动
delay:动画开始的延迟时间 毫秒。
repeat:动画重复的次数,如果需要动画永远循环,则把该值设为 Number.MAX_VALUE
yoyo : 如果该值为true,则动画会自动反转
最后添加了一个btn加了点击时间又设置了锚点。menu没有家在资源,只有一个create方法就好啦。。
首先想起他引擎一样。在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(288,505,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(288,505,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(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游戏菜单场景了 } }
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(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); //标题的补间动画
仔细看这一小段,发现什么了呢?就是定义一个组,再组中创建一个标题,再组中创建一个小鸟,给小鸟新建一个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方法就好啦。。
相关文章推荐
- 依赖注入——让iOS代码更简洁
- IOS实现在后台执行一定时间的任务
- iOS开发-Block回调
- Android高效布局
- 如何修改Android系统的版本号
- Android获得Manifest在<meta-data>元件的值
- Android四大组件之BroadcastReceveier
- android基础:获取GPS定位简单实例
- android5.0 Activity transition
- weiciyuan新浪微博webview授权解析
- Objective-C中的@property和@synthesize用法
- [WebView其中一项研究]:Web Apps基本介绍
- Android中ListView使用
- android studio删除module
- 解决Android代码中遇到高版本API的错误提示
- Android 01:AutoCompleteTextView-简单实现实现自动输入文本效果
- [Unity3D]Unity3D圣骑士当游戏开发商遭遇Mecanim动画系统
- Android.9图片评论(一个)
- 2015 Multi-University Training Contest 2 hdu 5303 Delicious Apples
- Android的四种启动模式