欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

上一小节我们讲到了phaser.js的基本使用方法，如何去创建一个游戏对象，大致了解了状态（State）的基本概念，通过源码分析state可以是一个Phaser.State类的对象，可以是一个类，也可以是一个json对象。

并且在state中，必须至少得有preload、create、update、render其中的一个。

本章目标

1. phaser.js的适配
2. 背景移动
3. 精灵图片和动画

适配

在phaser.js中，它有自己的一套适配各种终端的方法，我们可以通过

game.scale.scaleMode = value ;

那么这个value有哪些值呢,找源码。

默认值为Phaser.ScaleManager.NO_SCALE。

主要说两个，一是 Phaser.ScaleManager.EXACT_FIT,一般来说移动端的游戏就需要用到它。

接下来我们就去看下它的内部原码实现的原理吧~

首先我们可以看到在ScaleManager 类里在有定义width，height的属性，用我这蹩脚的英文也翻译出来就是对应的Canvas的宽高了。接着往下找

找到了EXACT_FIT的判断条件下有一个setExactFit的方法，我们再去找它的定义。

清楚的看到它就是在给canvas设置大小，并且和浏览器大小一致。我们接下来看下设置完了之后的效果吧

可以看到，任我随意切换浏览器窗口大小，它都能完美适配。

背景移动

从上面的gif图可以看出来，我们的背景图和地面在不停的无缝滚动，这个设置我们仅需要在create方法中设置

bg.autoScroll(-20, 0);
ground.autoScroll(-100 ,0);

即可，一个游戏的简单雏形基本实现了。^_^

精灵图片

加载精灵图片

game.load.spritesheet('bird', '../img/phaser/bird.png', 34, 24, 3);

注意这里使用的是spritesheet去加载多帧的精灵图片

从bird.png图片可以看出来，它有3帧，每一帧的宽为34，高为24，所以创建上面的精灵对象的几个参数都不难理解

那怎么渲染呢？请接着往下看

var bird = game.add.sprite(100,100,'bird');

效果是这样的，bird被渲染出来了，一般来说，序列帧图片一般需要配合动画才能让其动起来。

动画

首先我们要来创建一个动画。

bird.animations.add('fly',[0,1,2]);

add方法的第一个参数为动画名称，第二个参数表示的是要执行的动画帧索引，bird.png有三帧，那就是[0,1,2]，这个参数可省，默认就是从第一帧运动到最后一帧。

然后再来执行动画。

bird.animations.play('fly', 12, true);

play方法用来执行动画，第一个参数表示执行动画的名称，即刚才我们定义的“fly”,第二个参数表示的帧率，来用控制动画的快慢。最后一个参数表示的是是否循环执行。

最终的效果：

这样一个简单的动画就实现啦~~

完整的代码截图：

总结：

1. 在phaser中，适配各种终端的方式
2. tileSprite对象可以使用bg.autoScroll(-20, 0);来实现背景的无缝滚动。
3. 创建精灵图片以及每一帧的大小的设置方法
4. 动画的创建和调用。

以上是今天所有的分享内容。喜欢的请点赞关注，不喜欢的解散~~

这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。

未完待续。。。