Ad

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

プロジェクトの作成 anchor.png Edit

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

helloWorldPublishSetting.png

テスト時は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/

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

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

helloWorldFlahDevelopSrc.png

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

helloWorldFlashDevelopSWC.png

helloWorldFlashDevelopSwcDetail.png

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

package jp.njf 
{
	import flash.display.MovieClip;
	
	/**
	 * ...
	 * @author 
	 */
	public class HelloWorld extends MovieClip 
	{
		public function HelloWorld() 
		{
			super();
		}
		
	}

}

この時点でファイル構成は以下のようになる。

helloWorldDocClass.png

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

helloWorldSrc.png

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

helloWorldSwc.png

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

Page Top

Starlingの初期化 anchor.png Edit

ドキュメントクラスとなっている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は自動で座標をリサイズしてくれるので、人間がデバイスによる座標変換について考える必要はない。

helloWorldStageSize.png

これを確認する簡単な方法は、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」と表示されるはずである。

helloWorldResult.png

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

helloWorldResultResize.png

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

Page Top

クラスファイル anchor.png Edit

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

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


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 2694, today: 1, yesterday: 0
初版日時: 2015-06-08 (月) 06:18:59
最終更新: 2016-02-07 (日) 07:06:02 (JST) (2962d) by njf
MenuBar
広告

ログイン

ユーザー名:


パスワード:





パスワード紛失

Portuguese | English | German | Greek | Japanese | Korean | Russian | T-Chinese top
NJF