Phaser制作h5小游戏（二）

此篇主要总结一下小游戏中的知识点。

总结

预加载素材

//预加载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)（推荐这个）