StarlingでHello World をテンプレートにして作成 :: NJF Wiki

開始行:
#contents ここではFlash ProfessionalとFlashDevelopを使ってStarling... *プロジェクトの作成 まずFlash Professionalで通常のプロジェクトを作成する。こ... &ref(helloWorldPublishSetting.png,mw:480,mh:360); テスト時はPC上でプレビューするので、最初はターゲットをFla... また、ハードウエアアクセラレーションは「レベル1 - ダイレ... 次にhelloWorld.flaファイルと同じ階層に「swc」と「src」フ... swcフォルダの中にはStarlingのページからダウンロードしてき... [[http://gamua.com/starling/:http://gamua.com/starling/]] 次にFlashDevelopで先ほどのHelloWorld.flaファイルの場所を... そして「Project」の「Properties」から「Classpaths」に「sr... &ref(helloWorldFlahDevelopSrc.png,mw:480,mh:360); また同じく「Compiler Options」の「SWC Libraries」に「swc/... &ref(helloWorldFlashDevelopSWC.png,mw:480,mh:360); &ref(helloWorldFlashDevelopSwcDetail.png,mw:480,mh:360); FlashDevelopでsrc以下にドキュメントクラスとなるクラスを作... 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の初期化 ドキュメントクラスとなっているHelloWorldクラスに処理を書... 基本的にStarlingはAS3の命名ルールを踏襲しており、同じクラ... var flashSp:Sprite; //FlashのSprite var starlingSp:starling.display.Sprite;//StarlingのSprite 名前が同じなのは新しい名前を覚えなくて良い上に、AS3の名前... ドキュメントクラスHelloWorldではすでにflash.display.Movie... 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, onAddToStageH... } } private function onAddToStageHandler(e:Event=null):void { removeEventListener(Event.ADDED_TO_STAGE, onAddToStag... starlingWrapper = new StarlingWrapper(stage); } } } HelloWorldはもう編集する必要は無い。あとはStarlingWrapper... Starlingの初期化だが、 _mStarling = new Starling(Sprite, stage, viewPort); という風に行う。ここで第一引数は後で_mStarling.rootで取得... 第二引数はFlashのStageオブジェクトで、先ほどStarlingWrapp... 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で用意されているユーティリティクラ... 上記の場合はScaleMode.SHOW_ALLを指定することにより、「STA... ここでパソコン上での実行させるため、 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を... _mStarling.start(); _mStarling.addEventListener(Event.ROOT_CREATED, onRootCr... そしてようやくHelloWorldを表示する処理となる。 private function onRootCreated(e:Event):void { if (isHardWareAccelationEnabled()) { trace("Hardware!"); }else { trace("Software!"); } var tf:TextField = new TextField(300, 50, "Hello World"... var baseSprite:Sprite = mStarling.root as Sprite; baseSprite.addChild(tf); } ここでisHardWareAccelationEnabledは以下のような関数で、Op... private function isHardWareAccelationEnabled():Boolean{ if (Starling.context == null) { return false; } return Starling.context.driverInfo.toLocaleLowerCase().... } これは最初のうちは入れておいた方が良い。見た目では描画モ... また、サポートされていない端末を見分けてユーザーに警告を... Starlingの方でも [Starling] Display Driver: DirectX9 (Baseline Constrained) などとどのディスプレイドライバーを使っているかをtraceで表... Display Driver: Software Hw_disabled=unavailable (Embedd... などとなっていたらソフトウエアモードであることが分かる。 そして注意点として、''Flash Professionalのプレビュー(Ctrl... それでもソフトウエアモードならパブリッシュ設定のハードウ... tfはStarlingのTextFieldで、詳しくは[[StarlingのTextField]... これで画面上に「Hello World」と表示されるはずである。 &ref(helloWorldResult.png,mw:480,mh:360); Viewportの設定をしたおかげで、Flash Professionalでステー... &ref(helloWorldResultResize.png,mw:480,mh:360); 縦のサイズに合わせて縮小された上にセンタリングされている。 *クラスファイル 最後に使用したクラスファイルを添付する -&ref(StarlingWrapper.as); -&ref(HelloWorld.as); [[Starlingでのモバイルアプリ開発]]に戻る

終了行:
#contents ここではFlash ProfessionalとFlashDevelopを使ってStarling... *プロジェクトの作成 まずFlash Professionalで通常のプロジェクトを作成する。こ... &ref(helloWorldPublishSetting.png,mw:480,mh:360); テスト時はPC上でプレビューするので、最初はターゲットをFla... また、ハードウエアアクセラレーションは「レベル1 - ダイレ... 次にhelloWorld.flaファイルと同じ階層に「swc」と「src」フ... swcフォルダの中にはStarlingのページからダウンロードしてき... [[http://gamua.com/starling/:http://gamua.com/starling/]] 次にFlashDevelopで先ほどのHelloWorld.flaファイルの場所を... そして「Project」の「Properties」から「Classpaths」に「sr... &ref(helloWorldFlahDevelopSrc.png,mw:480,mh:360); また同じく「Compiler Options」の「SWC Libraries」に「swc/... &ref(helloWorldFlashDevelopSWC.png,mw:480,mh:360); &ref(helloWorldFlashDevelopSwcDetail.png,mw:480,mh:360); FlashDevelopでsrc以下にドキュメントクラスとなるクラスを作... 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の初期化 ドキュメントクラスとなっているHelloWorldクラスに処理を書... 基本的にStarlingはAS3の命名ルールを踏襲しており、同じクラ... var flashSp:Sprite; //FlashのSprite var starlingSp:starling.display.Sprite;//StarlingのSprite 名前が同じなのは新しい名前を覚えなくて良い上に、AS3の名前... ドキュメントクラスHelloWorldではすでにflash.display.Movie... 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, onAddToStageH... } } private function onAddToStageHandler(e:Event=null):void { removeEventListener(Event.ADDED_TO_STAGE, onAddToStag... starlingWrapper = new StarlingWrapper(stage); } } } HelloWorldはもう編集する必要は無い。あとはStarlingWrapper... Starlingの初期化だが、 _mStarling = new Starling(Sprite, stage, viewPort); という風に行う。ここで第一引数は後で_mStarling.rootで取得... 第二引数はFlashのStageオブジェクトで、先ほどStarlingWrapp... 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で用意されているユーティリティクラ... 上記の場合はScaleMode.SHOW_ALLを指定することにより、「STA... ここでパソコン上での実行させるため、 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を... _mStarling.start(); _mStarling.addEventListener(Event.ROOT_CREATED, onRootCr... そしてようやくHelloWorldを表示する処理となる。 private function onRootCreated(e:Event):void { if (isHardWareAccelationEnabled()) { trace("Hardware!"); }else { trace("Software!"); } var tf:TextField = new TextField(300, 50, "Hello World"... var baseSprite:Sprite = mStarling.root as Sprite; baseSprite.addChild(tf); } ここでisHardWareAccelationEnabledは以下のような関数で、Op... private function isHardWareAccelationEnabled():Boolean{ if (Starling.context == null) { return false; } return Starling.context.driverInfo.toLocaleLowerCase().... } これは最初のうちは入れておいた方が良い。見た目では描画モ... また、サポートされていない端末を見分けてユーザーに警告を... Starlingの方でも [Starling] Display Driver: DirectX9 (Baseline Constrained) などとどのディスプレイドライバーを使っているかをtraceで表... Display Driver: Software Hw_disabled=unavailable (Embedd... などとなっていたらソフトウエアモードであることが分かる。 そして注意点として、''Flash Professionalのプレビュー(Ctrl... それでもソフトウエアモードならパブリッシュ設定のハードウ... tfはStarlingのTextFieldで、詳しくは[[StarlingのTextField]... これで画面上に「Hello World」と表示されるはずである。 &ref(helloWorldResult.png,mw:480,mh:360); Viewportの設定をしたおかげで、Flash Professionalでステー... &ref(helloWorldResultResize.png,mw:480,mh:360); 縦のサイズに合わせて縮小された上にセンタリングされている。 *クラスファイル 最後に使用したクラスファイルを添付する -&ref(StarlingWrapper.as); -&ref(HelloWorld.as); [[Starlingでのモバイルアプリ開発]]に戻る

ページ名: