79 lines
3.2 KiB
Markdown
79 lines
3.2 KiB
Markdown
|
---
|
|||
|
title: "🏁 Тайловый (повторяющийся) фон в GameMaker"
|
|||
|
date: 2022-12-18T22:00:55+03:00
|
|||
|
draft: false
|
|||
|
tags: [gamemaker, gamedev, tutorial]
|
|||
|
---
|
|||
|
|
|||
|
В этом руководстве я на примере покажу, как в сцене GameMaker
|
|||
|
сделать [тайловый фон](https://ru.wikipedia.org/wiki/Тайловая_графика).
|
|||
|
|
|||
|
Пример того, как это будет выглядеть.
|
|||
|
|
|||
|
![](/content/images/2022/gm_tiled_example.gif)
|
|||
|
|
|||
|
## Шаг первый — Сцена
|
|||
|
|
|||
|
Я создал для примера сцену размером 320x192 пикселя.
|
|||
|
Размеры сцены кратный 16 пикселям.
|
|||
|
|
|||
|
Включил вьюпорты [**Enable Viewports**].
|
|||
|
В настройках камеры [**Camera Properties**] установил **Width** — 320px, **Height** — 192px.
|
|||
|
В настройках вьюпорта [**Viewport Properties**] установил **Width** — 960px, **Height** — 576px.
|
|||
|
|
|||
|
Эти размеры соответсвуют размеру сцены умноженные на 3 (**x3**).
|
|||
|
|
|||
|
## Шаг второй — Спрайт
|
|||
|
|
|||
|
Я нарисовал спрайт размером 32x32 пикселя, который состоит из четырёх квадратов,
|
|||
|
размером 16x16 пикселей и назвал его `s_tile_bg`.
|
|||
|
|
|||
|
![](/content/images/2022/gm_tiled_sprite_window.png)
|
|||
|
|
|||
|
Спрайт: ![](/content/images/2022/s_tile_bg.png)
|
|||
|
|
|||
|
## Шаг третий — Объект
|
|||
|
|
|||
|
Далле я создал объект `o_tiled_bg` с двумя событиями `Draw` и `Step`.
|
|||
|
|
|||
|
![](/content/images/2022/gm_tiled_object.png)
|
|||
|
|
|||
|
В событии `Draw` рисуем на сцене спрайт используя функцию `draw_sprite_tiled()`.
|
|||
|
|
|||
|
**draw_sprite_tiled(sprite, subimg, x, y)** — функция принимает
|
|||
|
в качестве первого аргумента имя спрайта и затем многократно
|
|||
|
чередует его по всей комнате, начиная с указанных координат.
|
|||
|
|
|||
|
Код события `Draw`:
|
|||
|
|
|||
|
```cpp
|
|||
|
/// @description Draw tile
|
|||
|
|
|||
|
draw_sprite_tiled(s_tile_bg, 0, x, y);
|
|||
|
```
|
|||
|
|
|||
|
Как видишь, в качестве первого аргумента я установил ранее нарисованный спрайт `s_tile_bg`.
|
|||
|
|
|||
|
Второй аргумент указывает на номер изображения, но так как в спрайте у меня одно изображения,
|
|||
|
я установил второй аргумент `0`.
|
|||
|
|
|||
|
Третий и четвёртый аргументы, это координаты на которых мы отрисовываем спрайт.
|
|||
|
|
|||
|
Для создания эффекта движения спрайта, эти значения должны быть динамические.
|
|||
|
|
|||
|
В собитии `Step` я просто сделал увеличение значений положения объекта.
|
|||
|
|
|||
|
```cpp
|
|||
|
/// @description Move tile
|
|||
|
|
|||
|
x += 1;
|
|||
|
y += 1;
|
|||
|
```
|
|||
|
|
|||
|
## Готово
|
|||
|
|
|||
|
Запускаем сцену и наслаждаемся результатом.
|
|||
|
|
|||
|
Готовый `*.yyz` проект можно скачать по этой
|
|||
|
[ссылке](/content/files/tiled_bg.yyz).
|