1

これは私をかなり長い間悩ませている質問です。たとえば、ラグドールのキャラクターアニメーションをページに導入する必要があります。明らかに、そのようなキャラクターの各身体部分は画像であり、これらの画像の数は、キャラクターの複雑さと文字の数によってはかなり多くなる可能性があります。これらのキャラクターが静的である場合（実際、DOMアニメーションは引き続き可能ですが、かなり遅くなる可能性があります）、CSS背景スプライトを使用できますが、キャンバスを使用する場合は、すべてをロードする必要があるようです。画像を1つずつ表示します。これは、ページの読み込み時間に影響を与える可能性があります。

さらに、 paper.jsやfabric.jsなどの永続的なオブジェクトをキャンバス上に作成し、再描画サイクルを処理できるフレームワークを使用したいと思います。

これは、文字のXML / JSON記述を読み取り、座標に基づいてオブジェクトを作成するパーサーを作成するための簡単な（ただし時間のかかる）タスクであると認識していますが、そのようなツールが既に作成および使用されているかどうか疑問に思います。 、私は知らないかもしれません。

私が使用したいのは、次のような構造です。

character : {
  image : 'characters.png',
  body : {
    head : {
      width : 40,
      height : 50,
      xOff : 50,
      yOff : 125
    }
    // Other parts follow
  }
}

そのような構造からオブジェクトを作成できるフレームワークやゲームエンジンはありますか？複数の画像をキャンバスにロードするための最良の方法は何ですか？

アドバイスありがとうございます。

UPD。詳細を追加しました。

4

2 に答える 2

4

このためのオーバーロードされたバージョンがありdrawImageます。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// where image: valid image
//          sx: source slice x position
//          sy: source slice y position
//          sWidth:  source slice width
//          sHeight: source slice height
//       same for dx etc.

したがって、CSS の背景スプライトと同じアプローチを簡単に使用できます。

参考文献:

于 2012-12-13T06:51:20.297 に答える
2

フレームワークEaselJsを試すことができます。

于 2012-12-13T07:29:33.287 に答える