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

最新推荐文章于 2024-04-30 10:49:18 发布

北一

最新推荐文章于 2024-04-30 10:49:18 发布

阅读量2.1k

点赞数

分类专栏： html5 JAVASCRIPT 游戏移动开发文章标签：游戏开发 html

本文链接：https://blog.csdn.net/xfei365/article/details/24280151

版权

JAVASCRIPT 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

移动开发

7 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

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里。