ラベル Android の投稿を表示しています。 すべての投稿を表示
ラベル Android の投稿を表示しています。 すべての投稿を表示

2014年8月7日木曜日

Adobe AIR 15 Beta スプライトパフォーマンス検証

Adobe LabsでAIR15Betaが公開されました。
(リンク先へ)

1年程前に150個のスプライトアニメーションをNexus7(2012)で
表示するテストを行いました。


fpsは43程度でていました。

AIR15Beta + TEGRANOTE 7 + StarlingFramework 1.5.1を使用して同じ条件で
表示するテストを行いました。

fpsは60ほぼをキープしていました。ハードウェア性能の進化とAIRの進化には
まだまだ期待できると思います。

AIR15ではOpenGL ES3.0に対応するという事でさらに高速なグラフィックを表現する事にも期待できます。

追記

iPodTouch(第5世代) iOS7で上記と同じ条件で動作させてみました。
fpsは30を下回りました。モードはipa-app-store(アプリをリリースする状態)で
パッケージを行っています。






2014年3月16日日曜日

Tegra Note7の動作パフォーマンス

Zotac Tegra Note7でアプリのパフォーマンス調査として、動画を作成しました。
この端末は2013年12月頃発売したAndroidタブレットで、Tegra 4プロセッサを
搭載しています。

パズ億 〜世界一周編〜
Adobe AIRで開発されているという事で、動作を試してみました。
とても動作が軽く、完成度の高いアプリです。
アプリの開発を行ったICS社の記事 (リンク先へ)


WebGL Aquarium
ブラウザのWebGLを利用したデモで、魚の数が500匹で30fps程度出ていました。
今後のWebGLを利用したブラウザアプリも期待ができます。



Magic&Dungeon
私が個人でリリースしたAdobe AIRのアクションゲームです。
このゲームの開発を行った頃は、Nexus7(2012)等で動作テストをしていました。
その頃よりも動作パフォーマンスは上がったと思います。

2014年1月8日水曜日

Adobe AIR 4.0とGAF Converter

Flash PlayerとAIR「Irving」および「Jones」
2つの次期バージョンのリリースをそれぞれ2013年後半と2014年前半に
予定しています。

Flashランタイムのロードマップ (リンク先へ)

主な機能
  • デスクトップFlash PlayerおよびAIRのOSX Mavericksのサポート
  • iOSのパッケージ時間の大幅な削減
  • モバイルでのActionScriptの同時使用(ベータ版)
  • iOS 7のサポート(Appleのスケジュールによる)
  • Windows 8.1 PlayToのサポート
  • Windows 8.1のタブの扱いの改良
  • Windows Internet Explorer 11のバックナビゲーションキャッシュのサポート
  • AIR AndroidでのXXHDPIアイコンのサポート
  • Mac OS Xにpkgインストーラーをバンドル(現在は.dmg)
  • Android 4.4 (KitKat)への対応

この中でも特に注目しているのは
  • iOSのパッケージ時間の大幅な削減
です。現在、iOSでビルドを行うと早くても数十秒かかります。
企業でリリースするようなボリュームのあるアプリを作成した場合は、数分という単位に
なってしまう可能性があります。これは、開発作業の中で大きなボトルネックになるでしょう。


もう1つ注目している技術で、GAF Converterというものがあります。
これは、FlashアニメーションをStarling Frameworkで利用できるという事で
ソーシャルゲームの演出を作成する時に効果を発揮すると思います。
gafmedia.com (リンク先へ)

最近ではFlash/AIRの最新情報が少ない事や、企業でFlash/AIRを採用する事が少なくなってしまった為、私自身も距離を置いていますが、2014年以降もFlash/AIR共にアップデートを続けていきます。

Flash/AIRでの開発案件のご相談をお受け致します。
Twitterアカウント (リンク先へ)
E-Mail連絡先 (リンク先へ)

2013年6月29日土曜日

Magic&Dungeon リリース

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

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

Get it on Google Play

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用の素材

Starling ATFファイルの使用

SpriteSheetをATF形式で試してみました。
詳しくはATF SDKの公開(リンク先へ)をご覧下さい。

利点

  • テクスチャの保持に必要なメモリ料が少ない
  • テクスチャのアップロードが短時間で済む
  • 描画が早くなる
  • という事ですが、Starling1.3で試した結果以下のようになりました。

    Sprite Animation Sample

    150個のスプライトをアニメーションさせながら、移動をさせています。
    pngスプライトデータ 約43fps
    atfフォーマット 約35fps

    Starlingコンテンツの描画領域とassetsの管理 まとめ

    1.Starlingコンテンツの描画領域とassetsの管理(リンク先へ)

    2.Starlingコンテンツの描画領域とassetsの管理 実装編(リンク先へ)

    3.Starlingコンテンツの描画領域とassetsの管理 解説(リンク先へ)

    Starlingコンテンツの描画領域とassetsの管理 解説編

    描画領域の処理
    ScreenMultiResolution.as
    var showType:int = 0;
    
    if(showType == 0)
    {
    showAll();
    } else if(showType == 1) {
    showCenter();
    } else {
    return;
    }
    
    変数showTypeの0で画面全体を表示し、1で画面の中央に表示に切り替えます。
    ScreenMultiResolution.as
      private function showCenter():void
      {
       viewport = RectangleUtil.fit(
        new Rectangle(0, 0, stage.stageWidth,stage.stageHeight), 
        new Rectangle((stage.stageWidth >> 1) - (STAGE_WIDTH >> 1),
        (stage.stageHeight >> 1) - (STAGE_HEIGHT >> 1),
        STAGE_WIDTH,
        STAGE_HEIGHT),
        starling.utils.ScaleMode.SHOW_ALL);
      }
    
      private function showAll():void
      {
       viewport = RectangleUtil.fit(
        new Rectangle(0,0,stage.stageWidth,stage.stageHeight), 
        new Rectangle(0,0,stage.fullScreenWidth,stage.fullScreenHeight),
        starling.utils.ScaleMode.SHOW_ALL);
      }
    
    RectangleUtil.fit()メソッドは、第1引数の矩形領域を第2引数の矩形領域に、縦横比は変えずに納めるためのRectangleオブジェクトを返します。
    第3引数には、ScaleModeクラスの定数で伸縮モードが渡せます。 

    詳しくは
    Starlingフレームワーク1.3の新しい機能(リンク先へ)
    Multi-Resolution Development(リンク先へ)
    をご覧下さい。

    assetsの管理
    Main.as
      private function addAssets(data:Object):void
      {
       var sheetPngName:String = "sheetPng";
       var sheetXmlName:String = "sheetXml";
       var scaleFactorName:String = "scaleFactor";
       var contentScaleFactor:int;
       var sScale:String;
    
       if(Starling.contentScaleFactor >= 1 && Starling.contentScaleFactor < 3)
       {
        contentScaleFactor = int(Starling.contentScaleFactor);
        sScale = "x"+contentScaleFactor.toString();
    
        assetManager = new AssetManager(contentScaleFactor);
        assetManager.verbose = true;
        assetManager.enqueue(data[sScale][sheetPngName]);
        assetManager.enqueue(data[sScale][sheetXmlName]);
        assetManager.loadQueue(loadAssetsHandler);
       }
      }
    
      private function loadAssetsHandler(ratio:Number):void
      {
       if(ratio < 1.0) return;
    
       addTextures();
      }
    

    addAssetsメソッドでは、Starling.contentScaleFactorからテクスチャのスケール係数を取得します。 スケール係数に適したSpriteSheetを用意し、jsonファイルで管理するという仕組みになります。
    SpriteSheetファイルが決定した所で、次にAssetManagerクラスを利用し指定した読み込み処理を行なっています。 読み込みが完了(1.0)になるまで、loadAssetsHandlerを繰り返しコールされます。

    Starlingコンテンツの描画領域とassetsの管理 実装編


    spriteSheetは各自で用意をして下さい。
    このサンプルでは、TexturePackerを利用して作成しました。

    ScreenMultiResolution.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.RectangleUtil;
     import starling.utils.ScaleMode;
    
     [SWF(width="320",height="480",frameRate="60",backgroundColor="#0")]
     public class ScreenMultiResolution extends Sprite
     {
      public static const STAGE_WIDTH:uint = 320;
      public static const STAGE_HEIGHT:uint = 480;
    
      private var viewport:Rectangle;
    
      public function ScreenMultiResolution()
      {
       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);
    
       var showType:int = 0;
    
       if(showType == 0)
       {
        showAll();
       } else if(showType == 1) {
        showCenter();
       } else {
        return;
       }
    
       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();
      }
    
      private function showCenter():void
      {
       viewport = RectangleUtil.fit(
        new Rectangle(0, 0, stage.stageWidth,stage.stageHeight), 
        new Rectangle((stage.stageWidth >> 1) - (STAGE_WIDTH >> 1),
        (stage.stageHeight >> 1) - (STAGE_HEIGHT >> 1),
        STAGE_WIDTH,
        STAGE_HEIGHT),
        starling.utils.ScaleMode.SHOW_ALL);
      }
    
      private function showAll():void
      {
       viewport = RectangleUtil.fit(
        new Rectangle(0,0,stage.stageWidth,stage.stageHeight), 
        new Rectangle(0,0,stage.fullScreenWidth,stage.fullScreenHeight),
        starling.utils.ScaleMode.SHOW_ALL);
      }
    
     }
    }
    
    Main.as
    package
    {
     import flash.events.Event;
     import flash.net.URLLoader;
     import flash.net.URLRequest;
    
     import starling.core.Starling;
     import starling.display.Image;
     import starling.display.Quad;
     import starling.display.Sprite;
     import starling.events.Event;
     import starling.text.TextField;
     import starling.textures.Texture;
     import starling.utils.AssetManager;
    
     public class Main extends Sprite
     {
      private var assetManager:AssetManager;
    
      public function Main()
      {
       super();
    
       addEventListener(starling.events.Event.ADDED_TO_STAGE,addedToStageHandler);
      }
    
      private function addedToStageHandler(event:starling.events.Event):void
      {
       var urlLoader:URLLoader = new URLLoader();
    
       urlLoader.addEventListener(flash.events.Event.COMPLETE,urlLoaderCompleteHandler);
       urlLoader.load(new URLRequest("./assets/setting.json"));
      }
    
      protected function urlLoaderCompleteHandler(event:flash.events.Event):void
      {
       var urlLoader:URLLoader = event.target as URLLoader;
    
       urlLoader.removeEventListener(flash.events.Event.COMPLETE,urlLoaderCompleteHandler);
       addAssets(JSON.parse(urlLoader.data as String));
      }
    
      private function addAssets(data:Object):void
      {
       var sheetPngName:String = "sheetPng";
       var sheetXmlName:String = "sheetXml";
       var scaleFactorName:String = "scaleFactor";
       var contentScaleFactor:int;
       var sScale:String;
    
       if(Starling.contentScaleFactor >= 1 && Starling.contentScaleFactor < 3)
       {
        contentScaleFactor = int(Starling.contentScaleFactor);
        sScale = "x"+contentScaleFactor.toString();
    
        assetManager = new AssetManager(contentScaleFactor);
        assetManager.verbose = true;
        assetManager.enqueue(data[sScale][sheetPngName]);
        assetManager.enqueue(data[sScale][sheetXmlName]);
        assetManager.loadQueue(loadAssetsHandler);
       }
      }
    
      private function loadAssetsHandler(ratio:Number):void
      {
       if(ratio < 1.0) return;
    
       addTextures();
      }
    
      private function addTextures():void
      {
       var scaleFactor:Number = Starling.current.contentScaleFactor;
       var quadW:Number = 100;
       var quadH:Number = 100;
    
       var bg:Quad = makeQuad(0,0,stage.stageWidth,stage.stageHeight,0x0000ff);
       bg.alpha = 0.5;
       addChild(bg);
    
       var luQuad:Quad = makeQuad(0,0,100,100,Math.random() * 0xffffff);
       addChild(luQuad);
    
       var ldQuad:Quad = makeQuad(0,stage.stageHeight - quadH,100,100,Math.random() * 0xffffff);
       addChild(ldQuad);
    
       var ruQuad:Quad = makeQuad(stage.stageWidth - quadW,0,100,100,Math.random() * 0xffffff);
       addChild(ruQuad);
    
       var rdQuad:Quad = makeQuad(stage.stageWidth - quadW,stage.stageHeight - quadH,
        100,100,Math.random() * 0xffffff);
       addChild(rdQuad);
    
       var texture:Texture = assetManager.getTexture("bird");
    
       var image:Image = new Image( texture );
       addChild(image);
       image.x = 0;
       image.y = 0;
    
       var image2:Image = new Image( texture );
       addChild(image2);
       image2.x = stage.stageWidth - image.width;
       image2.y = (stage.stageHeight) - (image.height);
    
       var image3:Image = new Image( texture );
       addChild(image3);
       image3.x = (stage.stageWidth >> 1) - (image.width >> 1);
       image3.y = (stage.stageHeight >> 1) - (image.height >> 1);
      }
    
      private function makeQuad(_x:Number,_y:Number,_w:Number,_h:Number,_color:Number):Quad
      {
       var quad:Quad = new Quad(_w,_h,_color);
       quad.x = _x;
       quad.y = _y;
    
       return quad;
      }
    
     }
    }
    
    setting.json
    {"x1":{"sheetPng":"./assets/spriteSheet.png","sheetXml":"./assets/spriteSheet.xml"},"x2":{"sheetPng":"./assets/spriteSheet2x.png","sheetXml":"./assets/spriteSheet2x.xml"}}
    


    Starlingコンテンツの描画領域とassetsの管理

    iPodTouchとNexus7の2機種を利用して、コンテンツの描画領域の処理を行います。

    画面解像度に差のある2機種で、縦480x横320を基準にして表示をしました。
    Nexus7右側の画像では縦480x横320の大きさにした状態で
    画面の中央に配置しました。
    この処理は、RectangleUtil.fitというメソッドを利用する事で実現が可能です。

    今回はこの描画領域の処理とAssetManagerクラスを利用したアセットの管理方法を
    紹介します。
    この方法は、Starling Framework 1.3からの機能になります。

    実行結果


    Nexus7で表示した結果


    iPodTouchで表示した結果

    開発環境
    FlashBuilder 4.6
    Starling Framework 1.3
    Nexus7実機
    iPodTouch実機

    2013年2月5日火曜日

    AIR3.5 Feathers UISample

    Feathersを利用したUIのサンプル動画を作成しました。
    端末はNexus7のバージョン4.2.1です。

    2013年1月26日土曜日

    Adobe Scoutの使用

    Tipsを紹介します

    Adobe Scoutの画面内の各項目の詳細は
    Adobe Scout ファーストステップガイドに記載してあります。(リンク先へ)

    フレームタイムラインの始点1フレームと終点5フレームに合わせて
    5フレーム分の計測結果を右側の「概要」に表示しています

    フレームタイムラインをアクティブにした後、カーソルキーの左右キーで
    タイムラインの1フレームずつ計測結果を見る事ができます

    モバイル版Adobe Scoutの導入

    モバイルからプロファイルする場合、以下の方法になります
    各モバイルOS毎に用意されているScoutコンパニオンアプリケーションを
    インストールしてデスクトップPCでプロファイルを行う

    Adobe Scout Companion app for iOS(リンク先へ)
    Adobe Scout Companion app for Android(リンク先へ)
    Adobe Scout Companion app for Kindle(リンク先へ)

    AndroidにScout コンパニオンアプリケーションを入れる

    プロファイルを行うまでの手順
    ・Scout を実行しているコンピュータと同じ Wi-Fi ネットワークにデバイスが接続されていることを確認してから、Scout コンパニオンアプリケーションを起動します。
    ・「有効」をタップします。
    ・Scout を実行しているコンピュータの検索が実行され、すべての Scout インスタンスのリストが表示されます。
    ・コンピュータの名前が表示されたら、それをクリックして接続します。
    ・AIR3.4以降でビルドを行ったモバイルコンテンツを起動すると、Scoutに新しいセッションが表示されます。

    2012年8月14日火曜日

    AIR3.3とStarlingFrameworkでUIControls2

    UIControlのAndroid版を作成しました。
    端末は、GalaxyNexusでバージョンは4(ICS)です。

    2012年7月31日火曜日

    AIR3.3とStarlingFrameworkでViewChanger 2


    AIR3.3とStarlingFrameworkを利用したビュー切り替え機能の GalaxyNexus版です。
    フレームレートは50fps以上出ています。