第二部分显示对象（文字动画）

1 文字

①普通文字

var game = new Phaser.Game(300, 630, Phaser.AUTO, 'container', state);

function state(){
	
	this.create = function(){
		var text = game.add.text(0, 0, '你好\n世界');
       //var text = game.add.text(X, Y, '文字',样式,组);样式可以是对象形式{a:"b";}，也可以是下面的这样的形式
		text.fill = '#fff';
		text.font = '微软雅黑';
		text.fontSize = 60;
		text.fontWeight = 'normal';//粗细 默认加粗，这个是正常
		//text.style.backgroundColor = '#0f0'//背景颜色
		text.stroke = '#f00';//描边
		text.strokeThickness = 10;//描边宽度，不设置这个，上面的效果为0
		text.wordWrap = true;//自动换行 配合下面的那个宽度进行 但中文不支持
		text.wordWrapWidth = 150;


	}
}

②特殊文字BitmapText

手册： http://www.swjxzy.com/phaserZF/docs/Phaser.BitmapText.html

制作工具：https://71squared.com/en/glyphdesigner

http://kvazars.com/littera/ 在线制作工具

在线制作工具的使用方法：简略的。另外，字体中有很多字是不能生成的，所以不要用很生僻的字体

360截图20160528091337241.jpg

使用方法：

var game = new Phaser.Game(300, 630, Phaser.AUTO, 'container', state);

function state(){

	this.preload = function(){
		game.load.bitmapFont('font', 'asset/font.png', 'asset/font.fnt');
		//要先导入在制作软件中导出的字体文件
	}

	this.create = function(){
		var text = game.add.bitmapText(0, 0, 'font', '黄河远上白云间，\n一片孤城万仞山。\n羌笛何须怨杨柳，\n春风不度玉门关。', 30);
	        //BitmapText(x, y, font, text, size, group)
	}
}

2 组 group

手册：http://www.swjxzy.com/phaserZF/docs/Phaser.Group.html

Phaser.Group组是一个虚拟的、无形的显示对象容器，用来把多个显示对象组合在一起使之形成一个整体。同时，组又可以作为其他显示对象或组的子元素。Phaser.World世界对象是显示对象列表中最顶层的一个组。

组的作用

组合多个显示对象，便于整体操作
提供了多种便捷方法对组内的元素进行管理
为显示对象的回收利用机制提供支持

为组添加子元素的三种方法：

创建图片或精灵等显示对象时指定组
group.add() 方法直接添加
group.create()方法创建子元素并添加进组

组的使用：

var game = new Phaser.Game(300, 630, Phaser.AUTO, 'container', state);

function state(){
	this.preload = function(){
		game.load.image('cat', 'asset/cat.png');
	}

	this.create = function(){
		var group = game.add.group();
		//通过创建子元素的方法向组中加入
		var cat1 = group.create(0, 0, 'cat');
		var cat2 = group.create(100, 100, 'cat');
		var cat3 = group.create(100, 300, 'cat');
		var cat3 = group.create(100, 500, 'cat');

		group.alpha = 0.5;
		group.x = 100;
		group.scale.set(0.5);
		//也可以像下面这样，先创建好显示对象，然后加入组中。也可以在创建显示对像时就指定所属的组
		/*var cat =game.add.image(0,0,'cat');
		var group = game.add.group();
		group.add(cat)
		
		*/
	}
}

3 动画

① 缓动动画 tween

手册：Phaser Class: Tween

var game = new Phaser.Game(300, 630, Phaser.AUTO, 'container', state);

function state(){
	this.preload = function(){
		game.load.image('phaser', 'asset/phaser.png');
	}

	this.create = function(){
		var phaser = game.add.image(0, 0, 'phaser');//要添加动画的目标
		var tween = game.add.tween(phaser);//新建一个缓动动画对像，目标为上面那个
		/*tween.to({y:300}, 2000, Phaser.Easing.Bounce.Out, true, 0, 100, true);*/

		tween.from({y:300}, 2000, Phaser.Easing.Bounce.Out, true, 0, 100, true);
                 //共同的：属性，持续时间，什么动画，是否自动启动，延迟时间，重复次数，是否自动逆转动画
	}

	this.update = function(){
		
	}


}

例子：

②Animation 动画

手册：Phaser Class: Animation

制作合成图片工具：①TexturePacker ② shoebox

AtlasXML手册：Phaser Class: Loader

var game = new Phaser.Game(300, 630, Phaser.AUTO, 'container', state);

function state(){
	this.init = function(){
		game.stage.setBackgroundColor(0xffffff);
	}
	this.preload = function(){
		game.load.atlasXML('man', 'asset/atlas/sprites.png', 'asset/atlas/sprites.xml');
		//命的名，合成的图片，图片的XML数据
	}

	this.create = function(){
		var man = game.add.sprite(0, 0, 'man');//新建一个精灵对象
		man.animations.add('tidy', ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png']);
		//为精灵添加一个动画 tidy，这里可以添加很多个动画
		man.play('tidy', 10, true);//播放动画（哪个动画，速度（数值越大越快），是否循环播放）
	}
}

结合前面的内容，自己做一个行走图

Isa中国风5.png

zgf.png

var game = new Phaser.Game(300, 630, Phaser.AUTO, 'container', state);

function state(){
	this.init = function(){
		game.stage.setBackgroundColor(0xffffff);
	}
	this.preload = function(){
		//game.load.atlasXML('man', 'asset/atlas/sprites.png', 'asset/atlas/sprites.xml');
		game.load.spritesheet('man', 'asset/zgf.png', 32, 48);
	}

	this.create = function(){
		var man = game.add.sprite(0, 0, 'man');
		man.animations.add('tidy', [0, 1, 2, 3]);
		
		man.play('tidy', 5, true);
	}
}

可以自行扩展。

第二部分 显示对象（文字动画）

1 文字

2 组 group

3 动画

第二部分显示对象（文字动画）