feathers:ScreenNavigatorのテスト

2012/10/17

category: Feathers | tag: ActionScript, AIR, FlashBuilder, Starling | no comments

feathersでは画面(メニューやゲーム、オプションなど)をScreenコンポーネントとして扱います。
ScreenNavigatorコンポーネントを使うと、これらの画面を遷移を含めて扱うことができます。

画面を2つ用意して、ScreenNavigatorコンポーネントを使って遷移させてみました。

サンプルコード：

package
{
	import flash.display.Sprite;
	
	import starling.core.Starling;
	
	[SWF(frameRate="60", width="320", height="240", backgroundColor="#f0f0f0")]
	
	public class FeathersScreenNavigator extends Sprite
	{
		private var myStarling:Starling;
		
		public function FeathersScreenNavigator()
		{
			myStarling = new Starling(Main, stage);
			myStarling.start();
		}
	}
}

package

{

import flash.display.Sprite;

import starling.core.Starling;

[SWF(frameRate="60", width="320", height="240", backgroundColor="#f0f0f0")]

public class FeathersScreenNavigator extends Sprite

{

private var myStarling:Starling;

public function FeathersScreenNavigator()

{

myStarling = new Starling(Main, stage);

myStarling.start();

}

package
{
	import flash.display.Bitmap;
	import flash.utils.Dictionary;
	
	import starling.text.BitmapFont;
	import starling.text.TextField;
	import starling.textures.Texture;
	import starling.textures.TextureAtlas;

	public class Assets
	{
		public function Assets()
		{
		}
		
		[Embed(source="../assets/images/sprites2x.png")]
		public static const AppTextureAtlas:Class;
		
		[Embed(source="../assets/images/sprites2x.xml", mimeType="application/octet-stream")]
		public static const AppTextureXML:Class;
		
		private static var appTextureAtlas:TextureAtlas;
		private static var appTextures:Dictionary = new Dictionary();
		
		public static function getTexture(name:String):Texture
		{
			if (appTextures[name] == undefined)
			{
				var bitmap:Bitmap = new Assets[name]();
				appTextures[name] = Texture.fromBitmap(bitmap);
			}
			return appTextures[name];
		}
		
		public static function getAtlas():TextureAtlas
		{
			if (appTextureAtlas == null)
			{
				var texture:Texture = getTexture("AppTextureAtlas");
				var xml:XML = XML(new AppTextureXML());
				appTextureAtlas = new TextureAtlas(texture, xml);
			}
			return appTextureAtlas;
		}
		
		[Embed(source="../assets/images/font.png")]
		public static const FontTexture:Class;
		
		[Embed(source="../assets/images/font.xml", mimeType="application/octet-stream")]
		public static const FontXML:Class;
		
		private static var appFont:BitmapFont;
		
		public static function getFont():BitmapFont
		{
			var fontTexture:Texture = Texture.fromBitmap(new FontTexture());
			var fontXML:XML = XML(new FontXML());
			
			var font:BitmapFont = new BitmapFont(fontTexture, fontXML);
			TextField.registerBitmapFont(font);
			
			return font;
		}
	}
}

package

{

import flash.display.Bitmap;

import flash.utils.Dictionary;

import starling.text.BitmapFont;

import starling.text.TextField;

import starling.textures.Texture;

import starling.textures.TextureAtlas;

public class Assets

{

public function Assets()

{

}

[Embed(source="../assets/images/sprites2x.png")]

public static const AppTextureAtlas:Class;

[Embed(source="../assets/images/sprites2x.xml", mimeType="application/octet-stream")]

public static const AppTextureXML:Class;

private static var appTextureAtlas:TextureAtlas;

private static var appTextures:Dictionary = new Dictionary();

public static function getTexture(name:String):Texture

{

if (appTextures[name] == undefined)

{

var bitmap:Bitmap = new Assets[name]();

appTextures[name] = Texture.fromBitmap(bitmap);

}

return appTextures[name];

}

public static function getAtlas():TextureAtlas

{

if (appTextureAtlas == null)

{

var texture:Texture = getTexture("AppTextureAtlas");

var xml:XML = XML(new AppTextureXML());

appTextureAtlas = new TextureAtlas(texture, xml);

}

return appTextureAtlas;

}

[Embed(source="../assets/images/font.png")]

public static const FontTexture:Class;

[Embed(source="../assets/images/font.xml", mimeType="application/octet-stream")]

public static const FontXML:Class;

private static var appFont:BitmapFont;

public static function getFont():BitmapFont

{

var fontTexture:Texture = Texture.fromBitmap(new FontTexture());

var fontXML:XML = XML(new FontXML());

var font:BitmapFont = new BitmapFont(fontTexture, fontXML);

TextField.registerBitmapFont(font);

return font;

}

package
{
	import com.gskinner.motion.easing.Cubic;
	
	import feathers.controls.ScreenNavigator;
	import feathers.controls.ScreenNavigatorItem;
	import feathers.motion.transitions.ScreenSlidingStackTransitionManager;
	
	import screens.ScreenOne;
	import screens.ScreenTwo;
	
	import starling.display.Sprite;
	import starling.events.Event;
	
	public class Main extends Sprite
	{
		private static const SCREEN_ONE:String = "screenOne";
		private static const SCREEN_TWO:String = "screenTwo";
		
		private var _navigator:ScreenNavigator;
		private var _transitionManager:ScreenSlidingStackTransitionManager;
		
		public function Main()
		{
			this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}
		
		private function onAddedToStage(e:Event):void
		{
			_navigator = new ScreenNavigator();
			this.addChild(_navigator);
			
			_navigator.addScreen(SCREEN_ONE, new ScreenNavigatorItem(ScreenOne,
				{
					onNext: SCREEN_TWO
				}));
			
			_navigator.addScreen(SCREEN_TWO, new ScreenNavigatorItem(ScreenTwo,
				{
					onBack: SCREEN_ONE
				}));
			
			_navigator.showScreen(SCREEN_ONE);
			
			_transitionManager = new ScreenSlidingStackTransitionManager(_navigator);
			_transitionManager.duration = 0.4;
			_transitionManager.ease = Cubic.easeOut;
		}
	}
}

package

{

import com.gskinner.motion.easing.Cubic;

import feathers.controls.ScreenNavigator;

import feathers.controls.ScreenNavigatorItem;

import feathers.motion.transitions.ScreenSlidingStackTransitionManager;

import screens.ScreenOne;

import screens.ScreenTwo;

import starling.display.Sprite;

import starling.events.Event;

public class Main extends Sprite

{

private static const SCREEN_ONE:String = "screenOne";

private static const SCREEN_TWO:String = "screenTwo";

private var _navigator:ScreenNavigator;

private var _transitionManager:ScreenSlidingStackTransitionManager;

public function Main()

{

this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

}

private function onAddedToStage(e:Event):void

{

_navigator = new ScreenNavigator();

this.addChild(_navigator);

_navigator.addScreen(SCREEN_ONE, new ScreenNavigatorItem(ScreenOne,

{

onNext: SCREEN_TWO

}));

_navigator.addScreen(SCREEN_TWO, new ScreenNavigatorItem(ScreenTwo,

{

onBack: SCREEN_ONE

}));

_navigator.showScreen(SCREEN_ONE);

_transitionManager = new ScreenSlidingStackTransitionManager(_navigator);

_transitionManager.duration = 0.4;

_transitionManager.ease = Cubic.easeOut;

}

33-36行目ナビゲータにScreenOneを登録(onNextでScreenTwoへ遷移する)
38-41行目ナビゲータにScreenTwoを登録(onBackでScreenOneへ遷移する)
45-47行目画面トランジション(横にスライドするタイプ)の設定

各画面はScreenコンポーネントを継承したクラスとして作成する。

package screens
{
	import feathers.controls.Button;
	import feathers.controls.Label;
	import feathers.controls.Screen;
	import feathers.display.Image;
	import feathers.text.BitmapFontTextFormat;
	
	import org.osflash.signals.ISignal;
	import org.osflash.signals.Signal;
	
	import starling.textures.TextureSmoothing;
	
	public class ScreenOne extends Screen
	{
		public function ScreenOne()
		{
		}
		
		private var _label:Label;
		private var _button:Button;
		
		private var _onNext:Signal = new Signal(ScreenOne);
		
		public function get onNext():ISignal
		{
			return _onNext;
		}
		
		override protected function initialize():void
		{
			trace("ScreenOne : initialize()");
			
			_label = new Label();
			_label.textRendererProperties.textFormat = new BitmapFontTextFormat(Assets.getFont());
			_label.textRendererProperties.smoothing = TextureSmoothing.NONE;
			_label.textRendererProperties.textFormat.color = 0xff6600;
			_label.textRendererProperties.textFormat.size = 26;
			_label.text = "SCREEN ONE";
			this.addChild(_label);
			
			_button = new Button();
			_button.defaultSkin = new Image(Assets.getAtlas().getTexture("button01.png"));
			_button.downSkin = new Image(Assets.getAtlas().getTexture("button02.png"));
			_button.defaultLabelProperties.textFormat = new BitmapFontTextFormat(Assets.getFont());
			_button.defaultLabelProperties.smoothing = TextureSmoothing.NONE;
			_button.defaultLabelProperties.textFormat.size = 26;
			_button.label = "NEXT";
			_button.onRelease.add(button_onRelease);
			this.addChild(_button);
		}
		
		override protected function draw():void
		{
			_label.validate();
			_label.x = (stage.stageWidth - _label.width) * 0.5;
			_label.y = 50;
			
			_button.validate();
			_button.x = (stage.stageWidth - _button.width) * 0.5;
			_button.y = stage.stageHeight - 100;
		}
		
		private function button_onRelease(button:Button):void
		{
			trace("ScreenOne : button_onRelease");
			
			_onNext.dispatch(this);
		}

	}
}

package screens

{

import feathers.controls.Button;

import feathers.controls.Label;

import feathers.controls.Screen;

import feathers.display.Image;

import feathers.text.BitmapFontTextFormat;

import org.osflash.signals.ISignal;

import org.osflash.signals.Signal;

import starling.textures.TextureSmoothing;

public class ScreenOne extends Screen

{

public function ScreenOne()

{

}

private var _label:Label;

private var _button:Button;

private var _onNext:Signal = new Signal(ScreenOne);

public function get onNext():ISignal

{

return _onNext;

}

override protected function initialize():void

{

trace("ScreenOne : initialize()");

_label = new Label();

_label.textRendererProperties.textFormat = new BitmapFontTextFormat(Assets.getFont());

_label.textRendererProperties.smoothing = TextureSmoothing.NONE;

_label.textRendererProperties.textFormat.color = 0xff6600;

_label.textRendererProperties.textFormat.size = 26;

_label.text = "SCREEN ONE";

this.addChild(_label);

_button = new Button();

_button.defaultSkin = new Image(Assets.getAtlas().getTexture("button01.png"));

_button.downSkin = new Image(Assets.getAtlas().getTexture("button02.png"));

_button.defaultLabelProperties.textFormat = new BitmapFontTextFormat(Assets.getFont());

_button.defaultLabelProperties.smoothing = TextureSmoothing.NONE;

_button.defaultLabelProperties.textFormat.size = 26;

_button.label = "NEXT";

_button.onRelease.add(button_onRelease);

this.addChild(_button);

}

override protected function draw():void

{

_label.validate();

_label.x = (stage.stageWidth - _label.width) * 0.5;

_label.y = 50;

_button.validate();

_button.x = (stage.stageWidth - _button.width) * 0.5;

_button.y = stage.stageHeight - 100;

}

private function button_onRelease(button:Button):void

{

trace("ScreenOne : button_onRelease");

_onNext.dispatch(this);

}

23-28行目イベントをナビゲータが受け取るためのプロパティとgetter
64-69行目ボタンが押された際のイベントハンドラ

package screens
{
	import feathers.controls.Button;
	import feathers.controls.Label;
	import feathers.controls.Screen;
	import feathers.display.Image;
	import feathers.text.BitmapFontTextFormat;
	
	import org.osflash.signals.ISignal;
	import org.osflash.signals.Signal;
	
	import starling.textures.TextureSmoothing;
	
	public class ScreenTwo extends Screen
	{
		public function ScreenTwo()
		{
		}
		
		private var _label:Label;
		private var _button:Button;
		
		private var _onBack:Signal = new Signal(ScreenTwo);
		
		public function get onBack():ISignal
		{
			return _onBack;
		}
		
		override protected function initialize():void
		{
			trace("ScreenTwo : initialize()");
			
			_label = new Label();
			_label.textRendererProperties.textFormat = new BitmapFontTextFormat(Assets.getFont());
			_label.textRendererProperties.smoothing = TextureSmoothing.NONE;
			_label.textRendererProperties.textFormat.color = 0xff6600;
			_label.textRendererProperties.textFormat.size = 26;
			_label.text = "SCREEN TWO";
			this.addChild(_label);
			
			_button = new Button();
			_button.defaultSkin = new Image(Assets.getAtlas().getTexture("button01.png"));
			_button.downSkin = new Image(Assets.getAtlas().getTexture("button02.png"));
			_button.defaultLabelProperties.textFormat = new BitmapFontTextFormat(Assets.getFont());
			_button.defaultLabelProperties.smoothing = TextureSmoothing.NONE;
			_button.defaultLabelProperties.textFormat.size = 26;
			_button.label = "BACK";
			_button.onRelease.add(button_onRelease);
			this.addChild(_button);
		}
		
		override protected function draw():void
		{
			_label.validate();
			_label.x = (stage.stageWidth - _label.width) * 0.5;
			_label.y = 50;
			
			_button.validate();
			_button.x = (stage.stageWidth - _button.width) * 0.5;
			_button.y = stage.stageHeight - 100;
		}
		
		private function button_onRelease(button:Button):void
		{
			trace("ScreenTwo : button_onRelease");
			
			_onBack.dispatch(this);
		}
		
	}
}

package screens

{

import feathers.controls.Button;

import feathers.controls.Label;

import feathers.controls.Screen;

import feathers.display.Image;

import feathers.text.BitmapFontTextFormat;

import org.osflash.signals.ISignal;

import org.osflash.signals.Signal;

import starling.textures.TextureSmoothing;

public class ScreenTwo extends Screen

{

public function ScreenTwo()

{

}

private var _label:Label;

private var _button:Button;

private var _onBack:Signal = new Signal(ScreenTwo);

public function get onBack():ISignal

{

return _onBack;

}

override protected function initialize():void

{

trace("ScreenTwo : initialize()");

_label = new Label();

_label.textRendererProperties.textFormat = new BitmapFontTextFormat(Assets.getFont());

_label.textRendererProperties.smoothing = TextureSmoothing.NONE;

_label.textRendererProperties.textFormat.color = 0xff6600;

_label.textRendererProperties.textFormat.size = 26;

_label.text = "SCREEN TWO";

this.addChild(_label);

_button = new Button();

_button.defaultSkin = new Image(Assets.getAtlas().getTexture("button01.png"));

_button.downSkin = new Image(Assets.getAtlas().getTexture("button02.png"));

_button.defaultLabelProperties.textFormat = new BitmapFontTextFormat(Assets.getFont());

_button.defaultLabelProperties.smoothing = TextureSmoothing.NONE;

_button.defaultLabelProperties.textFormat.size = 26;

_button.label = "BACK";

_button.onRelease.add(button_onRelease);

this.addChild(_button);

}

override protected function draw():void

{

_label.validate();

_label.x = (stage.stageWidth - _label.width) * 0.5;

_label.y = 50;

_button.validate();

_button.x = (stage.stageWidth - _button.width) * 0.5;

_button.y = stage.stageHeight - 100;

}

private function button_onRelease(button:Button):void

{

trace("ScreenTwo : button_onRelease");

_onBack.dispatch(this);

}

※ ScreenOneと同等

実行結果：

This movie requires Flash Player 11

トランジションも含めた画面遷移が簡単に実現できました。自前で実装するのは意外と面倒なので、助かります。
あとは、モーダルダイアログを実現するようなコンポーネントがあれば良いんだけど・・・

Pocket

Check

コメントを残すコメントをキャンセル

コメントを投稿するにはログインしてください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Trackback URL:

devlog [naru design]