青訓キャンプ |「ミニゲーム開発」ノート

フロントエンドシーンにおけるゲーム開発#

開発役割とリンク#

ゲーム開発チームの分業

最小で最も完全なゲーム開発チームを構成するには、3 人のメンバーが必要です：プランナー、プログラマー、アーティスト。

もちろん、能力が十分に高ければ独立した開発者としても活動できます。

基本的なリンク

プロジェクト立ち上げ -> プロトタイプ段階 -> Alpha 版 -> Beta 段階 -> 運営段階

なぜゲームエンジンを使用するのか#

ゲームエンジンの最大の利点：レンダリング

エンジンの誕生は、ある会社がゲームを作り、次のゲームを作る際に前のゲームのコードを再利用したことから始まりました。その後、これらのコードはほぼすべてのゲームで使用されることがわかり、抽出されてエンジンとなりました。

エンジンを使用しない場合、複雑な動的効果のレンダリングやインタラクションを行うことができますか？もちろんできます。しかし、便利ですか？必ずしもそうではありません。

したがって、ゲームエンジンは解決策のセットのようなもので、特定のタイプの製品を制作する際に開発効率を向上させることができます。

複数のプラットフォームへの移植を行いますか？React Native、Weex、Cordova などのソリューションでも可能です。

物理効果を作成しますか？MatterJS、ammo.js などの物理エンジンを使用できます。

アニメーションを作成しますか？CSS で実現することも可能です。複雑ですか？アニメーションライブラリを封装します。

では、なぜゲームエンジンを使用するのでしょうか？

完全な実装ソリューションを提供し、自分で組み立てたり封装したりする必要がありません。
より少ない時間でより良い効果を生み出す、特にレンダリング効率やパフォーマンスの最適化に関して。
ゲーム開発に必要な一般的な機能を提供します。
- エンジンは多くのコンポーネントを提供し、これらのコンポーネントを使用することで開発時間を短縮し、ゲーム開発を簡素化します。
- 専門のエンジンは通常、自作のエンジンよりも優れたパフォーマンスを発揮します。

ゲームエンジンは通常、レンダラー、2D/3D グラフィック要素、衝突検出、物理エンジン、音声、コントローラーサポート、アニメーションなどの部分を含みます。

フロントエンドからゲーム開発への移行#

まず、明確な認識を持つ必要があります：フロントエンド開発とゲーム開発は相反するものではありません。

現在、市場に出回っている多くのH5 ゲーム、ミニゲームは Web フロントエンド開発によって制作されており、専用のゲーム開発チームや専門のゲーム開発者によって開発されたものではありません。その理由は次の通りです：

フロントエンド開発に従事する開発者の数は、ゲーム開発に従事する開発者の数よりもはるかに多い（採用コストが高い）。
2D ゲームエンジンの習得のハードルは十分に低い（習得が容易）。
アクティブな H5 のゲームプレイの実現方法は比較的曖昧である（開発の境界が曖昧）。
現在、多くの主流の 2D ゲームエンジンは JavaScript を使用して開発することをサポートし、関連するエンジニアリング能力を使用することができ、これはゲーム開発が Web フロントエンド開発に接近する一つの表れです。

したがって、Web フロントエンド開発の視点から 2D ゲームエンジンを見ると、それは単なるフレームワーク、解決策のセットに過ぎません。

しかし、開発理念には違いがあります：従来のゲーム開発はコンテンツにより重点を置いています。

ゲームエンジン#

市場で一般的なゲームエンジン#

私たちは一部の PC ゲームエンジンについては議論しません。例えば：

Unreal（アンリアルエンジン、代表作『PUBG』『GTA5』）、
Source（ソースエンジン、代表作『Cs』『Dota2』）、
Frostbite Engine（フロストバイトエンジン、代表作『バトルフィールド』『ニード・フォー・スピード 18』）、
Unity3D（代表作『ハースストーン』『王者栄耀』）。

道は一歩ずつ進むべきです。まず、フロントエンド開発者が最も簡単に習得できるエンジンを見てみましょう。

特定のタイプのクライアントゲームエンジン#

The NVL Maker#

THE NVL Makerテキストアドベンチャーゲーム制作ツール

NoCode形式の開発で、テキストスクリプトと一定の設定を加えるだけでテキストアドベンチャーゲームを生成できます。

代表作：『Fate/stay night』と Steam 上の多くの GAL ゲーム。

もちろん、反復と運営が不足しているため、このゲームエンジンは比較的ニッチです。また、前端向けのライブラリ AVG.js Project もあります（PixiJS をレンダリングエンジンとして使用しています）。

RPG Maker#

RPG Maker を使用すると、Low Codeでレベルタイプのゲームを構築でき、コード能力があまり高くないが自分の創造性を発揮したい開発者に適しています。

RPGMaker シリーズのゲームエンジンによって作成された Steam のベストセラーゲーム『To The Moon』。

Web ゲームエンジン#

Canvas と WebGL を基盤技術として抽象化した画像描画ライブラリ（しばしば他の機能も付属しています）

Web ゲームエンジンの一般的な能力：

プリロード
- ゲーム内の大量の静的素材、シーン、要素、音声、アニメーション、モデル、テクスチャなどを、ネイティブ JS でリクエストし、リクエスト時間と読み込みのタイミングを調整するのは非常に面倒です。
- プリロードエンジンは、読み込みのタイミングとプロセスを抽象化し、読み込みコーディングの効率の問題を解決します。
表示とレイヤー、コンビネーションシステム
- Web ゲームプログラミングでは、通常 Canvas または WebGL をレンダリング方式として選択します（なぜ DOM をレンダリング方式として使用しないのか考えてみてください）。
- Canvas と WebGL は基盤の API であり、インターフェースは非常に基本的で、簡単な表示を書くためには大量のコーディングが必要です。また、グラフィック間にはコンビネーションやレイヤーがなく、要素のコンビネーションやレイヤーの問題を処理するのが非常に難しいです。
- レンダリングエンジンとレイヤー、コンビネーションシステムが登場しました。
アニメーションシステム：アニメーションは通常、イージングアニメーションとフレームアニメーションに分けられ、ここではイージングアニメーションシステムについて議論します。
- イージングアニメーションシステムは、ネイティブ JS でフレームレンダリングと組み合わせて考慮しながら記述する必要があり、コード量と考慮量が膨大で、抽象度が低いため、ゲームエンジンのアニメーションシステムが必要です。
音声とサウンドシステム：
- ゲームは通常の Web フロントエンドに比べて、より立体的でタイムリーなフィードバックが必要であり、音声とサウンドはフィードバックの重要な要素です。
- 音声とサウンドシステムは、音声の再生、音量、カットオフ、ポーズなどの機能を統合することがよくあります。

Cocos#

利点

プラットフォームサポート能力が良好
完全なゲーム機能サポート
エコシステムが良好

欠点

3D 能力はまだ構築中
バージョンの更新が速すぎる

Laya#

利点

3D 能力が比較的成熟しており、市場占有率 90% を誇る
S、TS、AS をサポート
エンジンのサイズが小さい

欠点

インターフェースの能力が不親切
エコシステムが非常に悪い

Egret#

利点

ツールチェーンが比較的整っている
サードパーティライブラリのサポートが良好
企業向けカスタマイズ能力が強い

欠点

更新とイテレーションにボトルネックがある
エコシステムが悪い

上記のゲームエンジンのインターフェースは非常に似ています。

CreateJS & Phaser#

これらの 2 つのゲームエンジンには可視化インターフェースがありません。

CreateJS を例にとると：

これは複数のライブラリの集合です。

EASELS（素材の表示とコンビネーションを制御）、TWEENJS（素材のイージングアニメーションを制御）、SOUNDIS（音声を制御）、PRELOADIS（読み込みを制御）を通じて、プリロードされた素材の表示、アニメーション、音声がゲームを構成します。Phaser ゲームエンジンは、CreateJS を基にした表示、音声、アニメーション、読み込みシステムに加え、カメラ、物理エンジン、内蔵ブラウザ、プラグインシステムなどの高度な機能も設計されています。

機能エンジン#

大型ゲームエンジンは通常、小さな機能エンジンの組み合わせで構成されており、大型ゲームエンジンは通常、レンダリングエンジン、物理エンジン、UI システム、サウンドシステム、アニメーションシステム、パーティクルシステム、ボーンシステム、ネットワークシステムなどで構成されています。その中で最も重要なのはレンダリングエンジンと物理エンジンです。機能エンジンは特定の方向性の能力に特化したエンジンであり、その特徴はサイズが小さく、機能が充実していることです。特に Pixi.js と Three.js の 2 つのレンダリングエンジンは、通常、完全なゲームエンジンと誤解されますが、実際にはレンダリング能力に特化したレンダリングエンジンです。

以下に、頻繁に接触する可能性のある機能エンジンをいくつか紹介します：

Pixi.js
- 2D レンダリング能力が強い（特に WebGL）
- 複雑なアニメーションシステム、複雑な画像レンダリング形式、自分の 2D ゲームエンジンを作成するなど
Three.js
- 3D レンダリング能力が強い
- 3D 効果のデモや 3D タイプの H5 ゲームやミニゲームに適している
Box2D.js
- 2D 物理エンジン
- 物体シミュレーション能力

2D ゲームエンジンの技術アーキテクチャ#

Cocos エンジンのアーキテクチャを例にとると：

render（レンダラー）、collision（）、Physical（）
PC、IOS、Android、H5 などのアダプターおよび各プラットフォームのビルドツール
ランタイム

Web ゲームエンジンのレンダリング原理#

Pixi のレンダリングプロセスを例にとると

大まかな流れは次のとおりです。

Renderer レンダラーを作成し、その view（canvas オブジェクト）を取得し、DOM ツリーに追加します。（または、既存の DOM ツリー内の canvas オブジェクトを view として指定します）
MainLoop（メインループ）内で Renderer.render () を呼び出し、DisplayObject をルートノードとしてレンダリングします。
シーンツリーのルートノードから、zIndex の順に小さいものから大きいものへ深さ優先でトラバースし、各ノードに対してレンダリング操作を行い、後ろから前に向かってシーン全体を描画します。（CanvasRenderer）

WebGL の render メソッドの実行プロセス（基礎知識）

render(displayObject, renderTexture, clear, transform, skipUpdateTransform) {
    // 1.変換を適用（GPUレベル） 
    this.projection.transform = transform;
    // 2.レンダリングテクスチャのバインドとBatchRendering処理
    this.renderTexture.bind(renderTexture);
    this.batch.currentRenderer.start();
    // 3.要素のレンダリングを実行し、頂点、インデックス、テクスチャなどのデータをBatchRenderingに追加
    display0bject.render();
    // 4.rendererの描画メソッドを実行
    this.batch.currentRenderer.flush();
    //渡されたC LearとrenderTextureパラメータに基づいてテクスチャの処理...
    // 5.変換をクリア
    this.projection.transform = null;
}

Canvas の render メソッドの実行プロセス

Pixi のレンダリングプロセスを例にとると：

render(displayobject, renderTexture, clear, transform, skipUpdateTransform) {
    const context = this.context;
    // 1.現在の状態を状態スタックにプッシュ
    context.save();
    // 2.変換とスタイルプロパティを初期化
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.globaLAlpha = 1;
    this._activeBlendMode = BLEND_MODES.NORMAL;
    this._outerBlend = false;
    context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL];
    // 3.要素のレンダリングを実行
    const tempContext = this.context;
    this.context = context;
    display0bject.renderCanvas(this); 
    this.context = tempContext;
    // 4.状態スタックから以前の状態を復元
    context.restore();
}

ゲーム開発のスキルツリー#

PixiJS+Web 開発#

Pixi の紹介#

PixiJSの公式サイトは一見ゲームエンジンのように見えますが、上記には明確に「最も速く、最も柔軟な 2D WebGL レンダラーを使用して美しいデジタルコンテンツを作成する」と記載されています（Google 翻訳）。

本質的には、これはレンダリングエンジンであり、最高のものを作ると自称しています。
これはゲームだけでなく、この技術を使用して任意のインタラクティブコンテンツを作成することも可能であり、さらにその基盤の上に自分のゲームエンジンを作成することもできます。（AVG.js と Phaserjs のレンダリングエンジンは Pixi です）

前提技術スタック

Web フロントエンド開発の基礎
JSON ファイルを使用したことがあり、その目的を理解している
Canvas の描画 API について理解している

Web プロジェクトにゲームプレイをロードする#

インストールとインポート
- npm でインストールするか、script タグを通じて<script src=”pixi.min.js" ></script>をインポートします。

Pixi アプリケーションとステージ（Stage）を作成

// 最初のステップとして、表示する矩形領域を作成し、Pixiアプリケーションインスタンスを作成すると自動的にcanvasが作成され、画像がcanvasに表示されるように計算されます。
let app = new PIXI.Application({width: 250, height: 250 });
// app.stageは[ステージ]であり、Pixiで表示したいすべてのものを含んでいます。

// 次のステップとして、canvasをDOMツリーに追加します。この時点で250*250の真っ黒なインターフェースが表示されます。
document.body.appendChild(app.view);
// PIXI.Applicationは、現在のブラウザがどちらをサポートしているかに応じて、CanvasまたはWebGLを使用して画像をレンダリングする必要があるかを計算します。一般的にはWebGLを優先的に使用します。

// Canvasを透明にしたい場合やCanvasモードを強制的に使用したい場合は、次のように設定できます。
let app = new PIXI.Application({
    width: 250,
    height: 250,
    transparent: true,
    forceCanvas: true,
});

画像を表示する

概念理解：Sprite（スプライト）
- CSS を学ぶ際にスプライト画像 / スノースプライトの概念を聞いたことがあるかもしれませんが、異なります。Pixi や他の多くのゲームエンジンにおける Sprite の概念は、画像を保持するオブジェクトであり、サイズや位置などの属性を制御してインタラクションやアニメーションを生成します。Sprite を作成し制御することは Pixi を学ぶ上で非常に重要な部分です。
- Sprite を作成するには、画像が Pixi にどのようにロードされるかを理解する必要があります。ここでの概念は ** テクスチャキャッシュ（GPU で処理可能な画像を指します）** です。
  - Pixi はテクスチャキャッシュを使用して、Sprite が必要とするテクスチャを保存し参照します。テクスチャの名前文字列は画像のアドレスです。例えば、"images/cat.png" がある場合、PIXl.utils.TextureCache["images/cat.png"]を使用してテクスチャキャッシュでそれを見つけることができます。
  - それを見つけるには、まずそれをテクスチャに変換してテクスチャキャッシュに保存する必要があります。PIXI.loaderを使用してロードできます。
    PIXI.loader.add("images/cat.png").load(res => { let sprite = new PIXI.Sprite( PIXI.loader.resources["images/cat.png"].texture ); });
- これで Sprite が作成されました。次のステップはそれを表示し、ステージに追加することです。
  
  app.stage.addChild(sprite);
画像を動かす

前述のように、Sprite の位置やサイズを設定できますが、もし毎フレーム 1 ピクセル移動させたい場合は、ゲームループを使用する必要があります。（すべてのゲームループのコードは毎フレーム呼び出されます）
```
app.tiker.add(delta => {
	sprite.x += 11;
});
```
そして、少しの詳細を追加しますCacheAsBitmap - PixiJS Examples

Cocos Creator エディタ開発#

Cocos Creator の紹介#

Q：Cocos Creator はゲームエンジンですか？

A：Cocos + インターフェースエディタで、これは完全なゲーム開発ソリューションであり、軽量で効率的なクロスプラットフォームゲームエンジンと、ゲームをより迅速に開発するために必要なさまざまなグラフィカルインターフェースツールを含んでいます。

エディタ統合の能力#

Cocos のワークフロー#

ダウンロードと作成 -> シーンの設計と開発 -> プレビューとデバッグ -> ANYSDK の統合 -> パッケージングと公開 -> Cocos Runtime

上の図は Cocos のワークフローを示しています。

プロジェクトの作成#

シーンの構築#

Cocos のワークフロー ——データ駆動とシーンを中心に、コンポーネントベースの開発を中心にしています。

見ると、CSS などを理解する必要はなく、右側のプロパティインスペクタを通じて画像のサイズを調整することができ、ローコードで行えます。

ノード（cc.Node）はコンポーネントを保持する実体であり、さまざまな機能を持つコンポーネント（Sprite、SPine、Label など）をノードにマウントして、ノードにさまざまな表現と機能を持たせます。

ノードによってノードツリーが構成され、ノードツリーは実際のレンダリング階層に影響を与えます。

リソースのインポート + リソースの表示#

オペレーティングシステムの他のウィンドウからファイルを Cocos Creator ウィンドウのリソース管理パネルにドラッグ＆ドロップすることで、外部からリソースをインポートできます。この操作により、リソースファイルがプロジェクトのリソースフォルダに自動的にコピーされ、インポート操作が完了します。その後、画像を階層管理者にドラッグすると、cc.Sprite が生成されます。

スクリプトのマウント#

test.js

const { property, ccclass } = cc._decorator;
@ccclass
export default class TestComp extends cc.Component {
    onLoad() {
        console.log('TestComp onload');
    }
    
    start() {}
    
    update(dt) {}

    onDestroy() {}
}