Adobe AIR で作る カジュアルゲーム開発
- 2. はじめに ● 開発プラットフォーム ● なぜ AIR を使用するの？そもそも AIR って？ ● アニメーションの作り方 ● デザインとアニメーションデータの取り込み ● プログラムからのアニメーション操作 2
- 3. 開発プラットフォーム ● 開発プラットフォーム「Adobe AIR」と「Unity」 ● 2D のゲームは AIR、3D のものは Unity といった使い分け → 今回は「AIR」について触れていきます。 3 AIR 製 Unity 製 ドッキリ神回避3 海底ペンギン鉄道
- 4. なぜ AIR を使用するの？そもそも AIR って？ 「Flash」ってご存じですか？ 4 突然ですが…
- 5. なぜ AIR を使用するの？そもそも AIR って？ ○「Adobe Flash」とは… アニメーション作成や動画再生に関する技術、およびソフトウェアのこと。 かつては Windows やガラケーなどの様々な環境に「Flash Player」が 入っていて、Flash で作られた動画やアニメーションの再生、ゲームの プレイができた。 5
- 6. なぜ AIR を使用するの？そもそも AIR って？ ○「Adobe Flash」とは… YouTube やニコニコ動画が流行る前に、Flash によって作られた動画が 流行っていた時代があった。 「おもしろFlash倉庫」「恋のマイアヒ」など。 Web の分野では現在は多くのシーンで HTML5 に移行し、Flash は衰退。 この「Flash」が「Adobe AIR」のベースになっている。 6
- 7. なぜ AIR を使用するの？そもそも AIR って？ なぜ AIR を使用するの？ 7
- 8. なぜ AIR を使用するの？そもそも AIR って？ ○なぜ「AIR」を使用するの？ Adobe Animate (旧 Adobe Flash) というソフトを使って作成。 → After Effects などの動画作成ソフトに操作感が似ており、 直感的にアニメーション作成や UI のレイアウトが可能。 8
- 9. なぜ AIR を使用するの？そもそも AIR って？ デザイナーが主体となって ゲームの「見た目」を作ることができる。 9 重要！
- 10. なぜ AIR を使用するの？そもそも AIR って？ ○なぜ「AIR」を使用するの？ デザイナーもプログラマーも Animate を使用してゲームの構築を 行うので、デザインやアニメーションの取り込みがとっても簡単！ 10
- 11. なぜ AIR を使用するの？そもそも AIR って？ 11 ① Animate で SWF ファイルを生成 ② AIR SDK の開発ツール(ADT)を使って、 ・iOS 用の IPA ファイル ・Android 用の APK/AAB ファイル を生成！ 更に、iOS 用のアプリ(ipa)、Android 用のアプリ(apk/aab) の開発を 一度に行うことができる。 マルチプラットフォーム開発！！
- 12. なぜ AIR を使用するの？そもそも AIR って？ 広告表示やプッシュ通知などの OS 毎の機能は、 「ANE」（AIR Native Extension）という拡張ライブラリで対応。 12 ANE / ・iOS 用の実装（Objective-C） ・Android 用の実装 （Java） ・Windows 用の実装 ・Mac 用の実装 :
- 13. アニメーションの作り方① - モーショントゥイーン 13 Animate では「キーフレーム」でアニメーションを定義していきます。 下記は「てんあげ↑」でだいこんくんが油を注ぐアニメーションの例です。 開始位置の指定 終了位置の指定 キーフレーム間は Animate が補間
- 14. アニメーションの作り方① - モーショントゥイーン 14 開始位置の指定 「容器」＝油のボトルのオブジェクト ボトルをだいこんくんの横に 立てた状態で配置。 ← タイムライン ↑ キーフレーム
- 17. アニメーションの作り方① - モーショントゥイーン 17 キーフレームとキーフレームの間は Animate が自動で補間してくれる。 これを「モーショントゥイーン」と呼ぶ。 開始位置の指定 終了位置の指定 キーフレーム間は Animate が補間
- 19. アニメーションの作り方② - スクリプト 19 左手が油容器と重なるので 左手を非表示にしたい。 this.leftHand.visible = false; ※”leftHand” はだいこんくんの 左手につけたオブジェクト名
- 20. アニメーションの作り方② - スクリプト 20 油容器がイイ感じの位置にきたので 左手を再表示したい。 this.leftHand.visible = true; ※ true / false は boolean 型。 ON / OFF のような意味の値。
- 21. アニメーションの作り方② - スクリプト 21 ボトルが倒れきったので アニメーションを停止 & 流れ出る油を表示 this.stop(); this.oilNakami.visible = true;
- 23. デザインとアニメーションデータの取り込み 23 ゲーム本体 プログラマー キャラアニメーション用 UI レイアウト用 デザイナー デザイナーが作成したアニメーションや UI をゲームプロジェクトに 取り込みたい…
- 24. デザインとアニメーションデータの取り込み データをドラッグして取り込むだけ！！ 24 画像をドラッグ ドラッグ デザイナーもプログラマーも Animate で制作 を行っているため、デザイナーからプログラマ へのファイルの受け渡しが 非常に簡単かつスムーズなのが特長。 実装後のアニメーションの変更も簡単。 デザイナーのライブラリ プログラマのライブラリ
- 27. ね？ 簡単でしょ？ 27
- 28. まとめ ● デザイナー主体で画面を作りやすい「Animate」 ● 未経験のプログラマーでも書きやすい「ActionScript」 ● マルチプラットフォームに対応した「Adobe AIR」 上記3つのポイントにより短時間でアプリを制作できる！ カジュアルゲームをカジュアルに開発！ 28