16 чудових сайтів із БЕЗКОШТОВНОЮ графікою для розробників ігор. ⁠ ⁠

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

Цей довгопост спеціально для нас!

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

Крім того, на сайті представлені вибірки безкоштовної музики.

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

Відмінний ресурс для тих, хто замислює чи вже створює свою RPG.

При переході за посиланням праворуч ви побачите стовпчик ресурсів. Персонажі, предмети, локації тощо, при натисканні на яких всі об'єкти з'являться на одній сторінці, що спрощує і прискорює вибір. При кліку на персонажа, що сподобався, відкривається посилання на .png файл, з усіма 3d-проекціями і рухами, що ідеально підходить для створення власних спрайтів.

Відмінна риса цієї колекції - 8-бітна графіка міст.Вся бібліотека абсолютно безкоштовна, і все, про що просить автор - згадати про нього у своїй грі (credits).

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

Колекція матеріалів, створених та використаних у різних проектах дизайнером Робом Фероном для Вашого особистого користування.

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

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

Творці проекту Glitch, закритого в 2012 році, вирішили зробити всю її графічну частину Надбанням громадськості (ніякі авторські права для використання не потрібні).

Ідеально для сайдскролерів та платформерів

Безліч графіки від дизайнера-фрілансера Брента Андерсона.

Безкоштовна графіка від розробника ігор розробникам ігор Крім бібліотек на сайті є непогані туторіали.

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

Відмінний сайт з графікою для інді проектів та казуалок.

Все розбито на категорії типу гри і упаковано в ZIP архіви. Є 2D і 3D графіка, але так само як і в попередньому випадку варто уважно дивитися на ліцензію, під якою поширюється контент.

Сам сайт - форум про Google і все, що з ним пов'язано, але в 2006 році його учасник Philip Lenssen виклав на ньому близько 700 спрайтів, які тепер розповсюджуються під Creative Commons License

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

Шалена кількість фонів і текстур для Ваших ігор та програм. Все як і раніше безкоштовно - тільки не забудьте подякувати автору.

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

Як малювати 2D графіку красиво. Основи крутого гейм арту

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

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

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

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

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

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

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

Форми

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

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

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

Порівняйте, наприклад, пейзаж Мордора у «Володарі кілець» та пагорби Шира. Коли круглий і доброзичливий на вигляд персонаж блукає гострокутними околицями, він виглядає більш тривожним, ніж той самий персонаж, спочатку показаний поруч із округлими формами. У тому ж дусі ви можете робити свої стилістичні вибори і тим самим впливати на враження, яке місце робить на гравця.

Ось ще добрий приклад. Давайте розберемо два персонажі, які мають одночасно дуже багато і дуже мало спільного. Це Годзілла та динозавр Барні. Які геометричні постаті змушують одного з них виглядати як бездушне знаряддя вбивства, а іншого як милий чарівник?

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

Округлі природні лінії на базовому рівні сприйняття здаються більш комфортними, ніж гострі та уловуваті.Не випадково, що «погані хлопці» носять шипи в найнеймовірніших місцях (як Боузер із Super Mario), тоді як «хороші хлопці» на кшталт самого Маріо намагаються мати м'які обриси. Коли їжак Сонік з ігор Sonic the Hedgehog був задуманий як більш крута та просунута версія Маріо, його не випадково намалювали з шипами та більш опрацьованими деталями. Але давайте повернемося до Барні та Годзіллі. Розглянемо тепер їхні силуети:

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

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

Коротше кажучи: Всі предмети мають форму і різні форми підсвідомо створюють різне враження.

Анатомія та пропорції

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

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

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

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

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

Рекомендуємо вивчити (англійською): Довідник пропорцій від FOERVRAENGD

Перспектива

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ракурс

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

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

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

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

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

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

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

Повітряна перспектива

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

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

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

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

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

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

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

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

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

Червоний та синій. Зрозуміло, що це різні кольори, чи не так? Але насправді є точніший термін Відтінок (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.

Колір

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

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

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

Цікавий факт. Щоб показати спеку в кадрі, у фільм «Роби як треба» (1989) режисер додав більше помаранчевого тону

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Відбите світло

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

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

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

Зміна колірного тону

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Також прочитайте (англійською): Скетчінг: знаряддя візуалізації

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

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

P.S.

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

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