2013年7月24日水曜日

DragonBones アニメーションデータを利用する

FlashBuilderを利用してソースコード上からDragonBonesのデータを利用します。
ライブラリプロジェクトファイルの作成

プロジェクトファイル内にサンプルコードを入れる

DragonBonesライブラリプロジェクトの作成と、サンプルを試す為のプロジェクトファイルを作成します。

ライブラリは、DragonBones2.2SkeletonAnimationLibraryから
サンプルプロジェクトは、DragonBones_Tutorial_AssetsCodeより取り込みました。


サンプルプロジェクトのビルドに成功すると、歩行しながらアニメーションしたり、ジャンプするドラゴンの操作ができます。


テクスチャの切り替え
次にドラゴンの着ている服任意の操作やタイミング切り替えると言う処理を行なってみます。

サンプルDragonBones_Tutorial_ChangeClothes.flaより、服がレイヤーに追加されています。
変更したい服をライブラリ内のpartsclothes1からclothes4まで追加します。

では、DBStarlingClothes.asから実際に切り替え処理を行う方法を見てましょう。

private var textures:Array = ["parts/clothes1","parts/clothes2","parts/clothes3","parts/clothes4"];
ライブラリの階層と同じように、clothesの配列を作成します。
var _textureName:String = textures[textureIndex];
var _image:Image = factory.getTextureDisplay(_textureName) as Image; 
StarlingFactoryクラスgetTextureDisplayを利用する事で指定のテクスチャを取得します。

var _texture:Texture = assetManager.getTexture("clothes"+(textureIndex+1).toString());
var _image:Image = new Image( _texture );
また、flaファイルを利用せず外部テクスチャを利用する方法としてAssetManagerからTextureを利用する事が可能です。

DragonBones サンプルを使ってみる

DragonBones 2.2のファイルにあるDragonBones_Tutorial_Assets/DragonBones_tutorial_Start.flaを使ってみます。

ライブラリ 

タイムライン 

シーンに配置されたドラゴン

DragonBonesのアニメーションデータを構成する上で大事な2つの用語があります。

アーマチュア(Armature)
上記サンプルではDragonになります。
アーマチュアは、スケルトンの管理とアニメーションを担当します。

ボーン(Bone)
上記サンプルではDragonarmLlegL等の各パーツになります。
ボーンはソースコード内でも制御(回転処理やその他色々)ができるようになっています。

では、このデータを実際にImportしてみます。


ウィンドウメニューのエクステンションよりDragonBonesDesignPanelを選択します。

DragonBonesDesignPanel
DragonBonesDesignPanel起動後、ImportよりAll Library Itemsという選択状態になっている事を確認して、OKボタンを押します。

ライブラリ内にあるアニメーションデータがDragonBonesのフォーマットとして作成されます。この中でアニメーションのタイミング調整や、データのエクスポートを行います。

Behavior Listの<<をクリックすると、上記のような設定が行えます。

Total Times:アニメーション運動の終了時間

Blending Times:アニメーションから別のアニメーションに移行する時の時間(ここはよく解っていませんので、間違っているかもしれません)

Keyframe Ease:モーション内のキーフレーム間のEase値

Loop:アニメーションのループ


エクスポート
データのエクスポートでは、Zip(XML and PNG)形式の他に、PNGメタデータ内にアニメーションデータを含める事で、使用するソースコード内でPNGファイル1つを読み込むだけでアニメーションを利用するといった事もできます。

DragonBones 概要とインストール

DragonBonesはFlash Professional(CS6以降)を利用したアニメーションツールです。StarlingFrameworkとも連携ができます。


今回は以下の条件で試してみました。
Adobe Flash Pro CC (リンク先へ)
Adobe Extension Manager CC (リンク先へ)
Adobe FlashBuilder 4.6
DragonBones 2.2 (リンク先へ)


作業は大きく2つに分けると、アニメーションデータ作成ソースコード組み込みがあります。

アニメーションデータ作成
Flash Proffesional(CS6以降)で行う作業
1.タイムラインでアニメーションを作成
2.DragonBonesDesignPanelに作成したアニメーションをImportする
3.DragonBonesDesignPanelでアニメーションの調整を行う
4.DragonBonesDesignPanelExportからデータを書き出す

ソースコード組み込み作業
1.書きだしたアニメーションデータインポートして使用する

DragonBonesを使用する方法ですが、DragonBones 2.2ダウンロードファイル内にあるDragonBonesDesignPanel.zxpAdobe Extension Manager CC経由FlashProCCにインストールする事で使用が可能になります。

Adobe Extension Manager CCを利用して、DragonBonesDesignPanelをインストール


2013年7月11日木曜日

ApplicationVerificationFailed エラーについて

FlashProCCを利用してairForiOSのパブリッシュを行う時に
こういうエラーが出る時があります

Installation Error: ApplicationVerificationFailed.

このエラーはiOS デジタル署名を付けた時に証明書のファイルやアプリケーションIDに
ミスがある場合に表示されます。このエラーの説明だけだとわかりにくい気がします


確認1:iOS Provisioning ProfilesのApp ID:の項目がAIR for iOS設定のアプリケーションIDと同じかチェックする。

確認2:キーチェーンアクセスのiPhone Developerから書き出した証明書である事。
また、書き出し時のパスワードとiOS証明書のパスワードが間違っていないかチェック
する。

こちらも合わせてお読み下さい

Installation Error: ApplicationVerificationFailed
(リンク先へ)

2013年6月29日土曜日

Magic&Dungeon リリース

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

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

Get it on Google Play

2013年6月19日水曜日

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

2013年6月18日火曜日

Flash Pro CCとFlash Builderを連携する

今回はFlash Pro CCFlash 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 BuilderFlash Professional プロジェクト
作成するダイアログを表示しますので、作成を行います

TestiOSFlash Professional プロジェクトが作成されました

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

TestiOS.asMain.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

今回は主にこの3つを行いました。
・Flash Pro CCFlash 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プリカでの購入

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

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

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

2013年5月9日木曜日

AdobeMAX 2013 Flash Professional CCについて

AdobeMax2013で発表のあったFlash Professional CCについて
まとめました。

2013年6月18日から提供開始予定
年間プランでは月々¥2,200
起動時間が今までの10倍パブリッシュ時間が6倍ファイル保存7倍

製品の詳細はこちら(リンク先へ)

今後の機能として
・新規ドキュメントにHTML5 Canvasを追加
JavaScript エディタ
パブリッシュ設定に「JavaScript/HTML」や「WebGL」を追加
が予定されているようです。

詳しくは、下記のtogetterでまとめられています。
Adobe MAX 2013 - What's New and Upcoming in Flash Professional
togetter (リンク先へ)

Adobe AIR SDK 3.8Flash Player SDK 11.8ともにBeta版が公開されました。
Flash Player SDK 11.8Beta (リンク先へ)
Adobe AIR SDK 3.8Beta (リンク先へ)

Adobe Scout CC の新機能
Youtube 動画 (リンク先へ)

FlashBuilderについて

Flash BuilderはCCへ移行していないようです。
最新情報を知っている方がいましたら、是非教えて下さい。
補足:FlashBuilderはCCへ2013年5月時点で移行していないようです。
こちらでCC対象の製品の確認ができます。(リンク先へ)

私個人としては、FlashProCCのエディタ機能、ソースコード管理がどの程度できるか
検証しながら、場合によってはFlashProCCへ開発環境を移す事も検討しています。

2013年3月29日金曜日

Feathers PopUpManager サンプル

PopUpManagerクラスのAPIDocumentは(リンク先へ)

実用例の動画です。

PopUpManagerはFlexにもありましたが、使用方法もほぼ一緒です。

PopUpManagerクラスを利用してみます。

PopupWindowコンポーネント

使用クラス
  protected var theme:MetalWorksMobileTheme;
  private var popUpWindow:PopUpWindow;

  private function doPopUpWindow():void
  {
   this.theme = new MetalWorksMobileTheme(this.stage);

   popUpWindow = new PopUpWindow();
   popUpWindow.addEventListener(PopUpWindow.WINDOW_CLOSE,popUpWindowCloseHandler);
   popUpWindow.width = 320;
   popUpWindow.height = 240;

   PopUpManager.addPopUp(popUpWindow);
  }

  private function popUpWindowCloseHandler(event:Event):void
  {
   PopUpManager.removePopUp(popUpWindow);
   popUpWindow.dispose();
  }

PopUpWindow.as
package controls
{
 import feathers.controls.Button;
 import feathers.core.FeathersControl;
 import feathers.display.Scale9Image;
 import feathers.textures.Scale9Textures;

 import flash.geom.Rectangle;

 import starling.animation.Transitions;
 import starling.core.Starling;
 import starling.events.Event;
 import starling.textures.Texture;

 public class PopUpWindow extends FeathersControl
 {
  [Embed(source="./assets/scale9.png")]
  private static const SCALE_9_TEXTURE:Class;

  public static const WINDOW_CLOSE:String = "windowClose";

  public function PopUpWindow()
  {
   super();
  }

  private var okButton:Button;
  private var bg:Scale9Image;

  override protected function initialize():void
  {
   var texture:Texture = Texture.fromBitmap(new SCALE_9_TEXTURE(), false);
   var textures:Scale9Textures = new Scale9Textures(texture,new Rectangle(20, 20, 20, 20));

   bg = new Scale9Image(textures, 1);
   bg.width = width;
   bg.height = height;
   bg.x = bg.pivotX = width >> 1;
   bg.y = bg.pivotY = height >> 1;
   addChild(bg);

   okButton = new Button();
   okButton.label = "Ok";
   okButton.width = 100;
   okButton.height = 48
   addChild(okButton);
   okButton.x = (bg.width >> 1) - (okButton.width >> 1);
   okButton.y = (bg.height >> 1) - (okButton.height >> 1);
   okButton.addEventListener(Event.TRIGGERED, button_triggeredHandler);

   Starling.juggler.tween(bg, 1,
    {
     transition: Transitions.EASE_OUT_BOUNCE,
     onStart:tweenStartHandler,
     onComplete:tweenCompleteHandler,
     scaleX: 1,
     scaleY: 1
    });
  }

  private function button_triggeredHandler(event:Event):void
  {
   dispatchEventWith(WINDOW_CLOSE);            
  }

  private function tweenStartHandler():void
  {
   okButton.visible = false;
   bg.scaleX = 0;
   bg.scaleY = 0;
  }

  private function tweenCompleteHandler():void
  {
   okButton.visible = true;
  }

  override public function dispose():void
  {
   bg.dispose();
   okButton.dispose();
   removeChildren();

   super.dispose();
  }

 }
}
Windowで使用する9Scale用の素材