1.前言
前几天随着flappy bird这样的小游戏的火爆，使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎，感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎，并且将从看官网demo的学习整理成博客和大家一起分享。
我了解过cocos-2d for html5和phaser.js这两个引擎，其中前者比较复杂，对于有过cocos-2d平台开发经验的人来说可能学习的较为容易一些，如果是纯入门汉又不想研究c++版本（因为c++版本的网上资料较多）的，感觉学习难度较大。而第二种则相对来说demo详细，虽然没有文档是一大遗憾，但是感觉相对还是比较容易，所以就作为自己的今天的学习方向了。。所不定以后哪一天要是开发出flappy bird这样的游戏，那就真的逆袭了。。。
自己也是初学者，主要的学习方式就是去github的项目主页（下载demo进行学习，开发工具是装了aptana插件的eclipse for jee的最新版。
好了，现在开始demo学习第一课。
2.引入插件
把src拷贝进项目就可以了，如果发布的话就用phaser.min.js一个文件就行了，
1
2
3
4
5 phaser demo
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方法在每次渲染时都会调用
通过这个简//代码效果参考：http://hnjlyzjd.com/hw/wz_24481.html
单的例子可以让我们对phaser.js框架有个大概的了解，