[Flash] book IntroducingStarling

[Flash] Starlingの学習 書籍「Introducing Starling」を読む (1)

初心者向けのStarlingのTutorialとかお手本をWebで探した。

なにか見つかった？

書籍に出会った。

Starling Handbook Preview

2017年5月現在、Starling公式説明 http://manual.starling-framework.org/ の最後で Starling Handbook のpreview がダウンロードできるぜ、と書いてある。 取得して中身を見てみた。第2章「Flappy Starling」というゲームの作り方の説明はある程度文章量がある。あとの章は1ページしかなかったりする。

その第2章はTutorialとしては規模の大きい題材で、なかなか完成しないし、コード説明も大ざっぱに思える。手取り足取りの初心者向けTutorialにはなってない。

Introducing Starling

公式Wiki http://wiki.starling-framework.org/doc/start 見ると有料動画TutorialとかWeb記事の紹介もあるが、書籍の紹介があった。

書籍『Introducing Starling 英語版』(2012) はO'ReillyのWebサイトでPDFを無料ダウンロードできた。クレジットカード登録も必要なかった。非公式だがIntroducing Starling 日本語版もあった。

読んでみる。

また、kamijo氏のStarling記事 http://cuaoar.jp/stage3d/starling/ も参考にする。

First Flight

まずは矩形（四角）の描写、フレーム毎の処理、テキストの表示など。

Main.as

package
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import starling.core.Starling;
    
    /**
     * ...
     * @author foo
     */
    [SWF(width="320",height="240",frameRate="60",backgroundColor="#002143")]
    public class Main extends Sprite 
    {
        private var st:Starling;
        public function Main() 
        {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onContext3dCreated);

            st = new Starling(Game, stage);
            st.showStats = true;
            st.antiAliasing = 0; //if 2D content, use 1 or 0
            st.start();
        }
        
        private function onContext3dCreated(e:Event):void 
        {
            if (Starling.context.driverInfo.toLowerCase().indexOf("software") != -1) {
                Starling.current.nativeStage.frameRate = 30;
                trace('GPU not worked: frameRate 60 -> 30');
            } else {
                trace('GPU worked: frameRate '+Starling.current.nativeStage.frameRate);
            }
        }
    }
}

Game.as

package 
{
    import starling.display.DisplayObject;
    import starling.display.Quad;
    import starling.display.Sprite;
    import starling.events.EnterFrameEvent;
    import starling.events.Event;
    import starling.text.TextField;
    import starling.text.TextFormat;
    
    /**
     * ...
     * @author foo
     */
    public class Game extends Sprite 
    {
        private var qd:Quad;
        private var sp:Sprite;
        private var cnt:int = 0; //count
        
        public function Game() 
        {
            //wait until accessible to 'stage'
            addEventListener(Event.ADDED_TO_STAGE, onAdd);
        } 
        
        private function onAdd(e:Event):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, onAdd);
            
            sp = new Sprite();
            
            qd = new Quad(stage.stageWidth/3, stage.stageHeight/3);
            qd.setVertexColor(0, 0x000000);
            qd.setVertexColor(1, 0xAA0000);
            qd.setVertexColor(2, 0x00FF00);
            qd.setVertexColor(3, 0x0000FF);
            sp.addChild(qd);
            
            var legend:TextField = new TextField(
                stage.stageWidth / 3 - 5,
                stage.stageHeight / 3 - 5,
                'Hello Starling',
                new TextFormat(
                    'Verdana',
                    20,
                    0xffffff
                )
            );
            sp.addChild(legend);

            //put to screen center
            sp.x = stage.stageWidth / 3 + stage.stageWidth / 6;
            sp.y = stage.stageHeight / 3 + stage.stageHeight / 6;
            sp.pivotX = sp.width / 2;
            sp.pivotY = sp.height / 2;
            addChild(sp);
            sp.addEventListener(EnterFrameEvent.ENTER_FRAME, onFrame);
        }
        
        private function onFrame(e:EnterFrameEvent):void 
        {
            (e.currentTarget as DisplayObject).rotation += 0.01;
        }
    }
}

実Flash。まだ操作不可。

more

GPU使用／不使用とFPSを表示するようにした。 あとantiAliasingをONにしたのだが、stat表示（左上）の文字が欠けるなあ。

Main.as

package
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import starling.core.Starling;
    
    /**
     * ...
     * @author foo
     */
    [SWF(width="320",height="240",frameRate="60",backgroundColor="#002143")]
    public class Main extends Sprite 
    {
        private var st:Starling;
        private static var displayStyle:String = '';
        public static var frameRate:int = 0;

        public function Main() 
        {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onContext3dCreated);

            //st = new Starling(Game, stage, null, null, 'software');
            st = new Starling(Game, stage);
            st.showStats = true;
            st.antiAliasing = 1; //if 2D content, use 1 or 0
            st.start();
        }
        
        private function onContext3dCreated(e:Event):void 
        {
            stage.stage3Ds[0].removeEventListener(Event.CONTEXT3D_CREATE, onContext3dCreated);

            var statGPU:String = '';
            if (Starling.context.driverInfo.toLowerCase().indexOf("software") != -1) {
                statGPU = 'disableGPU';
                Starling.current.nativeStage.frameRate = 30;
            } else {
                statGPU = 'GPU';
            }   
            frameRate = Starling.current.nativeStage.frameRate;
            displayStyle = statGPU + ' ' + frameRate + 'fps';
        }
        
        public static function getDisplayStyle():String
        {
            return displayStyle;
        }
    }
}

Game.as

package 
{
    import starling.display.DisplayObject;
    import starling.display.Quad;
    import starling.display.Sprite;
    import starling.events.EnterFrameEvent;
    import starling.events.Event;
    import starling.text.TextField;
    import starling.text.TextFormat;
    
    /**
     * ...
     * @author foo
     */
    public class Game extends Sprite 
    {
        private var qd:Quad;
        private var sp:Sprite;
        
        public function Game() 
        {
            //able to access to 'stage'
            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        } 
        
        private function onAddedToStage(e:Event):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
            addEventListener(Event.ENTER_FRAME, onGetdisplayStyle);
        }
        
        private function onGetdisplayStyle(e:Event):void 
        {
            if (Main.getDisplayStyle() != '') {
                removeEventListener(Event.ENTER_FRAME, onGetdisplayStyle);
                addItem();
            }
        }
        
        
        private function addItem():void 
        {
            sp = new Sprite();
            
            qd = new Quad(stage.stageWidth/3, stage.stageHeight/3);
            qd.setVertexColor(0, 0x000000);
            qd.setVertexColor(1, 0xAA0000);
            qd.setVertexColor(2, 0x00FF00);
            qd.setVertexColor(3, 0x0000FF);
            sp.addChild(qd);
            
            var legend:TextField = new TextField(
                stage.stageWidth / 3 - 5,
                stage.stageHeight / 3 - 5,
                'Starling ' + Main.getDisplayStyle(),
                new TextFormat(
                    'Verdana',
                    16,
                    0xffffff
                )
            );
            sp.addChild(legend);
            
            sp.x = stage.stageWidth / 3 + stage.stageWidth / 6;
            sp.y = stage.stageHeight / 3 + stage.stageHeight / 6;
            sp.pivotX = sp.width / 2;
            sp.pivotY = sp.height / 2;
            addChild(sp);
            sp.addEventListener(EnterFrameEvent.ENTER_FRAME, onFrame);
        }

        private function onFrame(e:EnterFrameEvent):void 
        {
            var rotate_radian:Number = 0.01;
            if (Main.frameRate <= 30) rotate_radian = 0.02;
            (e.currentTarget as DisplayObject).rotation += rotate_radian;
        }
    }
}

実Flash。まだ操作不可。