Мені набридло тестувати процеси GameDev за допомогою трикутників та прямокутників. Це нудно і не цікаво, тому настав час щось підірвати. Але з чого розпочати? - Запитайте Ви. А я відповім, потрібно намалювати sprite вибуху, якщо бути точним, то намалювати sprite sheet для вибуху, який представлятиме анімацію вибуху.
Але як це зробити? - цим питанням спантеличив я. Після вивчення кількох форумів та відеоуроків, я вирішив зібрати отриману інформацію в один урок на своєму сайті. Отже у нас наступне технічне завдання на цей урок:
- Намалювати кілька sprite картинок, з яких ми зробимо sprite sheet для анімації вибуху;
- Зібрати сам sprite sheet та зберегти його в PNG файл;
- Зробити все це за допомогою ПЗ Adove Illustrator .
Малюємо sprite картинки по кроках
Примітка. Також, якщо не цікаво читати покроковий мануал, то пропоную відразу звернутися до відеоуроку наприкінці статті, там наочно розписано, показано і пояснено.
Крок перший
Створюємо файл із полотном для sprite картинки з параметрами 20 на 20 пікселів. Саме такі картинки будемо використовувати в наступних уроках GameDev Qt для реалізації вибухів від куль. Малюватимемо вибухи.
Крок другий
А тепер створюємо на робочому полотні прямокутну сітку, яка розділятиме наші пікселі. При цьому необхідно задати параметри сітки такі, що її ширина і висота дорівнюють ширині і висоті спрайту, а кількість вертикальних і горизонтальних роздільників зробити кількості пікселів за висотою і шириною відповідно. Також не забудьте прибрати обведення та зробити фон прозорим, нам же не потрібен зайвий білий колір у sprite-картинці.
Крок третій
Вибираємо інструмент Швидка Заливка та створюємо лівим кліком миші групу для швидкої заливки з прямокутної сітки. Швидка заливка заповнює вибраним кольором область обмежену роздільниками, а також контуром або обведенням. Оскільки сітка розділяє полотно по пікселям, то кожен прямокутник буде одним пікселем, який ми заповнюватимемо кольором за допомогою Швидкої Заливки.
Крок четвертий
Після того, як ми малюємо всі 15 sprite картинок, створимо новий проект у Adobe Illustrator. Який буде містити всі 15 sprite картинок і буде шириною на всі 15 картинок і за висотою на одну картинку. Тобто малюватимемо всі картинки в один ряд. Також помістимо прямокутник на полотно. Не забудьте прибрати обведення та зробити фон прозорим.
Крок п'ятий
Далі створюємо в Прямокутнику контурну сітку, що складається з одного рядка і 15 стовпців під всі картинки.
Крок шостий
А тепер, зайшовши в пункт меню Файл за допомогою пункту "Помістити" додаємо в проект всі підготовлені спрайти.
Крок сьомий
А тепер завершуємо створення sprite sheet , зберігши його в PNG картинку із прозорим фоном. Після збереження зображення перевіримо його, як воно виглядає в звичайному переглядачі зображень.
Також весь урок представлений у наступному відеоуроці.
