此篇主要总结一下小游戏中的知识点.
总结
预加载素材
创建对象
//预加载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 {
//重用之前的对象,修改对象的相关属性值
}
5. 制作圆角 radius
//制作圆形头像
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)
}
}
给文字设置可点击
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 文件)
Littera (web-based, free) (推荐这个)
BMFont (Windows, free)
Glyph Designer (OS X, commercial)
来源: http://www.jianshu.com/p/24bfe5edb4e9