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.加载一个图片，移动动画，响应点击事件

  1. /**
  2.  *
  3.  */
  4.  
  5. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
  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. }
  18.  
  19. function create() {
  20.  
  21.     //  This creates a simple sprite that is using our loaded image and
  22.     //  displays it on-screen
  23.     var image=game.add.sprite(0, 0, 'einstein');
  24.     image.body.velocity.x=50;
  25.     image.inputEnabled=true;
  26.  
  27.     image.events.onInputDown.add(listener,this);
  28. }
  29.  
  30. function listener(){
  31.     alert('clicked');
  32. }
  33.  
  34. 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框架有个大概的了解，

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. 【trim()】去掉字符串开头和结尾的空格,防止不必要的空格导致的错误。

    去掉字符串开头和结尾的空格,防止不必要的空格导致的错误. public static void main(String arg[]){ String a=" abc"; Strin ...

  2. VC++ DLL 发布到生产环境过程

    最近项目中用到了VC++ DLL,在本机调试时无任何问题,但是发布出来后,COPY到另外的机器就报错,说找不到DLL,由于自身工作接触这方面比较少,经过一番折腾后,终于解决,以下为解决步骤 一,平台工 ...

  3. 五.CSS盒子模型

    所谓盒模型,就是浏览器为每个HTML元素生成的矩形盒子.即HTML页面实际上就是由一系列盒子组成.这些盒子是按照可见版式在页面上排布的.并由三个属性进行控制:position属性,display属性, ...

  4. ASP.NET MVC 4框架揭秘(微软6任MVP,高级软件顾问蒋金楠新作)

    http://www.cnblogs.com/artech/

  5. 数据校验validator 与　DWZ

    在做系统时经常会用到数据校验,数据校验可以自己写,也可以用现在成的,现在记录下两种类库使用方法, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 ...

  6. 本地wamp的Internal Server Error错误解决方法

    一.本地wamp下调试url重写,加入htaccess文件后提示:500 Internal Server Error...,而删除这个文件网站又可以正常访问,其实就是没有开启url重写的功能.开启一下 ...

  7. Oracle在所有内容前追加一些内容的方法

     参照下面的sql语句. SQL> SELECT * FROM UserInfo; NAME                    CHINESE -------------------- ...

  8. HTML+CSS学习笔记（9）- CSS的继承、层叠和特殊性

    标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...

  9. 郑州轻工业OJ1400--这不可能是情书吧

    地址:http://acm.zzuli.edu.cn/problem.php?id=1400 #include<stdio.h> #include<string.h> #inc ...

  10. Spring.Net的Ioc功能基本配置

    Spring.NET是一个应用程序框架,其目的是协助开发人员创建企业级的.NET应用程序.它提供了很多方面的功能,比如依赖注入.面向方面编程(AOP).数据访问抽象及ASP.NET扩展等等. Spri ...