Starling开发微信打灰机（二）
上一篇中，已经把starling开发环境搭建好，那么现在开始写代码。
这一篇来完成打灰机的欢迎界面。
游戏素材下载
首先创建Asset.as来加载图片，声音和字体等资源，其中只有两张背景图是单独的图片，其他图片都已经被我用TexturePacker发布成序列了，所以只需要嵌入进去就好。
Assets.as
public class Assets
{
[Embed(source="../assets/bg_01.jpg")]
private static const Bg01:Class;
[Embed(source="../assets/bg_02.jpg")]
private static const Bg02:Class;
[Embed(source = "../assets/plane.png")]
private static const PlanePng:Class;
[Embed(source = "../assets/plane.xml", mimeType = "application/octet-stream")]
private static const PlaneXml:Class;
[Embed(source = "../assets/font_0.png")]
private static const FontPng:Class;
[Embed(source = "../assets/font.fnt", mimeType = "application/octet-stream")]
private static const FontXml:Class;
[Embed(source = "../assets/shoot.mp3")]
private static const ShootMp3:Class;
[Embed(source = "../assets/explosion.mp3")]
private static const ExplosionMp3:Class;
public static var bg01Txr:Texture;
public static var bg02Txr:Texture;
public static var atlas:TextureAtlas;
public static var shootSound:Sound;
public static var explosionSound:Sound;
public static function init():void
{
bg01Txr = Texture.fromBitmap(new Bg01());
bg02Txr = Texture.fromBitmap(new Bg02());
atlas = new TextureAtlas(Texture.fromBitmap(new PlanePng()), XML(new PlaneXml()));
TextField.registerBitmapFont(new BitmapFont(Texture.fromBitmap(new FontPng()), XML(new FontXml())));
shootSound = new ShootMp3() as Sound;
shootSound.play(0, 0, new SoundTransform(0));
explosionSound = new ExplosionMp3() as Sound;
explosionSound.play(0, 0, new SoundTransform(0));
trace("assets loaded.");
}
}
完了之后就开始做第一个欢迎界面，上面显示四个大字“飞机大战”，还有其他就自己发挥了。
在创建第一个显示界面之前，先考虑游戏中可能存在的几种状态，即：欢迎界面，游戏界面，暂停界面，可能还需要显示分数的界面。
为了程序结构性，最好为这些状态界面创建公共接口IState.as
public interface IState
{
function update():void;
function destroy():void;
}
完了之后来创建欢迎界面。 注意 这里就要用到starling.display.Sprite类，而启动类Main.as则是继承flash.display.Sprite。
Welcome.as
public class Welcome extends Sprite implements IState
{
private var game:Game;
private var bg:Background;
private var title:TextField;
private var author:TextField;
private var finalScore:TextField;
public function Welcome(game:Game, score:Number)
{
this.game = game;
bg = new Background();
addChild(bg);
title = new TextField(Config.STAGE_WIDTH*0.95, 80, "飞机大战", "children", 64, 0xff0000, true);
title.hAlign = "center";
title.pivotX = title.width / 2;
title.x = Config.STAGE_WIDTH / 2;
title.y = Config.STAGE_HEIGHT / 2 - 100;
addChild(title);
author = new TextField(Config.STAGE_WIDTH*0.95, 80, "by小强", "children", 42, 0xff0000, true);
author.hAlign = "center";
author.pivotX = author.width / 2;
author.x = Config.STAGE_WIDTH / 2;
author.y = title.y + 100;
addChild(author);
addEventListener(TouchEvent.TOUCH, onTouchScreen);
}
public function update():void
{
bg.update();
}
private function onTouchScreen(event:TouchEvent):void
{
var touch:Touch = event.getTouch(this, TouchPhase.BEGAN);
if (touch) {
var touchPos:Point = touch.getLocation(this);
//game.alterState(new Play(game));//游戏开始
}
}
public function destroy():void
{
removeFromParent();
}
}
上面的代码向屏幕中添加背景和两个显示文本，使用的字体是"children"，该字体是在Assets.as注册的bitmap字体。
其中还为sprite注册了touch事件，以监听手机上面的touch 动作，starling中的touch event使用方法请参考：http://wiki.starling-framework.org/manual/touch_events
Background.as
public class Background extends Sprite
{
public static const BG_RATE:Number = 2;
private var bg01:Image;
private var bg02:Image;
public function Background()
{
bg01 = new Image(Assets.bg01Txr);
bg01.blendMode = BlendMode.NONE;
bg01.scaleX = Config.STAGE_WIDTH / bg01.width;
bg01.scaleY = Config.STAGE_HEIGHT / bg01.height;
bg02 = new Image(Assets.bg02Txr);
bg02.blendMode = BlendMode.NONE;
bg02.y = -Config.STAGE_HEIGHT;
bg02.scaleX = Config.STAGE_WIDTH / bg02.width;
bg02.scaleY = Config.STAGE_HEIGHT / bg02.height;
addChild(bg01);
addChild(bg02);
}
public function update():void
{
bg01.y += BG_RATE;
if (bg01.y == Config.STAGE_HEIGHT) {
bg01.y = -Config.STAGE_HEIGHT;
}
bg02.y += BG_RATE;
if (bg02.y == Config.STAGE_HEIGHT) {
bg02.y = -Config.STAGE_HEIGHT;
}
}
}
背景sprite中主要是使得两张背景图一前一后的向下移动，Config是我定义的一个配置类，其中STAGE_WIDTH,STAGE_HEIGHT是舞台宽度和高度。
最后更改之前的Game.as，将Welcome界面创建并添加到stage
public class Game extends Sprite
{
public var currState:IState;
public var loading:Loading;
public function Game()
{
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(event:Event):void
{
Assets.init();
//显示欢迎界面
currState = new Welcome(this, 0);
addChild(Sprite(currState));
addEventListener(Event.ENTER_FRAME, update);
}
private function update(event:Event):void
{
currState.update();
}
public function alterState(activeState:IState):void
{
currState.destroy();
currState = activeState;
addChild(Sprite(currState));
}
}
Game类是一个总的控制类，他的public方法alterState接收一个IState类型参数用于改变当前在update的界面。当游戏开始由欢迎界面转到游戏界面，游戏界面转到得分界面都需要调用该方法，使得切换当前update的界面。IState接口设计的好处就在于不Game类不需要知道当前是哪个具体的state，只需要调用其共有方法。
最后以手机应用程序运行：
如果你的android手机打开了USB调试，并且连接到了你的电脑，那在启动方法那里，你可以选择‘在设备上’，稍等片刻flash builder就会将程序自动安装到你的手机上，并打开。 当starling中使用了touch event的时候，最好选择该方法调试。
源码下载：
