アニメーターを含む私にとって、フレームサイズ400 x 400のこのようなpngアニメーションを作成することは難しくありませんでした。 ドロップキューブを常に異なるものにすることは、どこでも簡単な作業ではないように思えました。 しかし、毛むくじゃらの手の丸い合計に動機付けられて、私は最初に同時にゲームを美しくする方法について考えて攻撃を始めました（私は元々デザイナー、三次元のアーティスト、そしてエストであり、私は決してプログラマーではないからです）千分。
アニメーションのグラフィックファイルのボリュームを推定したいので、ストリップ内の1つのキューブの落下のバリエーションを作成しました。これにより、後でさまざまな角度でいくつかの類似のバリエーションをドロップでき、おそらくかなり多様になります。 一連のフレームを水平ストリップに収集すると、GIF、その水平圧縮、インデックス付きカラーのアイデアがすぐに点灯し、昨夜だけリリースされました。
3次元キューブのアニメーションのスペシャリストとしての私自身の経験から、あらゆる方法でジャンプしてアニメートしている間、エッジやその他の詳細の表示の品質の重要性は速度に反比例することを知っています。 したがって、アルファとRGBの両方、および動きが落ち着いてキューブが上昇するフレームの両方で最大に振ることができるどこかで、すでに100％で振ってください。 つまり、巨大なサイズのpngは、50フレームシーケンスの最後の5〜10フレームでのみ、およびキューブが停止したフレームのその場所でのみ需要があります。 可能なすべてを揺さぶりたいという欲求は、それ自体を示唆しています。
キューブの落下のバリエーションを作成して、後でそれに対して異なるテクスチャ（キューブの異なる最終値）を持つ1つのアルファチャネルと6つのRGBバリアントを作成できると想定しました。 立方体が飛んでいる間、それはまっすぐに飛んで、最初のヒットの後、それはわずかに逸脱し、それからフレームのストリップは私たちが望むほど薄くありません、そして、各フレームのほとんどは空のままです、それはpngにとって苦痛ですが、ありませんgifの問題。 その結果、png32形式の1つのオプションのすべてのトリックで、0.5メガバイトのキロバイトが消費されました。 これは、このような秋のバリエーション、たとえば少なくとも10個が必要であり、ゲームでは他の多くのグラフィックスが予想されることを考慮していません。
しかし、突然！
その瞬間、私はすでにいくつかの素晴らしい人々の味を得て、顧客に7セント以下の注文をするように申し出て、注文が削られ、上記のすべてが論理的な終わりを失いました。 嫌ですか？ しかし、私は明確に定義された問題の理解に取り残されました。現代の大きくて美しい画像のアルファチャンネルは、ときどき浪費的に使用され、この問題を解決する方法を理解しています。
私は1年待ってから座ってこの記事を見つけ、そこからすべてのコードを取り出し、セミコロンをランダムな場所に挿入し、私の想像通り、サイト上のアニメーションで巨大なものを作成し、フルカラーRGBAトラフィックを減らすことができるjavascriptプラグインを取得しました2〜10回画像を作成し、サイト上の大きなRGBA画像の使用を妥当な平面に変換します。 また、スプライトにスライスする機能はすぐに縫い付けられるため、フロントエンドの最適化に関心がある幸運な人にとっては便利です。
更新した
公開とコメントの結果によると、プラグインを使用するための最適なオプションが明らかになりました：ページの読み込み中に画像を処理するという事実により、透明なスプライトマップまたはアニメーションを使用し、これらのスプライトマップのプリプロセッサに煩わされる人にとって特に興味深いでしょう透明度と圧縮率を調整する機能を備えた真に大きな画像が必要なユーザー。 単一の小さな画像の場合、からかいや同様のサービスが適しています。
マテリエル
透明度のある既存の画像から白黒のアルファチャンネルを抽出し、品質とサイズの希望に従って自分でそれを振ることができると想定されています。
ページの読み込み中に、alpha_spriter関数が呼び出され、4つの属性が提供されます。
- スプライトRGBファイルのURL
- 再び任意の形式のアルファチャネルを持つ対応するファイルのURL。ほとんどの場合、gif / png8です。
両方のファイルは同じドメインに存在する必要があります。 - スプライトのマークアップを持つフリースタイルのJavascriptオブジェクト。 冗談だ！ （気づいた？）フォームは非常に正確で、その例はプラグインコードで利用可能です。
- さて、最後に必要な機能
同じ秒で、関数は画像をロードし、それらをキャンバスと組み合わせて本格的なpng32にし、スプライトに切り取ります。 出力では、生成された画像はid（JSオブジェクトで指定）、ドキュメント本文で2つのバージョンで準備された要素：<img>のsrc、またはbackground-image（既に設定されている他の必要な背景プロパティの上）によって割り当てられます。
最小限の最初の作業バージョンがすぐにテストされ、いくつかの場所でオンドリに似た踊りのユキヒョウのイメージをうまく組み合わせて、1つの国のITインフラストラクチャを不可逆的な過熱から守ります。
比較のために、ページの読み込みのタイミングを同封します。 ここで禁止されていない場合、ページ自体、プラグイン、テストファイルはgithubにあります。 禁止されている場合-クリックしないでください。
念のため、もう一度言いますが、私のキャンバスはWeb環境で仕事をしており、その起源からのみです。 この瞬間が指定されています。
全部
さて、そのようなソリューションはすでに10あり、誰もそれを必要としないと教えてください。 rgb8およびcssのアルファについて。 しかし、真剣に、まず第一に、それがどれだけ需要があるか、そしてその場合はハイエンド3000レベルまで仕上げてスプライトマップジェネレーターを作成することを理解したいと思います。 まあ、実際には、あなたが何か希望があれば-ようこそ。
よろしくお願いします！
参照資料
プラグインの開発を加速し、おそらくその外観を引き起こしたのと同じ記事 -ありがとう、 sergof ！