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的时候，最好选择该方法调试。

源码下载：