当前位置: 首页 > 工具软件 > Citrus Engine > 使用案例 >

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

萧伟兆
2023-12-01

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

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去喽

 类似资料: