NJF Wiki - xpwiki 編集 : [StarlingでHello World の編集]

StarlingでHello World の編集

詳細な入力項目を表示

ページタイトル( 空白で自動設定 ):
ページ並び順( 0-9 小数可標準:1 ):
ページ別名(複数は[改行]で区切る):

ページ内容:

#contents

ここではFlash ProfessionalとFlashDevelopを使ってStarlingで「Hello World!」を表示する方法を紹介する。

*プロジェクトの作成 [#d61ab299]

まずFlash Professionalで通常のプロジェクトを作成する。ここでは「helloWorld.fla」という名前にしている。

&ref(helloWorldPublishSetting.png,mw:480,mh:360);

テスト時はPC上でプレビューするので、最初はターゲットをFlash Playerにしておく。

また、ハードウエアアクセラレーションは「レベル1 - ダイレクト」にしておく。そうしないとOpenGLによる描画が行われない。この例では触れないが、Airの設定にもレンダリングモードの指定があるので、もしモバイルで実行するならそちらの設定も変更する必要がある。

次にhelloWorld.flaファイルと同じ階層に「swc」と「src」フォルダを作成する。フォルダ構成は「Hello World」を表示するだけなら単純なので必要ない。しかしStarlingを使う場合は、最低限starlingのswcが必要で、さらにfeatherやタイムラインアニメーションが使えない代わりにtweenのライブラリを使うことも多いので、swcやソースファイルは必然的に多くなる。今後のためにフォルダを作っておいた方が便利である。

swcフォルダの中にはStarlingのページからダウンロードしてきたStarling.swcを入れておく。
[[http://gamua.com/starling/:http://gamua.com/starling/]]

次にFlashDevelopで先ほどのHelloWorld.flaファイルの場所を指定したFlash IDE Projectを作成する。

そして「Project」の「Properties」から「Classpaths」に「src」を追加する。

&ref(helloWorldFlahDevelopSrc.png,mw:480,mh:360);

また同じく「Compiler Options」の「SWC Libraries」に「swc/starling.swc」を追加する。これでstarling.swcに含まれる定義などが補完されるようになる。

&ref(helloWorldFlashDevelopSWC.png,mw:480,mh:360);

&ref(helloWorldFlashDevelopSwcDetail.png,mw:480,mh:360);

FlashDevelopでsrc以下にドキュメントクラスとなるクラスを作成する。たとえば「jp.njf.HelloWorld」などである。内容はこれから作るのでまずはMovieClipを継承しておくだけで良い。

package jp.njf 
 {
 	import flash.display.MovieClip;
 	
 	/**
 	 * ...
 	 * @author 
 	 */
 	public class HelloWorld extends MovieClip 
 	{
 		public function HelloWorld() 
 		{
 			super();
 		}
 		
 	}
 
 }
この時点でファイル構成は以下のようになる。

&ref(helloWorldDocClass.png,mw:480,mh:360);

Flash Professionalに戻って、「ActionScript3設定」でドキュメントクラスとソースパスを指定する。

&ref(helloWorldSrc_0.png,mw:480,mh:360);

次にswcのフォルダを指定する

&ref(helloWorldSwc.png,mw:480,mh:360);

これでひとまず実行可能となったので、あとはソースを作成していくだけである。

*Starlingの初期化 [#z907abd4]

ドキュメントクラスとなっているHelloWorldクラスに処理を書いていけば良いのだが、ここでStarlingの命名ルールに注意が必要である。

基本的にStarlingはAS3の命名ルールを踏襲しており、同じクラス名が多く存在する。たとえば「Sprite」「MovieClip」「Event」などはStarlingとAS3両方に存在している。すると、両方のクラスを使うときには、後から定義する変数などにはパッケージ名を含む完全なクラス名が必要となる。

var flashSp:Sprite; //FlashのSprite
 var starlingSp:starling.display.Sprite;//StarlingのSprite

名前が同じなのは新しい名前を覚えなくて良い上に、AS3の名前からの連想でおおまかな機能が予想できるので良いのだが、上のように書くのは面倒である。よって、Starlingをよく使うクラスとFlashのクラスをよく使うクラスは分けた方が楽である。

ドキュメントクラスHelloWorldではすでにflash.display.MovieClipを使っている。よってここではStarlingWrapperと言う名前でStarlingを初期化する別クラスを用意する。Starlingの初期化にはFlashのStageオブジェクトが必要なので、StarlingWrapperはコンストラクタにStageを引数に持ち、ドキュメントクラスのStageオブジェクトが利用可能になってから初期化する必要がある。

package jp.njf 
 {
 	import flash.display.MovieClip;
 	import flash.events.Event;
 	
 	/**
 	 * ...
 	 * @author 
 	 */
 	public class HelloWorld extends MovieClip 
 	{
 		private var starlingWrapper:StarlingWrapper;
 		public function HelloWorld() 
 		{
 			super();
 			if (stage) {
 				onAddToStageHandler();
 			}else {
 				addEventListener(Event.ADDED_TO_STAGE, onAddToStageHandler);
 			}
 		}
 		
 		private function onAddToStageHandler(e:Event=null):void 
 		{
 			removeEventListener(Event.ADDED_TO_STAGE, onAddToStageHandler);
 			starlingWrapper = new StarlingWrapper(stage);
 		}
 		
 	}
 
 }

HelloWorldはもう編集する必要は無い。あとはStarlingWrapperクラスを編集していく。

Starlingの初期化だが、

_mStarling = new Starling(Sprite, stage, viewPort);

という風に行う。ここで第一引数は後で_mStarling.rootで取得する描画オブジェクトのルートの型である。基本的に（starlingの）Spriteにしておけば間違いない。

第二引数はFlashのStageオブジェクトで、先ほどStarlingWrapperのコンストラクタ引数で与えた物である。

viewPortは描画領域を指定するためのRectangleオブジェクトである。

Starlingはモバイルなど、解像度や縦横比の異なるデバイスでの実行をサポートしているので、デザインしたサイズと実際に描画されるサイズをうまく調整してくれる機能が用意されている。

ここでは実際の開発で一番使うであろう、「縦横比を保ったまま画面最大に引き延ばし、センタリングして余白を残す」という設定の方法を紹介する。

var viewPort:Rectangle;
 viewPort = RectangleUtil.fit(
 	new Rectangle(0, 0, STAGE_WIDTH, STAGE_HEIGHT),
 	new Rectangle(0, 0, stage.stageWidth, stage.stageHeight),
 	ScaleMode.SHOW_ALL);
 	
 _mStarling = new Starling(Sprite, stage, viewPort);
 _mStarling.stage.stageWidth = STAGE_WIDTH;
 _mStarling.stage.stageHeight = STAGE_HEIGHT;

ここでSTAGE_WIDTH、STAGE_HEIGHTはアプリをデザインしたときのサイズである。

RectangleUtilはStarlingで用意されているユーティリティクラスで、fitメソッドを使うと、指定の領域をRectangleクラスで返してくれる。

上記の場合はScaleMode.SHOW_ALLを指定することにより、「STAGE_WIDTH, STAGE_HEIGHTの領域を縦横比を保ったままstage.stageWidth, stage.stageHeightまで拡大してセンタリングしたRectangle」が返る。ScaleModeの値を変えればほかの表示方法も選択できるがここでは省略する。

ここでパソコン上での実行させるため、
 stage.stageWidth
 stage.stageHeight
を利用したが、モバイルデバイス上でフルスクリーンモードを使うときはこれを
 stage.fullScreenWidth
 stage.fullScreenHeight
にした方が良い。モバイルかどうかを判定する方法は[[コードでデバイスの判定]]を参照のこと。

最後の
 _mStarling.stage.stageWidth = STAGE_WIDTH;
 _mStarling.stage.stageHeight = STAGE_HEIGHT;
部分はStarlingに元のサイズを教えている。これでStarlingは自動で座標をリサイズしてくれるので、人間がデバイスによる座標変換について考える必要はない。

&ref(helloWorldStageSize.png,mw:480,mh:360);

これを確認する簡単な方法は、Flash Professionalでステージのサイズを適当に変えてみれば分かる。だが、この段階ではまだなにも表示されていないので最後に確認する。

これで画面サイズの初期化は完了したので、実際にStarlingを実行させる。OpenGLの初期化は非同期で行われるので、イベントで初期化完了を取得する。

_mStarling.start();
 _mStarling.addEventListener(Event.ROOT_CREATED, onRootCreated);

そしてようやくHelloWorldを表示する処理となる。

private function onRootCreated(e:Event):void 
 {
 	if (isHardWareAccelationEnabled()) {
 		trace("Hardware!");
 	}else {
 		trace("Software!");
 	}
 	var tf:TextField = new TextField(300, 50, "Hello World","_sans",32,0);
 	var baseSprite:Sprite = mStarling.root as Sprite;
 	
 	baseSprite.addChild(tf);
 	
 }

ここでisHardWareAccelationEnabledは以下のような関数で、OpenGLが使われている描画のときはtrueを返す。

private function isHardWareAccelationEnabled():Boolean{
 	if (Starling.context == null) {
 		return false;
 	}
 	return Starling.context.driverInfo.toLocaleLowerCase().indexOf("software") == -1;
 }

これは最初のうちは入れておいた方が良い。見た目では描画モードがソフトウエアかOpenGLかは分からないので、設定をミスしてOpenGLが呼ばれていないことに気づかない可能性があるからである。

また、サポートされていない端末を見分けてユーザーに警告を表示することも出来る。

Starlingの方でも
 [Starling] Display Driver: DirectX9 (Baseline Constrained)
などとどのディスプレイドライバーを使っているかをtraceで表示してくれるので、もしそれが
 Display Driver: Software Hw_disabled=unavailable (Embedded)
などとなっていたらソフトウエアモードであることが分かる。

そして注意点として、''Flash Professionalのプレビュー(Ctrl+Enter)はソフトウエアモードとなるので、OpenGLは使われない。必ずデバック実行(Ctrl+Shift+Enter)でプレビューする必要がある。''これでしばらく時間を無駄にしたことがある。

それでもソフトウエアモードならパブリッシュ設定のハードウエアアクセラレーションが間違っている可能性がある。

tfはStarlingのTextFieldで、詳しくは[[StarlingのTextField]]を参照のこと。基本的にはFlashのものと同じである。

これで画面上に「Hello World」と表示されるはずである。

&ref(helloWorldResult.png,mw:480,mh:360);

Viewportの設定をしたおかげで、Flash Professionalでステージのサイズを変更しても予想されたように表示される。

&ref(helloWorldResultResize.png,mw:480,mh:360);

縦のサイズに合わせて縮小された上にセンタリングされている。

*クラスファイル [#vf1c278d]

最後に使用したクラスファイルを添付する

-&ref(StarlingWrapper.as);
-&ref(HelloWorld.as);

[[Starlingでのモバイルアプリ開発]]に戻る

編集の要約:

Q & A 認証: ページ更新時は次の質問にお答えください。(プレビュー時は必要ありません)
Q: 日本の首都は？(漢字で)
A:

お名前: タイムスタンプを変更しない

テキスト整形のルールを表示する

添付ファイル:

helloWorldStageSize.png 136件 [詳細]

helloWorldResultResize.png 140件 [詳細]

StarlingWrapper.as 859件 [詳細]

HelloWorld.as 856件 [詳細]

helloWorldResult.png 140件 [詳細]

helloWorldSwc.png 127件 [詳細]

helloWorldSrc.png 78件 [詳細]

helloWorldSrc.png 129件 [詳細]

helloWorldDocClass.png 132件 [詳細]

helloWorldFlashDevelopSwcDetail.png 125件 [詳細]

helloWorldFlashDevelopSWC.png 134件 [詳細]

helloWorldFlahDevelopSrc.png 126件 [詳細]

helloWorldPublishSetting.png 132件 [詳細]

ぺージ情報
ぺージ名 :	StarlingでHello World
ページ別名 :	未設定
ページ作成 :	njf
閲覧可
グループ :	すべての訪問者
ユーザー :	すべての訪問者
編集可
グループ :	すべての訪問者
ユーザー :	すべての訪問者

Counter: 2848, today: 1, yesterday: 2

StarlingでHello World の編集

StarlingでHello World の編集

20 最新の0件