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一个文件就行了，

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>phaser demo</title>

 <!-- <script src="libs/jquery-2.0.3.min.js" type="text/javascript"></script> -->

 <!-- <script src="libs/purl.js" type="text/javascript"></script>

 <script src="libs/gamecontroller.js" type="text/javascript"></script> -->

          <!--

             If you're wondering why we embed each script separately, and not just the single-file phaser lib

             it's because it makes debugging *significantly* easier for us. Feel free to replace all the below

             with just a call to ../dist/phaser.js instead if you prefer.

         -->

         <script src="libs/phasersrc/Intro.js"></script>

         <script src="libs/phasersrc/pixi/Pixi.js"></script>

         <script src="libs/phasersrc/Phaser.js"></script>

         <script src="libs/phasersrc/utils/Utils.js"></script>

         <script src="libs/phasersrc/pixi/core/Matrix.js"></script>

         <script src="libs/phasersrc/pixi/core/Point.js"></script>

         <script src="libs/phasersrc/pixi/core/Rectangle.js"></script>

         <script src="libs/phasersrc/pixi/core/Polygon.js"></script>

         <script src="libs/phasersrc/pixi/display/DisplayObject.js"></script>

         <script src="libs/phasersrc/pixi/display/DisplayObjectContainer.js"></script>

         <script src="libs/phasersrc/pixi/display/Sprite.js"></script>

         <script src="libs/phasersrc/pixi/display/Stage.js"></script>

         <script src="libs/phasersrc/pixi/extras/CustomRenderable.js"></script>

         <script src="libs/phasersrc/pixi/extras/Strip.js"></script>

         <script src="libs/phasersrc/pixi/extras/Rope.js"></script>

         <script src="libs/phasersrc/pixi/extras/TilingSprite.js"></script>

         <script src="libs/phasersrc/pixi/filters/AbstractFilter.js"></script>

         <script src="libs/phasersrc/pixi/filters/FilterBlock.js"></script>

         <script src="libs/phasersrc/pixi/primitives/Graphics.js"></script>

         <script src="libs/phasersrc/pixi/renderers/canvas/CanvasGraphics.js"></script>

         <script src="libs/phasersrc/pixi/renderers/canvas/CanvasRenderer.js"></script>

         <script src="libs/phasersrc/pixi/renderers/webgl/PixiShader.js"></script>

         <script src="libs/phasersrc/pixi/renderers/webgl/PrimitiveShader.js"></script>

         <script src="libs/phasersrc/pixi/renderers/webgl/StripShader.js"></script>

         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLBatch.js"></script>

         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLFilterManager.js"></script>

         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLGraphics.js"></script>

         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLRenderer.js"></script>

         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLRenderGroup.js"></script>

         <script src="libs/phasersrc/pixi/renderers/webgl/WebGLShaders.js"></script>

         <script src="libs/phasersrc/pixi/text/BitmapText.js"></script>

         <script src="libs/phasersrc/pixi/text/Text.js"></script>

         <script src="libs/phasersrc/pixi/textures/BaseTexture.js"></script>

         <script src="libs/phasersrc/pixi/textures/Texture.js"></script>

         <script src="libs/phasersrc/pixi/textures/RenderTexture.js"></script>

         <script src="libs/phasersrc/pixi/utils/EventTarget.js"></script>

         <script src="libs/phasersrc/pixi/utils/Polyk.js"></script>

         <script src="libs/phasersrc/core/Camera.js"></script>

         <script src="libs/phasersrc/core/State.js"></script>

         <script src="libs/phasersrc/core/StateManager.js"></script>

         <script src="libs/phasersrc/core/LinkedList.js"></script>

         <script src="libs/phasersrc/core/Signal.js"></script>

         <script src="libs/phasersrc/core/SignalBinding.js"></script>

         <script src="libs/phasersrc/core/Plugin.js"></script>

         <script src="libs/phasersrc/core/PluginManager.js"></script>

         <script src="libs/phasersrc/core/Stage.js"></script>

         <script src="libs/phasersrc/core/Filter.js"></script>

         <script src="libs/phasersrc/core/Group.js"></script>

         <script src="libs/phasersrc/core/World.js"></script>

         <script src="libs/phasersrc/core/Game.js"></script>

         <script src="libs/phasersrc/input/Input.js"></script>

         <script src="libs/phasersrc/input/Key.js"></script>

         <script src="libs/phasersrc/input/Keyboard.js"></script>

         <script src="libs/phasersrc/input/Mouse.js"></script>

         <script src="libs/phasersrc/input/MSPointer.js"></script>

         <script src="libs/phasersrc/input/Pointer.js"></script>

         <script src="libs/phasersrc/input/Touch.js"></script>

         <script src="libs/phasersrc/input/Gamepad.js"></script>

         <script src="libs/phasersrc/input/SinglePad.js"></script>

         <script src="libs/phasersrc/input/GamepadButton.js"></script>

         <script src="libs/phasersrc/input/InputHandler.js"></script>

         <script src="libs/phasersrc/gameobjects/Events.js"></script>

         <script src="libs/phasersrc/gameobjects/GameObjectFactory.js"></script>

         <script src="libs/phasersrc/gameobjects/BitmapData.js"></script>

         <script src="libs/phasersrc/gameobjects/Sprite.js"></script>

         <script src="libs/phasersrc/gameobjects/TileSprite.js"></script>

         <script src="libs/phasersrc/gameobjects/Text.js"></script>

         <script src="libs/phasersrc/gameobjects/BitmapText.js"></script>

         <script src="libs/phasersrc/gameobjects/Button.js"></script>

         <script src="libs/phasersrc/gameobjects/Graphics.js"></script>

         <script src="libs/phasersrc/gameobjects/RenderTexture.js"></script>

         <script src="libs/phasersrc/system/Canvas.js"></script>

         <script src="libs/phasersrc/system/StageScaleMode.js"></script>

         <script src="libs/phasersrc/system/Device.js"></script>

         <script src="libs/phasersrc/system/RequestAnimationFrame.js"></script>

         <script src="libs/phasersrc/math/RandomDataGenerator.js"></script>

         <script src="libs/phasersrc/math/Math.js"></script>

         <script src="libs/phasersrc/math/QuadTree.js"></script>

         <script src="libs/phasersrc/geom/Line.js"></script>

         <script src="libs/phasersrc/geom/Circle.js"></script>

         <script src="libs/phasersrc/geom/Point.js"></script>

         <script src="libs/phasersrc/geom/Rectangle.js"></script>

         <script src="libs/phasersrc/net/Net.js"></script>

         <script src="libs/phasersrc/tween/TweenManager.js"></script>

         <script src="libs/phasersrc/tween/Tween.js"></script>

         <script src="libs/phasersrc/tween/Easing.js"></script>

         <script src="libs/phasersrc/time/Time.js"></script>

         <script src="libs/phasersrc/time/Timer.js"></script>

         <script src="libs/phasersrc/time/TimerEvent.js"></script>

         <script src="libs/phasersrc/animation/AnimationManager.js"></script>

         <script src="libs/phasersrc/animation/Animation.js"></script>

         <script src="libs/phasersrc/animation/Frame.js"></script>

         <script src="libs/phasersrc/animation/FrameData.js"></script>

         <script src="libs/phasersrc/animation/AnimationParser.js"></script>

         <script src="libs/phasersrc/loader/Cache.js"></script>

         <script src="libs/phasersrc/loader/Loader.js"></script>

         <script src="libs/phasersrc/loader/LoaderParser.js"></script>

         <script src="libs/phasersrc/sound/Sound.js"></script>

         <script src="libs/phasersrc/sound/SoundManager.js"></script>

         <script src="libs/phasersrc/utils/Debug.js"></script>

         <script src="libs/phasersrc/utils/Color.js"></script>

         <script src="libs/phasersrc/physics/arcade/SAT.js"></script>

         <script src="libs/phasersrc/physics/arcade/ArcadePhysics.js"></script>

         <script src="libs/phasersrc/physics/arcade/Body.js"></script>

         <script src="libs/phasersrc/particles/Particles.js"></script>

         <script src="libs/phasersrc/particles/arcade/ArcadeParticles.js"></script>

         <script src="libs/phasersrc/particles/arcade/Emitter.js"></script>

         <script src="libs/phasersrc/tilemap/Tile.js"></script>

         <script src="libs/phasersrc/tilemap/Tilemap.js"></script>

         <script src="libs/phasersrc/tilemap/TilemapLayer.js"></script>

         <script src="libs/phasersrc/tilemap/TilemapParser.js"></script>

         <script src="libs/phasersrc/tilemap/Tileset.js"></script>

         <script src="libs/phasersrc/PixiPatch.js"></script>

         <!-- 引入那么多文件是方便调试和查看源码，发布时只需要引入phaser.min.js就行了 -->

 <!-- <script type="text/javascript" src="libs/phaser/phaser.min.js"></script> -->

 <script type="text/javascript" src="js/main.js"></script>

 </head>

 <body>

 <div id="phaser-example"></div>

 </body>

 </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;语句强制断点。

 /**

  *

  */

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

 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');

     debugger;

 }

 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);

     debugger;

 }

 function listener(){

     alert('clicked');

 }

 function update(){

     debugger;

 }

 function render () {

     //debug helper

     game.debug.renderInputInfo(32,32);

     debugger;

 }

01-03.js加断点

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

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

html5游戏引擎-Pharse.js学习笔记（一）的更多相关文章

  1. 开源HTML5游戏引擎Kiwi.js 1.0正式发布

    Kiwi.js是由GameLab开发的一款全新的开源HTML5 JavaScript游戏引擎.在经过一年多的开发和测试之后,终于在日前正式发布了Kiwi.js 1.0版本. 其创始人Dan Milwa ...

  2. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  3. HTML5游戏引擎深度测评

    https://zhuanlan.zhihu.com/p/20768495 最近看到网上一篇文章,标题叫做<2016年 最火的 15 款 HTML5 游戏引擎>.目前针对HTML5游戏的解 ...

  4. 2016年 最火的 15 款 HTML5 游戏引擎

    HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾,今年<传奇世界>更是突破流水2000万!从两年多的发展来看,游戏开发变得越来越复杂,需要制作各种炫丽 ...

  5. 国内开源html5游戏引擎全收录

    本文引自<国内开源html5游戏引擎全收录> 游戏开发这潭水太深,英文水平太差,不敢看国外的, 而且这几年国内技术水平也挺高了不少,特别是JS方面.(我个人感觉) 最近看了几个国产的js游 ...

  6. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  7. HTML5游戏引擎排行榜

    个好的游戏引擎,能够大大简化游戏的开发实现,html5gameengine.com网站对国内外所有HTML5游戏引擎进行了排名,排名不仅给出了价格.流行度.分数以及最新发布时间,通过点击引擎名称可以了 ...

  8. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  9. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

随机推荐

  1. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  2. 使用ambari搭建Hadoop平台

    1.操作系统 CentoOS Server with GUI(有GUI,有浏览器*ambari基于浏览器*推荐latest stable version)2.分区 默认 + /hadoop3.网络设置 ...

  3. Java注解（自定义注解、view注入）

    注解这东西虽然在jdk1.5就加进来了,但他的存在还是因为使用Afinal框架的view注入才知道的.一直觉得注入特神奇,加了一句就可以把对应view生成了. 下面我们来认识一下注解这个东西 一.注解 ...

  4. PAT1005—— 继续(3n+1)猜想

    卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对n=3进行验证的时候, ...

  5. C# 线程传参

    传参方式有两种: 1.创建带参构造方法类 传参 2.利用Thread.start(8)直接传参,该方法会接收一个对象,并将该对象传递给线程,因此在线程中启动的方法 必须接收object类型的单个参数. ...

  6. SQL Server 日志清除

    在SqlServer中清除日志就必须在简单模式下进行,等清除动作完毕再调回到完全模式. *[DataBaseName]要压缩日志的数据库名称. 设置数据库模式为简单模式 ALTER DATABASE ...

  7. VHDL MOD和REM（转）

    mod(取模)and rem(取余) VHDL has mod and rem. They return the same value if both arguments are positive. ...

  8. 20140215-搭建phonegap开发环境

    1.安装jdk,配置环境变量 a)设置 JAVA_HOME =E:\SetUpFiles\win8.1\Java\jdk1.6.0_45 b)设置PATH=E:\SetUpFiles\win8.1\J ...

  9. Java对象初始化详解(转)

    在Java中,一个对象在可以被使用之前必须要被正确地初始化,这一点是Java规范规定的.本文试图对Java如何执行对象的初始化做一个详细深入地介绍(与对象初始化相同,类在被加载之后也是需要初始化的,本 ...

  10. C++学习——类的继承

    公有继承(public).私有继承(private).保护继承(protected)是常用的三种继承方式. 1. 公有继承(public) 公有继承的特点是基类的公有成员和保护成员作为派生类的成员时, ...