Tutorial:Isometric Graphics (日本語)

投影図グラフィックスは RPG およびストラテジー・ゲームでは非常に人気があり、投影図における立方体のグリッドを描画する方法の学習は有用です。このチュートリアルに対しては立方体のグリッドを作成するために作業用に等しい大きさの立方体を使用していると仮定します。

最初に、いくつかのソース画像を必要とします。ソースを参照すると雑草と泥 (曖昧な緑色と丁寧な褐色を使用)を表す二種類の立方体があります。参考までに実際のグリッドとして現れる立方体の境界周辺を内包することにより一つの立方体が終了して他方を開始するための識別をより容易にします。下および右の境界は省略されることに注意すべきであり、この理由は立方体はグリッドを具合良く形成するためであると想定されており、どの場所であろうと二重境界を得たくないからです。立方体自体は恐らく境界周辺を持つ必要がないので立方体を接続するために希望するものを全て描画することはできますが、この用例に対しては行います。

注意: このコードは立方体用に作成されていますが、上面だけ存在するグリッドを作成したい場合でも動作します。これは二つの値である block_height および block_depth (後述を参照) の結果は同一となります。 まず、画像を追加したならば、いくつかの値が必要になります。各立方体の幅と高さ (ソース画像 の幅および高さから取得すると容易です) および第三値です: block_depth です。この意味は上面の高さであり (それは "block_face_height" または毎回なにかを書かなければいけないことよりも "depth" を呼び出すほうが容易です)、この場合は、立方体自体の半分の高さです:

block_width = grass:getWidth()
block_height = grass:getHeight()
block_depth = block_height / 2

これらの値は素晴らしい計算を後述にて行うために使用されます。

次に、グリッド自体を必要とします。値 1 (雑草の立方体を表します) で補填した単純な二次元配列で十分でしょう。変更を容易にできる状態 (それを行いたい場合) にするためにグリッドの大きさを指定します:

grid_size = 20
grid = {}
for x = 1,grid_size do
   grid[x] = {}
   for y = 1,grid_size do
      grid[x][y] = 1
   end
end

余計な用心ですが二つのグリッドにおける位置の値を 2 (泥の立方体を表します) へ変更しましょう (および様々な地点がどこを示すのか):

grid[2][4] = 2
grid[6][5] = 2

実際のグリッドにおける描画はこのようになります (grid_x および grid_y は変数でありグリッドの中心をどこにすべきかどうかの軌道を維持するために以前に宣言されたものです。これらはグリッドの移動時に使用されます):

for x = 1,grid_size do
   for y = 1,grid_size do
      if grid[x][y] == 1 then
         love.graphics.draw(grass,
            grid_x + ((y-x) * (block_width / 2)),
            grid_y + ((x+y) * (block_depth / 2)) - (block_depth * (grid_size / 2)))
      else -- grid[x][y] == 2
         love.graphics.draw(dirt,
            grid_x + ((y-x) * (block_width / 2)),
            grid_y + ((x+y) * (block_depth / 2)) - (block_depth * (grid_size / 2)))
      end
   end
end

より容易な状態にするために、雑草の部分に注目します:

love.graphics.draw(grass,
   grid_x + ((y-x) * (block_width / 2)),
   grid_y + ((x+y) * (block_depth / 2)) - (block_depth * (grid_size / 2)))

これは雑草の立方体を描画するものであり、上を始点として右上側に沿って下へ移動をしてから、右下へ一歩移動して再度処理を行います。これは結果として"背面"は正面と重ならず立方体が全て正しい順序で描画されることを保証します。コードの本部分は変数 grid_x および grid_y によりグリッドの中心を指し示すことを保証します:

- (block_depth * (grid_size / 2))

注釈: X 座標は上から右へ進み Y 座標は上から左へ進むことに関して好ましいと思わない場合は行に切り替えるためものを配置することで簡単に切り替えることができます:

grid_x + ((y-x) * (block_width / 2)),

この行の結果は:

grid_x + ((x-y) * (block_width / 2)),

いま、どうして三次元を追加するのですか？ これは love.graphics.draw へ渡す Y 座標の終端を下記のコードへの追加を容易にするためです:

- block_depth

(乗算することで続きごとの段階を上げます)。 従って、グリッドへ別の段階を追加したい場合は、これを単に入れ子になったループに対して挿入します:

love.graphics.draw(grass,
   grid_x + ((y-x) * (block_width / 2)),
   grid_y + ((x+y) * (block_depth / 2)) - (block_depth * (grid_size / 2)) - block_depth)

これで私は娯楽と利益に対して使用できる簡単な投影図のグリッドを描画する方法を伝授したと期待しています(利益が出た場合は私のことを思い出してくださいね。 (^^)

そのほかの言語

Dansk – Deutsch – English – Español – Français – Indonesia – Italiano – Lietuviškai – Magyar – Nederlands – Polski – Português – Română – Slovenský – Suomi – Svenska – Türkçe – Česky – Ελληνικά – Български – Русский – Српски – Українська – עברית – ไทย – 日本語 – 正體中文 – 简体中文 – Tiếng Việt – 한국어
More info