此篇主要总结一下小游戏中的知识点。
总结
- 预加载素材
//预加载sprite素材
game.load.atlas('button','images/button.png', 'images/button.json')
this.load.spritesheet('loading','images/loading.png', 154, 155, 25) //每帧的长，宽和帧数
//预加载图片
game.load.image('bg', 'images/bg.png')
//预加载字体
game.load.bitmapFont('font', 'images/font.png', url + 'images/font.xml')
- 创建对象
//创建sprite对象
var button = game.add.sprite(0, 0, 'button',"button.png")
button.anchor.set(0.5, 0.5); //(0,0)锚点在左上角，（1，1）锚点在右下角
button.scale.set(1)
button.alpha = 1
//创建text对象
var style = {font: "36px PingFangSC-Semibold", fill: "#FFDF00", align: "center"};
var text1 = game.add.text(game.width / 2, game.height / 2 , '中国', style)
text1.anchor.set(0.5)
text1.resolution = 3; //设置分辨率
//创建image对象
var mask1 = game.add.image(0, 0, 'button',"button.png")
//创建button对象
var charge = game.add.button(0,0, 'button', function(){}, that, 'button.png', 'button.png')
//创建group对象
var group = game.add.group()
group.addChildAt(button,0) //将对象加进group中，就可以进行整体操作
group.addChildAt(charge,1)
var button = group.getChildAt(0) //取出group中的元素
//创建动画
game.add.tween(button).to({
alpha: 1
}, 80, Phaser.Easing.Linear.None, true).onCompvare.add(function() {})
//创建bitmapData (遮罩层)
var bottom = game.make.bitmapData(game.width, 120);
//渐变：x:0->0，y:0->120 (x1,y1,x2,y2)
var grd = bottom.context.createLinearGradient(0, 0, 0, 120);
grd.addColorStop(0, '#955B34');
grd.addColorStop(1, '#4D2412');
bottom.context.fillStyle = grd;
bottom.context.fillRect(0, 0, game.height, 120);
var footer = game.add.sprite(0, game.height, bottom);
footer.anchor.set(0, 1)
//创建bitmapText
game.load.bitmapFont('font', 'images/font.png', url + 'images/font.xml')
var text = game.add.bitmapText(0，0, 'font', '1000', 32)
//创建时间
var timerLoop = game.time.create(false);
timerLoop.loop(1000, function() {
//倒计时
time = time - 1
if (time == 0) {
type = 1
timerLoop.stop();
}
}, that)
timerLoop.start();
- 对象池：游戏主要特点就是占用内存大， 一是与游戏的素材大小有关，二是与创建的对象数量有关。所以，控制游戏的内存主要任务是控制游戏对象的数量。通过创建对象池控制对象数量。
图片占用内存的计算公式：图片高度 * 图片宽度 * 一个像素占用的内存大小
如：图片占用内存是 800 * 600 * 4 byte = 1875KB = 1.83M
//查看对象池中是否有存在的对象，若没有，则创建新的筹码，否则，重复利用原来已创建的对象，减轻内存消耗，一个对象被kill掉就可以被重复利用。
var coin = myPayCoinGroup.getFirstExists(false)
if (coin == null) {
//创建新的游戏对象
}
else {
//重用之前的对象，修改对象的相关属性值
}
- 动态加载网络请求的图片
//制作圆形头像
var makeHeader = function(that, source, width){
var w = width
//制作蒙版
var circle = game.make.bitmapData(w, w)
circle.circle(w / 2, w / 2, w / 2, "#CCCCCC")
var image = game.make.image(0, 0, source)
image.width = w
image.height = w
var bmd = game.make.bitmapData(w, w)
// 合并蒙版和图像成为mask 的bitmapData，再加入游戏中，这里成为某个精灵的子元素
bmd.alphaMask(image, circle)
return bmd;
}
//设置我的头像用户名
var setMyInfo = function(that, data) {
var file = {
type: 'image',
key: data.id.toString(),
url: data.avatar,
data: null,
error: false,
loaded: false
}
file.data = new Image()
file.data.name = file.key
//加载图片资源
file.data.src = file.url
file.data.onload = function () {
//如果内存中不存在该key值的图片，就加入到内存中，方便以后引用
if (!game.cache.checkImageKey(file.key)) {
game.cache.addImage(file.key, file.url, file.data)
}
var texture = makeHeader(that, file.key, 86, true)
// 一定要在这个序号上找出对象来替换图片
myInfoGroup.getChildAt(0).loadTexture(texture)
}
//头像加载失败，加载默认图片
file.data.onerror = function () {
console.log("image loaded error")
myInfoGroup.getChildAt(0).loadTexture(defaultAvatar)
}
}
5.制作圆角radius
var button = this.game.add.graphics(100, 100);
button.beginFill(0xAAAAAA, 1);
button.drawRoundedRect(0, 0, 50, 50, 10);
- 给文字设置可点击
var style3 = {font: "28px PingFangSC-Semibold", fill: "#f5bb10", align: "center"};
var rule = game.add.text(0,0 '规则', style3)
rule.anchor.set(1, 0)
rule.inputEnabled = true
rule.events.onInputDown.add(showRule, this)
rule.resolution = 3;
游戏对象层级
游戏中根据创建游戏对象的先后顺序来确定对象的层级关系，也就是css中讲的“z-index”，越往后创建的对象，它的层级就越大，即越靠近表层，在其他层之上。物理引擎
//重复利用云
var resetSprite = function(sprite){
var {game} = this
sprite.x = game.world.bounds.right;
sprite.frameName = 'cloud' + game.rnd.between(1, 3) + '.png'
sprite.body.velocity.x = game.rnd.between(-8, -30);
}
//cloud
for (var i = 0; i < 4; i++) {
var s = game.add.sprite(game.world.randomX, game.rnd.between(80, 300), 'cloud', 'cloud' + game.rnd.between(1, 3) + '.png');
//开启物理引擎
game.physics.arcade.enable(s);
//设置物理移动的速度
s.body.velocity.x = game.rnd.between(-8, -30);
//设置检查是否超出边界
s.checkWorldBounds = true;
//超出边界则重置云的属性
s.events.onOutOfBounds.add(resetSprite, this);
}
- 动画
//预加载
game.load.spritesheet('loading', 'images/loading.png', 154, 155, 25)
//预加载对象是spritesheet才执行该动画
var bean = game.add.sprite(0，0, 'loadingBean')
bean.animations.add('loading-bean', [0, 1], 6, true);
bean.animations.play('loading-bean')
- 去除上一个场景中的元素，减少占用内存
if (game.cache.checkImageKey("loading")) {
game.cache.removeImage("loading")
}
工具
- 制作精灵sprite图TexturePacker
- 制作BitmapText data 文件工具(需要ttf后缀的字体文件，最后输出png和fnt/xml文件)
BMFont (Windows, free)
Glyph Designer (OS X, commercial)
Littera (Web-based, free)（推荐这个）