ページへ戻る
− Links
印刷
StarlingでHello World
の編集 ::
NJF Wiki
xpwiki
:
StarlingでHello World
の編集
# z907abd4 の編集
ページ内容:
*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); 縦のサイズに合わせて縮小された上にセンタリングされている。
編集の要約:
Q & A 認証:
ページ更新時は次の質問にお答えください。(プレビュー時は必要ありません)
Q:
「大阪」の読みがな?(ひらがなで)
A:
お名前:
タイムスタンプを変更しない
テキスト整形のルールを表示する
[1]
Links list
(This host) = https://njf.jp
(This host)
/cms/modules/xpwiki/?cmd=edit&help=true&page=Starling%E3%81%A7Hello%20World