prelaod场景,用来显示资源加载进度
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场景,用来显示资源加载进度的更多相关文章
- 网站顶部显示预加载进度条preload.js
网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...
- js 百分比显示页面加载进度
做东西遇到显示页面百分比的加载进度,不过里面的图片较多,看了别人的代码,才想到可以通过图片的加载显示加载的百分比,做一下笔记: html: <span id="percent" ...
- web前端js实现资源加载进度条
进度条核心方法,通常j不考虑判断到100,根据项目中的图片数量可能有所差异所以到95就可以了 //根据图片load进度条 function loadingAsImgLength(){ var prec ...
- Cocos Creator 资源加载流程剖析【六】——场景切换流程
这里讨论场景切换的完整流程,从我们调用了loadScene开始切换场景,到场景切换完成背后发生的事情.整个流程可以分为场景加载和场景切换两部分,另外还简单讨论了场景的预加载. 加载场景的流程 load ...
- cocos2d-x Loading界面实现资源加载
有时候场景中的资源加载过多的话就会引起游戏进入的时候很卡,因为那是边加载边显示.在tests例子里面有一个很好的例子叫做TextureCacheTest,里面讲解了如何写loading. #inclu ...
- Away3D引擎学习笔记(一)资源加载解析块
前文:Away3D断断续续用了一段时间了,三维相关的很多算法,计算转换还是有点绕,整理些自己觉得还有点意思东西,希望大家有用. 三维开始,Away3D构架你场景那几行代码各处都有,这里就不copy了, ...
- High Performance Networking in Google Chrome 进程间通讯(IPC) 多进程资源加载
小结: 1. 小文件存储于一个文件中: 在内部,磁盘缓存(disk cache)实现了它自己的一组数据结构, 它们被存储在一个单独的缓存目录里.其中有索引文件(在浏览器启动时加载到内存中),数据文件( ...
- 详谈 Unity3D AssetBundle 资源加载,结合实际项目开发实例
第一次搞资源更新方面,这里只说更新,加载,AssetBundle资源加载,谈谈自己的理解,以及自己在项目中遇到的那些神坑,现在回想一下,真的是自己跪着过来的,说多了,都是泪. 我这边是安卓AssetB ...
- Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线
这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...
随机推荐
- iOS 中使用类别简化代码开发
最近需要一个函数,把CLLocation对象转化为NSDictionary,按照我以前的想法,我会写一个工具类,之后添加一个函数,类似这样 - (NSDictionary *)turnLocation ...
- 修改Tomcat服务器的默认端口号
tomcat服务器的默认端口号是8080,我们也可以修改为其他端口号,并且在没有启动Apache,IIS等占用80端口的web服务时,我们也可以设置为80端口,这样在生产中域名之后就可以不带端口号了, ...
- FFmpeg Filters Images 参数及效果图
FFmpeg Filters Images 参数及效果图(chm) 下载 ffmpeg filters images 352 si.chm (27.98M) 下载 ffmpeg filters onl ...
- elk+redis分布式分析nginx日志
一.elk套件介绍 ELK 由 ElasticSearch . Logstash 和 Kiabana 三个开源工具组成.官方网站: https://www.elastic.co/products El ...
- ubuntu下使用反编译apk,工具dex2jar和jd-gui
ubuntu下使用反编译apk, 工具 1:通过apk-tool反编译出资源文件: http://code.google.com/p/android-apktool/ 2.首先使用dex2jar反编译 ...
- Java Hour 42 fastjson
fastjson 神一样的存在,然后由于缺乏文档,很多功能完全不知道该怎么用. 42.1 字段的大小写问题 刚开始没想到会因为字段的大小写问题而导致反序列化json 失败. @Override pub ...
- Android 命名规范 (提高代码可以读性) 转
转自:http://blog.csdn.net/vipzjyno1/article/details/23542617 刚接触android的时候,命名都是按照拼音来,所以有的时候想看懂命名的那个控件 ...
- C语言中,宏和全局变量的区别是什么?
全局变量 是可以在程序中任何地方使用 而且是可以修改的 宏定义也可以在任何地方使用 但是不能在之后修改 数据类型没有限制的 宏的例子:#define 宏名 宏体 #define PI 3.141592 ...
- loj 1013(LCS+记忆化搜索)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25839 思路:第一小问可以很快求出了,两个字符串的长度-LCS,然 ...
- loj 1251(2-sat + 输出一组可行解)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=26961 思路:u表示留下,~u表示离开,同理v,对于+u,-v,我 ...