After EffectsとJavaScriptで作る まるばつゲームのWebアプリの作り方

After EffectsとJavaScriptで作る まるばつゲームのWebアプリの作り方

 

1. 制作の概要

モーショングラフィックスとWeb開発の融合を目指す一つのカタチです。今回は、After EffectsとJavaScriptを組み合わせて、ブラウザで遊べるインタラクティブなまるばつゲーム(三目並べ)を作成する過程をご紹介します。この方法を使えば、リッチなアニメーションを含むWebアプリケーションを効率的に制作することができます。

 

プロジェクトファイルのダウンロード


使用するツール

  • Adobe After Effects:ゲームグラフィックとアニメーション素材の制作
  • Bodymovin:After EffectsのプラグインでLottie形式に変換
  • ChatGPT:コード生成補助
  • Visual Studio Code:コード編集
  • Live Server:リアルタイムプレビュー

制作の流れ

  1. After Effectsでグラフィックとアニメーションを作成
  2. Lottie形式でアニメーションをエクスポート
  3. ChatGPTを使用してゲームロジックのコードを生成
  4. HTMLとJavaScriptでWebアプリを構築
  5. デバッグと調整

 

2. After Effectsでのアニメーション制作

まず、After Effectsでゲームに必要な要素を作成します。

  1. グリッドの作成:1080×1080のコンポジションに9マスのグリッドを描画
  2. マルとバツの作成:それぞれ別のコンポジションで作成し、アニメーション付加
  3. 勝敗表示の作成:「勝ち」「負け」「引き分け」のテキストアニメーション

これらの要素をBodymovinプラグインを使用してLottie形式(JSON)でエクスポートします。
Lottie形式は、主にベクターベースのアニメーションに対応しています。After Effectsの以下の機能がLottie形式でエクスポート可能です:

  1. シェイプレイヤー:基本的な図形やパスアニメーションに対応。
  2. マスク:シェイプやレイヤーに適用されたマスクアニメーションが使用可能。
  3. トランスフォーム:位置、スケール、回転、不透明度などの基本的な変形アニメーションに対応。
  4. テキストアニメーション:基本的なテキストアニメーションや文字単位のアニメーションが可能。
  5. ソリッドカラー:単色の背景やシェイプに使用可能。
  6. グラデーション:線形および放射状グラデーションに対応。
  7. トリムパス:シェイプの輪郭を動的に描画するアニメーションが可能。
  8. 繰り返しアニメーション:ループやピンポン効果などの繰り返しアニメーションに対応。
  9. エクスプレッション:一部の基本的なエクスプレッションがサポートされています。
  10. コンポジション:ネスト化されたコンポジションも一定の制限内で使用可能。

※ただし、これらの機能でもケースバイケースで完全にはサポートされていないので実際に書き出してからプレビューでの確認が必要です。

 



3. JavaScriptでのゲームロジック実装

ChatGPTを活用して、基本的なHTMLとJavaScriptの構造を生成します。その後、以下の順でゲームロジックを実装していきます:

  1. グリッドの表示
  2. マルとバツの配置
  3. クリックイベントの追加
  4. ターン管理と勝敗判定
  5. リセット機能の実装

 

4. デバッグと改善のプロセス

開発中は、小さな機能を段階的に実装し、その都度確認することが重要です。例えば、まずグリッドだけを表示し、次にマルを1つ配置するなど、少しずつ機能を追加していきます。

問題が発生した場合(例:2戦目以降の勝敗判定がおかしい)、具体的な症状をChatGPTに伝え、解決策を探ります。この過程で、リセット時のアニメーション再読み込みなど、細かい調整が必要になることがあります。

5. 完成したゲームの紹介

完成したゲームは、以下の機能を持つシンプルながら魅力的なWebアプリケーションです:

  • クリックでマルを配置
  • CPUがランダムにバツを配置
  • 3つ揃えると勝敗判定
  • 勝敗結果をアニメーションで表示
  • 5秒後に自動リセット

デモはこちらでプレイできます。



 

6. この手法の応用と可能性

この手法は、単純なゲーム以外にも多くの可能性があります:

  • インタラクティブなWebバナー広告
  • 教育用のインタラクティブコンテンツ
  • 製品デモンストレーション
  • アニメーションを含むWebポートフォリオ

個人的には広告業界で、プレイアブル広告やインタラクティブな広告バナーとして活用できる可能性に期待してします。

7. まとめ

After EffectsとJavaScriptを組み合わせることで、デザイン性の高いインタラクティブなWebコンテンツを効率的に制作できることができます。この手法は、プログラミングの深い知識がなくても作ることができ、作りながらデバッグと修正を繰り返す中で、コードの役割が自然のみえてくるようになります。皆さんも是非、自分のアイデアでチャレンジしてみてください。新しい可能性が見つかるかもしれません。

 

8. 関連リンク









 


PAGE TOP