Citrus Engine 学习笔记 第二弹 使用图片声音素材

首先复习下之前的入口类，这两种写法都是可以的：

public class Main extends StarlingCitrusEngine
	{
		
		public function Main():void 
		{
			setUpStarling(true);
			
		}
		
		override public function handleStarlingReady():void {
			state = new StarlingGameState();
		}

	}

抑或

public class Main extends StarlingCitrusEngine
	{
		
		public function Main():void 
		{
			
			
		}
		
		override public function initialize():void {
			setUpStarling(true);
		}
		
		override public function handleStarlingReady():void {
			state = new StarlingGameState();
		}

	}

然后是今天笔记的正题，总结三种在starling构架下使用图像素材的方法以及调用声音的方法。

第一种：直接给bin目录下的地址。这种方法适用于给那些一般不会变更外观的对象指定皮肤，比如大背景（天空），次级背景（太阳月亮树等等），非常方便。

我试过可以使用jpg，png，不知道是否能直接用gif动态图。使用方法如下：

1、在工程根目录的bin文件夹下部署好相应的图片素材

2、在对象的view属性下赋值，比如：

var coin:Coin = new Coin("coin", {x:60, y:100, view:"levels/SoundPatchDemo/jewel.png"});

不过要注意，“ ”中的路径默认是在bin文件下的，不要弄错。而且图片素材的大小要匹配对象的大小，否则视觉效果会跟物理碰撞体大小不统一。

第二种：使用starling的quad类。关于guad类，可以参考starling中文站的中文api，非常详细的解说http://www.starlinglib.com/wiki/APIReference。

这种方法，可以填充大片的纯色或者渐变，可以用于填充界面背景布局（边界或者蓝天），也可以简单地填充平台。使用方法如下：

a、直接在对象view属性里定义：

add(new Platform("p1", { x:700, y:stage.stageHeight / 4, width:stage.stageWidth / 5, height:40, oneWay:true , 
				view:new Quad( 160, 40, 0x333333) } ));

b、生成对象后设置view属性：

var floor:Platform = new Platform("floor", 
				{ x:stage.stageWidth / 2 , y:550, height:40, width:stage.stageWidth } );
			floor.view = new Quad( 800, 40, 0x000000, true);
			add(floor);

c、预先生成一个quad，可以设置好各顶点的颜色以构建渐变效果，然后赋值给对象的view属性：

			var sky:Quad = new Quad(800, 40, 0x777777);
			sky.setVertexColor(0, 0x123456);
			sky.setVertexColor(1, 0x666666);
			sky.setVertexColor(2, 0x337883);
			sky.setVertexColor(3, 0x999569);

var floor:Platform = new Platform("floor", 
				{ x:stage.stageWidth / 2 , y:550, height:40, width:stage.stageWidth } );
			floor.view = sky; 
			add(floor);

第三种：使用Embed嵌入素材。这方法的好处是可以使用swf或者png图集配合xml调用动画序列，主要用于角色或者其他含有动画效果的对象。关于Texture类和TextureAtlas类的详细用法，同样可以参考starling中文站的api文档http://www.starlinglib.com/wiki/APIReference。步骤主要有几步：

1、准备好图集和xml，并部署在工程根目录下任意文件夹内

2、在场景类最前面嵌入资源文件（图集和xml都要嵌入的）

3、把嵌入的资源文件加入到TextureAtlas纹理集

4、把需要动画对象的view属性设置为纹理集

代码如下：

package  
{
	import citrus.core.starling.StarlingState;
	import citrus.objects.platformer.box2d.Hero;
	import citrus.objects.platformer.box2d.Platform;
	import citrus.physics.box2d.Box2D;
	import citrus.view.starlingview.AnimationSequence;
	import citrus.view.starlingview .StarlingArt;
	import flash.display.Bitmap;
	import starling.display.Quad;
	import starling.textures.Texture;
	import starling.textures.TextureAtlas;
	
	/**
	 * ...
	 * @author Roshan
	 */
	public class StarlingGameState extends StarlingState 
	{
		[Embed(source="/../img/Fighter.xml", mimeType="application/octet-stream")]
		private var _heroConfig:Class;
		
		[Embed(source="/../img/Fighter.png")]
		private var _heroPng:Class;
		
		public function StarlingGameState() 
		{
			super();
			
		}
		
		override public function initialize():void {
			super.initialize();
			
			var physics:Box2D = new Box2D("box2D");
			//physics.visible = true;
			add(physics);
			
			var sky:Quad = new Quad(800, 40, 0x777777);
			sky.setVertexColor(0, 0x123456);
			sky.setVertexColor(1, 0x666666);
			sky.setVertexColor(2, 0x337883);
			sky.setVertexColor(3, 0x999569);
			
			add(new Platform("p1", { x:700, y:stage.stageHeight / 4, width:stage.stageWidth / 5, height:40, oneWay:true , 
				view:new Quad( 160, 40, 0x333333) } ));
			
			var floor:Platform = new Platform("floor", 
				{ x:stage.stageWidth / 2 , y:550, height:40, width:stage.stageWidth } );
			floor.view = sky; // new Quad( 800, 40, 0x000000, true);
			add(floor);
			
			var bitmap:Bitmap = new _heroPng();
			var texture:Texture = Texture.fromBitmap(bitmap);
			var xml:XML = XML(new _heroConfig());
			var sTextureAtlas:TextureAtlas = new TextureAtlas(texture,xml);
			
			var hero:Hero = new Hero("hero", {x:100, y:300, width:100, height:215, hurtVelocityX:5, hurtVelocityY:8});
			add(hero);
			
			hero.view = new AnimationSequence(sTextureAtlas, ["idle", "walk", "duck", "jump", "hurt"], "idle", 30, true );
			StarlingArt.setLoopAnimations( ["idle"]);
			
			
		}
		
	}

}

其中，"/../img/Fighter.xml"是工程根目录下img文件夹下的资源，不用非放到bin目录下。

			var bitmap:Bitmap = new _heroPng();
			var texture:Texture = Texture.fromBitmap(bitmap);
			var xml:XML = XML(new _heroConfig());
			var sTextureAtlas:TextureAtlas = new TextureAtlas(texture,xml);

这几句，TextureAtlas纹理集构建需要两个参数，Texture纹理图和xml文件，所以之前两句分别产生这两东西。而starling机制貌似是需要通过bitmap来创建纹理，所以要先构造个bitmap作为容器，获取之前Embed的图片。

而下面这两句用到的两个东西AnimationSequence和StarlingArt是Citrus Engine里面的类，用法可以参考完整api 里的介绍http://citrusengine.com/documentation/

hero.view = new AnimationSequence(sTextureAtlas, ["idle", "walk", "duck", "jump", "hurt"], "idle", 30, true );
			StarlingArt.setLoopAnimations( ["idle"]);

例子里的素材几乎都是用的citrus engine 官方案例包的素材，可以到这里下载源码和素材https://github.com/alamboley/Citrus-Engine-Examples

最后是声音文件的调用，简单步骤包括：

1、在主类里载入声音文件：格式，sound.addsound("标识名称"，sound:"工程目录bin文件夹下的完整路径")；

2、在场景类里通过_ce.sound.playSound(“标识名称”);来调用

例如：

主类载入声音文件

override public function initialize():void {
			setUpStarling(true);
			
			sound.addSound("beep",{sound:"sounds/beep1.mp3"});
		}

然后在场景类里调用

var coin:Coin = new Coin("coin", { x:600, y:400, width:50, height:50} );
			add(coin);
			coin.onBeginContact.add(function(c:b2Contact):void {
				trace('coin colledted!');
				_ce.sound.playSound("beep");
			});

呵呵，打完收工，今天的笔记就记到这里先，lol去喽