Evgenii Legotckoi
Evgenii Legotckoi17 жовтня 2015 р. 06:42

Як намалювати аркуш спрайтів в Adobe Illustrator

Мені набридло тестувати процеси GameDev за допомогою трикутників та прямокутників. Це нудно і не цікаво, тому настав час щось підірвати. Але з чого розпочати? - Запитайте Ви. А я відповім, потрібно намалювати sprite вибуху, якщо бути точним, то намалювати sprite sheet для вибуху, який представлятиме анімацію вибуху.

Але як це зробити? - цим питанням спантеличив я. Після вивчення кількох форумів та відеоуроків, я вирішив зібрати отриману інформацію в один урок на своєму сайті. Отже у нас наступне технічне завдання на цей урок:

  1. Намалювати кілька sprite картинок, з яких ми зробимо sprite sheet для анімації вибуху;
  2. Зібрати сам sprite sheet та зберегти його в PNG файл;
  3. Зробити все це за допомогою ПЗ Adove Illustrator .

Малюємо sprite картинки по кроках

Примітка. Також, якщо не цікаво читати покроковий мануал, то пропоную відразу звернутися до відеоуроку наприкінці статті, там наочно розписано, показано і пояснено.

Крок перший

Створюємо файл із полотном для sprite картинки з параметрами 20 на 20 пікселів. Саме такі картинки будемо використовувати в наступних уроках GameDev Qt для реалізації вибухів від куль. Малюватимемо вибухи.

Крок другий

А тепер створюємо на робочому полотні прямокутну сітку, яка розділятиме наші пікселі. При цьому необхідно задати параметри сітки такі, що її ширина і висота дорівнюють ширині і висоті спрайту, а кількість вертикальних і горизонтальних роздільників зробити кількості пікселів за висотою і шириною відповідно. Також не забудьте прибрати обведення та зробити фон прозорим, нам же не потрібен зайвий білий колір у sprite-картинці.

Крок третій

Вибираємо інструмент Швидка Заливка та створюємо лівим кліком миші групу для швидкої заливки з прямокутної сітки. Швидка заливка заповнює вибраним кольором область обмежену роздільниками, а також контуром або обведенням. Оскільки сітка розділяє полотно по пікселям, то кожен прямокутник буде одним пікселем, який ми заповнюватимемо кольором за допомогою Швидкої Заливки.

Крок четвертий

Після того, як ми малюємо всі 15 sprite картинок, створимо новий проект у Adobe Illustrator. Який буде містити всі 15 sprite картинок і буде шириною на всі 15 картинок і за висотою на одну картинку. Тобто малюватимемо всі картинки в один ряд. Також помістимо прямокутник на полотно. Не забудьте прибрати обведення та зробити фон прозорим.

Крок п'ятий

Далі створюємо в Прямокутнику контурну сітку, що складається з одного рядка і 15 стовпців під всі картинки.

Крок шостий

А тепер, зайшовши в пункт меню Файл за допомогою пункту "Помістити" додаємо в проект всі підготовлені спрайти.

Крок сьомий

А тепер завершуємо створення sprite sheet , зберігши його в PNG картинку із прозорим фоном. Після збереження зображення перевіримо його, як воно виглядає в звичайному переглядачі зображень.

Також весь урок представлений у наступному відеоуроці.

Відеоурок

Рекомендуємо хостинг TIMEWEB
Рекомендуємо хостинг TIMEWEB
Стабільний хостинг, на якому розміщується соціальна мережа EVILEG. Для проектів на Django радимо VDS хостинг.

Вам це подобається? Поділіться в соціальних мережах!

Коментарі

Only authorized users can post comments.
Please, Log in or Sign up
Ua

Qt - Тест 001. Сигналы и слоты

  • Результат:84бали,
  • Рейтинг балів4
Ua

Qt - Тест 001. Сигналы и слоты

  • Результат:42бали,
  • Рейтинг балів-8
ОК

Qt - Тест 001. Сигналы и слоты

  • Результат:47бали,
  • Рейтинг балів-6
Останні коментарі
ИМ
Игорь Максимов22 листопада 2024 р. 22:51
Django - Підручник 017. Налаштуйте сторінку входу до Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
Evgenii Legotckoi
Evgenii Legotckoi01 листопада 2024 р. 00:37
Django - Урок 064. Як написати розширення для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
A
ALO1ZE19 жовтня 2024 р. 18:19
Читалка файлів fb3 на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Игорь Максимов05 жовтня 2024 р. 17:51
Django - Урок 064. Як написати розширення для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas505 липня 2024 р. 21:02
QML - Урок 016. База даних SQLite та робота з нею в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Тепер обговоріть на форумі
Дмитрий
Дмитрий03 лютого 2025 р. 17:24
Создание deb-пакета. Как создать ярлык на рабочем столе после установки собственного deb-пакета? Всем привет. Сделал свой deb-пакет с программой. Всё устанавливается и работает. Ставлю по пути /usr/bin/my_application. Как для пользователя при установке пакета сразу создать ярлык на раб…
NW
Nayo Wai30 січня 2025 р. 20:22
не запускается компьютер!!! Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
n
nkly03 січня 2025 р. 13:52
Нужно запретить перемещение только некоторых итемов, остальные перемещать можно. Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
M
Marsel17 серпня 2023 р. 00:26
OAuth2.0 через VK, получение email Спасибо большое за помощь и простите за то что отнял время своей невнимательностью.
Evgenii Legotckoi
Evgenii Legotckoi25 червня 2024 р. 01:11
добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.

Слідкуйте за нами в соціальних мережах