既存の画像を取得して「スタック」し、Javascript で単一のアセットを作成する方法があるかどうか疑問に思っています。
上の画像アルバムは、私がやりたいことを示しています。
基本的に、私が作成しているゲームでは、さまざまな体のパーツのプールから描画して、プロシージャルに敵の NPC などを生成したいと考えています。可能性のある体の各パーツには統計情報とスプライト シートが添付されるため、キャラクターがランダムに生成されたときに、必要なすべての画像を 1 つのアセットにまとめて使用できるようにしたいと考えています。
これを行う方法はありますか？
Canvas は、いくつかの基本的な形状、ストローク、および塗りつぶしを描画する機能を備えた非常に基本的な描画 API です。背景色で塗りつぶす、および/またはキャンバス全体をクリアする以外に、基本的なキャンバス API のみを使用して、「スプライト」または互いの上にある完全なオブジェクトでシーンをアニメーション化する方法はありません。画像をコピーすることは可能ですが、アニメーション化する場合は、フレームごとにクリアして置き換える必要があります。これは、多くのコード オーバーヘッドになります。
http://createjs.comまたは同様の「スクリーン グラフ」タイプのフレームワーク (キャンバスの上にあり、スプライト シートを簡単にロードして移動できるもの) を調べる必要があります。キャンバスの描画、クリア、回転、アニメーションなどを行います (基本的には Flash に少し似ています)。
キャンバス上で純粋にスタックまたは描画するという点では、はい、画像を取得して context2d.drawImage メソッドを使用してキャンバスに直接コピーできますが、これだけでは必要な効果が得られない可能性があります。