Views

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

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

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

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

Эти значения будут использованы в математических операциях ниже.

Далее, нам необходима сама сетка. Сделаем простой двумерный массив, который мы заполним значением 1 (которое представляет куб травы). Я также указал размер сетки, чтобы я мог что-то быстро изменить:

На всякий случай (и, чтобы показать, где будут различные точки) давайте изменим две позиции сетки на значение 2 (которое представляет собой куб грязи):

Само нанесение сетки, выглядит так (grid_x и grid_y являются переменными, которые я объявил ранее, чтобы постоянно отслеживать, где центр сетки должен быть, они будут использованы при перемещении сетки):

Но я остановлюсь только на части травы, чтобы вам было проще:

Это отрисовывает кубы травы, начиная сверху и двигаясь вниз по верхней правой части, а затем перемещается на один шаг к нижней левой части и повторяет это снова. Это гарантирует, что все кубы отрисовываются в правильном порядке, чтобы те, что находятся "сзади" не пересекались с ними спереди. Эта часть кода гарантирует, что переменные grid_x и grid_y указывают на центр сетки:

Примечание: Если вам не нравится, что координата X идёт с сверху направо, а координата Y идёт сверху налево, вы можете легко поменять их местами, переключая их места в строке:

Каким бы был результат в этой строке:

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

(умноженная на каждый последующий уровень) Так что, если мы хотим добавить еще один уровень в нашу сетку, вам нужно просто поставить его во вложенные циклы:

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

Другие языки