首先复习下之前的入口类,这两种写法都是可以的:
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();
}
}
第一种:直接给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"]);
}
}
}
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");
});