html5游戏引擎-Pharse.js学习笔记（一）

1.前言

　　前几天随着flappy bird这样的小游戏的火爆，使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎，感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎，并且将从看官网demo的学习整理成博客和大家一起分享。

　　我了解过cocos-2d for html5和phaser.js这两个引擎，其中前者比较复杂，对于有过cocos-2d平台开发经验的人来说可能学习的较为容易一些，如果是纯入门汉又不想研究c++版本（因为c++版本的网上资料较多）的，感觉学习难度较大。而第二种则相对来说demo详细，虽然没有文档是一大遗憾，但是感觉相对还是比较容易，所以就作为自己的今天的学习方向了。。所不定以后哪一天要是开发出flappy bird这样的游戏，那就真的逆袭了。。。

 

　　自己也是初学者，主要的学习方式就是去github的项目主页（https://github.com/photonstorm/phaser）下载demo进行学习，开发工具是装了aptana插件的eclipse for jee的最新版。

　　好了，现在开始demo学习第一课。

2.引入插件

　　把src拷贝进项目就可以了，如果发布的话就用phaser.min.js一个文件就行了，

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  9          
 14         
 15         
 16         
 17         
 18 
 19         
 20         
 21         
 22         
 23 
 24         
 25         
 26         
 27         
 28 
 29         
 30         
 31         
 32         
 33 
 34         
 35         
 36 
 37         
 38 
 39         
 40         
 41 
 42         
 43         
 44         
 45         
 46         
 47         
 48         
 49         
 50         
 51 
 52         
 53         
 54 
 55         
 56         
 57         
 58 
 59         
 60         
 61 
 62         
 63         
 64         
 65         
 66         
 67         
 68         
 69         
 70         
 71         
 72         
 73         
 74         
 75 
 76         
 77         
 78         
 79         
 80         
 81         
 82         
 83         
 84         
 85         
 86         
 87 
 88         
 89         
 90         
 91         
 92         
 93         
 94         
 95         
 96         
 97         
 98 
 99         
100         
101         
102         
103 
104         
105         
106         
107 
108         
109         
110         
111         
112 
113         
114 
115         
116         
117         
118 
119         
120         
121         
122 
123         
124         
125         
126         
127         
128 
129         
130         
131         
132 
133         
134         
135 
136         
137         
138 
139         
140         
141         
142 
143         
144         
145         
146 
147         
148         
149         
150         
151         
152 
153         
154         
155 
156 
157 
158 
159 

160 
161 

01-03

 

 

3.加载一个图片，移动动画，响应点击事件

/**
 * 
 */

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

function preload() {

    //  You can fill the preloader with as many assets as your game requires

    //  Here we are loading an image. The first parameter is the unique
    //  string by which we'll identify the image later in our code.

    //  The second parameter is the URL of the image (relative)
    game.load.image('einstein', 'assets/pics/ra_einstein.png');

}

function create() {

    //  This creates a simple sprite that is using our loaded image and
    //  displays it on-screen
    var image=game.add.sprite(0, 0, 'einstein');
    image.body.velocity.x=50;
    image.inputEnabled=true;

    image.events.onInputDown.add(listener,this);    
}

function listener(){
    alert('clicked');
}

01-03.js

01-03.js

 

4.尝试

　　设置断点查看生命周期。在生命周期方法中加上debugger;语句强制断点。

 1 /**
 2  * 
 3  */
 4 
 5 var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create,update:update,render:render });
 6 
 7 function preload() {
 8 
 9     //  You can fill the preloader with as many assets as your game requires
10 
11     //  Here we are loading an image. The first parameter is the unique
12     //  string by which we'll identify the image later in our code.
13 
14     //  The second parameter is the URL of the image (relative)
15     game.load.image('einstein', 'assets/pics/ra_einstein.png');
16 
17     debugger;
18 }
19 
20 function create() {
21 
22     //  This creates a simple sprite that is using our loaded image and
23     //  displays it on-screen
24     var image=game.add.sprite(0, 0, 'einstein');
25 //    image.body.velocity.x=50;
26     image.inputEnabled=true;
27 
28     image.events.onInputDown.add(listener,this);
29     
30     debugger;
31 }
32 
33 function listener(){
34     alert('clicked');
35 }
36 function update(){
37     debugger;
38 }
39 function render () {
40     //debug helper
41     game.debug.renderInputInfo(32,32);
42     debugger;
43 }

01-03.js加断点

　　经过实验可以看出调用方法：preload(加载资源),create(创建对象和其他初始化工作),update和render方法在每次渲染时都会调用

通过这个简单的例子可以让我们对phaser.js框架有个大概的了解，

 

转载于:https://www.cnblogs.com/Mr-Nobody/p/3589612.html