html5游戏引擎-Pharse.js学习笔记(一)
来源:互联网 发布:java 日志系统架构 编辑:程序博客网 时间:2024/05/16 13:03
1.前言
前几天随着flappy bird这样的小游戏的火爆,使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎,感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎,并且将从看官网demo的学习整理成博客和大家一起分享。
我了解过cocos-2d for html5和phaser.js这两个引擎,其中前者比较复杂,对于有过cocos-2d平台开发经验的人来说可能学习的较为容易一些,如果是纯入门汉又不想研究c++版本(因为c++版本的网上资料较多)的,感觉学习难度较大。而第二种则相对来说demo详细,虽然没有文档是一大遗憾,但是感觉相对还是比较容易,所以就作为自己的今天的学习方向了。。所不定以后哪一天要是开发出flappy bird这样的游戏,那就真的逆袭了。。。
自己也是初学者,主要的学习方式就是去github的项目主页(
/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.js01-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框架有个大概的了解,
0 0
- html5游戏引擎-Pharse.js学习笔记(一)
- WiEngine游戏引擎学习笔记(一)
- 基于引擎开发HTML5游戏实战(一)---游戏引擎
- 【Cocos2d-html5游戏引擎学习笔记(2)】Hello Cocos2d-Html5
- Html5+Lufylegend.js游戏开发(一)引擎介绍及原理
- 学习Android Opengles 做游戏引擎笔记(一)
- cocos2d-html5学习笔记(一)--游戏入口
- cocos2d-html5学习笔记(一)--游戏入口
- cocos2d-html5学习笔记(一)--游戏入口
- 【Cocos2d-html5游戏引擎学习笔记(3)】渲染文字
- 【Cocos2d-html5游戏引擎学习笔记(4)】菜单按钮
- 【Cocos2d-html5游戏引擎学习笔记(5)】Sprite精灵渲染
- 【Cocos2d-html5游戏引擎学习笔记(8)】音乐及音效
- 【Cocos2d-html5游戏引擎学习笔记(9)】Action系统动作
- 【Cocos2d-html5游戏引擎学习笔记(10)】自定义精灵动画
- 【Cocos2d-html5游戏引擎学习笔记(12)】Schedule定时器
- 【Cocos2d-HTML5游戏引擎学习笔记(12)】Schedule定时器
- 【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器
- machine learning package
- UVa494 - Kindergarten Counting Game,java写的
- 通过按钮来控制模型的移动与镜头的跟随
- PAT1004.BASIC 成绩排名 (20)
- 动态规划之01背包
- html5游戏引擎-Pharse.js学习笔记(一)
- hdu 4496 D-City(并查集)
- 最少拦截系统_DP
- 数据库事务中的脏读,虚读和不可重复读
- Ubuntu 14.04 LTS中怎样解决系统设置残缺的问题
- 位块传输 BitBlt与StretchBlt
- 第五届蓝桥杯初赛-地宫取宝
- 平均每个家庭生男孩的数量
- JAX-RS入门 二 :运行