Starling 游戏 太空大战3 建立游戏开始界面

任务：创建游戏欢迎界面，添加滚动背景，添加开始按钮

开始界面类 Menu.as，我们前面只是创建好了游戏的框架体系，现在我们就要充实它内在的东东了。

1：首先我们来实现无限循环的背景特效，我们新建一个背景类Background.as

它的主要功能就是内嵌两个背景图片实现循环滚动效果，我们来看代码

package object
{
    import core.Assets;
    import starling.display.BlendMode;
    import starling.display.Image;
    import starling.display.Sprite;
    
    public class Background extends Sprite
    {
        private var sky1:Image;
        private var sky2:Image;
        
        public function Background()
        {
            //----  使用Images对象从纹理中创建图形对象  -------
            sky1 = new Image(Assets.skyTexture);
            sky1.blendMode = BlendMode.NONE;
            addChild(sky1);
            
            sky2 = new Image(Assets.skyTexture);
            sky2.blendMode = BlendMode.NONE;
            sky2.y = -800;
            addChild(sky2);
        }
        
        //---  两个图片叠加一期顺势向下移动，如果大于800时重新置零 ----
        public function update():void
        {
           sky1.y +=4;
           if(sky1.y == 800)
               sky1.y= -800;
           
           sky2.y += 4;
           if(sky2.y == 800)
               sky2.y = -800;
        }  
    }
}

代码说明：

1：Image类相当于Flash的Bitmap类的Starling版本，不过Starling是用纹理来代替BitmapData来提供图像的像素资源

2：BlendMode类提供了混合模式视觉效果的常量。none停用混合，即禁止任何透明度。

3：场景两个图形对象后Y轴顺序排列并通过update 更新函数实现滚动效果

 

接下来我们将创建的背景类添加到Menu中代码如图

第7行，首先置入类包，第15行声明一个背景变量，第25行在Menu类的初始化init函数中创建背景background对象并添加到舞台

第31行在逐帧更新的update函数调用背景类的更新函数以实现实时的滚动，到此代码编写就完成了，如图：（遗憾博客园页面不支持Starling的flash）

最后我们添加游戏的LOGO和开始按钮

代码如下：

package states
{
    import core.Assets;
    import core.Game;
    
    import interfaces.IState;
    
    import object.Background;
    
    import starling.display.Button;
    import starling.display.Image;
    import starling.display.Sprite;
    import starling.events.Event;
    
    public class Menu extends Sprite implements IState
    {
        private var game:Game;
        private var background:Background;
        private var logo:Image;
        private var play:Button;
        
        public function Menu(game:Game)
        {
            this.game = game;
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        
        private function init(event:Event):void
        {
            //--  增加背景  ---
            background = new Background();
            addChild(background);
            //--- 增加LOGO ----
            logo = new Image(Assets.ta.getTexture("logo"));
            logo.pivotX = logo.width * 0.5;
            logo.x = 400;
            logo.y = 250;
            addChild(logo);
            
            //----  增加开始按钮按钮和点击事件  ------
            play = new Button(Assets.ta.getTexture("playButton"));
            play.addEventListener(Event.TRIGGERED,onPlay);
            play.pivotX = play.width * 0.5;
            play.x = 400;
            play.y = 450;
            addChild(play);
            
        }
        
        private function onPlay(event:Event):void
        {
           game.changeState(Game.PLAY_STATE);
         }
        
        public function update():void
        {
            background.update();
        }
        
        public function destroy():void
        {
            background.removeFromParent(true);
            background = null;
            logo = null;
            play.removeFromParent(true);
            play = null;
            removeFromParent(true);
        }
    }
}

如图：

 到此游戏的第一界面就制作完成咯