3

CanvasとJavascriptを使用した2Dトップダウンゲーム（ゼルダ+ RPGを考えてください）の場合、アニメーションを許可しながら紙人形を実装するための最良の方法は何ですか？

スプライトシートを使用してアニメーションを作成するのは簡単ですが、紙の人形を追加する（つまり、アイテムと鎧を「装備」し、これらのアイテムをキャラクターに視覚的に表示できるようにする）ことはできません。簡単な、または少なくとも繰り返しのない作業のようです。

たとえば、剣を振るキャラクターをアニメートすることを想像してみてください。アニメーション付きの単純なスプライトシートが機能します。しかし、別の剣が装備されているときにアニメーション内の実際の剣を変更したい場合はどうなりますか？同じアニメーションを別の剣で繰り返す追加のスプライトを作成しますか？そして、すべてのアイテムについて？そして各NPCのために？（キャラクターだけでなく、NPCにも紙人形が欲しかったと仮定して）

必要なスプライトアニメーションフレームの数を制限するために、それを行うことができ、ウェアラブルアイテムの数を最小限に抑えることができます。

キャラクターアニメーションを分離して、キャラクターアニメーションの上/下に剣/アイテムのアニメーションを追加することは可能かもしれないと思います。そうすれば、異なるキャラクターが同じアイテムアニメーションを再利用して、キャラクターアニメーションと一致させることができます。ただし、各アイテムにはまだ多くのスプライトがあります。そして、キャラクターは似ている必要があります。

何か考えや提案はありますか？

（重要なのは、紙人形を使わずにNPCを持ち、プレイヤーがキャラクターアニメーションとアイテムのバリエーションごとのアニメーションを持っていることです。鎧の場合、プレイヤーの体型と寸法に一致します。 。）

4

1 に答える 1

0

ウェアラブルなアイテムのセットごとに、プレーヤーに装着できるアイテムの配列があると考えています。たとえば、次のようになります。

var AwesomeDragonProofDiamondArmour =
{
    head: 'awesome-diamond-helmet.png',
    chest: 'awesome-diamond-chest.png',
    legs: 'awesome-diamond-legs.png',
    boots: 'awesome-diamond-boots.png'
};

そして、プレーヤーの設定で同じ配列を持つことになります。もちろん、多くの RPG では、素晴らしいダイヤモンド アーマーのフルセットから始めるのではなく、革と、おそらく一種の優れたチェスト プレートから始めます。

var RubbishLeatherArmour =
{
    head:   'rubbish-leather-helmet.png',
    chest:  'rubbish-leather-chest.png',
    legs:   'rubbish-leather-legs.png',
    boots:  'rubbish-leather-boots.png'
};

var SortOfGoodSteelArmour =
{
    head:   'sort-of-good-steel-helmet.png',
    chest:  'sort-of-good-steel-chest.png',
    legs:   'sort-of-good-steel-legs.png',
    boots:  'sort-of-good-steel-boots.png'
};

var Player =
{
    head:   RubbishLeatherArmour.head,
    chest:  SortOfGoodSteelArmour.chest,
    legs:   RubbishLeatherArmour.legs,
    boots:  RubbishLeatherArmour.boots
}

これらの PNG は透明で、これらを基本的なプレーヤー グラフィックスと合成すると、紙人形のキャラクターになります。オーバーヘッドを減らすには、これらのグラフィックスを 1 つのスプライト シートに配置し、次のように各項目の X、Y、幅、高さを格納するのが賢明な場合があります。

var RobustMetalArmour = 
{
    head: [120, 120, 20, 20],
    chest: [140, 120, 20, 20],
    legs: [160, 120, 20, 30],
    boots: [180, 120, 20, 10]
}

配列は[x、y、幅、高さ]です。これには 1 つのサイズしかないという欠点があるため、キャラクターがすべて同じサイズでない限り (実際にはタイル ベースの RPG ではかなり可能です)、キャラクターの各サイズのすべてのグラフィックスを作成するには時間がかかる場合があります。

もう 1 つの方法は、キャンバス描画関数を使用してグラフィックを描画することです。この関数では、たとえばヘルメットの ax/y/width/height を指定してから、ヘルメットを任意のサイズで描画します。このようなもの：

function drawPlus(ctx, x, y, size, colour)
{
    ctx.lineWidth = 1;
    ctx.strokeStyle = colour;
    ctx.beginPath();
    ctx.moveTo(x + 0.5, y + 0.5 - size);
    ctx.lineTo(x + 0.5, 0.5 + y);
    ctx.lineTo(x + 0.5 + size, 0.5 + y);
    ctx.moveTo(x + 0.5 - size, y + 0.5);
    ctx.lineTo(x + 0.5, 0.5 + y);
    ctx.lineTo(x + 0.5, 0.5 + y + size);
    ctx.stroke();
    ctx.closePath();
}

上記の関数は、画面に + を描画します。幅が奇数の線には 0.5 が必要です。このスレッドを参照してください。

いずれにせよ、各キャラクターに表示するアイテムの数によっては、時間がかかります。

于 2013-01-20T15:59:30.700 に答える