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

2019独角兽企业重金招聘Python工程师标准>>>

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 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>phaser demo</title>
6 <!-- <script src="libs/jquery-2.0.3.min.js" type="text/javascript"></script> -->
7 <!-- <script src="libs/purl.js" type="text/javascript"></script>
8 <script src="libs/gamecontroller.js" type="text/javascript"></script> -->
9          <!--
10             If you're wondering why we embed each script separately, and not just the single-file phaser lib11             it's because it makes debugging *significantly* easier forus. Feel free to replace all the below12             with just a call to ../dist/phaser.js instead ifyou prefer.13         -->
14         <script src="libs/phasersrc/Intro.js"></script>
15         <script src="libs/phasersrc/pixi/Pixi.js"></script>
16         <script src="libs/phasersrc/Phaser.js"></script>
17         <script src="libs/phasersrc/utils/Utils.js"></script>
18
19         <script src="libs/phasersrc/pixi/core/Matrix.js"></script>
20         <script src="libs/phasersrc/pixi/core/Point.js"></script>
21         <script src="libs/phasersrc/pixi/core/Rectangle.js"></script>
22         <script src="libs/phasersrc/pixi/core/Polygon.js"></script>
23
24         <script src="libs/phasersrc/pixi/display/DisplayObject.js"></script>
25         <script src="libs/phasersrc/pixi/display/DisplayObjectContainer.js"></script>
26         <script src="libs/phasersrc/pixi/display/Sprite.js"></script>
27         <script src="libs/phasersrc/pixi/display/Stage.js"></script>
28
29         <script src="libs/phasersrc/pixi/extras/CustomRenderable.js"></script>
30         <script src="libs/phasersrc/pixi/extras/Strip.js"></script>
31         <script src="libs/phasersrc/pixi/extras/Rope.js"></script>
32         <script src="libs/phasersrc/pixi/extras/TilingSprite.js"></script>
33
34         <script src="libs/phasersrc/pixi/filters/AbstractFilter.js"></script>
35         <script src="libs/phasersrc/pixi/filters/FilterBlock.js"></script>
36
37         <script src="libs/phasersrc/pixi/primitives/Graphics.js"></script>
38
39         <script src="libs/phasersrc/pixi/renderers/canvas/CanvasGraphics.js"></script>
40         <script src="libs/phasersrc/pixi/renderers/canvas/CanvasRenderer.js"></script>
41
42         <script src="libs/phasersrc/pixi/renderers/webgl/PixiShader.js"></script>
43         <script src="libs/phasersrc/pixi/renderers/webgl/PrimitiveShader.js"></script>
44         <script src="libs/phasersrc/pixi/renderers/webgl/StripShader.js"></script>
45         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLBatch.js"></script>
46         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLFilterManager.js"></script>
47         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLGraphics.js"></script>
48         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLRenderer.js"></script>
49         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLRenderGroup.js"></script>
50         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLShaders.js"></script>
51
52         <script src="libs/phasersrc/pixi/text/BitmapText.js"></script>
53         <script src="libs/phasersrc/pixi/text/Text.js"></script>
54
55         <script src="libs/phasersrc/pixi/textures/BaseTexture.js"></script>
56         <script src="libs/phasersrc/pixi/textures/Texture.js"></script>
57         <script src="libs/phasersrc/pixi/textures/RenderTexture.js"></script>
58
59         <script src="libs/phasersrc/pixi/utils/EventTarget.js"></script>
60         <script src="libs/phasersrc/pixi/utils/Polyk.js"></script>
61
62         <script src="libs/phasersrc/core/Camera.js"></script>
63         <script src="libs/phasersrc/core/State.js"></script>
64         <script src="libs/phasersrc/core/StateManager.js"></script>
65         <script src="libs/phasersrc/core/LinkedList.js"></script>
66         <script src="libs/phasersrc/core/Signal.js"></script>
67         <script src="libs/phasersrc/core/SignalBinding.js"></script>
68         <script src="libs/phasersrc/core/Plugin.js"></script>
69         <script src="libs/phasersrc/core/PluginManager.js"></script>
70         <script src="libs/phasersrc/core/Stage.js"></script>
71         <script src="libs/phasersrc/core/Filter.js"></script>
72         <script src="libs/phasersrc/core/Group.js"></script>
73         <script src="libs/phasersrc/core/World.js"></script>
74         <script src="libs/phasersrc/core/Game.js"></script>
75
76         <script src="libs/phasersrc/input/Input.js"></script>
77         <script src="libs/phasersrc/input/Key.js"></script>
78         <script src="libs/phasersrc/input/Keyboard.js"></script>
79         <script src="libs/phasersrc/input/Mouse.js"></script>
80         <script src="libs/phasersrc/input/MSPointer.js"></script>
81         <script src="libs/phasersrc/input/Pointer.js"></script>
82         <script src="libs/phasersrc/input/Touch.js"></script>
83         <script src="libs/phasersrc/input/Gamepad.js"></script>
84         <script src="libs/phasersrc/input/SinglePad.js"></script>
85         <script src="libs/phasersrc/input/GamepadButton.js"></script>
86         <script src="libs/phasersrc/input/InputHandler.js"></script>
87
88         <script src="libs/phasersrc/gameobjects/Events.js"></script>
89         <script src="libs/phasersrc/gameobjects/GameObjectFactory.js"></script>
90         <script src="libs/phasersrc/gameobjects/BitmapData.js"></script>
91         <script src="libs/phasersrc/gameobjects/Sprite.js"></script>
92         <script src="libs/phasersrc/gameobjects/TileSprite.js"></script>
93         <script src="libs/phasersrc/gameobjects/Text.js"></script>
94         <script src="libs/phasersrc/gameobjects/BitmapText.js"></script>
95         <script src="libs/phasersrc/gameobjects/Button.js"></script>
96         <script src="libs/phasersrc/gameobjects/Graphics.js"></script>
97         <script src="libs/phasersrc/gameobjects/RenderTexture.js"></script>
98
99         <script src="libs/phasersrc/system/Canvas.js"></script>
100         <script src="libs/phasersrc/system/StageScaleMode.js"></script>
101         <script src="libs/phasersrc/system/Device.js"></script>
102         <script src="libs/phasersrc/system/RequestAnimationFrame.js"></script>
103
104         <script src="libs/phasersrc/math/RandomDataGenerator.js"></script>
105         <script src="libs/phasersrc/math/Math.js"></script>
106         <script src="libs/phasersrc/math/QuadTree.js"></script>
107
108         <script src="libs/phasersrc/geom/Line.js"></script>
109         <script src="libs/phasersrc/geom/Circle.js"></script>
110         <script src="libs/phasersrc/geom/Point.js"></script>
111         <script src="libs/phasersrc/geom/Rectangle.js"></script>
112
113         <script src="libs/phasersrc/net/Net.js"></script>
114
115         <script src="libs/phasersrc/tween/TweenManager.js"></script>
116         <script src="libs/phasersrc/tween/Tween.js"></script>
117         <script src="libs/phasersrc/tween/Easing.js"></script>
118
119         <script src="libs/phasersrc/time/Time.js"></script>
120         <script src="libs/phasersrc/time/Timer.js"></script>
121         <script src="libs/phasersrc/time/TimerEvent.js"></script>
122
123         <script src="libs/phasersrc/animation/AnimationManager.js"></script>
124         <script src="libs/phasersrc/animation/Animation.js"></script>
125         <script src="libs/phasersrc/animation/Frame.js"></script>
126         <script src="libs/phasersrc/animation/FrameData.js"></script>
127         <script src="libs/phasersrc/animation/AnimationParser.js"></script>
128
129         <script src="libs/phasersrc/loader/Cache.js"></script>
130         <script src="libs/phasersrc/loader/Loader.js"></script>
131         <script src="libs/phasersrc/loader/LoaderParser.js"></script>
132
133         <script src="libs/phasersrc/sound/Sound.js"></script>
134         <script src="libs/phasersrc/sound/SoundManager.js"></script>
135
136         <script src="libs/phasersrc/utils/Debug.js"></script>
137         <script src="libs/phasersrc/utils/Color.js"></script>
138
139         <script src="libs/phasersrc/physics/arcade/SAT.js"></script>
140         <script src="libs/phasersrc/physics/arcade/ArcadePhysics.js"></script>
141         <script src="libs/phasersrc/physics/arcade/Body.js"></script>
142
143         <script src="libs/phasersrc/particles/Particles.js"></script>
144         <script src="libs/phasersrc/particles/arcade/ArcadeParticles.js"></script>
145         <script src="libs/phasersrc/particles/arcade/Emitter.js"></script>
146
147         <script src="libs/phasersrc/tilemap/Tile.js"></script>
148         <script src="libs/phasersrc/tilemap/Tilemap.js"></script>
149         <script src="libs/phasersrc/tilemap/TilemapLayer.js"></script>
150         <script src="libs/phasersrc/tilemap/TilemapParser.js"></script>
151         <script src="libs/phasersrc/tilemap/Tileset.js"></script>
152
153         <script src="libs/phasersrc/PixiPatch.js"></script>
154         <!-- 引入那么多文件是方便调试和查看源码，发布时只需要引入phaser.min.js就行了 -->
155 <!-- <script type="text/javascript" src="libs/phaser/phaser.min.js"></script> -->
156 <script type="text/javascript" src="js/main.js"></script>
157 </head>
158 <body>
159 <div id="phaser-example"></div>
160 </body>
161 </html>

01-03

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

/****/var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });functionpreload() {//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');}functioncreate() {//This creates a simple sprite that is using our loaded image and//displays it on-screenvar image=game.add.sprite(0, 0, 'einstein');image.body.velocity.x=50;image.inputEnabled=true;image.events.onInputDown.add(listener,this);
}functionlistener(){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 functionpreload() {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 functioncreate() {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 functionlistener(){34     alert('clicked');35 }36 functionupdate(){37     debugger;38 }39 functionrender () {40     //debug helper
41     game.debug.renderInputInfo(32,32);42     debugger;43 }

01-03.js加断点

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

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

转载于:https://my.oschina.net/ZaneYoung/blog/330677