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

7 篇文章 0 订阅
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里。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值