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

1. 制作の概要

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

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

使用するツール

制作の流れ

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の構造を生成します。その後、以下の順でゲームロジックを実装していきます：

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

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

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

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

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

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

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

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

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

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

7. まとめ

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

8. 関連リンク