5.

4 Методичні вказівки до виконання лабораторної роботи № 1

5.4.1 Робота з проектом. Створення, запам’ятання, загрузкаЩоб
приступити до розробки гри в GameMaker необхідно обов'язковостворити
проект. Проект - це сукупність службових файлів, які система
GameMaker створює автоматично після створення проекту гри
користувачем, за допомогою кнопки панелі інструментів або пункту меню
«Create a game» (Створити гру) та розміщує їх в папці з іменем проекту. Це
дозволяє у любий зручний момент відкривати проект, вносити у нього
зміни та зберігати їх.
У файлах проекту міститься різноманітна службова інформація, а
також інформація про всі ресурси гри (спрайт, фон, кімната, об’єкт, звуки
та ін.), їх властивості, розміщення, поведінку та інше.

5.4.1.1 Створення проекту

Створити проект в додатку GameMaker можна кількома способами: за
допомогою кнопки на панелі інструментів «Create a new game» (Створити
нову гру) і за допомогою пункту меню «File» (Файл) => «New
Project» (Новий проект) (рис. 5.1).

Рисунок 5.1 - Пункт меню «New Project» (Новий проект)

При натисканні на цей елемент з'являється діалогове вікно (рис. 5.2), в
якому потрібно ввести ім'я проекту (наприклад «lab1»). Потім потрібно
натиснути кнопку «Create» (Створити).

51
 Рисунок 5.2 - Вікно створення нового проекту
Проект створено.

5.4.1.2 Збереження проекту

В процесі роботи над додатком потрібно зберігати зміни зроблені в
проекті, щоб після закриття GameMaker можна було знову повернутися до
роботи над ігровим додатком, інакше всі дані будуть втрачені після закриття
GameMaker. Це потрібно робити за допомогою кнопки «Зберегти» (save the
game) на панелі управління або за допомогою пункту меню «Файл» (File)
=> «Зберегти» (Save) (рис. 5.3).

Рисунок 5.3 - Пункт меню «Зберегти» (Save)

5.4.1.3 Відкриття проекту
Щоб відкрити раніше збережену гру, потрібно скористатися кнопкою
«Open an existing game» (Відкрити гру) на панелі інструменті або пунктом
головного меню «Файл» (File) => «Open Project» (Відкрити проект) (рис.
5.4).

52
 Рисунок 5.4 - Пункт меню «Відкрити проект» (Open Project)
Після цього в діалоговому вікні вибрати папку з назвою проекту (в
нашому випадку lab1.gmx) (рис. 5.5).

Рисунок 5.5 - Діалогове вікно відкриття проекту

Потрібно виділити мишкою папку проекту і натиснути кнопку
«Відкрити» (Open).
Після відкриття папки проекту, потрібно вибрати файл проекту (в
нашому випадку «lab1.project») і натиснути кнопку «Відкрити» (Open) (рис.
5.6).

53
 Рисунок 5.6 - Діалогове вікно відкриття проекту
Проект відкритий. Про це свідчить зміст заголовка головного вікна
GameMaker (рис. 5.7).

Рисунок 5.7 - Головне вікно GameMaker після відкриття проекту

Тепер можна повернутися до роботи над проектом, вносити в нього
зміни, доповнювати і в кінці роботи потрібно обов'язково зберегти його
знову.
5.4.2 Базові ресурси ігрового програми
При подові ігор в середовищі GameMaker використовують наступні
основні ресурси:
x спрайт,
x звук,
54
 x фон,
x об'єкт,
x кімната.
На рисунку 5.8 представлено дерево ресурсів із зазначенням
розташування кожного ресурсу в дереві. Коли ми створюємо ресурс, він
з’являється у дереві ресурсів.

Рисунок 5.8 - Дерево ресурсів

Зупинимося детальніше на кожному з них.
Спрайт - зображення, які використовуються для відображення
об'єктів. Тобто це будь-яке зображення, яке можна завантажити з
графічного файлу (* .jpg, * .png, * .gif) або створити в редакторі спрайтів,
вбудованого в GameMaker. Приклад спрайту зображений на рисунку 5.9.

Рисунок 5.9 - Приклад спрайту

Об'єкт - активний персонаж гри. Власне об'єкти, головні складові
гри. Приклад об'єкта наведено на рисунку 5.10.

55
 Рисунок 5.10 - Об'єкт в кімнаті
Кімната - спеціальний статичний об'єкт, який представляє навколишнє
оточення (світ), в якій відбувається гра. У кімнатах розміщуються об'єкти,
такі як герої, стіни, вороги і так далі. Приклад ігрової кімнати з об'єктами
наведено на рисунку 5.11.

Рисунок 5.11 - Приклад кімнати з об'єктами

Звук - фонова музика або звукові ефекти, що використовуються в грі.
Фон - зображення, які використовуються як фон для кімнат. Фон, також
як і спрайт, можна завантажити з графічного файлу (* .jpg, * .png, * .gif).
Приклад фону для кімнати наведено на рисунку 5.12

56
 Рисунок 5.12 - Приклад фону для кімнати
5.4.3 Робота із спрайтами
Спрайт - це візуальне уявлення об'єкта в грі. Спрайт може складатися з
єдиного зображення, створеного в будь-якій програмі, або з набору
зображень, що відображаються один за одним, створюючи анімацію. На
рисунку 5.13 наведено зображення спрайту головного героя гри.

Рисунок 5.13 – Приклад спрайту головного персонажа (героя)

Зазвичай на етапі розробки концепту гри, вибираються зображення
(спрайти) для об’єктів гри, таких як головний герой, перешкоди, бонуси і
таке інше. Необхідно відмітити, що достатня кількість корисних спрайтів
поставляється разом з GameMaker. Але набагато більше можна знайти в
Інтернеті, в тому числі на спеціальних сайтах. Зазвичай спрайти мають
формат png, jpg або анімоване зображення формату gif.

5.4.3.1 Створення спрайту

Для того щоб створити спрайт у середовищі GameMaker, потрібно
скористатися пунктом меню «Resources» (Ресурси) -> «Create Sprite»
(Створити спрайт) (рис. 5.14). Альтернативним варіантом є натиснути праву
кнопку миші у дереві ресурсів на пункту «Sprites» та в контекстному меню
натиснути «Create Sprite».

57
 Рисунок 5.14 – Пункт меню для створення спрайту
Після цього відкриється вікно створення спрайта (рис. 5.15).

Рисунок 5.15 – Вікно створення спрайту

58
 У полі «Name» (Ім’я) вводиться ім’я спрайту, наприклад «spr_hero».
Для імен усіх ресурсів в GameMaker прийнято ставити префікс. Для імен
спрайтів використовується префікс «spr_». Це допоможе у великий
кількості ресурсів по імені ідентифікувати ресурс того чи іншого типу
(спрайт, звук, фон, об’єкт).

5.4.3.2 Завантаження спрайту

Зображення спрайту можна завантажити з файлу або створити його у
редакторі спрайту. За ці дві можливості відповідають відповідні кнопки
(рис. 5.16).

Рисунок 5.16 – Кнопки завантаження/редагування спрайту

Для завантаження спрайту з графічного файлу, треба натиснути кнопку
«Load Sprite» (Завантажити спрайт). Далі з’явиться вікно завантаження
спрайту з графічного файлу (рис. 5.17).
Вибираємо папку з завантаженими раніше зображеннями, знаходимо
потрібне нам зображення, обираємо його і натискаємо кнопку «Відкрити»
(Open).

Рисунок 5.17 – Вікно завантаження спрайту з графічного файлу

59
5.4.3.3 Редагування спрайту
Також можна створити спрайт у вбудованому графічному редакторі
спрайтів. Для цього натискаємо кнопку «Edit Spite» (Редагувати спрайт).
З’являється графічний редактор (рис. 5.18). На рисунку червоною стрілкою
позначена кнопка «Create a new sprite» (Створити новий спрайт).

Рисунок 5.18 – Графічний редактор спрайтів

Потім треба ввести у відповідні поля розміри майбутнього зображення
(рис. 5.19)

Рисунок 5.19 – Вікно для введення розмірів зображення

Далі з’являється область із заданими розмірами. Для рисування
спрайту треба виділити мишею дану область і натиснути кнопку «Edit the
image» (Редагування зображення). Ці етапи позначені на рисунку 5.20
червоним кольором.

60
 Рисунок 5.20 – Дії для створення нового зображення
З’являється вікно редактора зображень. На рисунку 9 наведено вікно
редактора, синіми стрілками позначені основні панелі для рисування та їх
назви.
У панелі інструментів знаходяться кнопки для найбільш
розповсюджених операцій з зображенням, що дозволяє вибрати потрібний
інструмент для малювання, та малювати в області для малювання.
Також можна вибрати колір для малювання, за допомогою відповідної
панелі.
Можна вибрати розмір елементу для малювання, за допомогою панелі
вибору розміру.
Після того як потрібне зображення створене, його потрібно зберегти.
Це робиться за допомогою відповідної кнопки (на рисунку 5.21 виділена
червоним прямокутником).

61
 Рисунок 5.21 - Вікно редактора зображень
Розберемо детальніше кожну кнопку панелі управління (рис. 5.22). У
таблиці 5.1 представлені всі кнопки панелі управління з їхнім призначенням.

Рисунок 5.22 – Панель управління

Таблиця 5.1.
Кнопки панелі управління редактору спрайтів та їх призначення
Зберегти зміни та закрити вікно

Створити нове зображення

Завантажити зображення із файлу

62
 Добавити зображення

Зберегти зображення як графічний файл

Відмінити останню дію

Відміняє останнє відмічення

Вирізати зображення у буфер обміну

Копіювати зображення у буфер обміну

Вставити зображення із буферу обміну

Зменшити масштаб

Показати зображення в натуральний розмір

Збільшити масштаб

Відображати сітку

Попередній перегляд зображення

Редактор спрайтів містить багато команд для створення і зміни спрайту.

Вони повністю доступні через меню (для деяких є кнопки на панелі
інструментів). Деякі команди працюють з окремими зображеннями. Вони
вимагають, щоб спочатку мишею було обрано потрібне зображення. Більш
детальніше розберемо кожний пункт меню редактору спрайту (табл. 5.2).
Таблиця 5.2.
Призначення пунктів меню редактора спрайтів
Назва пункту меню Призначення пункту меню
File (Файл) Меню File містить безліч команд, що мають відношення до
завантаження та збереження спіратів.

63
New (Новий) Створює новий, порожній спрайт.
Create from File Створює спрайт з файлу. Можуть бути використані багато
(Створити з файлу) типів файлів. В основному вони створюють спрайт, що
складається з єдиного зображення, за винятком анімованих
файлів GIF, які складаються з декількох зображень, і
стрипів, які мають ім'я, яке закінчується на _stripXX.
Add from File (Додати з Додає зображення (або кілька зображень) з файлу в
файлу) поточний спрайт. Якщо зображення не однакового розміру,
можна вибрати, де їх розташувати, або, розтягнути їх.
Також можна вибрати кілька зображень, які будуть потім
всі завантажені.
Save as PNG File Зберігає спрайт як стрип в файлі PNG. Коли спрайт має
(Зберегти як PNG файл) численні частини зображення, автоматично додається текст
_stripXX з XX позначає кількість кадрів зображення.
Create from Strip Дозволяє створити спрайт з стрипа.
(Створити з стрипа)
Add from Strip (Додати з Використовуйте це, щоб додати зображення з стрипа.
стрипа)
Close Saving Changes Закриває форму, зберігаючи зміни, вироблені в спрайт.
(Закрити, зберігши Якщо не потрібно зберегти зміни, можна кликнути на
зміни) кнопці закриття форми.
Edit (Правка) Меню редагування містить деякі команди редагування.
Undo (Скасувати) Скасувати останню зміну. Останні 16 змін можуть бути
скасовані.
Redo (Повернути) Повернути останню скасовану дію.
Cut (вирізати) Вирізати обраний кадр в буфер. Можна відредагувати або
використовувати це зображення в іншій програмі. Проте,
інформація про прозорість може бути втрачена.
Copy (Копіювати) Скопіювати кадр в буфер.
Paste (Вставити) Вставити зображення з буфера як новий кадр. Коли він має
невідповідний розмір, необхідно вказати як змінити його.
Коли зображення скопійовано з іншої програми,
інформація про прозорість може бути втрачена.

64
Erase (Стерти) Очистити поточний, чи усі кадри в конкретний колір.
Відкриває форму, в якій можна вибрати колір і величину
непрозорості (альфу). Показується попередній результат.
Також можна вказати стерти все зображення або тільки
поточний результат.
Delete (Видалити) Видаляє вибраний кадр
Move Left (Зрушити Переміщує вибраний кадр на одну позицію вліво в
вліво) послідовності.
Move Right (Зрушити Переміщує вибраний кадр на одну позицію вправо в
вправо) послідовності.
Add Empty (Додати Додає новий порожній кадр в кінець послідовності.
порожній)
Insert Empty (Вставити Додає новий порожній кадр перед обраним кадром.
порожній)
Edit (Редагувати) Відредагувати вибраний кадр в вбудованому редакторі
зображень.
Set Tranparency Визначає, як прозора область спрайтів повинна бути
Background (Установки показана в редакторі спрайтів.
фону)
Transform Цей пункт меню дозволяє виконати безліч перетворень в
(Трансформація) зображеннях.
Shift (Зрушити) Переміщення зображення на зазначений інтервал
горизонтально або вертикально.
Mirror / Flip Перевертання зображення горизонтально / вертикально.
(Перевернути)
Rotate (Повернути) Поворот зображення на 90, 180 або 270 градусів, або ж на
довільний кут.
Scale (Масштаб) Встановлює масштаб зображення (але не розмір
зображення!). Можна вказати коефіцієнт масштабування і
масштабувати горизонтально / вертикально.
Skew (Перекіс) Перекошує зображення (зображення) горизонтально /
вертикально на задане значення.
Resize Canvas (Розмір Зміна розмір полотна. Можна також вказати, де встановити
полотна) зображення на новому полотні.
Stretch (Розтягнути) Розтягнення зображення під новий розмір. Можна вказати
коефіцієнт масштабування і якість.

65
Crop (Обрізати) Робить зображення якомога менше. Це дуже корисно,
оскільки, чим більше зображення, тим Game Maker
використовує більше відео пам'яті.
Images (Зображення) В меню Images можна виконати безліч операцій з
зображеннями
Cycle Left (Циклічний Зміщує всі зображення на одне місце вліво. Це починає
зсув вліво) анімацію з іншого кадру.
Cycle Right (Циклічний Зміщує всі зображення на одне місце вправо.
зсув вправо)

Black and White (Чорно- Робить зображення чорно-білими (тобто, напівтонова

білий) палітра).
Colorize (Розфарбувати) Змінює колір зображень. Використовуйте повзунок, щоб
вибирати новий колір.
Colorize Partial Змінює колір частини зображення. Можна вибрати старий
(Частково колір і допуск навколо нього, і потім вказати новий колір,
розфарбувати) яким замінюється цей діапазон кольорів.
Intensity (Інтенсивність) Змінює інтенсивність, встановлюючи величини для тону і
яскравості нових зображень.
Invert (Інвертувати) Інвертує кольору в зображеннях
Make Opaque (Зробити Видаляє всю інформацію про прозорість із зображень, тому
непрозорим) вони стають непрозорими.
Erase a Color (Стерти Зробити прозорим. Обирається базовий колір для
колір) очищення (або кілком на кольоровому блоці, або кілком в
ліве зображення). Також можливо визначити допуск
кольорів. Всі пікселі з кольором близьким до вибраному
кольору будуть зроблені прозорими.
Smooth Edges (Гладкі Розгладжує краї навколо непрозорої частини зображення,
краю) щоб вони краще виглядали.
Opacity (Прозорість) Змінює непрозорість (прозорість) для всього зображення.
Можна або встановити це відносно поточної непрозорості
або абсолютної.
Set Alpha from File Керування альфа-каналу зображення. Вибирає одне
(Альфа-канал з файлу) зображення. Яскравість пікселів цього зображення буде
використана як величина прозорості.

66
Blur (Розмиття) Змащуючи зображення, кольору трохи змішуються,
роблячи зображення більш невизначеним. Можна вибрати
невелике, середнє, або велике розмиття.
Sharpen (Різкість) Зворотна операція по відношенню до Blur. Зображення
буде зроблено більш чітким, підвищуючи різкість країв.
Outline (Окреслити) Окреслює зображення навколо. Встановлюється колір і
товщина ліній, також можна вказати, розташувати
обведення в зображенні чи ні.
Shadow (Тінь) Створює тінь за зображенням. Можна вказати колір,
непрозорість, і відносну позицію тіні.
Glow (Світіння) Створює кольорове світіння навколо зображення. Можна
вказати колір світіння, непрозорість і товщину.
Buttonize (Зробити Перетворює зображення в кнопку. Можна вказати колір
кнопкою) кнопки і прозорість.
Gradient Fill (Заповнити Заливає зображення градієнтом. Можна визначити два
градієнтом) кольори градієнта, непрозорість, і тип градієнту.
Animation (Анімація) В меню анімації, можна створити нові анімовані спрайт з
поточного спрайту.
Set Length (Встановити Встановлення довжини анімації. Анімація буде повторена
довжину) стільки раз, скільки треба, щоб створити необхідну
кількість кадрів.
Stretch (Розтягнути) Встановлення довжини анімації. Але в цьому випадку
кадри будуть продубльовано або видалено, щоб отримати
їх необхідну кількість.
Reverse (Зворотній) Переставляє кадри анімації в зворотному порядку (з
останнього до першого)
Add Reverse (Додати Зворотна послідовність додається до поточної анімації,
зворотній) подвоюючи кількість кадрів.
Translation Sequence Створення анімації, в якій зображення трохи
(Послідовне переміщається кожен крок. Необхідно задати кількість
переміщення) фреймів і інтервал переміщення горизонтально і
вертикально.
Rotation Sequence Створює анімацію, в якій зображення обертається. Можна
(Послідовний поворот) вибрати обертання за годинниковою стрілкою або проти
годинникової стрілки, також можна визначити кількість
кадрів і загальний кут в градусах (360 - повний поворот)

67
Colorize Створює анімацію, яка перефарбовує зображення в
(Розфарбовування) конкретний колір.
Fade to color (Поступове Створює анімацію, яка поступово зливає зображення з
зафарбування) кольором.
Disappear (Зникнення) Змушує зображення зникати, роблячи його більш прозорим
в кожному кроці.
Shrink (Зменшення) Зменшує зображення до нуля. Ви можете вказати напрямок.
Grow (виростання) Зображення поступово зростає.
Flatten (Згортання) Вирівнює зображення до нуля в заданому напрямку.
Raise (Розгортання) Піднімає зображення з заданого напрямку
Overlay (Перекриття) Перекриває анімацію інший анімацією або зображенням з
файлу.
Morph (Перетворення) Анімація перетворення в зображення або анімацію з файлу.

5.4.3.4 Налаштування спрайту

Для кожного спрайту необхідно задати його центр (origin) Це точка на
спрайті, яка відповідає його положенню в кімнаті. Коли екземпляр
встановлюється в будь-якої позиції, туди поміщається центр спрайту. За
замовчуванням центром є верхній лівий кут спрайту, але іноді зручніше
використовувати безпосередньо центр (клацаючи кнопкою Center) або деякі
інші точки (рис. 5.23). Можна навіть вибрати центр поза спрайту. Також
можна встановити центр спрайту, кликом в будь який точці на його
зображенні. Центр показується хрестиком.

Рисунок 5.23 – Зміна розміру та центровка спрайту

Найважливіші настройки ті, які пов'язані з перевіркою зіткнення.

Кожен раз, коли два зразка зустрічаються, відбувається подія зіткнення.
Зіткнення перевіряються наступним чином. У кожного спрайту є маска. За
умовчанням вона відповідає всім пікселям, що не повністю прозорі. Коли
68
два пікселя в масках цих двох спрайтів перетинаються, відбувається подія
зіткнення.
Іноді не потрібна точна перевірка зіткнення. В цьому випадку,
необхідно прибрати прапорець Precise Collision Checking (точна перевірка
зіткнення). Тепер в якості маски використовується прямокутник (bounding
box).
Коли спрайт має багато кадрів, то за замовчуванням створюється
єдина маска, яка комбінує маски всіх кадрів. Зазвичай це - те, що потрібно,
але в певних ситуаціях необхідно, щоб кожен кадр мав свою власну маску.
В цьому випадку встановлюється прапорець «Separate collision
masks» (окремі маски зіткнення) (рис. 5.24).

Рисунок 5.24 – Настройка зіткнення

Щоб редагувати інші параметри маски зіткнення необхідно натиснути
кнопку Modify Mask (Змінити маску) (рис. 5.24). Після натискання з’явиться
наступне вікно (рис. 5.25).

Рисунок 5.25 – Настройка маски зіткнення

69
 В області «Image» (Зображення) показана інформація про зображення
спрайту. Можна переглянути різні кадри. Також можна показати маску
зіткнення, за допомогою прапорця Show collision mask (показати маску
зіткнення) (за замовчуванням опція ввімкнена). У цьому випадку, на
зображенні справа маска показана по периметру прямокутником. Можна
також змінити масштаб зображення, щоб краще розгледіти деталі
зображення, за допомогою кнопок з зображенням лупи.
В області «Bounding Box» (Гранична коробка) можна змінити
обмежуючий прямокутник. Тільки пікселі з цього прямокутника
використовуються для маски. За замовчуванням обмежуючий
прямокутник обчислюється автоматично (Automatic), беручи до уваги
альфа прозорість, окремо для кожного зображення, коли
використовуються окремі маски зіткнення. Також можна встановити
розмір обмежуючого прямокутника як ціле зображення (перемикач Full
image), або можна встановити його вручну (Manual). Коли прямокутник
встановлюється вручну, можна також розтягнути обмежуючий
прямокутник лівою кнопкою миші по зображенню, або ж перемістити його
правою кнопкою миші.
В області Shape (Форма) можете задати форму маски. За
замовчуванням використовується точна (Precise) перевірка зіткнення з
пікселями, але можна вибрати також, використання прямокутника, еліпса,
або ромбічну форму. Прямокутники або еліпс, в багатьох випадках
представляють кращу форму.
В області General (Загальний) можна (знову) вказати, чи дійсно повинні
використовуватися окремі маски зіткнення для всіх кадрів (прапорець
Separate collision masks). Можна також вказати обмеження альфа прозорості.
З більш високим обмеженням також пікселі, які є частково прозорими,
залишаються поза маски. Це впливає і на те, що обмежує прямокутник
(якщо не вибрана ручна настройка) і на маску для точної перевірки зіткнень.
Як тільки все зроблено, необхідно натиснути OK. Якщо маска була
змінена, у вікні спрайту буде показано слово Modified, яке інформує, що
деякі параметри настройки спрайту змінилися (рис. 5.26).

70
 Рисунок 5.26 – Вигляд вікна після редагування параметрів маски
5.5 Збереження спрайту
Після того, як спрайт було створено і внесені усі зміни у його
налаштуванні, потрібно зберегти його. Для цього натискаємо кнопку «Ок»
(рис. 5.27).

Рисунок 5.27 – Кнопка для збереження спрайту

Після збереження спрайт з’являється у дереві ресурсів (гілка «Sprites»)

(рис 5.28).

71
 Рисунок 5.28 – Дерево ресурсів після створення необхідних
спрайтів.

Очікувані практичні результати роботи:

x Проект гри.
x В гілці «Sprites» проекту повинно бути спрайти головного героя,
ворога, фруктів, перешкод.

72