phaser.js游戏入门篇

最近在看phaser.js制作游戏，发现比较简单，容易上手，但是官网的api,看起来不是特别看的懂。在这里我总结下，给想学习的同学们，写下教程。方便以后学习。这里不对phaser.js做介绍，主要讲解代码的使用。

1.概念理解。

很多人感觉做做游戏比较难，这里我先给大家梳理下做游戏的概念。以便大家不迷茫知道自己在做什么。
一个游戏画面就是一个场景，每个场景切换就可以换不同的画面。然后每个场景都是一个对象，叫做State。在切换到这个场景时，会自动执行一些方法，其方法如下。

image.png
注意：preload、create、update、render 这四个方法至少要存在一个 image.png

这个一个场景的生命周期。当切换到这个场景时候，会重上到下执行这些函数，至于updata,render这两个函数会循环执行。

init()           一些场景的初始化代码可以写在这个方法里
preload()         用来加载游戏资源
create()             创建游戏显示对象或注册事件等
update()   在游戏的每一帧都会调用，用来书写需要在每一帧都执行的代码
render()    在游戏的每一个渲染周期都会调用，用来做一些自定义的渲染工作

接下来我们，我们写一点基本入门的代码。

var game = new Phaser.Game(300, 400, Phaser.AUTO, 'container');
    
    function state(){
        this.init = function(){};
        this.preload = function(){};
        this.create = function(){};
        this.update = function(){};
        this.render = function(){};
    }

    game.state.add('state', state); //添加场景
    game.state.start('state'); //启动场景

上面的state.add是添加场景，我们写好的每个场景都要添加到game中，否者讲无法使用。state.start是启动场景。

接下来我们讲解三个概念，分辨是舞台（state）,世界（world）和摄像机（camera）。我们上面所说的一个个场景就是舞台的意思。世界是什么呢？世界是承载游戏对象的容器，我们所有的游戏对象都要放到世界中，摄像机是我们看到的地方。

image.png

上面是设置场景背景颜色，还有很多api可以查看官网。

image.png

设置世界的大小；

image.png

相机的基本操作；

image.png

相机的缩放模式，主要缩放模式如下：

image.png

基本概念差不多讲完了，接下来我们边操作实际案例边演示api的使用；