文档章节

html5游戏引擎-Pharse.js学习笔记(一)

zaaack
 zaaack
发布于 2014/10/14 23:33
字数 1908
阅读 141
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

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>
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框架有个大概的了解,

 

zaaack

zaaack

粉丝 34
博文 92
码字总数 43513
作品 8
长沙
程序员
私信 提问
加载中
请先登录后再评论。
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
6K
18
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
极速博客引擎--Gor

gor 是使用 golang 实现的类Ruhoh静态博客引擎(Ruhoh like),基本兼容ruhoh 1.x规范. 相当于与ruhoh的官方实现(ruby实现), 有以下优点: 速度完胜 -- 编译wendal.net近200篇博客,仅需要1秒 安装...

wendal
2013/01/20
3.8K
0

没有更多内容

加载失败,请刷新页面

加载更多

以渠道身份为数据背书,悟空榜如何呈现最真实的市场声音?

文 | 曾响铃 来源 | 科技向令说(xiangling0815) 时至今日,电商节已经成为各巨头零售平台例行的活动,花样在不断创新,玩法也在不断涌现。 在这个过程中,伴随电商节的各种品牌、产品销量榜...

曾响铃
前天
0
0
川普宣布拉黑微信支付!腾讯市值一度蒸发5000亿,45天后跟鹅厂发生交易都属违法

郭一璞 发自 凹非寺 量子位 报道 | 公众号 QbitAI 轮到腾讯和微信了。 谁都没想到,川普针对中国企业的举措会进展的这么快,就在刚刚,白宫官方网站po出一条总统行政命令: Executive Order ...

Java旅途
昨天
0
0
图解浏览器安全(同源策略、XSS、CSRF、跨域、HTTPS、安全沙箱等串成糖葫芦)

关注公众号“执鸢者”,获取大量教学视频并进入专业交流群,回复“安全”获取本节思维导图。 一天小林又去面试啦,面试官说:“小林呀,你对浏览器安全了解多少?”。小林摸了摸头说,目前我...

执鸢者
昨天
0
0
《乘风破浪的姐姐》:内容营销研究报告

《乘风破浪的姐姐》节目表现 大盘:同期热播的综艺中,《乘风破浪的姐姐》全面领先 6月12号以来,同期热播的综艺节目《乘风破浪的姐姐》播映指数排名第一,整体热度相对靠前;好评度、观看度等...

OSC_BMKOlH
昨天
0
0
TikTok遭遇十面埋伏的BGM,是美国Z时代人的抗议声 | 一周之最

原本是来中国街头吃吃吃,积累了不少粉丝的老外博主郭杰瑞,不知是不是因为央视的连线,顺应时势地变成了时政UP主,因疫情回到美国后,一直带着口罩在街头做采访,满足中国网友各种好奇。 从...

紫金山科技
前天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部