[Flash] Starling Feathers

[Flash] Starlingの学習 Feathersを学ぶ

環境:

• Starling 2.1
• Feathers 3.2.0
• Adobe AIR SDK 22
• FlashDevelop 5.2
• Windows 7 64bit

Feathersについて学ぶぞ。

Install and HelloWorld

https://feathersui.com/ui-components/ で feathers-ui-3.2.0.zip を取得した。

• feathers-ui-3.2.0\swc\feathers.swc
• feathers-ui-3.2.0\themes\MetalWorksMobileTheme\swc\MetalWorksMobileTheme.swc

を lib/ にcopy。[右クリック→Added To Stage]。

feathers-ui-3.2.0\examples\HelloWorld\source\feathers\examples\helloWorld\Main.as を入力してみる。

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="480",height="480",frameRate="60",backgroundColor="#002143")]
    public class Main extends Sprite 
    {
        private var stln:Starling;
        public static var frameRate:uint = 0;
        
        public function Main() 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onContext3dCreated);
            stln = new Starling(Game, stage);
            stln.showStats = true;
            stln.antiAliasing = 0;
            stln.start();
        }
        
        private function onContext3dCreated(e:Event):void 
        {
            stage.stage3Ds[0].removeEventListener(Event.CONTEXT3D_CREATE, onContext3dCreated);

            if (Starling.context.driverInfo.toLowerCase().indexOf("software") != -1) {
                // GPU disable
                Starling.current.nativeStage.frameRate = 30;
            } else {
                // GPU enable
            }
            frameRate = Starling.current.nativeStage.frameRate;
        }
    }
}

Game.as

package 
{
    import feathers.controls.Button;
    import feathers.controls.TextCallout;
    import feathers.themes.MetalWorksMobileTheme;
    import starling.display.Sprite;
    import starling.events.Event;
    
    /**
     * ...
     * @author foo
     */
    public class Game extends Sprite 
    {
        private var btn:Button;
        
        public function Game() 
        {
            if (stage) init()
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            addEventListener(Event.ENTER_FRAME, onGetGpuStyle);
        }
        
        private function onGetGpuStyle(e:Event):void  
        {
            if (Main.frameRate <= 0) return;
            removeEventListener(Event.ENTER_FRAME, onGetGpuStyle);
            
            addItem();
        }
        
        private function addItem():void 
        {
            new MetalWorksMobileTheme();
            
            btn = new Button();
            btn.label = 'Click Me';
            btn.addEventListener(Event.TRIGGERED, onButtonTriggered);
            addChild(btn);
            btn.validate();
            btn.x = Math.round((stage.stageWidth - btn.width) / 2);
            btn.y = Math.round((stage.stageHeight - btn.height) / 2);
        }
        
        private function onButtonTriggered(e:Event):void 
        {
            TextCallout.show('Feathers now\nYes', btn);
        }
    }
}

btn.validate();のvalidate()というのを実行しないと、座標がずれる。座標指定する前に実行するのがよいようだ。

公式の Components Explorer でUI部品一覧を見ることができる。

そこのNumericStepperとSliderを設置してみた。

Game.as

package 
{
    import feathers.controls.Button;
    import feathers.controls.NumericStepper;
    import feathers.controls.Slider;
    import feathers.controls.TextCallout;
    import feathers.themes.MetalWorksMobileTheme;
    import starling.display.Sprite;
    import starling.events.Event;
    import starling.text.TextField;
    import starling.text.TextFormat;
    
    /**
     * ...
     * @author foo
     */
    public class Game extends Sprite 
    {
        private var btn:Button;
        private var stp:NumericStepper;
        private var sld:Slider;
        private var stplabel:TextField;
        private var sldlabel:TextField;
        
        public function Game() 
        {
            if (stage) init()
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            addEventListener(Event.ENTER_FRAME, onGetGpuStyle);
        }
        
        private function onGetGpuStyle(e:Event):void  
        {
            if (Main.frameRate <= 0) return;
            removeEventListener(Event.ENTER_FRAME, onGetGpuStyle);
            
            addItem();
        }
        
        private function addItem():void 
        {
            new MetalWorksMobileTheme();
            //new MinimalMobileTheme();
            
            btn = new Button();
            btn.label = 'Click Me';
            btn.addEventListener(Event.TRIGGERED, onButtonTriggered);
            addChild(btn);
            btn.validate();
            btn.x = Math.round((stage.stageWidth - btn.width) / 2);
            btn.y = Math.round((stage.stageHeight - btn.height) / 4 * 1);
            
            stp = new NumericStepper();
            stp.minimum = 0.0;
            stp.maximum = 1.0;
            stp.step = 0.1;
            stp.value = 0.3;
            stp.addEventListener(Event.CHANGE, onStepperChanged);
            addChild(stp);
            stp.validate();
            stp.x = Math.round((stage.stageWidth - stp.width) / 2);
            stp.y = Math.round((stage.stageHeight - stp.height) / 4 * 2);
            stplabel = new TextField(32, 32, stp.value.toString(), new TextFormat('Arial', 16, 0xFFFFFF));
            stplabel.x = stp.x;
            stplabel.y = stp.y + 32;
            addChild(stplabel);
            
            sld = new Slider();
            sld.minimum = 0.0;
            sld.maximum = 1.0;
            sld.step = 0.1;
            sld.value = 0.3;
            sld.addEventListener(Event.CHANGE, onSliderChanged);
            sld.validate();
            addChild(sld);
            sld.x = Math.round((stage.stageWidth - sld.width) / 2);
            sld.y = Math.round((stage.stageHeight - sld.height) / 4 * 3);
            sldlabel = new TextField(64, 64, getsldvalue(sld.value), new TextFormat('Arial', 16, 0xFFFFFF));
            sldlabel.x = sld.x;
            sldlabel.y = sld.y + 32;
            addChild(sldlabel);
        }
        
        private function getsldvalue(arg:Number):String
        {
            var a:Number = Math.round(arg * 10.0);
            var b:Number = Math.round(10 - a);
            var a2:String = a == 0 ? "0" : (a / 10).toString().substr(0, 3);
            var b2:String = b == 0 ? "0" : (b / 10).toString().substr(0, 3);
            trace('arg=' + arg + ', a=' + a + ', b=' + b + ', a2=' + a2 + ', b2=' + b2);
            return "A:" + a2 + "\nB:" + b2
        }
        
        private function onSliderChanged(e:Event):void 
        {
            sldlabel.text = getsldvalue(sld.value);
        }
        
        private function onStepperChanged(e:Event):void 
        {
            stplabel.text = stp.value.toString();
        }
        
        private function onButtonTriggered(e:Event):void 
        {
            var cot:TextCallout = TextCallout.show('Feathers now\nYes', btn);
            cot.fontStyles = new TextFormat('Arial', 24, 0xf8f8f8);
            addChild(cot);
        }
    }
}

各種UserInterfaceをラクに作ることができるのか。

swfは787KBになったので掲載はやめておく。2つもライブラリー（Starling, Feathers）を使うと、ファイル容量も大きくなるものだな。