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 lib 11 it's because it makes debugging *significantly* easier for us. Feel free to replace all the below 12 with just a call to ../dist/phaser.js instead if you 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>
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
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 }
經過實驗可以看出調用方法：preload(加載資源),create(創建對象和其他初始化工作),update和render方法在每次渲染時都會調用
通過這個簡單的例子可以讓我們對phaser.js框架有個大概的了解，