【2Dhtml5游戏框架phaser介绍1】

来源：互联网发布：金山软件武汉招聘编辑：程序博客网时间：2024/05/16 08:38

phaser是一个跨浏览器和桌面端移动端的开源html5游戏框架，代码托管在github上，注意在这里只能找到phaser的源代码。phaser相比cocos2D-html5、cocos2D-javascript，phaser对于从没有过游戏开发经验的人来说更容易上手，如果有游戏开发经验或者cocos2D其它平台的开发经验，可以使用cocos2D来开发，对于新手来说使用phaser会更容易些。phaser同时支持WebGL和Canvas两种渲染方式，会根据浏览器的支持程度来自动选择使用那种方式，phaser使用的是pixi.js来进行渲染处理。只要浏览器支持canvas 标签，就可以使用phaser来制作游戏。phaser支持javascript和typescript（javascript的超集，语法同actionscript）。

如果要找example需要到github的另一个地址https://github.com/photonstorm/phaser-examples来下载，据官方说是因为examples太大了，有284个(2.0.3版本)，所以干脆为example专门建了一个托管地址，每当phaser有新的特性时，都会更新相应的example。例子非常全面，非常适合在例子的基础上进行修改来开发自己的游戏。需要注意的是因为浏览器的一些安全机制，最好使用本地服务器如iis，apache来浏览example，如果直接双击example的html页面，可能有些例子不能正常运行。example里点击首页即可，所有用例分为两种试图，一种是总览的方式，点击一个例子，会在新窗口打开，另一种是以左边导航树的方式展现例子，点击一个例子会在当前页面右边打开。如下，点击switch to side-view mode即可切换浏览方式。

Total Examples: 284

Switch to Side-View mode

phaser的源代码里包含了很多个单独的phaser js文件，这样做是为了方便开发时的调试，如果不需要，可以直接引入phaser.min.js即可。

第一个例子：

新建一个html页面，引入phaser的js文件

<!DOCTYPE html><html><head><meta name="description" content="Phaser Example 01 - Load An Image" />  <meta charset="utf-8">  <title>JS Bin - phaser playground</title>  <script src="phaser.min.js"></script>   <script src="demo.js"></script></head><body>  <div id="phaser-example"></div></body></html>


编辑demo.js如下
var MainState={    preload:function() {       //  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)    this.load.image('einstein', 'http://examples.phaser.io/assets/pics/ra_einstein.png');             },  create:function() {    //  This creates a simple sprite that is using our loaded image and    //  displays it on-screen    this.add.sprite(0, 0, 'einstein');      }  };var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', MainState);

这个例子很简单，加载一张图片，http://examples.phaser.io/assets/pics/ra_einstein.png'，是一个爱因斯坦的脑袋，preload用于预加载，通常在这里引入需要的各种资源文件，比如图片等，create用于显示，最后把MainState显示在phaser-example这个div里。                                                     0        0           	
					
					   【2Dhtml5游戏框架phaser介绍1】
	  	   【2Dhtml5游戏框架phaser介绍3】preload，create，update
	  	   【2Dhtml5游戏框架phaser介绍2】使用在线云IDE开发phaser
	  	   HTML5 - JS - 2D 游戏框架：Phaser
	  	   1.Phaser游戏引擎介绍
	  	   Phaser开源2d引擎 javascript/html5游戏框架
	  	   Phaser - HTML5开源游戏框架
	  	   实例学习HTML5游戏框架phaser之一
	  	   html5游戏开发框架phaser相关教程。
	  	   Phaser 桌面和手机游戏HTML5框架
	  	   phaser游戏开发之基础知识2
	  	   phaser游戏开发之基础知识1
	  	   Phaser游戏框架  鼠标mouse事件以及触摸touch事件
	  	   Phaser游戏框架 鼠标mouse事件以及触摸touch事件
	  	   基于HTML5/Javascrip的游戏开发框架Phaser
	  	   使用Phaser框架构建你的第一个H5游戏
	  	   phaser制作跑酷游戏
	  	   基本游戏框架介绍
	     		  
	  	   Powerbuilder12.5破解
	  	   UITableView展示ModuleViewController
	  	   程序3（完全平方数） and 程序4（一年的第几天）
	  	   Android界面适配机制
	  	   scws中文分词组件
	  	   【2Dhtml5游戏框架phaser介绍1】
	  	   java堆与栈的区别
	  	   设置mysql编码
	  	   路过
	  	   scws中文分词组件
	  	   今天的总结
	  	   路过
	  	   用户登陆
	  	   c++第七周作业（课本习题）