Створення спрайтів для ігор із великих зображень. Спрайти для ігор – що це таке? Створення спрайт-листа у Sprite Sheet Packer

З цієї статті ви отримаєте загальні уявлення, як малювати круту 2D графіку для ігор. Це не покроковий туторіал, це щось у рази крутіше!

Стаття призначена для тих, хто має деяке знайомство з ігровою 2D графікою. Насамперед це стосується людей, зайнятих програмуванням, і бажаючим створювати якісні ігрові ресурси. Далі просто до всіх, хто хоче створювати ігрову графіку. Під 2D ресурсами в тексті маються на увазі будь-які 2-мірні зображення для ігор: від спрайтів персонажів до великих фонів. Стаття коротко ознайомить із добротними традиційними концепціями дизайну та тим, як вони можуть покращити вашу гру. Передбачається, що вона дозволить вам заощадити час і не розвинути поганий смак.

Тут не висвітлюватимуться такі речі, як формати файлів, порівняння растрової та векторної графіки або використане в прикладах до статті програмне забезпечення.

Список тем:

• Форми
• Анатомія та пропорції
• Перспектива
• Наука про колір
• Освітлення та затінення
• Відточування навичок

Якщо ці пункти не схопили вас за живе, наочна демонстрація ваших здібностей «до» та «після» йде нижче:

Це реальні картинки. Верхню самостійно намалював та хотів використати у своїй грі програміст, а нижня – це те, що вийшло після невеликийдоопрацювання його друга-дизайнера.

У повсякденному житті ми звикли часто бачити 2D-зображення. Але розуміти, що річ виглядає красиво, не те саме, що знати, чомуце так. Будь-яке двовимірне зображення можна розбити на базові елементи, тому ви можете уявляти собі створення двовимірної графіки як об'єднання цих елементів, щоб: 1) Вийшло схоже на те, що ви мали на увазі; і 2) Не було супер потворно. Наприклад, ми всі знаємо, як виглядають квадрат і сфера, але яке це має відношення до створення зрозумілого на вигляд персонажа?

Щоб відповісти на це, ми приступаємо до першої частини:

Форми

Знаючи про те, яку роль насправді відіграють форми, ви можете застосовувати їх для створення привітного або непривітного на вигляд ігрового середовища, а також робити, щоб персонажі та об'єкти відповідали (або навмисно не відповідали) цьому середовищу.

Починайте з найпростіших форм: кіл, квадратів та прямокутників. Спробуйте намалювати персонаж, що складається тільки з квадратів або тільки з трикутників, а потім подивіться, хто з них більше схожий на героя, а хто - на лиходія. Зберігаючи свої початкові задуми у вигляді замальовок із простими фігурами, ви зможете генерувати багато ідей, передчасно не відволікаючись на опрацювання деталей (про це багато говориться в частині «Навчання»).

Як правило, загострені форми містять натяк на штучність чи зло, а звивисті та округлі – на органічне походження та добро. Таким є традиційний спектр характерів. Коло та трикутник знаходяться на його кінцях, а квадрат десь посередині.

Перспектива

Перспектива – це створення ілюзії глибини на 2D-поверхні, вона виходить шляхом зміни форм та контурів предметів, і це досить велика тема, тому ви побачите тут кілька підзаголовків.

Геометрична перспектива

У більшості 2D ігор творці просто не бажають зв'язуватися з геометричною перспективою, тому що її реалістична реалізація в графіці буде дуже трудомісткою. Щоб піти легким шляхом, розробники користуються нереалістичним припущенням, що збоку все видно однаково добре (як у класичному платформері Super Mario), або розгортають графіку більш реальною на вигляд, але все ж таки далекою від реальності ізометричної проекції.

Ми детально вивчимо тему геометричної перспективи, тому що це найскладніший для розуміння загальний принцип, але навіть дуже просте його розуміння також дозволить значно покращити графіку. В основі найбільш формальної теорії перспективи лежить ідея про точку сходу. Паралельні лінії, схоже, сходяться в одну точку на далекій відстані від спостерігача. Це виглядає приблизно так:

Ви звернули увагу як сходяться паралельні лінії (реальні та уявні)?

Червоні лінії перетинаються у точці сходу. Вам також має бути знайома лінія, яка поділяє небо та землю. Це лінія горизонту, яка виходить при перетині нескінченних (з погляду спостерігача) площин.

Точка сходу та лінія горизонту за своєю суттю втілюють просту ідею: предмети, що знаходяться вдалині, виглядають меншими за предмети, які ближче до нас. А наближена до нас сторона предмета здається більшою, ніж віддалена. У наведеному вище прикладі використана лише одна точка сходу, але насправді на картині буде стільки точок сходу, скільки є наборів паралельних ліній – для кожного своя. Звучить надто складно? Так і є, тому в малюнках перспектива зазвичай спрощується до одно-, дво- та триточкової. В одно- та двоточковій перспективі передбачається, що один або кілька наборів паралельних ліній залишаються паралельними назавжди і ніколи не сходяться. Ось приклад куба та паралелепіпеда в одноточковій перспективі:

Зверніть увагу, що горизонтальні та вертикальні грані залишаються строго паралельними. Тепер подивимося на двоточкову перспективу:

Тут насамперед паралельні горизонтальні лінії набули своєї точки сходу. Вертикальні грані залишаються паралельними. Зрештою, триточкова перспектива:

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

Для малювання трубок та інших круглих предметів у правильній перспективі існує важлива хитрість, тому що у перспективі коло деформується особливим чином. Коли на них дивляться похило, кола виглядають як еліпси. Чим більше нахил, тим сильніше стиснутий еліпс:

Ось просте правило. Коли ви дивитесь на край циліндра (наприклад, дах круглої будівлі), крива вигинається вгору. Коли ви дивитеся вниз, наприклад, на основу стовбура дерева, крива вигинається вниз. Через середину зображення проходить лінія горизонту.

Все ж таки треба пам'ятати, що в більшості ігор з 2D графікою намагаються уникнути труднощів при зображенні геометричної перспективи. Вибирають точку огляду збоку або зверху, що зводить до мінімуму необхідність у ній.

Ракурс

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

Часто художники малюють ракурси на око, просто тому, що обчислення всіх точок сходу забирає багато часу. Але щоб ви знали, як це має бути в ідеалі, нижче показаний ракурс з точками сходу та циліндрами. У цьому вигляді роблять начерки для кінцівок:

Пам'ятайте, що персонажі, особливо людські, можуть бути представлені як ряд простіших об'єктів, які легше скомпонувати. Це нормально, коли малюнок фігури роблять у вигляді поєднаних суглобами циліндрів, а всередині них потім малюють людину.

Перекриття та паралакс

З перекриттям все просто: найближчі до нас об'єкти накладатимуться на віддалені та приховуватимуть їх. Дуже необхідна річ для 2D ігор, оскільки це найпростіший спосіб показати гравцеві його позицію щодо об'єктів. Давайте розглянемо надзвичайно простий приклад:

Цей набір ліній створює у вас враження, що маленька кругла штучка праворуч (кущ?) знаходиться перед рештою, а найбільша – позаду. Ефект іноді називають «T-правилом», оскільки перетин ліній об'єктів попереду і позаду утворює щось на кшталт літери T. Це просто, але досить потужно. У наведеному прикладі всі Т перевернуті догори ногами:

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

Оскільки 2D гри часто навмисно порушують звичайні правила перспективи з тієї простої причини, що їх легко намалювати без них, доводиться покладатися на інші способи отримати уявлення про глибину. Ще один із простих способів – робити об'єкти, імовірно віддалені від глядача, більш розмитими та менш докладними на вигляд. Ось приклад реального життя, на фотографії міського пейзажу промислового Китаю:

Ви також можете помітити ефект геометричної перспективи, хоча у разі основна точка сходу буде зліва кадру. Майже кожен 2D-платформер, який коли-небудь створений, використовує повітряну перспективу. Наприклад (знов Super Mario World):

Зверніть увагу, що чим далі на тлі знаходиться об'єкт, тим розмитим він виглядає. Про близькість об'єкта до гравця можна сказати навіть за кольором контурів. Це безпосередньо зводиться до ідеї розмаїття. Контраст розповість гравцеві, що важливо, а що ні.

Подивіться знову на скріншот із Super Mario World. Злегка затінені блакитні пагорби? Неважливо. Труба з білим відблиском та чорними контурами? Важливо. Єдиний яскраво-червоний предмет на екрані? Супер важливо. Пам'ятайте, що інтерактивні об'єкти у грі повинні завжди виділятися по відношенню до не інтерактивних, якщо немає конкретної причини приховувати щось від гравця.

Лінійна та повітряна перспектива на ArtyFactory.com, Тьюторіал від perspective-book.com

Наука про колір

Колір – це хитра тема, і з найбільш суб'єктивних мистецтво загалом. На колір товариша немає, а колірні поєднання та його значення різняться у різних культурах. Білий колір може бути кольором чистоти на Заході, але в Японії часто означає смерть. Тим не менш, є кілька основних ідей щодо кольору, які допоможуть вам зрозуміти, що відбувається з графікою. Давайте спочатку подумаємо про те, з чого складається певний колір.

Відтінок, насиченість, яскравість

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

Почнемо з порівняння двох кольорів:

Червоний та синій. Зрозуміло, що це різні кольори, чи не так? Але насправді є точніший термін Відтінок (Hue). Лівий квадрат має червоний відтінок, а правий має синій відтінок. Інші відтінки включають зелений, помаранчевий, фіолетовий і т. д. Хоча відтінок може здатися надлишковим терміном для визначення кольору, це не так, тому що кількість будь-якого відтінку може змінитися:

Отже, перед вами два червоні кольори, але чим вони відрізняються? Той, що праворуч, ніби трохи… вицвів. Має меншу насиченість (Saturation).

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

Остання властивість - Яскравість (Brightness). Іноді замість нього використовують значення (Value). Яскравість набагато простіша у розумінні: показує, наскільки колір яскравіший. Ось такий червоний, як вище, і його менш яскрава (тобто темна) версія:

У зв'язку між яскравістю та насиченістю треба трохи розібратися:

Ось приклад, як колір може впливати на атмосферу гри. Порівнюються New Super Mario (якщо вам вже набридли приклади зі старого) та Castlevania: Lords of Shadow.

Говорячи про колір, ми можемо знову згадати про… Барні та Годзілу! Подумайте, як колір робить їх такими різними з погляду відтінку, яскравості та насиченості, і що станеться, якщо одну або кілька цих властивостей змінити. Що станеться, якщо ви візьмете тільки одну властивість і наділите їм обох персонажів? Як вам хочеться обійняти сірого Барні?

Коротко про RGB

Прийміть вітання! Тепер ви розбираєтеся в колірній моделі HSB (Hue Saturation Brightness/Тон Насиченість Яскравість) або HSV (Значення = Яскравість). Практично будь-яка програма для обробки зображень користується цим терміном поряд з RGB (колірна модель Червоний Зелений Синій) та CMYK (Блакитний Пурпуровий Жовтий Чорний). Але HSB, мабуть, найпростіше пояснює, що відбувається з квітами. Особливо щодо того, наскільки яскравим чи насиченим є потрібний вам колір, коли ви працюєте над шейдингом. Однак у різних додатках вам доведеться мати справу з колірною моделлю RGB, тому коротко розглянемо її. RGB просто описує всі кольори з погляду червоного, зеленого та синього, тому що всі кольори можна описати як комбінацію цих трьох. Аналогічним чином інформацію про колір обробляє людське око. Витратьте трохи часу, щоб пограти з значеннями кольорів і побачити, як змінюються значення HSB і RGB, і як вони пов'язані один з одним. Ось стандартна діаграма RGB (зверніть увагу, що відбувається, коли кольори перекриваються):

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

Тепер, коли ми розібралися, що таке колір, почнемо розглядати колірні комбінації. Теорія кольору складна і досить суб'єктивна, тому нижченаведене має розглядатися не як залізне правило, а як напрямок для подальшого розвитку.

Основу самої теорії кольору становить колірне колесо (колірний круг). Якщо спростити пояснення, то колесо – це суб'єктивне розташування відтінків кольору по відношенню до червоного, жовтого та синього, які ділять колесо на три частини (так звані основні кольори) та зеленого, помаранчевого, фіолетового (вторинні кольори) між ними.

Відтінки також зазвичай поділяються на теплі та холодні, у термінах колірної температури. Причому червоно-жовті кольори вважають теплими, а сині кольори прохолодними, як показано нижче:

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

Інші відносини між кольорами також можна пояснити за допомогою колеса. Аналогічні кольори – це просто відтінки поряд один з одним, такі як зелений, жовтий та кольори між ними. Контрастні кольори – це кольори (відтінки) на 180 градусів віддалені один від одного, які здаються яскравішими при використанні разом. Ймовірно, ви бачили їх у дії, навіть якщо не знали чому. Синій та помаранчевий навіть стали стежкою (стандартним стилістичним прийомом).

Спробуйте пов'язати кольори з певними расами або ворогами, середовищами або рівнями під час роботи над ігровою графікою. Позначення кольором не обов'язкове, однак ви можете використовувати його як спосіб впливу на сприйняття гравців. Подумайте про набір кольорів для поганих хлопців, але використовуйте, наприклад, унікальні відтінки для конкретних ворогів. Не бійтеся експериментувати і намагайтеся використовувати більш рідкісні кольори. У будь-якій досить просунутій програмі для обробки зображень (наприклад, GIMP) колір змінити простіше, ніж будь-яка інша властивість. Це одна з небагатьох речей, які можна легко змінити у готовому малюнку.

Коротше кажучи:Кольори можна розділяти і порівнювати один з одним у різний спосіб, а в різних комбінаціях пари кольорів можуть виглядати краще або гірше.

Рекомендуємо вивчити (англійською):Теорія кольору для дизайнерів

Освітлення та затінення

У цій частині ви побачите багато прикладів піксель арту, але в них йдеться про базові концепції, які застосовуються до будь-якого типу 2D графіки.

Джерела світла

Художники-початківці часто не розуміють, навіщо насправді малюють світло і тінь. Затінення (або шейдинг) малюнка зазвичай означає застосування різних відтінків, щоб створити ілюзію світла на кресленні, так само, як перспектива – це ілюзія глибини. І так само як із перспективою, вам необхідно створити якісь 2D аналоги видимих ​​у реальності ефектів. Тут є тільки одне правило: світло має звідкись виходити. Він не може бути скрізь, тож якщо ви просто розфарбуєте малюнок, це буде виглядати неправильно. Коли новачки намагаються намалювати тінь, але не розуміють, як, це призводить до об'єктів, які виглядають ось так:

Порівняйте з варіантом без тіней:

Це називається подушечним затіненням, і його дуже просто намалювати не замислюючись. Здається природним відтінити предмети за зовнішніми контурами, але це виглядає абсолютно ненатурально. Щоб освітлення виглядало правильно, воно повинне мати напрямок, і освітлення/затінення поверхні потрібно вибудовувати залежно від того, з якого боку об'єкт спрямований джерело світла. Джерелом світла може виступати сонце, лампа, озеро з окропом і т.д., або його можна залишити абстрактним.

Наприклад, можна просто припустити, що майже весь світ падає від нескінченно віддаленого джерела під кутом 45 градусів. Цього достатньо, щоб красиво відтінити об'єкти здебільшого. Анімованим спрайтам, які будуть використовуватися на різних фонах, невелика невизначеність допомагає скрізь зберегти доречний вигляд.

Ось приклад із джерелом світла у верхньому лівому кутку:

Звернені до джерела світла частини будуть світлішими, а протилежні їм – темнішими. Що може бути простішим? Але це не завжди саме так…

Плоскі та вигнуті поверхні

Плоскі поверхні зазвичай мають скрізь майже однаковий відтінок, а на вигнутих ми побачимо градієнт. Витончені приклади з реального світу:

Знову повернемося до параграфа про форми. Хто з цих поганих хлопців здасться вам добрим, а хто насторожить вас одним зовнішнім виглядом?

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

І тут для кожної грані кубу потрібний лише один відтінок, а сфері їх треба набагато більше – для імітації градієнтної природи тіней на вигнутих поверхнях.

Вище ми розглянули спрощений шейдинг, оскільки світло може відбиватися від поверхонь і підсвічувати затінені ділянки. Це часто означає, що частина тіні, яка знаходиться далі від основного джерела світла, насправді світліша, ніж в інших місцях. Ефект найбільш помітний, коли об'єкт великий або знаходиться дуже близько до поверхні, що відбиває. Нижче наведено класичний приклад:

Ще пара цифрових прикладів на ту саму тему.

На лівому прикладі ви бачите відображення світла, розташованого за межами краю малюнка, так буває з поверхнями, що сильно відбивають. Чим сильніше падаюче світло, тим виразніше видно і відбите.

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

Найчастіше із зміною тону можна зустрітися біля об'єктів, що освітлюються сонцем. Пряме сонячне світло має жовтий тон, але блакитне небо відбиває на тіні свій колір, тому ми отримуємо жовті відблиски та тіні блакитного тону.

Це поняття набуває важливості, коли у вас є додаткові джерела світла і вони за кольором відрізняються від основних (наприклад, розпечена лава). Пам'ятайте, що забарвлене світло змінить колір об'єкта, що освітлюється. Однак зміна тону може бути просто стилістичним рішенням. Перебільшуючи ефект або підставляючи додаткові кольори, ви можете досягти дуже цікавої картини:

Варто знати ще, що тіні бути менш насиченими, і що менш насичені кольори можуть здаватися темнішими, ніж вони є насправді.

Серед митців немає єдиної думки щодо зміни тону. Знайдіть своє рішення, але пам'ятайте, що чим сильніше ви зміните тон, тим сюрреалістичнішим стане ваш малюнок.

Шейдинг та текстурування

Шейдинг може підказати як форму об'єкта, а й його текстуру. Текстура об'єкта впливає те що, як від нього відбивається світло. Тому, змінюючи шейдинг, ви іноді можете змінити враження від текстури. Щоб розрізняти деякі типи текстур, існують свої терміни:

Від поверхні з глянцевийТекстурою світло відбивається добре і з дуже невеликим розсіюванням. Це означає, що освітлена частина предмета буде дуже яскравою (через хороше відображення), а неосвітлена – дуже темною (бо додаткове підсвічування йде від розсіяного світла, а його немає). Хорошим прикладом глянсової текстури є щойно відполірований кузов автомобіля.

МатоваТекстура відбиває не дуже добре і розсіює світло при відображенні. Це означає, що вона здається більш рівно освітленою. Хорошим прикладом поверхні з матовою текстурою є стара автомобільна шина.

Гладкатекстура стоїть десь посередині. Вона добре відбиває, але сильно розсіює світло при відбитті. Гладку текстуру часто має пластик, наприклад більшість комп'ютерних клавіатур.

Отже, не забувайте про властивості зображуваних вами матеріалів. Це глянсовий метал чи матова тканина? Одяг середньовічних персонажів не повинен відображати світло наче пластмаса, а космічні обладунки не повинні здаватися м'якими на дотик.

Коротше кажучи:Щоб 2D графіка виглядала достовірною, світло повинне мати напрямок.

Відточування навичок

Що робити тепер, коли викладено усі основи? Уперед! Починайте пробувати! Це правда: малювати може будь-хто. Звичайно, деякі люди мають більше навичок, але найбільша різниця між поганим художником і хорошим – це те, наскільки багато вони практикувалися. Чим більше практики, тим краще ви володієте навичкою. Але практикуйтеся з розумом. Відмінну нагоду для цього дають ігрові проекти. Якщо ви мріяли про свою гру, починайте робити нариси для неї, паралельно читаючи цю статтю.

Якщо немає свого, приєднуйтесь до чужих ігрових проектів! Навіть у найменшій грі достатньо графіки, щоб ви відмінно попрактикувалися і наступного разу малювали помітно краще. І ще: щоб бути ігровим художником вам необов'язково малювати як художники епохи Відродження.

Олівець та папір

Єдиний спосіб краще малювати – це практикуватися, а найдешевший і найпростіший спосіб – робити це за допомогою олівця та паперу. Використовувати тільки цифрові інструменти привабливо, тому що ви одразу отримували готовий результат. Але не піддавайтеся спокусі! Коли ви малюєте вручну, ви активніше берете участь у процесі. До того ж, ви зможете уникнути деяких поганих звичок, які виникають, коли ви повністю покладаєтеся на комп'ютер. Звісно, ​​інструменти у програмі можуть бути дуже потужними. Але якщо ви спробуєте спочатку малювати спрайти за допомогою авто фігур, повірте, у вас вийдуть смішні та потворні речі, які неможливо було б зробити за допомогою начерку олівця.

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

Придбайте блокнот для замальовок (на обкладинці написано sketchbook), олівці та хорошу гумку для прання. Гумкою вам доведеться користуватися дуже часто. А ось блокнот для замальовок необов'язковий. Ключова ідея в тому, що вам потрібна практика, тому можете малювати хоч на полях свого шкільного зошита. Але в блокноті всі роботи будуть в одному місці, тому не доведеться згодом шкодувати, що найвдаліший малюнок лиходія опинився на аркуші з домашньою роботою.

Малюнки (вони ж скетчі)

У олівцевих нарисах краще вважати, що всі лінії лише тимчасові припущення, а не остаточний варіант. Не потрапляйте у залежність від своїх ліній. Малюйте поверх, прайте і малюйте знову, не дивлячись на те, що вже є. Звичайно, для цього треба робити лінії досить легкими. Починайте з основної форми вашого об'єкта та поступово додавайте деталі. Більшість об'єктів можна апроксимувати основними формами, тобто сферою, циліндром та «коробкою», що особливо корисно для малювання в перспективі.

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

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

Чернетка, чернетка, знову чернетка

Спочатку це може здаватися шаленим, але ви повинні накидати олівцем на папері хоча б три версії будь-якого персонажа/об'єкта/елемента меню. Тільки після цього можна переносити їх для доопрацювання на комп'ютер. Великі студії часто створюють буквально десятки концепцій одного персонажа, перш ніж подумають про вибір. Малюнок трьох версій навіть для неінтерактивних фонових ресурсів, таких як дерева або кущі - звичайна справа. Ви сильно ризикуєте, якщо покладаєтеся на перший варіант як єдиний і остаточний. Придумавши три різні варіанти, ви можете взяти найкраще від кожного та об'єднати їх у фіналі. Ось простий приклад, де кожен із крутих космічних шоломів відрізняється від остаточного варіанта нижче (той заснований на ще більш грубих ранніх начерках):

Якщо здається, що дотримуватися такої поради дуже важко, продовжуйте пам'ятати: ви малюєте грубі, дуже грубі, грубі начерки. Не витрачайте час. Насправді в більшості випадків що менше, то краще. Чим довше ви працюєте над варіантом, тим складніше вам погодитися на його переробку або створення іншого варіанту. Залишайте осторонь деталі, просто передайте загальну ідею та йдіть далі. Ви завжди можете повернутися назад та опрацювати ескіз, якщо він вам сподобався.

Приготуйтеся до того, що вам доведеться малювати, і малювати багато, і що вам доведеться часом засмучуватися. Якщо ваші малюнки здаються вам незрозумілими, це означає, що ніщо людське вам чуже. Наступного разу вийде краще, а потім ще краще. Пам'ятайте, що бути незадоволеним нормально. Якби малювання було простою справою, не з'явилася б ця стаття. Насправді, якщо ви на 100% задоволені своїм малюнком, ви не намагаєтеся, ви починаєте втрачати друзів і переконуєте себе, що це розмите місиво ви спочатку і хотіли намалювати.

Коротше кажучи:Завжди спочатку робіть кілька олівцевих версій свого гейм арту, і не намагайтеся одразу досягти досконалості.

Висновок та подальше читання

Тепер ви знаєте основи та повністю готові до створення пристойної графіки для 2D ігор. Якщо вам цікаво дізнатися більше на тему, то протягом статті ви можете помітити посилання на додаткові джерела. Сама ж стаття багато в чому ґрунтується на книзі Кріса Соларські "Drawing Basics and Video Game Art". Ви можете прочитати деякі з його творів. Наважуйтеся!

Оригінал статті англійською мовою: Total beginner guide for better 2d game art

P.S.

Вам також може бути цікаво

p align="justify"> Комп'ютерна індустрія в останні роки піднялася дуже і дуже високо. Якщо раніше комп'ютерні ігри були лише розвагою для вузького кола любителів, то зараз це щось більше. У них можуть грати люди різного віку, створюються проекти, які відповідають навіть найтоншим смакам. А найголовніше, з'явилися неймовірні можливості, про які раніше не можна було й подумати, тому зараз комп'ютерні ігри можуть бути практично не відрізняються від реальності в плані графіки та фізики, вони можуть занурювати користувача в незвідані світи, дозволяючи йому проживати неймовірні історії та бути ключовими. персонажем. Але при цьому деякі люди не хочуть обмежуватися процесом "грання" - їх захоплює процедура створення ігор. Однак більшість таких мрійників так і залишаються на рівні фантазій, бо вважають, що цей процес є надто складним. Насправді все не так, що підтверджується величезною кількістю розробників, які зараз виробляють безліч проектів без великих бюджетів і підтримки видавців. Просто треба починати з малого та поступово йти вперед. З цієї статті ви дізнаєтеся, що таке спрайти для ігор і як їх використовувати, щоб потім почати створювати власні проекти.

Що таке спрайти?

Якщо перед вами комп'ютерна гра на моніторі, що ви бачите перед собою? Графічну оболонку проекту, різноманітні текстури, складені з крихітних пікселів. Якщо ви плануєте створювати комп'ютерну гру, то вам доведеться багато працювати з графікою. Але якщо ви поки що не замахуєтеся на великий проект, то вам не потрібно ідеальної роботи з графічними 3D-редакторами. Тут вам допоможуть спрайти для ігор, які можна скачати в інтернеті. Але що це таке? Як їх можна використовувати і чим це полегшить завдання? Спрайти для ігор – це готові текстури персонажів, предметів тощо, які ви можете завантажити на свій комп'ютер, а потім використовувати у процесі створення гри. Це означає, що вам не потрібно буде малювати кожен об'єкт у грі, а також кожну фазу його руху – все це вже буде у вас у готовому вигляді. Як бачите, спрайти для ігор справді значно можуть полегшити вам життя.

Вид спрайтів

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

Використання спрайтів

Як ви чудово розумієте, в більшості випадків ви зможете знайти спрайти для ігор 2D, оскільки тривимірні зображення не настільки стандартизовані, тому знадобиться дуже багато місця, щоб передати всі рухи одного тривимірного об'єкта. У той же час робота з двовимірними спрайтами вкрай проста. Вам потрібно просто завантажувати спрайти в редактор, в якому ви творите, та склеювати їх, створюючи ефекти руху. А потім завантажувати в рівень та насолоджуватися результатом.

Перехід від спрайтів до графіки

Ви не зможете все життя використовувати спрайти для створення ігор, тому якщо ви ставите перед собою амбітні цілі, вам потрібно або вчитися працювати з або шукати помічника, який володіє цією навичкою.

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

Ми відразу відзначимо метод, згідно з яким гра грається під якийсь один формат, а для всіх інших масштабується. Цей спосіб спотворює картинку на екрані і все виглядає не так, як задумував художник.

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

Для цього визначимо які ж дозволи екранів і співвідношення сторін найбільш популярні на даний момент. Я для цього скористався відкритою статистикою від команди Unity, подивитися її можна. Ось дані актуальні на момент написання статті:

Роздільна здатність екранів

Співвідношення сторін

А ось як виглядає список найбільш популярних дозволів стосовно один одного:

Ми відрізатимемо зайве з боків, залишаючи зображення по висоті незайманим. Тому потрібно визначитися з максимальним розміром зображення за висотою.

Якщо намалювати щось у розмірі 2048 x 2048 px, а потім програмно зменшити до розміру 512 x 512 px, То зображення залишиться чітким, у зворотний бік з растрової графікою таке не проробиш - картинка вийде змащеною.

Як видно вище, зі списку найпопулярніших дозволів, максимальна висота складає 1536 px.

Для найпопулярніших форматів співвідношення сторін (98,5%) можна підібрати ширину зображення такою, щоб по висоті залишалися ті самі 1536px. Ось що з цього вийшло:

З урахуванням того, що бічні грані відрізатимуться на екранах із співвідношенням сторін відмінним від 16:9, можна розмістити важливі для геймплея об'єкти так, щоб вони залишилися видно, тобто. розмістивши їх усередині зони розміром 2048 X 1536 px.Виходячи з цього шаблону, можна малювати фон та інші елементи ігрового світу.

З розвитком HTML5 та мобільних платформ 2D ігри повертаються в моду та привертають увагу навіть великих видавців. Завдяки таким інструментам, як Unity, та онлайн-ресурсам з ігровими ассетами, розробляти ці ігри стало набагато легше. Нижче наведено список з 10 найкращих сайтів з 2D ресурсами для ігор – як платними, так і безкоштовними.

*Сайти перераховані у випадковому порядку*

1. Unity Asset Store (платний)

Найбільший сайт із платними ігровими ассетами. Використовувати двигун Unity для роботи необов'язково – щоб отримати доступ до ресурсів на Asset Store, потрібно лише завантажити його безкоштовну версію. Завантажені файли будуть збережені в папку проекту Unity, звідки їх можна імпортувати в будь-який ігровий 2D двигун.

Варто зазначити, що Unity в руках умілого розробника має величезний потенціал, про що свідчить велика кількість успішних 2D ігор (чого тільки вартує популярна Bad Piggies від Rovio). А Unity Asset Store пропонує широкий вибір 2D ассетів.

2. GameDev Market (платний)

GameDev Market – відносно новий сайт, зручно організований за категоріями контенту (як і Super Game Asset, про який йтиметься нижче). Тут ви знайдете як 2D, так і 3D ресурси, включаючи UI, спрайти персонажів, іконки та оточення. Художники виставляють асети на продаж, і асортимент зростає з кожним днем.

Graphicriver – один із найпопулярніших ресурсів шаблонних зображень. У зв'язку з розвитком казуальних мобільних ігор там з'явилася окрема категорія з 2D ассетами. До розміщення на сайті весь контент проходить внутрішню перевірку, а після публікації будь-який користувач може залишити свою оцінку та відгук. Разом: це надійний сайт, що активно розвивається під пильним модеруванням Envato.

4. Scirra Store (платний)

Scirra - компанія-розробник Construct 2, популярного 2D редактора на HTML5, у якої нещодавно з'явився власний магазин ассетів. Тут можна знайти аудіо-, графічні ресурси і навіть готові ігрові шаблони для Construct 2. Втім, для роботи можна використовувати будь-який інший 2D редактор.

5. Game Art Partners (платний)

На сайті Game Art Partners можна купити різноманітні асети для 2D платформерів, включаючи анімованих персонажів, монстрів, зброю, візуальні ефекти і набори елементів інтерфейсу.

6. Super Game Asset (платний)

Якщо ви створюєте RPG або гру із ізометричною графікою – цей сайт для вас. Тут ви знайдете найякісніші ассети: барвисті іконки для RPG (мабуть, найкращі з доступних онлайн), 2D спрайти, анімовані спрайти персонажів та величезні ізометричні карти. Що важливо, більшість представлених ресурсів виконані в одному стилі.

7. Open Game Art (безкоштовний)

Вичерпний ресурс для розробників ігор з відкритим вихідним кодом Open Game Art можна назвати найбільшими зборами ігрових ассетів з вільною ліцензією. Усі матеріали – від спрайтів до ікон – можна завантажити за ліцензіями GNU або Creative Commons. Це відмінний сайт для новачків, але багато асет відрізняються за візуальним стилем, тому їх доведеться ретельно відбирати.

8. Kenney Game Assets (безкоштовний)

Ще один відмінний сайт із більш ніж 20 тис. ассетами, включаючи елементи UI та різні спрайти для 2D платформерів. Більшість ресурсів представлені у векторній графіці та підійдуть для будь-якого пристрою, незалежно від роздільної здатності екрану. Ассети можна завантажити окремо (безкоштовно) або одним набором (за скромну плату $9).

9. Game-Icons.net (безкоштовний)

Game-icons.net – найкращий сайт з безкоштовними іконками, яких тут не мало не мало 2000. Незважаючи на те, що всі іконки чорно-білого кольору, вони досить універсальні і можуть бути використані для позначення дій, заклинань, навичок, предметів тощо. п. Приємний бонус – векторний формат.

10. Reiner's Tilesets (безкоштовний)

Найкращий сайт з безкоштовними тайлами. Тут можна знайти спрайти тварин, рослин, будівель, зброї, візуальних ефектів та практично будь-яких об'єктів для RPG з ізометричною графікою. Стиль ассетів нагадує Diablo II. Це відмінний ресурс для розробників-початківців, які бажають протестувати ігровий движок або приступити до створення своєї гри.

З розвитком HTML5 та мобільних платформ 2D ігри повертаються в моду та привертають увагу навіть великих видавців. Завдяки таким інструментам, як Unity, та онлайн-ресурсам з ігровими ассетами, розробляти ці ігри стало набагато легше. Нижче наведено список з 10 найкращих сайтів з 2D ресурсами для ігор – як платними, так і безкоштовними.

*Сайти перераховані у випадковому порядку*

1. Unity Asset Store (платний)

Найбільший сайт із платними ігровими ассетами. Використовувати двигун Unity для роботи необов'язково – щоб отримати доступ до ресурсів на Asset Store, потрібно лише завантажити його безкоштовну версію. Завантажені файли будуть збережені в папку проекту Unity, звідки їх можна імпортувати в будь-який ігровий 2D двигун.

Варто зазначити, що Unity в руках умілого розробника має величезний потенціал, про що свідчить велика кількість успішних 2D ігор (чого тільки вартує популярна Bad Piggies від Rovio). А Unity Asset Store пропонує широкий вибір 2D ассетів.

2. GameDev Market (платний)

GameDev Market – відносно новий сайт, зручно організований за категоріями контенту (як і Super Game Asset, про який йтиметься нижче). Тут ви знайдете як 2D, так і 3D ресурси, включаючи UI, спрайти персонажів, іконки та оточення. Художники виставляють асети на продаж, і асортимент зростає з кожним днем.

Graphicriver – один із найпопулярніших ресурсів шаблонних зображень. У зв'язку з розвитком казуальних мобільних ігор там з'явилася окрема категорія з 2D ассетами. До розміщення на сайті весь контент проходить внутрішню перевірку, а після публікації будь-який користувач може залишити свою оцінку та відгук. Разом: це надійний сайт, що активно розвивається під пильним модеруванням Envato.

4. Scirra Store (платний)

Scirra - компанія-розробник Construct 2, популярного 2D редактора на HTML5, у якої нещодавно з'явився власний магазин ассетів. Тут можна знайти аудіо-, графічні ресурси і навіть готові ігрові шаблони для Construct 2. Втім, для роботи можна використовувати будь-який інший 2D редактор.

5. Game Art Partners (платний)

На сайті Game Art Partners можна купити різноманітні асети для 2D платформерів, включаючи анімованих персонажів, монстрів, зброю, візуальні ефекти і набори елементів інтерфейсу.

6. Super Game Asset (платний)

Якщо ви створюєте RPG або гру із ізометричною графікою – цей сайт для вас. Тут ви знайдете найякісніші ассети: барвисті іконки для RPG (мабуть, найкращі з доступних онлайн), 2D спрайти, анімовані спрайти персонажів та величезні ізометричні карти. Що важливо, більшість представлених ресурсів виконані в одному стилі.

7. Open Game Art (безкоштовний)

Вичерпний ресурс для розробників ігор з відкритим вихідним кодом Open Game Art можна назвати найбільшими зборами ігрових ассетів з вільною ліцензією. Усі матеріали – від спрайтів до ікон – можна завантажити за ліцензіями GNU або Creative Commons. Це відмінний сайт для новачків, але багато асет відрізняються за візуальним стилем, тому їх доведеться ретельно відбирати.

8. Kenney Game Assets (безкоштовний)

Ще один відмінний сайт із більш ніж 20 тис. ассетами, включаючи елементи UI та різні спрайти для 2D платформерів. Більшість ресурсів представлені у векторній графіці та підійдуть для будь-якого пристрою, незалежно від роздільної здатності екрану. Ассети можна завантажити окремо (безкоштовно) або одним набором (за скромну плату $9).

9. Game-Icons.net (безкоштовний)

Game-icons.net – найкращий сайт з безкоштовними іконками, яких тут не мало не мало 2000. Незважаючи на те, що всі іконки чорно-білого кольору, вони досить універсальні і можуть бути використані для позначення дій, заклинань, навичок, предметів тощо. п. Приємний бонус – векторний формат.

10. Reiner's Tilesets (безкоштовний)

Найкращий сайт з безкоштовними тайлами. Тут можна знайти спрайти тварин, рослин, будівель, зброї, візуальних ефектів та практично будь-яких об'єктів для RPG з ізометричною графікою. Стиль ассетів нагадує Diablo II. Це відмінний ресурс для розробників-початківців, які бажають протестувати ігровий движок або приступити до створення своєї гри.