Blog/content/posts/2022/gamemaker/tiled-bg.md
2022-12-18 22:32:31 +03:00

79 lines
3.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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