Starling开发微信打灰机（二）

╰半夏微凉° 2021-12-14 00:47 212阅读 0赞

上一篇中，已经把starling开发环境搭建好，那么现在开始写代码。

**这一篇来完成打灰机的欢迎界面。**

游戏素材下载

[![Center][]][Center 1]

首先创建Asset.as来加载图片，声音和字体等资源，其中只有两张背景图是单独的图片，其他图片都已经被我用TexturePacker发布成序列了，所以只需要嵌入进去就好。

![Center 2][]![Center 3][]

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][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，只需要调用其共有方法。

最后以手机应用程序运行：

![Center 4][]

如果你的android手机打开了USB调试，并且连接到了你的电脑，那在启动方法那里，你可以选择‘在设备上’，稍等片刻flash builder就会将程序自动安装到你的手机上，并打开。 当starling中使用了touch event的时候，最好选择该方法调试。

源码下载：

[![Center 5][]][Center 5 1]

转载于:https://www.cnblogs.com/james1207/p/3285645.html

[Center]: /images/20211213/7c652eddbc7f4860991751aaaf86409d.png
[Center 1]: http://download.csdn.net/detail/dyyaries/6014343
[Center 2]: https://img-blog.csdn.net/20130827143455281?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHl5YXJpZXM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: /images/20211213/3299a0799cd3410b9a99116acf81cf62.png
[http_wiki.starling-framework.org_manual_touch_events]: http://wiki.starling-framework.org/manual/touch_events
[Center 4]: /images/20211213/8b1750ce9fce43a988f8e41676762742.png
[Center 5]: /images/20211213/bfc68520204143c999d2ca21389fae93.png
[Center 5 1]: http://download.csdn.net/detail/dyyaries/6014425