主要是用load的一些方法
![](https://box.kancloud.cn/e11bcedfd2c4a177ef6e0d19c3a6139b_763x402.png)
加载事件,单个和全部
![](https://box.kancloud.cn/4857f5f213e05f638e56d12e8cb14111_918x433.png)
值得一说的是我们的资源加载必须写在preload周期里。
一个带背景的和百分比文字的 进度加载场景
~~~
var boot = function(game){
var progressText;
this.init=function(){}
this.preload = function(){
console.log("这里是boot")
game.load.image('loading_bg','../img/loadingBg.png')
var sprite = game.add.image(game.world.centerX,game.world.centerY,'loading_bg')
sprite.anchor = {x:0.5,y:0.5} //设置图片锚点
progressText = game.add.text(game.world.centerX,game.world.centerY+30,'0%',{fill:'#fff',fontSize:"16px"})
progressText.anchor = {x:0.5,y:0.5}
// 监听加载完一个文件的事件
game.load.onFileComplete.add(function (progress) {
progressText.text = progress + '%';
});
// 监听加载完毕事件
game.load.onLoadComplete.add(onLoad);
// 最小展示时间,示例为2秒
var deadLine = false;
setTimeout(function () {
deadLine = true;
}, 1000);
// 加载完毕回调方法
function onLoad() {
if (deadLine) {
// 已到达最小展示时间,可以进入下一个场景
game.state.start('load');
} else {
// 还没有到最小展示时间,1秒后重试
setTimeout(onLoad, 500);
}
}
}
this.create = function(){
}
this.updata = function(){}
this.render = function(){}
}
~~~
- 以专业工程师的标准要求自己
- JS
- 函数的this
- 函数的argument
- 函数的apply、bind、call方法
- 创建对象
- 构造函数创建对象
- 原型结合构造函数创建对象
- 原型
- 继承
- 闭包
- 正则表达式
- Ajax
- 设计模式
- ES6
- es6的模块化
- 定义变量的新方式
- 函数扩展
- 数组扩展
- 性能与工程化
- 关于http与缓存
- 重排(reflow、layout)与重绘
- 页面性能
- gulp
- webpack
- 一些项目回顾总结
- 移动端&微信H5游戏
- 微信小程序
- Vue.js
- 随手记录
- 如何通过前端技能获取2018世界杯门票
- jsonp
- es6 javascript对象方法Object.assign()
- 一份不错的基础面试题
- vscode常用插件
- koroFileHeader
- 构建自己的Js工具库
- H5 game
- Phaser从入坑到放弃再入坑
- 1.游戏的创建
- 2.资源的加载
- 3.phaser中的舞台,世界和摄像机
- 4.游戏缩放控制,移动端的适配
- 5.phaser中的显示对象
- 1.概述
- 2.phaser中的图片,图形,和按钮
- 3.phaser中的精灵
- 4.文字
- 5.组
- 6.phaser中的动画
- 7.粒子和瓦片地图
- 8.瓦片地图
- lodash
- ES5 to ESNext — here’s every feature added to JavaScript since 2015
- 防抖(debounce) 和 节流(throttling)