問題タブ [sprite-sheet]

そこで、スプライトシートを使用してCSSで背景画像を作成したいと考えています。そして、明確にするために、私はこの効果のために行くつもりはありません。フルスプライトシートがあります。シート上に16pxx16pxの正方形を取り、それを繰り返しの背景として設定したいと思います。

将来的には、URLパラメータのメディアフラグメントを使用して空間ディメンションを介してこれを実行できるようにしたいと考えていますが、これはまだサポートされていないため、別の方法を探しています。最新のCSS技術やハックを介してこれと同じ効果を得る方法はありますか？

いくつかのメモ：

• 古いブラウザをサポートする必要はありません。最新のFFまたはChromeでサポートできます。
• 私は純粋なCSSソリューションを好みます。必要に応じてdata：URIを使用してJS / Canvasソリューションを作成できますが、これが必要になる可能性のある要素の数を考慮すると、純粋なCSSでより良い結果を得ることができれば、作成する必要はありません。
• xとy方向の両方で繰り返す必要があります
• 挿入したいすべてのスプライトのスプライトシートをロードする必要がないように、メモリ/キャッシュ内の単一の画像を利用するソリューションを探しています

何百もの個別の画像を使用するのではなく、テクスチャ アトラスとも呼ばれるスプライト シートを作成することをお勧めします。単語学習ゲーム用に何百もの画像があります。しかし、何百もの単語があり、アニメーション シーケンスはありません。データ ファイルとスプライト シートを生成したので、元の画像ファイル名 (スプライト シート データ (lua コード) ファイル (両方ともテクスチャ パッカーで作成) に格納されている) から必要に応じて画像を作成する方法の例を探しています。 .

これはかなり正しいようです：

スプライト シートを作成する前に、次のようなイメージを作成します。

たとえば、cnTiles[1] は、「sit_word100.png」などの sqlite テーブルから配列に配置された値です。

「getSpritSheetData」関数の下に生成されたluaファイルに、次のようなエントリがあります。

スプライト シート内の画像を参照する方法を提供するために、すべての画像ファイル名がデータに保存されていることがわかりますが、「スプライト セット」を使用したくないため、次の例が見つかりません。必要なときに1つの画像を取得するだけです。

元の画像名を使用して、現在スプライトシート化されている画像を参照できるものが必要です。これは可能ですか？例えば

申し訳ありませんが、これはちょっとしたコードですが、ここで切り取るものはあまりありません。これは、イメージ (アルファベットのスプライト シート) を読み取り、それを個々の文字である小さなサブイメージに分割することになっています。キーを押すと対応する文字が画面に表示されますが、この部分は実際のサブイメージを作成するためのものです。

http://i.imgur.com/4I4uX.png (画像)

この次の部分は、私を混乱させるものです。i と j は何のためにあるのですか?なぜそれらを加算したり乗算したりするのですか? この部分は、サブイメージがどれくらいの大きさでなければならないかを調べるためのものですよね? 行 * 列である 4 x 13 であってはなりませんか?

i と j が何をしているのかわかりません。ここで何が欠けていますか？

Windows Phone 7 用の XNA を試してみることにしました。最初のゲームでは、画像を取得して正方形のスプライトに分割する必要があるため、画像は本質的にスプライト シートになります。元の画像は画面に対して大きすぎるか小さすぎる可能性が高いため、次の手順を実行して、画面に収まるようにスケールを適用する方法を見つけましたが、ギャップは表示されません (したがって、1 つの寸法が画面）。

しかし次に、この画像からスプライトを生成して、画面をグリッドできれいに埋める必要があります。私の主な質問は、各スプライトで描画メソッドを呼び出すときに、スケーリングが元のスプライト シートに適用されるのか、それともスプライト シートからテクスチャを取得した後のスプライト自体に適用されるのかということだと思います。

後者の場合、個々のスプライトを作成する前に、スプライト シートをどのようにスケーリングするのが最善かについて少し混乱しています。実際には、最初に画像のサイズを画面のサイズに正確に一致するように変更して、作業を楽にすることになるかもしれませんが、これは少し面倒です。

どんな提案でも大歓迎です！

パフォーマンス、ファイルサイズ (および私の正気) に最適なのはどれですか: .gifCSS (および必要に応じて JS) を使用したアニメーション付きの s またはスプライトシート?

ファイルサイズ

だから、私はフレームの圧縮を理解していないので、ここでどちらが良いかは正直わかりません.gif. 私の推測では、私が正しくスイングできれば、最終的にはほぼ同じになると思いますが、これが間違っている場合、またはこれが別の理由による要因である場合はお知らせください.

ここでの主な利点は、1 つのシートに複数のアニメーションを含めることができるスプライトシートにあると思います (ここでは、数百のアニメーション化されたスプライトについて話しています)。また、以前の質問の 1 つに基づいて、CSS を使用して単一のフレームを簡単に引き出すことができることを知っていimage-rect()ます。ファイルの場合と同様に、.gifそれぞれのアニメーションの長さが異なる可能性があるため、実際には 1 つのアニメーションしか含めることができません。

補遺:また、アニメーションの一部は特定のスプライトに対して繰り返されるため、スプライトシートにはフレームのコピーが 1 つだけ.gif必要ですが、(少なくとも私の知る限り) すべてのフレームが必要です。

パフォーマンス

ここでもう一度推測すると.gif、他のことのために多くの JS コードを実行しているのと同時に、すべてのアニメーションを管理する必要がないため、アニメーション化された s の方が大幅に高速になることが直感でわかります。しかし、確かなことはわかりません。おそらく、ブラウザは 30 以上.gifのアニメーションで大きな打撃を受けるでしょう。

私の正気

スプライトシートは私のために作られているので、私の作業は最初のうちは高くなります (書き込みとアニメーションエンジン、およびシートごとに 1 つまたは 1 つのハンドコーディング)。しかし、いったん記述されると、それは永久に使用可能であり、スプライトシートの変更にはコードへの最小限の変更しか必要ありません。

一方、アニメーション.gifファイルは、Photoshop で簡単に作成できるものではありません (より優れたプログラムがあれば、お知らせください) 。そして、ひとつひとつ手作業で行わなければならず、長いプロセスです。しかし、一度作ってしまえば、変える必要はありません。私のスプライトシートはすぐに変更される可能性は低いので、1 回で完了する可能性があります。

私の質問 (tl;dr)

これは、ファイルサイズ (Web 経由の HTTP ヘッダー転送を含む)、最新のブラウザーでのパフォーマンス、および作成の容易さ (優先度は最も低いですが、私の仕事をより簡単にすることができれば、またはこれに異議を唱えていただければ幸いです)、.gifスプライト シートから作成されたアニメーション ファイル、または単に CSS と既に持っているスプライト シートを使用していますか?

例

VS

2D画像のレンダリングに関する私の調査により、これにたどり着きました... Silverlightのスプライトシート この回答は十分に良かったのですが、長方形は使いたくありません。画像クラスを使用して画像を表示する方が理にかなっていると思います。上記の例を理解しようとした後。私は次のコードを思いついた...

これで、画像クラスにはソース画像の左上隅のみが表示されます。ナビゲートできないに移動するには、巨大な500x500BigHugeImaeをナビゲートする必要があります。

私はスプライトに自分自身を永遠にアニメートさせようとしています。問題はなく、問題なく構築されています。メニューを通り過ぎて、アニメートしたいスプライトがあるシーンをクリックすると、クラッシュします。アニメーションに次のコードを使用しています。

問題はコードの最初の行であるCCSpriteFrameCacheに関係していると思いますが、何も問題はありません。助けてください、または私のスプライトをアニメーション化する別の方法を教えてください。

私はiPhoneゲームの初期の構築段階にあり、スプライトシートを使用してランダムな人物を作成しています。各人物には、髪の毛や衣類などのサブスプライトがあります。

CCSpriteBatchNodeを使用してスプライト画像をスプライトシートに保存しています。現在、初期設定テストを行っています。画面をタップして、新しいランダムな人のセットを生成します。奇妙なことに、一度タップすると古い人が削除されて新しい人に置き換えられますが、2回目は、「CCSpriteBatchNodeにスプライトが含まれていません。削除できません」というエラーでクラッシュします。これで、スプライトがバッチノードに追加されたと確信しています。Person.mコンストラクターに次の行があります。

ccTouchesEndedのテストコードには、次のコードがあります。

誰かが私が欠けているものを提案できますか？cocos2dのスプライトシートについてたくさん読んだことがありますが、個々のスプライトを削除するのは難しいことを理解しているので、ここに追加する必要のある重要な行がいくつかあると確信しています。ご協力いただきありがとうございます！

編集： 私はエラーをグーグルで検索し、このスレッドを見つけました：http: //www.cocos2d-iphone.org/forum/topic/17170これは、Cocos2dがスプライトをスプライトシートに追加していないと考えていることを確認しているようです-しかし、私はスプライトが最初は正しく追加され、2回目は正しく追加されないという事実によって証明されています。

1つの解決策は、スプライトをまったく削除せずに、スプライトを非表示にして、再利用する必要があるときに新しい特性で再描画することです。それがよりきれいに見えるので、私はむしろ本当の解決策が何であるかを知りたいです。

SpriteSheetの API を検索しましたが、さまざまなサイズのスプライトでスプライト シートを作成する方法については何も見つかりませんでした。

私が使用しているスプライト シートには、16x16px のタイルの行、その下の 24x24px のタイルの行、その下の 8x8px の行などがあります。

元々、Slick2D を使用せずに、BufferedImage.getSubimage() を使用して、スプライト シートの一時的な BufferedImage から各スプライトを取得しました。ここで使用できる同様の方法はありますか？