資料館/E3Dのスプライトでメーター

Last-modified: 2008-09-04 (木) 00:31:53

HPメーターとかのサンプル

もう、真四角の長方形のメーターには飽きた!そうだろう兄弟。

ss01.jpg

もうこんな、工夫0でスプライトが横に伸び縮みするだけの棒グラフには飽き飽きだぜ!!




じゃあ何とかしようじゃないか。

描写順による魔法

http://homepage3.nifty.com/ghpk/e3d/e3d3t001.htm
此処に、某氏が書いた記事が載っているので、半透明の仕組みなる部分を5回くらい音読するべし。


上記記事を理解したという前提で説明するが、これと同じような事がスプライトの世界でも起こりえる。
透明色を持つスプライトの描写順序と位置関係によっては、スプライトが隠れる事があるのだ。


ここで考えてみてくれ。スプライトを出した事ある人はわかるかもしれないが、大抵透明色を持ってるよな。というか、矩形全部を使うスプライトしか使わない、なんて状況は極少ないはずだ。

手順

今回は、以下のようなメーターのフレームと、その中身の画像ファイルを用意した。
g1.PNGg2.PNG

みればわかるとおり、その殆どが透明色である。

こいつを2枚重ねて描写するのだが、この2枚の間に、全部透明色で構成されているスプライトを挟んで描写する事にする。2枚のHPゲージは、この透明スプライトより奥に描写する。
奥行きを、奥、手前の2種類のみとし簡単に説明するとこうだ。

  1. 奥にHPの枠を描写する
  2. 手前に透明スプライトを描写する
    • 透明スプライトはHP枠を透過する
  3. 奥にHPの中身を描写する
    • 手前側の透明スプライトが描写されるときには無かった
    • したがって透明スプライトに隠れる部分は描写されない

正しく実行するとこんな感じだ。

ss04.jpg

ついでなので、透明スプライトを黒いスプライトに変えて描写してみた

ss03.jpg





ゲージを一つ表示するのに3枚のスプライトを贅沢に使用した。3枚のZ座標の関係は

透明スプライト<HPゲージ中身≦HPゲージ枠

となっていればOKである。今回は単純な円形を使ったが、矩形の組み合わせで表現できるありとあらゆるメーターがこれで表現可能である。メンドクサイかもしれないけど。さんぷるぅソースはここから落とせるよ。filenicegauge.zip