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