Search
Ad
|
新規
下位
一覧
検索
最新
ヘルプ
ページへ戻る
編集
複製
履歴
添付
印刷
StarlingでHello World
をテンプレートにして作成
xpwiki
:StarlingでHello World をテンプレートにして作成
開始行:
#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でのモバイルアプリ開発]]に戻る
ページ名:
ぺージ情報
ぺージ名 :
StarlingでHello World
ページ別名 :
未設定
ページ作成 :
njf
閲覧可
グループ :
すべての訪問者
ユーザー :
すべての訪問者
編集可
グループ :
すべての訪問者
ユーザー :
すべての訪問者
Counter: 0, today: 0, yesterday: 0
MenuBar
20
最新の0件
広告
ログイン
ユーザー名:
パスワード:
パスワード紛失
新規
下位
一覧
検索
最新
ヘルプ
ページへ戻る
編集
複製
履歴
添付
印刷
