phaser学习总结之phaser入门教程

墨蓝 2023-06-03 03:57 20阅读 0赞

# 前言 #

最近公司做项目的时候正好使用到phaser,在这里做一下自己整理出来的一些心得，方便大家参考，phaser这一个游戏引擎通常是做2d游戏的，入门也非常简单，只需你会一点的javascript,但是你想做一个比较完美的游戏的话，那么光靠一点点的javascript是远远不够的，本篇博客将快速带你入门phaser。

# phaser简介 #

phaser是一款快速，免费及开源HTML5游戏框架，它支持WebGL和Canvas两种渲染模式，可以在任何web浏览器环境下运行，游戏可以通过第三方工具转为iOS、Android 支持的 Native APP，允许使用 JavaScript 和 TypeScript 进行开发。

# phaser核心 #

##### 语法：new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig) #####

phaser中的一切都是从Game类开始，所以我们暂时将Game类当作phaser的中心吧！当你new了一个Game之后，game中的很多属性就有了，phaser的核心可以用如下这张图表示。  
![image][]  
这里我们经常使用的对象有load,time,world,input,camera。

# 入门教程 #

## 创建phaser对象 ##

##### (1):创建phaser对象方式一 #####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>快速入门phaser</title>
        </head>
        <body>
            <script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var game=new Phaser.Game(800,600,Phaser.AUTO,'',{preload:preload,create:create,update:update});
                function preload(){
                    console.log('preload');
                }
                function create(){
                    console.log('create');
                }
                function update(){
                    console.log('update');
                }
            </script>
        </body>
    </html>

##### (2):创建phaser对象方式二 #####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>快速入门phaser<</title>
        </head>
        <body>
            <script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var game=new Phaser.Game(800,600,Phaser.AUTO);
                var main=function(game){
                    this.init=function(){
                        //游戏场景初始化
                    }
                    this.preload=function(){
                        //游戏资源预加载
                    }
                    this.create=function(){
                        //游戏场景创建
                    }
                    this.update=function(){
                        //游戏逻辑实现
                    }
                    this.render=function(){
                        //游戏自定义渲染
                    }
                }
            </script>
        </body>
    </html>

##### (3):创建phaser对象方式三 #####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>快速入门phaser</title>
        </head>
        <body>
            <script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var game=new Phaser.Game(800,600,Phaser.AUTO);
                game.state.add('state',state);
                game.state.start('state');
                function state(){
                    this.init=function(){}
                    this.preload=function(){}
                    this.create=function(){}
                    this.update=function(){}
                    this.render=function(){}
                }
            </script>
        </body>
    </html>

##### (4):创建phaser对象方式四 #####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>快速入门phaser</title>
        </head>
        <body>
            <script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var game=new Phaser.Game(800,600,Phaser.AUTO,state);
                function state(){
                    this.init=function(){
                        
                    }
                    this.preload=function(){
                        
                    }
                    this.create=function(){
                        
                    }
                    this.update=function(){
                        
                    }
                    this.render=function(){
                        
                    }
                }
            </script>
        </body>
    </html>

##### (5):创建phaser对象方式五 #####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>快速入门phasr</title>
        </head>
        <body>
            <script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var config={
                    width:800,
                    height:600,
                    renderer:Phaser.AUTO,
                    antialias:true,
                    multiTexture:true,
                    state:{
                        preload:preload,
                        create:create,
                        update:update
                    }
                }
                var game=new Phaser.Game(config);
                function preload(){
                    
                }
                function create(){
                    
                }
                function update(){
                    
                }
            </script>
        </body>
    </html>

在开发中，我们经常使用方式五创建phaser对象，当然你也可以根据自己的喜好选择，就看你是喜欢函数创建还是对象创建。

## 参数详解 ##

### (1):width ###

画布宽度，数字或字符串类型可选参数，默认为800，如果以字符串的形式给出，该值必须在0到100之间，为百分比，如果没有指定父容器，则默认为浏览器窗口

### (2):height ###

画布高度

### (3):renderer ###

指定渲染机制，值可以是Phaser.WebGL,Phaser.Canvas,Phaser.AUTO(自动尝试使用WebGL,如果浏览器或设备不支持，使用canvas)或者Phaser.HEADLESS(不进行渲染)

### (4):parent ###

想插入游戏画布的DOM元素，画布的父元素，可选值为DOM本身或者是id,如果为空字符串，画布将被插入到body元素中

### (5):state ###

默认的状态对象，对象类型，可以是null,也可以是Phaser.state函数(初始化，预加载，创建，更新，渲染)

### (6):transparent ###

画布背景是否透明，布尔值，默认为false

### (7):antialias ###

是否绘制为平滑纹理，布尔值，默认为true

### (8):physicsConfig ###

一个物理配置对象，在Physics world创建时传递，对象默认为null

### 注：renderer可选Phaser.AUTO,Phaser.Canvas,Phaser.WebGL ###

参考文档：[https://photonstorm.github.io/phaser-ce/Phaser.Game.html][https_photonstorm.github.io_phaser-ce_Phaser.Game.html]  
中文网：[http://www.phaserengine.com/][http_www.phaserengine.com]  
phaser小站：[https://www.phaser-china.com/example-detail-422.html][https_www.phaser-china.com_example-detail-422.html]  
社区：[http://club.phaser-china.com/][http_club.phaser-china.com]

# 实例解析 #

接下来我们通过phaser实现一个小游戏以及快速入门，见识下phaser开发游戏的功能有多么的强大，需要说明的是，这个就是phaser官方入门的案例，废话不多说，直接上源码。

##### (1):创建游戏和添加场景 #####

![image][image 1]  
在这里，我们已经创建了游戏场景和加载了游戏场景，但是我们看到一片黑的，接下来我们加点东西。

##### (2):资源加载 #####

![image][image 2]  
我们看到屏幕的左上角出现了一颗星星，但是还是缺点什么，这种效果依然不是我们想要的效果，接下来我们让它更具体化。

##### (3):加载场地 #####

![image][image 3]  
在这里我们已经将场景加入进来了以及开启了物理引擎，当然这只是为后面做准备，然后我们创建了天空，大地和两个平板。大地和平板的位置定位，我们是通过坐标来进行的，  
其中，大地和两个平板都被加到了platforms这个组中，这个组我们为它启动了物理属性，然后我们设置了大地和两个平板是不能动的，这样他们就不会由于撞击被改变位置。接下来，我们来加入一个小人，这个小人也是我们游戏的主角。

##### (4):加载主角 #####

![image][image 4]  
 dude.png图片  
同样是通过game.add.sprite将精灵加入进来，但是大家仔细看看dude.png这张资源图片，这是一个帧动画序列，里面包含了主角左移和右移的动画帧。我们同样给它开启了物理属性，然后设置了它的弹性和重力。player.body.collideWorldBounds = true;这句话设置了它会与边界进行碰撞，这就是为什么主角落下的时候，到游戏区域边界就不会掉下去，大家可以把这句话注释掉再运行，看看会是什么情况。在这里，我们还为小人添加了两个动画，一个是向左移动，一个是向右移动，分别指定了响应的动画帧，这也是为后续的动画做准备。

##### (5):使主角站立平台上 #####

是不是很惊讶？要让主角站在地上，只要在update中加上一句，game.physics.arcade.collide(player, platforms);就可以了，这句话表示，检测主角与platforms组的碰撞，而大地正是在platforms组中，这样，主角就不会穿过大地了。同样地，当主角与两个平板碰撞时，也不会穿过了。接下来我们让主角运动。

###### (6):主角运动 ######

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>phaser入门小游戏</title>
        </head>
        <body>
            <script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var config={
                    width:800,
                    height:600,
                    renderer:Phaser.AUTO,
                    antialias:true,
                    multiTexture:true,
                    state:{
                        preload:preload,
                        create:create,
                        update:update,
                    }
                }
                var game=new Phaser.Game(config);
                var platforms;//场地
                var player;//游戏主角
                var cursors;//控制键
                function preload(){
                    //加载资源
                    game.load.image('sky','../../assets/sky.png');
                    game.load.image('ground','../../assets/platform.png');
                    game.load.image('star','../../assets/star.png');
                    game.load.spritesheet('dude','../../assets/dude.png',32,48);
                }
                function create(){
                    //对象的创建及初始化
                    game.physics.startSystem(Phaser.Physics.ARCADE);
                    game.add.sprite(0,0,'sky');    //夹图片添加到游戏场景中
                    platforms=game.add.group();
                    platforms.enableBody=true;
                    var ground=platforms.create(0,game.world.height-64,'ground');
                    ground.scale.setTo(2,2);
                    ground.body.immovable=true;
                    var ledge=platforms.create(400,400,'ground');
                    ledge.body.immovable=true;
                    ledge=platforms.create(-150,250,'ground');
                    ledge.body.immovable=true;
                    //加载主角
                    player=game.add.sprite(32,game.world.height-150,'dude');
                    game.physics.arcade.enable(player);
                    player.body.bounce.y=0.2;    //设置主角的弹性
                    player.body.gravity.y=300;    //设置主角的重力
                    player.body.collideWorldBounds=true;
                    player.animations.add('left',[0,1,2,3],10,true);    //设置主角向左方向的序列帧
                    player.animations.add('right',[5,6,7,8],10,true);    //设置主角向右方向的序列帧
                    
                    //创建控制键对象
                    cursors=game.input.keyboard.createCursorKeys();
                }
                function update(){
                    //游戏主循环
                    game.physics.arcade.collide(player,platforms);
                    //控制主角开始
                    player.body.velocity.x=0;
                    if(cursors.left.isDown){
                        player.body.velocity.x=-150;
                        player.animations.play('left');//播放主角向左运动的序列帧动画
                    }else if(cursors.right.isDown){
                        player.body.velocity.x=150;
                        player.animations.play('right');//播放主角向右的序列帧动画
                    }else{
                        player.animations.stop();//停止动画
                        player.frame=4;    //小球静止时显示第四帧动画
                    }
                    if(cursors.up.isDown&&player.body.touching.down){
                        player.body.velocity.y=-350;
                    }
                }
            </script>
        </body>
    </html>

![image][image 5]  
我们希望让主角在按下方向左键的时候，向左移动，按下方向右键的时候，向右移动，为了实现这一功能，我们又定义了一个cursors，我们通过cursors = game.input.keyboard.createCursorKeys();来获取系统的键盘输入对象。然后，我们在update中，通过cursors.left.isDown来判断用户是否按下了键盘左键，如果按下了，我们给主角设置一个速度，然后播放左移的动画，方向右键的逻辑是一样的。如果方向左键和右键都没有按下，那么我们就通过player.frame来设置小人停在第4帧。小人的跳跃是通过方向上键来实现的，但是这里有一个条件，就是小人在空中的时候，不允许跳跃，所以，加上了一个player.body.touching.down的判断条件。

##### (7):加载大量星星 #####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>phaser入门小游戏</title>
        </head>
        <body>
            <script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var config={
                    width:800,
                    height:600,
                    renderer:Phaser.AUTO,
                    antialias:true,
                    multiTexture:true,
                    state:{
                        preload:preload,
                        create:create,
                        update:update,
                    }
                }
                var game=new Phaser.Game(config);
                var platforms;//场地
                var player;//游戏主角
                var cursors;//控制键
                var stars;//星星
                function preload(){
                    //加载资源
                    game.load.image('sky','../../assets/sky.png');
                    game.load.image('ground','../../assets/platform.png');
                    game.load.image('star','../../assets/star.png');
                    game.load.spritesheet('dude','../../assets/dude.png',32,48);
                }
                function create(){
                    //对象的创建及初始化
                    game.physics.startSystem(Phaser.Physics.ARCADE);
                    game.add.sprite(0,0,'sky');    //夹图片添加到游戏场景中
                    platforms=game.add.group();
                    platforms.enableBody=true;
                    var ground=platforms.create(0,game.world.height-64,'ground');
                    ground.scale.setTo(2,2);
                    ground.body.immovable=true;
                    var ledge=platforms.create(400,400,'ground');
                    ledge.body.immovable=true;
                    ledge=platforms.create(-150,250,'ground');
                    ledge.body.immovable=true;
                    //加载主角
                    player=game.add.sprite(32,game.world.height-150,'dude');
                    game.physics.arcade.enable(player);
                    player.body.bounce.y=0.2;    //设置主角的弹性
                    player.body.gravity.y=300;    //设置主角的重力
                    player.body.collideWorldBounds=true;
                    player.animations.add('left',[0,1,2,3],10,true);    //设置主角向左方向的序列帧
                    player.animations.add('right',[5,6,7,8],10,true);    //设置主角向右方向的序列帧
                    //创建控制键对象
                    cursors=game.input.keyboard.createCursorKeys();
                    //加载星星
                    stars=game.add.group();    //把星星先添加到组中
                    stars.enableBody = true;
                    for(var i=0;i<20;i++){
                        var star=stars.create(i*70,0,'star');
                        star.body.gravity.y=300;    //设置星星的重力
                        star.body.bounce.y=0.7+Math.random()*0.2;    //设置星星的弹性
                    }
                }
                function update(){
                    //游戏主循环
                    game.physics.arcade.collide(player,platforms);
                    //星星加载相关
                    game.physics.arcade.collide(stars,platforms);
                    game.physics.arcade.overlap(player,stars,collectStar,null,this);
                    //控制主角开始
                    player.body.velocity.x=0;
                    if(cursors.left.isDown){
                        player.body.velocity.x=-150;
                        player.animations.play('left');//播放主角向左运动的序列帧动画
                    }else if(cursors.right.isDown){
                        player.body.velocity.x=150;
                        player.animations.play('right');//播放主角向右的序列帧动画
                    }else{
                        player.animations.stop();//停止动画
                        player.frame=4;    //小球静止时显示第四帧动画
                    }
                    if(cursors.up.isDown&&player.body.touching.down){
                        player.body.velocity.y=-350;
                    }
                }
                function collectStar(player,stars){
                    stars.kill();//销毁星星
                }
            </script>
        </body>
    </html>

![image][image 6]  
![image][image 7]  
在create中，我们又创建了一个stars的组，在这个组中，添加了星星，然后设置了它们的重力，随机设置了弹性，所以它们掉落的时候，碰到平板或者地面，会弹起不同的高度。同样，星星也不能穿过地面，所以在update中，添加了碰撞检测。  
还有一层碰撞检测就是小人和星星的碰撞，当主角和星星发生碰撞的时候，需要让星星消失，这时候，再添加碰撞检测的时候，我们还添加了一个回调函数collectStar，在这里面，我们的player和star都会作为参数传递进来，通过调用star.kill();将星星销毁。

##### (8):显示分数 #####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>phaser入门小游戏</title>
        </head>
        <body>
            <script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var config={
                    width:800,
                    height:600,
                    renderer:Phaser.AUTO,
                    antialias:true,
                    multiTexture:true,
                    state:{
                        preload:preload,
                        create:create,
                        update:update,
                    }
                }
                var game=new Phaser.Game(config);
                var platforms;//场地
                var player;//游戏主角
                var cursors;//控制键
                var stars;//星星
                var score=0;//初始分数为0
                var scoreText;//展示分数的文本
                function preload(){
                    //加载资源
                    game.load.image('sky','../../assets/sky.png');
                    game.load.image('ground','../../assets/platform.png');
                    game.load.image('star','../../assets/star.png');
                    game.load.spritesheet('dude','../../assets/dude.png',32,48);
                }
                function create(){
                    //对象的创建及初始化
                    game.physics.startSystem(Phaser.Physics.ARCADE);
                    game.add.sprite(0,0,'sky');    //夹图片添加到游戏场景中
                    platforms=game.add.group();
                    platforms.enableBody=true;
                    var ground=platforms.create(0,game.world.height-64,'ground');
                    ground.scale.setTo(2,2);
                    ground.body.immovable=true;
                    var ledge=platforms.create(400,400,'ground');
                    ledge.body.immovable=true;
                    ledge=platforms.create(-150,250,'ground');
                    ledge.body.immovable=true;
                    //加载主角
                    player=game.add.sprite(32,game.world.height-150,'dude');
                    game.physics.arcade.enable(player);
                    player.body.bounce.y=0.2;    //设置主角的弹性
                    player.body.gravity.y=300;    //设置主角的重力
                    player.body.collideWorldBounds=true;
                    player.animations.add('left',[0,1,2,3],10,true);    //设置主角向左方向的序列帧
                    player.animations.add('right',[5,6,7,8],10,true);    //设置主角向右方向的序列帧
                    //创建控制键对象
                    cursors=game.input.keyboard.createCursorKeys();
                    //加载星星
                    stars=game.add.group();    //把星星先添加到组中
                    stars.enableBody = true;
                    for(var i=0;i<20;i++){
                        var star=stars.create(i*70,0,'star');
                        star.body.gravity.y=300;    //设置星星的重力
                        star.body.bounce.y=0.7+Math.random()*0.2;    //设置星星的弹性
                    }
                    //分数相关
                    scoreText=game.add.text(16,16,'分数:0',{fontSize:'32px',fill:'#000'});
                }
                function update(){
                    //游戏主循环
                    game.physics.arcade.collide(player,platforms);
                    //星星加载相关
                    game.physics.arcade.collide(stars,platforms);
                    game.physics.arcade.overlap(player,stars,collectStar,null,this);
                    //控制主角开始
                    player.body.velocity.x=0;
                    if(cursors.left.isDown){
                        player.body.velocity.x=-150;
                        player.animations.play('left');//播放主角向左运动的序列帧动画
                    }else if(cursors.right.isDown){
                        player.body.velocity.x=150;
                        player.animations.play('right');//播放主角向右的序列帧动画
                    }else{
                        player.animations.stop();//停止动画
                        player.frame=4;    //小球静止时显示第四帧动画
                    }
                    if(cursors.up.isDown&&player.body.touching.down){
                        player.body.velocity.y=-350;
                    }
                }
                function collectStar(player,stars){
                    stars.kill();//销毁星星
                    score+=10;
                    scoreText.text='分数：'+score;
                }
            </script>
        </body>
    </html>

![image][image 8]  
我们通过game.add.text为场景加上一个文本，显示在左上角，在collectStar的时候，将分数进行累加，然后更新显示，这样就结束啦。到这里，一个简单的小游戏就实现了，是不是比想象中的简单呢？  
资源下载：[https://coding.net/u/kk\_1/p/phaser\_group/git][https_coding.net_u_kk_1_p_phaser_group_git]

[image]: /images/20230601/70925b24d07f4f9f8651230a2ec59335.png
[https_photonstorm.github.io_phaser-ce_Phaser.Game.html]: https://photonstorm.github.io/phaser-ce/Phaser.Game.html
[http_www.phaserengine.com]: http://www.phaserengine.com/
[https_www.phaser-china.com_example-detail-422.html]: https://www.phaser-china.com/example-detail-422.html
[http_club.phaser-china.com]: http://club.phaser-china.com/
[image 1]: /images/20230601/721ef1a9f79446fb913c3738dae306b2.png
[image 2]: /images/20230601/3e71b88635ca4ff0bc097101d44887b1.png
[image 3]: /images/20230601/ed271c71357e4f7494b13c9f4a296cf7.png
[image 4]: /images/20230601/88ac1e48e7c5446bae4ca1c767c6ded7.png
[image 5]: /images/20230601/6b279b7360c94c66b4ec184308374943.png
[image 6]: /images/20230601/8a57acbdcf20459c9db9b3b358c54f46.png
[image 7]: /images/20230601/c33b738676384cccad049407ca9433b6.png
[image 8]: /images/20230601/8b45ad0392d44a229b0f378468624381.png
[https_coding.net_u_kk_1_p_phaser_group_git]: https://coding.net/u/kk_1/p/phaser_group/git