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