Flash(AIR)を使ってiPhone/Androidアプリを作ろう!
何故AIRなのか?	
  
Unity,Cocos-­‐2dxと比べたメリット・デメリット	
■メリット	
  
	
  ・既存の開発環境Flash	
  ProfessionalやFlash	
  BuilderにAIR	
  SDKを導入す...
更に比較・・・	
項目	
 Unity	
 Cocos2d-­‐x	
 AIR	
価格	
 162,000円〜	
 無料(Mit)	
  
GUIアニメーション
ツールSpineが$60〜	
月々2,180円〜(Flash単
品での使用の場合)...
開発環境構築(Flash	
  Professional)	
1.  Flash	
  CCまたはFlash	
  CS	
  6をインストール	
  
2.  最新SDKを落とす(最新SDKでなくていいならダウンロード
の必要はありません	
...
Flash	
  Professional→ヘルプ→Adobe	
  AIR	
  SDK
を管理でパスを追加
Flash	
  Professional→ファイル→新規	
  
パブリッシュ→AIR	
  SDKのバージョン選択
開発を進めていく上でのノウハウ	
•  FlashのADTデバッガーでCommand	
  +	
  
Enter(Windowsの場合はctrl	
  +	
  Enter)で直ぐに
デバッグビルド	
  
– Cocos2d-­‐xだと実機...
•  シミュレーターの機能が豊富!	
  
–  加速度センサー	
  
–  タッチとジェスチャー	
  
–  ジオロケーション	
  
(ここでサンプルアプリを使ってレク
チャー、実機でも動作を見る)	
  
サンプルのダウンロードは以下...
•  Flash	
  ProfessionalとFlash	
  Builderの連携	
  
– Flash	
  Professionalでアニメータが作成したアニ
メーションをプログラマが使うFlash	
  Builderに簡単
に持...
•  Flash	
  ProfessionalとFlash	
  Builderの連携	
  
– Flash	
  Builder側	
  
•  Flash	
  Professional側で指定されているドキュメントクラ
スにFlash...
•  Flash	
  ProfessionalとFlash	
  Builderの連携	
  
– アニメーション部分はアニメーターやデザイナが
Flash	
  Professionalで担当	
  
– ロジック部分やサーバとの繋ぎこみは...
ここからはちょっとBadなノウハウ	
  
(つまづく前に・・・)	
•  iOS関連	
  
– iOSのシミュレータへの転送が出来るとされている
が2014/06/30現在最新のSDKでは出来ない(Air	
  
SDK4の頃から出来ない、...
•  TextField	
  
– 以下のようなビューは実装出来ない	
  
– ダミーの入力部分をタップ→実際の入力が表示さ
れ入力出来る形のTextField	
  
実装は出来るが実際入力出来るテキストフィールドに対して	
  
foc...
ANE(Air	
  NaYve	
  Extension)とは	
•  Flashだけでは実現出来ないネイティブとの繋
ぎこみをするライブラリ	
  
•  課金、GCM(Push	
  NoYficaYon)など	
  
•  h[p://w...
ANEを使う際のTIPS	
•  条件付きコンパイル定数	
  
– Android用にGCMのANE導入したけど、iOSビルド
したらエラーで落ちる	
  
– ソースコードは基本的に同じものを使いたい	
  
•  ビルドを分けて条件付きコ...
プロパティからスパナマーク→定数を追加	
  
この場合Android用とし、	
  
DEFINE::IOS	
  
DEFINE::ANDROID	
  
にそれぞれ値を設定	
  
ASに	
  
config	
  namespace	
...
CreaYve	
  Cloudのお陰で初期費用	
  
安いしちょっとやってみませんか!	
  
参考URLなど	
•  Adobe	
  AIR	
  
–  h[p://get.adobe.com/jp/air/	
  
•  Unity	
  
–  h[p://japan.unity3d.com/	
  
•  Cocos2d-­‐...
Adobe AIR + Flash
Builder でスマホゲーム制作
株式会社 Aiming エンジニア 廣岡聡之
開発環境
• Mac OSX (Windows でもできる)
• Flash Builder
• Adobe AIR
Flash Builder を起動
メニューからプロジェクトを
作成
ウィザードリー形式に従って
プロジェクト設定
1 2
必要なファイルが自動生成
とりあえずデバッグ実行してみる
空っぽのアプリ完成
この画像を表示してみる
アセットファイルを所定の場
所に配置
コードを書く
表示できた
Android 実機も簡単
実機上でもデバッガが動く
ここまでできれば

あとはゲームを作るだけ
スプライトを追加
• クラス内で画像を読み込み
!
!
!
• 描画したい場所でそのスプライトを addChild
!
!
!
logo_aiming.png
スプライトに動きを追加
• 毎フレームランダムな方向に移動
タップすると消えるように
• クリックイベントで自分自身を removeChild
いっぱい生成
• AimingLogo クラスを20個生成して addChild
少し整理して完成!
Unity,Cocos-2dx,AIRを徹底比較!最新クロスプラットフォーム事情、FLASHを使ってiPhone/Androidアプリを作ろう!【とのさまラボ】
Unity,Cocos-2dx,AIRを徹底比較!最新クロスプラットフォーム事情、FLASHを使ってiPhone/Androidアプリを作ろう!【とのさまラボ】
Upcoming SlideShare
Loading in …5
×

Unity,Cocos-2dx,AIRを徹底比較!最新クロスプラットフォーム事情、FLASHを使ってiPhone/Androidアプリを作ろう!【とのさまラボ】

4,364 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
http://schoo.jp/class/942/room

ーーーーーーーーーーーーーーーーーーーーーーー

Published in: Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,364
On SlideShare
0
From Embeds
0
Number of Embeds
194
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Unity,Cocos-2dx,AIRを徹底比較!最新クロスプラットフォーム事情、FLASHを使ってiPhone/Androidアプリを作ろう!【とのさまラボ】

  1. 1. Flash(AIR)を使ってiPhone/Androidアプリを作ろう!
  2. 2. 何故AIRなのか?   Unity,Cocos-­‐2dxと比べたメリット・デメリット ■メリット    ・既存の開発環境Flash  ProfessionalやFlash  BuilderにAIR  SDKを導入するだけでアプリを  作れる    ・デザイナやアニメータだけでもアプリを完成させやすい(仕様による部分もある)    ・Flashの長い歴史で培われた様々なライブラリを使うことが出来る(備考参照)    ・デザイナ(アニメータ)とスクリプタの分業がしやすい    ・モーショントゥイーンのアニメーションってやりやすいよね!   ■デメリット    ・UnityのAsset  Storeのようなものが無いため最適化された素材を購入することが出来ない    ・昔Apple社と色々あったためiOSのアプリは作れないと思われていることが多い為、選択  肢として外されている    ・開発する際に使う言語AS3が難しいと思われている    ・Unityから比較すると対応プラットフォームは少ない(主にコンシューマ機部分)  
  3. 3. 更に比較・・・ 項目 Unity Cocos2d-­‐x AIR 価格 162,000円〜 無料(Mit)   GUIアニメーション ツールSpineが$60〜 月々2,180円〜(Flash単 品での使用の場合) 対応OS iOS,Android,Windows,OS   X,Linux,ブラウザ,Flash   Player,PS3,Xbox360,Wii   U iOS,Android,Windows ,Marmalade,Linux,Bla ckBerry  10 iOS,Android,Windows,O S  X,ブラウザ 描画 主に3D(2Dも可) 2D 主に2D(3Dも可) 言語 C#(Javascript) C++(Lua) AS3(C++) \既にAdobe  CreaYve  Cloudを使っている場合、導入にかかる金額はありません!/
  4. 4. 開発環境構築(Flash  Professional) 1.  Flash  CCまたはFlash  CS  6をインストール   2.  最新SDKを落とす(最新SDKでなくていいならダウンロード の必要はありません  h[p://www.adobe.com/devnet/air/ air-­‐sdk-­‐download.html  )   3.  適切なディレクトリに配置(  Macなら”/ApplicaYons/Adobe   Flash  CC”にAIR14.0というディレクトリ名にして配置)   4.  Flash  Professionalを起動   5.  AIR  SDKのパスを通す(次スライド画像参照)   6.  AIRアプリケーションを作ってみる(次スライド画像参照)  
  5. 5. Flash  Professional→ヘルプ→Adobe  AIR  SDK を管理でパスを追加
  6. 6. Flash  Professional→ファイル→新規   パブリッシュ→AIR  SDKのバージョン選択
  7. 7. 開発を進めていく上でのノウハウ •  FlashのADTデバッガーでCommand  +   Enter(Windowsの場合はctrl  +  Enter)で直ぐに デバッグビルド   – Cocos2d-­‐xだと実機へデバッグビルドまたはiOSシ ミュレータでビルド→時間がかかる・・・!     \何度も繰り返す作業なので素早く確認出来るのは大切!/  
  8. 8. •  シミュレーターの機能が豊富!   –  加速度センサー   –  タッチとジェスチャー   –  ジオロケーション   (ここでサンプルアプリを使ってレク チャー、実機でも動作を見る)   サンプルのダウンロードは以下より   h[ps://github.com/ken-­‐b4u/ schoo_sample/archive/master.zip    
  9. 9. •  Flash  ProfessionalとFlash  Builderの連携   – Flash  Professionalでアニメータが作成したアニ メーションをプログラマが使うFlash  Builderに簡単 に持っていけます   – Flash  Professional側   •  モーショントゥイーンでアニメーションを作成する   •  ライブラリ→該当のムービークリップを右クリック →AcYonScript用に書き出し、1フレーム目に書き出しに チェック→名前、クラス、基本クラス(サンプルでは flash.display.MovieClipとします)に入力(次スライド画像 参照)  
  10. 10. •  Flash  ProfessionalとFlash  Builderの連携   – Flash  Builder側   •  Flash  Professional側で指定されているドキュメントクラ スにFlash  Professional側で設定されているクラスのイ ンスタンスを作りaddChildする(サンプルを使ってのレク チャー)  
  11. 11. •  Flash  ProfessionalとFlash  Builderの連携   – アニメーション部分はアニメーターやデザイナが Flash  Professionalで担当   – ロジック部分やサーバとの繋ぎこみはFlash   Builderでプログラマが担当   \分業がしやすい!/   (SWCを使えばもっと分業出来るけど今回は省略します)
  12. 12. ここからはちょっとBadなノウハウ   (つまづく前に・・・) •  iOS関連   – iOSのシミュレータへの転送が出来るとされている が2014/06/30現在最新のSDKでは出来ない(Air   SDK4の頃から出来ない、エラーで止まる)   – iOS実機への転送はプロビジョニングプロファイル と紐付いたp12ファイルが必須   – ReYna  Displayへの対応の為、画材のサイズは2 倍に(他の環境でも同じです)
  13. 13. •  TextField   – 以下のようなビューは実装出来ない   – ダミーの入力部分をタップ→実際の入力が表示さ れ入力出来る形のTextField   実装は出来るが実際入力出来るテキストフィールドに対して   focus  =  textField   としてもデフォルトのフォーカスをあててくれないのでユーザーに優しくない GeNERACE GeNERACE
  14. 14. ANE(Air  NaYve  Extension)とは •  Flashだけでは実現出来ないネイティブとの繋 ぎこみをするライブラリ   •  課金、GCM(Push  NoYficaYon)など   •  h[p://www.adobe.com/devnet/air/naYve-­‐ extensions-­‐for-­‐air.html   •  自分で作成することも出来る、公開されてい るライブラリを使うことも出来る
  15. 15. ANEを使う際のTIPS •  条件付きコンパイル定数   – Android用にGCMのANE導入したけど、iOSビルド したらエラーで落ちる   – ソースコードは基本的に同じものを使いたい   •  ビルドを分けて条件付きコンパイル定数を使う(次スラ イド画像参照)  
  16. 16. プロパティからスパナマーク→定数を追加   この場合Android用とし、   DEFINE::IOS   DEFINE::ANDROID   にそれぞれ値を設定   ASに   config  namespace  DEFINE;   以降iOSとAndroidでビルドの動作を分けたい 場合   DEFINE::ANDROIDやDEFINE::IOSをAS内に記 述することでビルド時の動作を分離出来ます。  
  17. 17. CreaYve  Cloudのお陰で初期費用   安いしちょっとやってみませんか!  
  18. 18. 参考URLなど •  Adobe  AIR   –  h[p://get.adobe.com/jp/air/   •  Unity   –  h[p://japan.unity3d.com/   •  Cocos2d-­‐x   –  h[p://www.cocos2d-­‐x.org/   –  Spine   •  h[p://ja.esotericsolware.com/   –  Marmalade  SDK   •  h[ps://www.madewithmarmalade.com/products/marmalade-­‐sdk   •  資料内のソース   –  h[ps://github.com/ken-­‐b4u/schoo_sample   •  Kentarou  Muramatsu   –  Facebook   •  h[ps://www.facebook.com/kentarou.muramatsu   –  Twi[er   •  h[ps://twi[er.com/ken_b4u    
  19. 19. Adobe AIR + Flash Builder でスマホゲーム制作 株式会社 Aiming エンジニア 廣岡聡之
  20. 20. 開発環境 • Mac OSX (Windows でもできる) • Flash Builder • Adobe AIR
  21. 21. Flash Builder を起動
  22. 22. メニューからプロジェクトを 作成
  23. 23. ウィザードリー形式に従って プロジェクト設定 1 2
  24. 24. 必要なファイルが自動生成
  25. 25. とりあえずデバッグ実行してみる
  26. 26. 空っぽのアプリ完成
  27. 27. この画像を表示してみる
  28. 28. アセットファイルを所定の場 所に配置
  29. 29. コードを書く
  30. 30. 表示できた
  31. 31. Android 実機も簡単
  32. 32. 実機上でもデバッガが動く
  33. 33. ここまでできれば
 あとはゲームを作るだけ
  34. 34. スプライトを追加 • クラス内で画像を読み込み ! ! ! • 描画したい場所でそのスプライトを addChild ! ! ! logo_aiming.png
  35. 35. スプライトに動きを追加 • 毎フレームランダムな方向に移動
  36. 36. タップすると消えるように • クリックイベントで自分自身を removeChild
  37. 37. いっぱい生成 • AimingLogo クラスを20個生成して addChild
  38. 38. 少し整理して完成!

×