79 lines
3.2 KiB
Markdown
79 lines
3.2 KiB
Markdown
---
|
||
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).
|