View source for Tutorial:Isometric Graphics (Русский)

[[Изометрическая графика]] довольно популярны в [[RPG]] и [[стратегия]]х, так что будет полезно научиться рисовать сетку изометрических кубов. В этом уроке я предлагаю вам использовать кубы одинакового размера, поскольку мы создаём сетку кубов.

Во-первых, вам нужны исходные изображения. На исходном изображении должны быть два прекрасных куба, которые должны представлять траву и грязь (предпочтительно использовать смутно-зеленый и коричневый цвета). Я добавил рамку вокруг кубов, которые будут отображаться как фактическая сетка, поскольку это позволяет легче различить, где один куб заканчивается и начинается другое. Вы также должны отметить тот факт, что нижняя и правая границы отсутствует, это сделано поскольку кубы, как предполагается, образуют красивую сетку, и мы не хотим чтобы были двойные границы. В своих же кубах, вероятно, можно нарисовать всё, что вы хотите подключиться к кубам, поскольку у вас могут и не быть границы вокруг них, но я сделаю это для данного примера. 

''Примечание: Этот код сделан для кубов, но работает также, если вы хотите создать сетку только с верхней гранью. В результате будет два значения block_height и block_depth (как показано ниже), что есть то же саме.''

Прежде всего, как только мы добавили изображения в нашу игру, нам нужны значения. Ширина и высота каждого куба (с легкостью взяты из ширины и высоты наших исходных изображений) и третье значение: block_depth. Это просто означает, что высота верхней грани (проще называть её "глубиной", нежели написать "block_face_height"), и в этом случае равна половине высоты самого куба:
<source lang="lua">
block_width = grass:getWidth()
block_height = grass:getHeight()
block_depth = block_height / 2
</source>
Эти значения будут использованы в математических операциях ниже.


Далее, нам необходима сама сетка. Сделаем простой двумерный массив, который мы заполним значением 1 (которое представляет куб травы). Я также указал размер сетки, чтобы я мог что-то быстро изменить:
<source lang="lua">
grid_size = 20
grid = {}
for x = 1,grid_size do
   grid[x] = {}
   for y = 1,grid_size do
      grid[x][y] = 1
   end
end
</source>
На всякий случай (и, чтобы показать, где будут различные точки) давайте изменим две позиции сетки на значение 2 (которое представляет собой куб грязи):
<source lang="lua">
grid[2][4] = 2
grid[6][5] = 2
</source>


Само нанесение сетки, выглядит так (grid_x и grid_y являются переменными, которые я объявил ранее, чтобы постоянно отслеживать, где центр сетки должен быть, они будут использованы при перемещении сетки):
<source lang="lua">
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
</source>
Но я остановлюсь только на части травы, чтобы вам было проще:
<source lang="lua">
love.graphics.draw(grass,
   grid_x + ((y-x) * (block_width / 2)),
   grid_y + ((x+y) * (block_depth / 2)) - (block_depth * (grid_size / 2)))
</source>
Это отрисовывает кубы травы, начиная сверху и двигаясь вниз по верхней правой части, а затем перемещается на один шаг к нижней левой части и повторяет это снова. Это гарантирует, что все кубы отрисовываются в правильном порядке, чтобы те, что находятся "сзади" не пересекались с ними спереди.
Эта часть кода гарантирует, что переменные grid_x и grid_y указывают на центр сетки:
<source lang="lua">
- (block_depth * (grid_size / 2))
</source>


Примечание: Если вам не нравится, что координата X идёт с сверху направо, а координата Y идёт сверху налево, вы можете легко поменять их местами, переключая их места в строке: 
<source lang="lua">grid_x + ((y-x) * (block_width / 2)),</source>
Каким бы был результат в этой строке:
<source lang="lua">grid_x + ((x-y) * (block_width / 2)),</source>


А что насчёт добавления третьего измерения?
Это очень просто, добавьт следующий код в конце координаты Y, которую вы проходите в ''love.graphics.draw'': 
<source lang="lua">- block_depth</source>
(умноженная на каждый последующий уровень)
Так что, если мы хотим добавить еще один уровень в нашу сетку, вам нужно просто поставить его во вложенные циклы:
<source lang="lua">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)
</source>


Я надеюсь, что это научило вас, как рисовать простую изометрическую сетку, которую можно использовать для развлечения и пользы.

[[Category:Tutorials]]

{{#set:LOVE Version=0.5.0}}
{{#set:Description=Isometric Graphics}}

== Другие языки ==
{{i18n|Tutorial:Isometric_Graphics}}