Magic&Dungeon リリース

Google Playでシンプルなアクションゲームをリリースしました。

開発環境
Adobe AIR 3.6
Starling Framework 1.3
Feathers 1.0

JS+OpenGL+ネイティブ開発 Herlock

今まではAIRの記事が大半を占めていましたが、今回は他言語の開発環境を
取り上げてみます。

開発言語
JavaScriptを使用してワンソースでAndroid、iOSのネイティブアプリを開発することができるネイティブアプリ向けクロスプラットフォーム開発環境

高速な描画
FlashライクなコードでOpenGLを実装することができます。
通常OpenGLでの開発は複雑ですが、Herlockでは簡単に操作が可能ですので、
高いパフォーマンスを必要とするゲームアプリの開発に適しています。

Webライクな開発
JavaScriptでのワンソース開発が可能。
また、表示の取り回しがFlashの表示リストやHTMLのDOMに似たツリー構造であった
り、APIインターフェイスはAS3の仕様(+HTML5)に似ているためSpriteやStageなどの
おなじみのメソッドやパラメータで制御ができたりと、Web開発に近い感覚でネイティブアプリ開発を行うことができます。

Herlockクローズドベータ版（無料）は2013年8月初旬リリース予定です。
メールアドレスをご登録いただいた方はリリース情報をメールにてお送り致します。
メールアドレス登録ページ(リンク先へ)

個人的に注目しているポイントは、OpenGLを使用できる所です。
AIRではStarling Frameworkのように、簡易的にGPUアクセラレーションが利用できる
のが嬉しい所です。

Nexus7で動作しているサンプル動画もあります(リンク先へ)

ANEのようなネイティブ言語との連携の方法や、デバッグのし安さがどの程度なのか
とても気になっています。８月初旬リリースと言う事なのでとても期待しています。

Flash Pro CCとFlash Builderを連携する

今回はFlash Pro CCとFlash Builderの連携を行い
Starling Frameworkを使用して
Air for iOSのデバッグを行うという記事を書きました。

Flash Pro CCとFlashBuilderを連携する 1
今回の記事の概要とStarlingFrameworkの設定 (リンク先へ)

Flash Pro CCとFlashBuilderを連携する 2
Air for iOSの設定とサンプルソースコードを記載(リンク先へ)

Flash Pro CCとFlashBuilderを連携する 3
iOS端末によるデバッグ (リンク先へ)

Flash Pro CCとFlashBuilderを連携する 3

Flash Pro CCのファイルメニューからAIR 3.6 for iOS 設定を選択します
・レンダリングモード ダイレクト
・解像度 高

一般からデプロイに移ります
iOS証明書とプロビジョニングファイルの設定を行います

これでパブリッシュまでの準備が整いました。

次にiOS端末をUSBケーブルでMacに接続し
実際にデバッグしてみます。
今回のテストはiOS 6.1.2を使用しています

Flash Pro CCのデバッグメニューのムービーをデバッグより
USB 経由でデバイスを選択して、接続した端末を設定します

デバッグメニューのリモートデバッグセッションを開始を選択します

iOS端末にTestiOSのアプリがインストールされるので、アプリを起動します

Flash Builderで設定したブレークポイントはFlash Pro CCに反映されます

Flash Builderで設定したブレークポイント

デバッグ時にはFlash Pro CCの同じ場所で止まります

外部ライブラリファイルもFlash Builderで設定を行えば、Flash Pro CCに反映されます
Starling.as

Flash Pro CCとFlashBuilderを連携する 2

Flash Pro CCを起動し、AIR for iOSを選択します

ActionScript オプションより、クラスエディターをFlash Builderに設定します

Flash Builderで設定したStarling Frameworkをリンクします
Flash Pro CCのファイルメニューのActionScript 設定のソースパスを開きます
+ボタンを押した後、フォルダボタンを押します

Starling Frameworkのソースフォルダを設定します

TestiOSクラスを作成します

TestiOSクラスを作成すると、Flash BuilderがFlash Professional プロジェクトを
作成するダイアログを表示しますので、作成を行います

TestiOSのFlash Professional プロジェクトが作成されました

Flash Builder側からFlashのパブリッシュやデバッグを呼び出す事ができます。

TestiOS.asとMain.asを作成します
TestiOS.as

package
{
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.events.Event;
 import flash.geom.Rectangle;

 import starling.core.Starling;
 import starling.utils.HAlign;
 import starling.utils.RectangleUtil;
 import starling.utils.VAlign;

 [SWF(width="640",height="960",frameRate="60",backgroundColor="#0")]
 public class TestiOS extends Sprite
 {
  public static const STAGE_WIDTH:uint = 640;
  public static const STAGE_HEIGHT:uint = 960;

  private var viewport:Rectangle;

  public function TestiOS()
  {
   super();

   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;

   addEventListener(Event.ADDED_TO_STAGE,addedToStageHandler);
  }

  protected function addedToStageHandler(event:flash.events.Event):void
  {
   removeEventListener(Event.ADDED_TO_STAGE,addedToStageHandler);

   viewport = RectangleUtil.fit(
    new Rectangle(0,0,stage.stageWidth,stage.stageHeight), 
    new Rectangle(0,0,stage.fullScreenWidth,stage.fullScreenHeight),
    starling.utils.ScaleMode.SHOW_ALL);

   Starling.handleLostContext = true;
   Starling.multitouchEnabled = true;

   var st:Starling = new Starling(Main, stage, viewport);
   st.stage.stageWidth  = STAGE_WIDTH;
   st.stage.stageHeight = STAGE_HEIGHT;
   st.start();
   st.showStatsAt(HAlign.RIGHT,VAlign.BOTTOM,1);
  }

 }
}

Main.as

package
{
 import starling.display.Quad;
 import starling.display.Sprite;
 import starling.events.Event;
 import starling.utils.Color;

 public class Main extends Sprite
 {
  public function Main()
  {
   super();
   addEventListener(Event.ADDED_TO_STAGE,addedToStageHandler);
  }

  private function addedToStageHandler(event:Event):void
  {
   removeEventListener(Event.ADDED_TO_STAGE,addedToStageHandler);

   var quad:Quad = new Quad(100,100,Color.BLUE);
   quad.x = (stage.stageWidth >> 1) - (quad.width >> 1);
   quad.y = (stage.stageHeight >> 1) - (quad.height >> 1);
   addChild(quad);
  }
 }
}

Flash Pro CCとFlashBuilderを連携する 1

今回は主にこの３つを行いました。
・Flash Pro CCとFlash Builderを連携します。
・StarlingFrameworkの簡単なサンプルアプリの作成
・Flash Pro CCからブレークポイントを利用したデバッグ

開発環境
Mac OS X 10.7.5
Flash Professional CC Ver 13.0.0.759
Flash Builder 4.6
Adobe AIR 3.6
Starling Framework 1.3















Starling Frameworkを使用しますので
Flash BuilderにFlex ライブラリプロジェクトとして作成します
FlashBuilder-StarlingFrameworkをSWC化 (リンク先へ)

Flash Pro CCを購入する

以下の条件で、購入しました

・Creative Cloud単体サブスクリプション - Flash Professional（年間プラン）
・Vプリカでの購入

注意
残高合算後に発行されるＶプリカはカード情報（カード番号・有効
期限・セキュリティコード）が新しいものとなります。

という事ですので、支払いの更新がうまくいくかわかりません

カード情報の変更は
creative.adobe.com マイアカウントの「支払い情報を変更する」
からカード番号等の変更ができそうなので、次回の支払い時に試してみます。