Blog/content/posts/2022/gamemaker/tiled-bg.md

79 lines
3.2 KiB
Markdown
Raw Normal View History

2022-12-18 22:32:31 +03:00
---
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).