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

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

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

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

Прежде всего, как только мы добавили изображения в нашу игру, нам нужны значения. Ширина и высота каждого куба (с легкостью взяты из ширины и высоты наших исходных изображений) и третье значение: block_depth. Это просто означает, что высота верхней грани (проще называть её "глубиной", нежели написать "block_face_height"), и в этом случае равна половине высоты самого куба:

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)),

А что насчёт добавления третьего измерения? Это очень просто, добавьт следующий код в конце координаты Y, которую вы проходите в love.graphics.draw:

- 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