From e20e7f3e61891743fe8afc4b2d2c8398f7d86bf2 Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@iiiypuk.me>
Date: Sun, 18 Dec 2022 22:32:31 +0300
Subject: [PATCH] gm tiled bg

---
 content/posts/2022/gamemaker/tiled-bg.md | 78 ++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 content/posts/2022/gamemaker/tiled-bg.md

diff --git a/content/posts/2022/gamemaker/tiled-bg.md b/content/posts/2022/gamemaker/tiled-bg.md
new file mode 100644
index 0000000..04b7305
--- /dev/null
+++ b/content/posts/2022/gamemaker/tiled-bg.md
@@ -0,0 +1,78 @@
+---
+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).