回忆
上一节我们搭建了游戏的骨架,增加了四个游戏场景,分别是加载、最先、游戏、终了。那末这一节我们来引见加载这个场景,顺带雄厚一下各个场景的基本内容。
Phaser.Loader
Phaser框架自带的一个loader,支撑加载多种范例的资本,下面是离线文档中的引见的截图,细致的API能够查阅文档得知。
引见几个经常使用的加载资本的要领:(以下代码中的game默以为Phaser实例,经由过程new Phaser.Game赋值)
加载图片
game.load.image('star', 'star.png');
加载音频
game.load.audio('bg', 'bg.mp3)');
加载图片序列
因为要指定帧的宽高,因而寻常是动画的一连帧,比方行走动画的每一帧合成的图片。
game.load.spritesheet('walk', 'walk.png', 80, 80);
加载资本鸠合
一样能够用作加载图片序列,但这类用法重要用于加载类似于TexturePacker打包出来的资本鸠合。比拟于spritesheet寻常是一连串的动画帧合成的图片,这类资本鸠合中的图片能够是林林总总的,和我们寻常做网站会将icon、背景图片等合成sprites一个原理。
打包出来的资本寻常包含一个json和一张合成的图片,json形貌了合成图片中每张图片的宽高位置等信息。
game.load.altasJSONArray('fly', 'fly.png', 'fly.json');
正式最先
第一步:加载你须要的资本
上一节我们提过每一个场景都有本身的生命周期,因而加载资本的操纵应放在preload这个阶段实行。当preload中的资本加载终了后,则preload场景将进入create阶段,示例代码以下:
// 加载场景
preload: function() {
this.preload = function() {
// 设置背景为黑色
game.stage.backgroundColor = '#000000';
// 加载游戏资本
game.load.crossOrigin = 'anonymous'; // 设置跨域
game.load.image('bg', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png');
game.load.image('dude', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png');
game.load.image('green', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png');
game.load.image('red', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png');
game.load.image('yellow', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png');
game.load.image('bomb', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png');
game.load.image('five', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png');
game.load.image('three', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png');
game.load.image('one', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png');
game.load.audio('bgMusic', '//24haowan-cdn.shanyougame.com/pickApple2/assets/audio/bgMusic.mp3');
},
this.create = function() {
alert('加载终了!');
}
}
示例代码:https://jsfiddle.net/Vincent_…
第二步:监听加载完成的事宜
一般来讲我们都须要反应加载进度,比方一个进度条,或者是一个百分比的数字。因而我们接下来就须要监听加载完成的事宜了。
// 监听加载终了事宜
game.load.onLoadComplete.add(function() {
alert('加载终了!');
});
假如我们须要监听到加载的进度,那末能够用下面的要领:
// 增加进度笔墨
var progressText = game.add.text(game.world.centerX, game.world.centerY, '0%', {
fontSize: '60px',
fill: '#ffffff'
});
progressText.anchor.setTo(0.5, 0.5); // 设置锚点,用于居中
// 监听加载完一个文件的事宜
game.load.onFileComplete.add(function(progress) {
progressText.text = progress + '%';
});
示例代码: https://jsfiddle.net/Vincent_…
第三步:增加加载页的最小展现时候
寻常而言,我们做游戏都会在loading界面放一个LOGO,作为展现宣扬用,那末假如须要加载的资本体积很小的话,有能够加载界面就是一闪而过了。因而,依据我们开辟的履历,会设置一个最小的展现时候(比方3秒),在未到最小的展现时候前,即使资本已加载终了,也不会脱离加载场景。
// 监听加载终了事宜
game.load.onLoadComplete.add(onLoad);
// 最小展现时候,示例为3秒
var deadLine = false;
setTimeout(function() {
deadLine = true;
}, 3000);
// 加载终了回调要领
function onLoad() {
if (deadLine) {
// 已抵达最小展现时候,能够进入下一个场景
game.state.start('created');
} else {
// 还没有到最小展现时候,1秒后重试
setTimeout(onLoad, 1000);
}
}
示例代码:https://jsfiddle.net/Vincent_…
顺带雄厚一下最先场景吧
// 最先场景
created: function() {
this.create = function() {
// 增加背景
var bg = game.add.image(0, 0, 'bg');
bg.width = game.world.width;
bg.height = game.world.height;
// 增加题目
var title = game.add.text(game.world.centerX, game.world.height * 0.25, '小恐龙接苹果', {
fontSize: '40px',
fontWeight: 'bold',
fill: '#f2bb15'
});
title.anchor.setTo(0.5, 0.5);
// 增加提醒
var remind = game.add.text(game.world.centerX, game.world.centerY, '点击恣意位置最先', {
fontSize: '20px',
fill: '#f2bb15'
});
remind.anchor.setTo(0.5, 0.5);
// 增加主角
var man = game.add.sprite(game.world.centerX, game.world.height * 0.75, 'dude');
var manImage = game.cache.getImage('dude');
man.width = game.world.width * 0.2;
man.height = man.width / manImage.width * manImage.height;
man.anchor.setTo(0.5, 0.5);
// 增加点击事宜
game.input.onTap.add(function() {
game.state.start('play');
});
}
}
示例代码中使用了input的onTap事宜,那末input现实上另有其他事宜,比方下图中框住的就是我们最经常使用的几个事宜:
onDown – 对应touchstart/mousedown
onUp – 对应touchend/mouseup
onHold – 封装了长按事宜的完成
onTap – 封装了点击事宜的完成
别的另有滑动事宜:
示例代码:https://jsfiddle.net/Vincent_…
如今,最先界面是这模样的:
小结
这一节我们引见了加载场景,分步骤引见了加载资本、监听加载完成的事宜以及增加一个最小的加载展现时候,个中“增加一个最小的加载展现时候”是偏现实运用的内容,非必需。
在文章的末了我们还向场景中加入了主角、背景、题目和最先提醒等元素,来雄厚最先场景。顺带一说,此次的示例是做一个接苹果的游戏,一句话说完就是掌握主角接住每一个从天上掉下来的苹果,不然就算输。
那末怎样应用这些资本构建出游戏的弄法,苹果怎样掉,怎样掌握主角等等,将是下一节的内容。
未完待续
回忆: