phaser.js显示对象篇

概述

图片图形按钮

1. 游戏工厂对象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');

2. 图片对象
   game.add.image(x, y, key, frame, group)
3. 图形对象(常用方法与canvas类似)
   game.add.graphics(x, y, group)//返回一个空的画板,图形对象,可以包含多个图形
   
   • 填充
     graphics.beginFill(color, alpha)
grpahics.endFill();
   • 描边
     graphics.lineStyle(lineWidth, color, alpha)
   • 直线线条
     moveTo, lineTo
   • 曲线线条
   • 清除图形
     graphics.clear()
4. 按钮对象
   game.add.button(x, y, key, callback, callbackContent, overFrame, outFrame, downFrame, upFrame, group)
   // callback:按钮点击时的回调函数
   // callbackContent:表示callback中this指代的内容
   //按钮四个状态响应的帧

精灵

1. 创建精灵
   game.add.sprite(x, y, key, frame, group)
2. 与图片的区别
   
   • 可以使用动画
   • 可以使用物理引擎
   • 更重
3. 常用属性
   
   • 位置,原点在左上角(设定的位置是相对于父元素的左上角)
     
     • 创建时指定
     • .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 //暂时隐藏,不处理
   • tint 颜色属性
     
     • .tint = 0x0000ff //原理是通过遍历来着色的,消耗大
   • 遮罩
     
   • 瓦片精灵
     game.add.tileSprite(x, y, w, h, key, frame, group)
     
     • . autoScroll(speedx, speedy) //滚动

---

中级

文字

1. 创建
   game.add.text(x, y, text, style, group)
2. 文字样式
   
   • 设置方法:
     
           //text.wordWrapWidth = 150;
3. 特殊字体的实现
   
   • webFont
     
   • BitmapText
     BitmapText(game, x, y, font, text, size, align)
     
     • 需要先在state中加载
     • http://kvazars.com/littera/ 在线字体制作
       
   • RetroFont
     
     • 同上

组

1. 组的创建
   game.add.group(parent?, name?, addToStage?, enableBody?, physicsBodyType?)
2. 添加子元素
   
   • 创建图片或精灵等显示对象时指定组
   • group.add(name)直接添加
   • group.create(x, y, key, frame?, exists?)创建并添加
3. 组的主要作用是进行整体操作
   
   • group1.alpha = 0.5
   • group1.x = 100 //组所有像素右移100
   • group1.scale.set(0.5);

动画

1. 动画种类
   
   • 补间动画Phaser.Tween
   • 逐帧动画Phaser.Animation
2. Tween
   
   • game.add.tween(object)
     
     
     • ease 缓动函数
     • autoStart 为true则立即开始
     • delay 延时开始
     • yoyo 是否反向运动
       
   • 在state中实现
     
3. Animation(图片实现)
   
   • 使用方法
     
   • 使用
     

atlas的制作和使用

1. 制作,使用工具
   http://renderhjs.net/shoebox/
2. 用例
   

---

高级

粒子系统

1. 粒子和粒子发射器
   
2. 粒子发射器的创建
   game.add.emitter(x?, y?, maxNum?)
3. 粒子的创建
   emitter1.makeParticles(keys, frames?, quantity?, collide?, collideWorldBounds?)

4. 粒子的控制

   • 粒子的发射
   • 速度控制
   • 透明度控制
   • 角度控制
   • 缩放控制
   • 结合物理引擎的使用
   • 实例

           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 = 600emitter.bounce.y = 0.8  //反弹效果```

瓦片地图

1. 使用tiled制作瓦片地图
   http://www.mapeditor.org
2. tiled的使用
   
   • 添加瓦片地图集
   • 新建图层
   • 构建地图
   • 导出地图
3. 瓦片地图的加载
   
   • game.load.tilemap(key, url?, data?, format?)`
4. 瓦片地图的创建
   
   • game.add.tilemap(key, tileWidth?, tileHeitht?)
5. 瓦片地图的显示

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');    }}

1. 动态修改瓦片地图

   • 获取瓦片
   • 填充瓦片
   • 复制粘贴瓦片
   • 替换瓦片

   • 实例

     //获取指定位置上的瓦片,以瓦片块数为单位    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);

     1. 瓦片地图的碰撞检测
   • tilemap.setCollision(indexes, collides?, layer?)
tilemap.setCollisionBetween(start, stop, collides?, layer?)