概述
图片图形按钮
游戏工厂对象Phaser.GameObjectFactory
game.add === new Phaser.GameObjectFactory(game)
- 游戏工厂对象可以快速的创建对象(显示和非显示)
实例
- 不使用factory
var image = new Phaser.Image(game, 0, 0, 'cat'); game.world.add(image);
- 使用
game.add.image(game, 0, 0, 'cat');
- 图片对象
game.add.image(x, y, key, frame, group)
- 图形对象(常用方法与canvas类似)
game.add.graphics(x, y, group)
//返回一个空的画板,图形对象,可以包含多个图形
- 填充
graphics.beginFill(color, alpha)
grpahics.endFill(); - 描边
graphics.lineStyle(lineWidth, color, alpha)
- 直线线条
moveTo, lineTo
- 曲线线条
- 清除图形
graphics.clear()
- 填充
- 按钮对象
game.add.button(x, y, key, callback, callbackContent, overFrame, outFrame, downFrame, upFrame, group)
// callback:按钮点击时的回调函数
// callbackContent:表示callback中this指代的内容
//按钮四个状态响应的帧
精灵
- 创建精灵
game.add.sprite(x, y, key, frame, group)
- 与图片的区别
- 可以使用动画
- 可以使用物理引擎
- 更重
- 常用属性
- 位置,原点在左上角(设定的位置是相对于父元素的左上角)
- 创建时指定
- .x, .y 指定
- .position.x指定
position.set(x, y)
- 设置自身的锚点 .anchor.x=0.5
anchor.set(0.5,0.5) - 设置大小
- .width = 50
.height = 50 - 透明度,旋转,缩放
- .alpha = 0.5
- .angle = 90
- .scale.x = 2
.scale.y = 2
- .visible = true
- .exist = true //暂时隐藏,不处理
- .width = 50
- tint 颜色属性
- .tint = 0x0000ff //原理是通过遍历来着色的,消耗大
- 遮罩
- 瓦片精灵
game.add.tileSprite(x, y, w, h, key, frame, group)
- . autoScroll(speedx, speedy) //滚动
- 位置,原点在左上角(设定的位置是相对于父元素的左上角)
中级
文字
- 创建
game.add.text(x, y, text, style, group)
- 文字样式
- 设置方法:
//text.wordWrapWidth = 150;
- 设置方法:
- 特殊字体的实现
- webFont
- BitmapText
BitmapText(game, x, y, font, text, size, align)
- 需要先在state中加载
- http://kvazars.com/littera/ 在线字体制作
- RetroFont
- 同上
- webFont
组
- 组的创建
game.add.group(parent?, name?, addToStage?, enableBody?, physicsBodyType?)
- 添加子元素
- 创建图片或精灵等显示对象时指定组
- group.add(name)直接添加
- group.create(x, y, key, frame?, exists?)创建并添加
- 组的主要作用是进行整体操作
- group1.alpha = 0.5
- group1.x = 100 //组所有像素右移100
- group1.scale.set(0.5);
动画
- 动画种类
- 补间动画Phaser.Tween
- 逐帧动画Phaser.Animation
- Tween
game.add.tween(object)
- ease 缓动函数
- autoStart 为true则立即开始
- delay 延时开始
- yoyo 是否反向运动
- 在state中实现
- Animation(图片实现)
- 使用方法
- 使用
- 使用方法
atlas的制作和使用
- 制作,使用工具
http://renderhjs.net/shoebox/ - 用例
高级
粒子系统
- 粒子和粒子发射器
- 粒子发射器的创建
game.add.emitter(x?, y?, maxNum?)
- 粒子的创建
emitter1.makeParticles(keys, frames?, quantity?, collide?, collideWorldBounds?)
粒子的控制
- 粒子的发射
- 速度控制
- 透明度控制
- 角度控制
- 缩放控制
- 结合物理引擎的使用
- 实例
function state(){ this.init = function(){ game.scale.pageAlignHorizontally = true; //水平居中 game.scale.pageAlignVertically = true; //垂直居中 } this.preload = function(){ game.load.image('bubble', 'asset/bubble.png'); } this.create = function(){ var emitter = game.add.emitter(game.width/2, game.height/2, 50); emitter.makeParticles('bubble'); //emitter.setXSpeed(min?, max?) //emitter.setYSpeed(min?, max?) //emitter.setScale(minX?, maxX?, minY?, maxY?, rate?) //设置rate表示最小值到最大值的过渡 //emitter.setApha(min?, max?, rate?, ease?) //emitter.setRotation(min?, max?) 设置角速度 emitter.setScale(0, 1, 0, 1, 3000); emitter.setAlpha(0, 1, 3000); emitter.setRotation(100, 200); //emitter.start(explode,lifespan?, frenquency?, quantity?) // explode为true时,表示一次性发射出去,false表示一次发射一个 emitter.start(true, 3000, 1000, 50); } }
也可以使用flow进行发射
``` //emitter.flow(lifespan?, frenquency?, quantity?, total?, immediate?) //-1代表无数个 emitter.flow(3000, 1000, 50, -1); //其他属性 emitter.gravity = 600 emitter.bounce.y = 0.8 //反弹效果 ```
瓦片地图
- 使用tiled制作瓦片地图
http://www.mapeditor.org - tiled的使用
- 添加瓦片地图集
- 新建图层
- 构建地图
- 导出地图
- 瓦片地图的加载
- game.load.tilemap(key, url?, data?, format?)`
- 瓦片地图的创建
game.add.tilemap(key, tileWidth?, tileHeitht?)
- 瓦片地图的显示
function state(){
this.init = function(){
game.scale.pageAlignHorizontally = true; //水平居中
game.scale.pageAlignVertically = true; //垂直居中
}
this.preload = function(){
game.load.tilemap('mario_map', 'asset/tilemap/mario.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('mario', 'asset/tilemap/mario.png');
}
this.create = function(){
var map = game.add.tilemap('mario_map');
map.addTilesetImage('super_mario', 'mario');
var layer = map.createLayer('world');
}
}
动态修改瓦片地图
- 获取瓦片
- 填充瓦片
- 复制粘贴瓦片
- 替换瓦片
实例
//获取指定位置上的瓦片,以瓦片块数为单位 var tile = map.getTile(0, 24); //在指定的位置设置指定的瓦片(name,x,y) map.putTile(tile, 0, 0); //在指定区域填充指定的瓦片(tileIndex,x0,y0,x1,y1) //map.fill(12, 0, 0, 20, 20); //瓦片的复制和粘贴(x0,y0,x1,y1)(x,y,name) //var tiles = map.copy(0, 19, 5, 5); //map.paste(0, 0, tiles); //在指定区域内用一种瓦片替换另一种瓦片(tileIndex,tileIndex) //map.replace(1, 12);
- 瓦片地图的碰撞检测
tilemap.setCollision(indexes, collides?, layer?)
tilemap.setCollisionBetween(start, stop, collides?, layer?)