码迷,mamicode.com
首页 > 其他好文 > 详细

prelaod场景,用来显示资源加载进度

时间:2016-11-25 17:14:15      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:属性   phaser   html5   des   att   使用   默认   文档   ant   

phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载。Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas的元素,然后实例化一个 Game 对象就可以了。

复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>game</title>

<script src="http://pic1.codesec.net/app_attach/20141022/20141022_32_50760_0.js"></script>

</head>

<body>

<div id="game"></div>

<script>

var game = new Phaser.Game(288,505,Phaser.AUTO,‘game‘); //实例化一个Phaser的游戏实例

</script>

</body>

</html>

复制代码

我们来看看Phaser.Game这个函数都有哪些参数:

Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

width: 游戏的宽度,也就是用来渲染游戏的canvas的宽度,单位为px

height: 游戏的高度,也就是用来渲染游戏的canvas的高度,单位为px

renderer: 使用哪种渲染方式,Phaser.CANVAS 为使用html5画布,Phaser.WEBGL 为使用性能更加好的WebGL来渲染,Phaser.AUTO为自动侦测,如果浏览器支持WebGL则使用WebGL,否则使用Canvas

parent: 用来放置canvas元素的父元素,可以是一个元素id,也可以是dom元素本身,phaser会自动创建一个canvas并插入到这个元素中。

state: state可以理解为场景,在这里指定state表示让游戏首先加载这个场景,但也可以不在这里指定state,而在之后的代码中决定首先加载哪个state。关于state我后面还会有详细的说明。

transparent: 是否使用透明的canvas背景

antialias: 是否启用抗锯齿

physicsConfig: 游戏物理系统配置参数

以上所有参数都是可选的,它们的默认值以及更详细的信息可以看这里,一般我们只需指定前面那4到5个参数就行了。

 

实例化Game对象后,接下来要做的就是创建游戏会用到的各种场景了,也就是上面说的state,那么怎么才能创建一个state呢?state可以是一个js自定义对象,也可以是一个函数,只要它们存在preload、create、update这三个方法中的任意一个,就是一个合法的state。

复制代码

//state可以是一个自定义对象

var state1 = {

preload : function(){ },

create : function(){ },

update : function(){ }

}

//state也可以是一个构造函数

var state2 = function(){

this.preload = function(){ };

this.create = function(){ };

this.update = function(){ };

}

//只要存在preload、create、update三个方法中的一个就可以了

var state3 = function(){

this.update = function(){ };

}

//当然state里也可以存在其他属性或方法

var state4 = function(){

this.create = function(){ };

this.aaa = function(){ }; //其他方法

this.bbb = ‘hello‘; //其他属性

}

复制代码

 

其中的preload方法,是用来加载资源的,它会最先执行。create方法是用来初始化以及构建场景的,它要等到在preload里加载的资源全部加载完成后才执行。最后update方法是更新函数,它会在游戏的每一帧都执行,以此来创造一个动态的游戏。

在这个游戏中,我们会用到4个state,我们可以通过game.state.add(2881064151)方法来给游戏添加state,然后用game.state.start()方法来调用state,详细信息请看state的文档

复制代码

var game = new Phaser.Game(288,505,Phaser.AUTO,‘game‘);

game.States = {}; //创建一个对象来存放要用到的state

game.State.boot = function(){ ... } //boot场景,用来做一些游戏启动前的准备

game.State.prelaod = function(){ ... } //prelaod场景,用来显示资源加载进度

game.State.menu = function(){ ... } //menu场景,游戏菜单

game.State.play = function(){ ... } //play场景,正式的游戏部分

//把定义好的场景添加到游戏中

game.state.add(‘boot‘,game.States.boot);

game.state.add(‘preload‘,game.States.preload);

game.state.add(‘menu‘,game.States.menu);

game.state.add(‘play‘,game.States.play);

//调用boot场景来启动游戏

game.state.start(‘boot‘);

复制代码

prelaod场景,用来显示资源加载进度

标签:属性   phaser   html5   des   att   使用   默认   文档   ant   

原文地址:http://www.cnblogs.com/cbryge/p/6101739.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!