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