2

HTML5キャンバスを使用してゲームを作成しています。ゲーム内で必要なすべてのスプライトを含む大きなスプライトシートがあります。アセットのプリロード手法として最適なものについて少し読んだことがありますが、具体的なものは何も見つかりませんでした。

そこで、CSSスプライトシートという1つの手法を選択することにしました。http://www.spritecow.com/を使用して、spritesheet.gifファイルをロードし、CSSコードを生成しました。問題は、javascriptとcanvas要素内の個々のスプライトを実際に使用する方法についてのチュートリアルが見つからなかったことです！

誰かが私に手を差し伸べてもらえますか？他のより優れたプリロード手法またはライブラリを知っている場合（可能であれば、画像とサウンドをプリロードできます）。

編集：jQueryを使用したソリューションも問題ありません。

4

1 に答える 1

2

プリロード：

スプライトシートは単なる画像なので、他の画像と同じようにプリロードします。そうは言っても、「jQueryの方法」は次のようになります。var $mySprite = $("<img>").attr("src", "myURL");

（出典：Jqueryを使用してスプライトシートをプリロードします）

要素への適用：

これは単純なcssで実行できるため、javascriptを使用する必要はありません。

sprite1-スプライトシートを使用するすべての要素にクラスを追加します。

html： <div class="sprite">

css： .sprite { background-image:url("your spritesheet url here") }

background-position2-スプライトシート上の特定の要素の画像の場所に応じて、要素にIDを追加し、cssルールを一致させます。例えば

html： <div class="sprite" id="fire"></div>

css： 

#fire {
  background-position: -100px -50px;
  height: 20px;
  width:  40px;
}
于 2013-02-17T15:13:53.443 に答える