您的位置：首页 > Web前端 > HTML5

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

2014-04-21 23:35 351 查看
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里。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航