Създаване на спрайтове за игри от големи изображения. Спрайтове за игри - какви са те? Създаване на спрайт лист в Sprite Sheet Packer

Тази статия ще ви даде обща представа как да рисувате страхотни 2D графики за игри. Това не е урок стъпка по стъпка, това е нещо много по-готино!

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

Няма да обхваща неща като файлови формати, сравнения на растерни и векторни графики или софтуера, използван в примерите в статията.

Списък с теми:

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

Ако тези точки не ви грабват нервите, визуална демонстрация на вашите преди и след способности е по-долу:

Това са реални снимки. Горната е нарисувана от самия програмист и програмистът искаше да я използва в играта си, а долната е това, което се случи след малъкмодификации от неговия приятел дизайнер.

В ежедневието сме свикнали често да виждаме 2D изображения. Но да знаеш, че нещо изглежда красиво, не е същото като да знаеш ЗащоТова е вярно. Всяко 2D изображение може да бъде разделено на основните си елементи, така че можете да мислите за създаването на 2D графики като комбиниране на тези елементи, така че: 1) Да изглежда като това, което сте имали предвид; и 2) Не беше супер грозно. Например, всички знаем как изглеждат квадрат и сфера, но какво общо има това със създаването на ясно изглеждащ герой?

За да отговорим на това, преминаваме към първата част:

Форми

Като разберете ролите, които реално играят формите, можете да ги използвате, за да създадете приветлива или неприветлива изглеждаща игрова среда и да накарате героите и обектите да паснат (или умишлено да не) в тази среда.

Започнете с най-простите форми: кръгове, квадрати и правоъгълници. Опитайте се да нарисувате герой, който е изцяло квадратен или само триъгълник, и след това вижте кой прилича повече на герой и кой прилича повече на злодей. Като запазите първоначалните си идеи под формата на скици с прости форми, можете да генерирате много идеи, без да се разсейвате преждевременно от изработването на детайлите (това се обсъжда много в раздела „Усъвършенствайте уменията си“).

По правило заострените форми съдържат намек за изкуственост или зло, докато криволичещите и заоблените намекват за органичен произход и доброта. Това е традиционният спектър от знаци. Кръгът и триъгълникът са в краищата му, а квадратът е някъде по средата.

Перспектива

Перспективата е създаването на илюзията за дълбочина върху 2D повърхност, постига се чрез промяна на формите и очертанията на обектите и е доста обширна тема, така че тук ще видите няколко подзаглавия.

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

В повечето 2D игри създателите просто не искат да се забъркват с геометричната перспектива, защото би било безумно времеемко да се имплементира реалистично в графики. За да поемат по лесния път, разработчиците използват нереалистичното предположение, че всичко може да се види еднакво добре отстрани (както в класическия платформинг Super Mario), или разгръщат графиките в по-реалистично изглеждаща, но все още далеч от реалността изометрична проекция .

Ще проучим подробно темата за геометричната перспектива, защото това е най-трудният общ принцип за разбиране, но дори и много простото му разбиране също ще ви позволи значително да подобрите графиките си. Най-формалната теория за перспективата се основава на идеята за точка на изчезване. Паралелните линии сякаш се събират в една точка на голямо разстояние от наблюдателя. Изглежда нещо подобно:

Забелязали ли сте как успоредните прави (реални и въображаеми) се събират?

Червените линии се пресичат в точката на изчезване. Трябва да сте запознати и с линията, която разделя небето и земята. Това е линията на хоризонта, която се получава чрез пресичане на безкрайни (от гледна точка на наблюдателя) равнини.

Точката на изчезване и линията на хоризонта в основата им въплъщават проста идея: обектите, които са далеч, изглеждат по-малки от обектите, които са по-близо до нас. И страната на обекта, която е близо до нас, изглежда по-голяма от страната, която е по-далеч. В примера по-горе е използвана само една изчезваща точка, но в действителност ще има толкова изчезващи точки в картината, колкото има набори от успоредни линии - за всяка една. Звучи ли ви твърде сложно? Това е вярно, поради което перспективата в чертежите обикновено се опростява до перспектива с една, две и три точки. В перспектива с една и две точки се приема, че един или повече набора от успоредни линии остават успоредни завинаги и никога не се събират. Ето пример за куб и паралелепипед в перспектива от една точка:

Моля, обърнете внимание, че хоризонталните и вертикалните ръбове остават строго успоредни. Сега нека да разгледаме перспективата от две точки:

Тук предишните успоредни хоризонтални линии намериха своята точка на изчезване. Вертикалните ръбове остават успоредни. И накрая, перспектива от три точки:

Сега всички ръбове са намерили своята точка на изчезване. Нека ги поздравим. Трябва да се каже, че точките на изчезване се начертават най-лесно за успоредни линии. Но като рисувате водещи линии или дори цели паралелепипеди за сложни обекти, можете по-добре да си представите тяхната дълбочина. Перспективата с една, две и три точки е най-често използваната, но има поне един художник, който е използвал перспектива с шест точки, за да създаде луди сферични сцени.

Има важен трик за рисуване на тръби и други кръгли предмети в правилна перспектива, защото в перспектива кръгът се деформира по специален начин. Когато се гледат косо, кръговете изглеждат като елипси. Колкото по-голям е наклонът, толкова по-компресирана е елипсата:

Ето едно просто правило. Когато погледнете ръба на цилиндър (като покрива на кръгла сграда), кривата се извива нагоре. Когато погледнете надолу към основата на ствола на дърво, например, кривата се огъва надолу. Линията на хоризонта минава през средата на това изображение.

Все пак трябва да помним, че повечето игри с 2D графика се опитват да избегнат трудностите при изобразяването на геометрична перспектива. Изберете гледна точка отстрани или директно отгоре, което минимизира нуждата от нея.

Ъгъл

Когато фигурата на герой е нарисувана с помощта на перспектива, това се нарича ракурс. Юмрук, насочен към зрителя, не само ще изглежда по-голям от този, държан отстрани, но и ще покрива значителна част от ръката. Пример:

Художниците често рисуват ъгли на око, просто защото изчисляването на всички точки на изчезване отнема много време. Но за да знаете как трябва да бъде в идеалния случай, отдолу е ъгъл с точки на изчезване и цилиндри. В тази форма се правят скици за крайниците:

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

Припокриване и паралакс

С припокриването всичко е просто: най-близките до нас обекти ще се припокриват с отдалечени и ще ги скрият. Много необходимо нещо за 2D игри, тъй като това е най-лесният начин да се покаже на играча неговата позиция по отношение на обекти. Нека да разгледаме един изключително прост пример:

Този набор от линии ви създава впечатлението, че малкото кръгло нещо отдясно (храст?) е пред другите, а най-голямото е отзад. Ефектът понякога се нарича "Т-правило", защото пресечната точка на линиите на обектите отпред и отзад образува нещо като буквата Т. Това е просто, но доста силно. В дадения пример всички Т са обърнати с главата надолу:

Паралаксът е друг важен перспективен ефект, който се занимава с взаимоотношенията на припокриващи се обекти. Същността му е, че когато зрителят се движи, отдалечените обекти се движат по-малко в сравнение с по-близките. Parallax е страхотен за 2D игри, защото е доста лесен за внедряване и несъмнено сте го срещали и преди. Достатъчно информация, за да започнете, може да се извлече от тази статия в Уикипедия.

Тъй като 2D игрите често умишлено нарушават конвенционалните правила за перспектива по простата причина, че са по-лесни за рисуване без тях, трябва да разчитате на други начини, за да получите представа за дълбочината. Друг прост начин е да накарате обектите, които се предполага, че са по-далеч от зрителя, да изглеждат по-размазани и с по-малко детайли. Ето пример от реалния живот на снимка на градски пейзаж в индустриален Китай:

Може също да забележите ефекта на геометричната перспектива, въпреки че в този случай основната точка на изчезване ще бъде отляво на рамката. Почти всеки 2D платформинг, правен някога, използва въздушна перспектива. Например (отново Super Mario World):

Имайте предвид, че колкото по-далеч е даден обект от фона, толкова по-замъглен изглежда. Можете да кажете за близостта на обект до играча дори само по цвета на очертанията. Това се свежда директно до идеята за контраст. Контрастът ще каже на играча кое е важно и кое не.

Погледнете отново екранната снимка от Super Mario World. Леко засенчени сини хълмове? няма значение Тръба с бял акцент и черни контури? важно. Единственият яркочервен обект на екрана? Супер важно. Не забравяйте, че интерактивните обекти в играта винаги трябва да се разграничават от неинтерактивните, освен ако няма конкретна причина да скриете нещо от играча.

Линейна и въздушна перспектива на ArtyFactory.com, Урок от perspective-book.com

Наука за цветовете

Цветът е сложна тема и една от най-субективните в изкуството като цяло. Няма другар за цвета, а цветовите комбинации и техните значения се различават в различните култури. Бялото може да е цветът на чистотата на Запад, но в Япония често означава смърт. Все пак има няколко основни идеи за цвета, които ще ви помогнат да разберете какво се случва с вашите графики. Нека първо да помислим от какво е направен определен цвят.

Нюанс, наситеност, яркост

Има много начини за категоризиране на цветовете, но този, който се обсъжда тук, е най-лесният и удобен за начинаещи дигитални художници.

Нека започнем, като сравним двата цвята:

Червено и синьо. Ясно е, че това са различни цветове, нали? Но всъщност има по-точен термин: нюанс. Левият квадрат е с червен нюанс, а десният със син. Други нюанси включват зелено, оранжево, лилаво и т.н. Въпреки че оттенъкът може да изглежда като излишен термин за цвят, това не е така, защото количеството на всеки нюанс в цвета може да се промени:

И така, ето два червени цвята, но как се различават? Този вдясно изглежда леко избелял. Има по-ниска наситеност.

Наситеността се отнася до това колко цвят има в даден цвят или какъв нюанс е той. Наситеността може да се разглежда като количеството сиво в даден цвят. Без сиво – богат цвят. Много сиво - ненаситено. Така че в този случай квадратът отляво е напълно наситен, а квадратът отдясно е по-малко наситен. Чистото сиво е просто цвят без насищане. Наситеността е най-сложното цветово свойство, в което начинаещият може да се промъкне. Само имайте предвид, че насищането има голямо влияние върху атмосферата на вашите графики. Силно наситените цветове изглеждат по-приветливи, когато се използват в големи количества, докато ненаситените цветове се свързват със сериозен стил.

Последното свойство е Яркост. Понякога вместо това се използва стойност. Яркостта е много по-лесна за разбиране: тя показва колко по-ярък е даден цвят. Ето същото червено като по-горе и по-малко ярка (т.е. тъмна) версия:

Трябва да разберем малко за връзката между яркост и наситеност:

Ето един пример за това как цветът може да повлияе на атмосферата на играта. Новият Super Mario (ако вече ви е писнало от примери от стария) и Castlevania: Lords of Shadow са сравнени.

Говорейки за цвят, отново можем да се сетим за... Барни и Годзила! Помислете как цветът ги прави толкова различни по отношение на нюанс, яркост и наситеност и какво се случва, ако едно или повече от тези свойства се променят. Какво се случва, ако вземете само една черта и я дадете и на двата героя? Още ли искаш да прегърнеш Грей Барни?

Накратко за RGB

Честито! Вече разбирате цветовия модел HSB (Hue Saturation Brightness) или HSV (Value = Brightness). Почти всяка програма за обработка на изображения използва този термин заедно с RGB (цветов модел червено зелено синьо) и CMYK (циан магента жълто черно). Но HSB изглежда има най-простото обяснение какво се случва с цветята. Особено във връзка с това колко ярък или наситен е цветът, който искате, когато работите върху оцветяването. Въпреки това, в различни приложения ще трябва да се справите с цветовия модел RGB, така че нека да разгледаме набързо и това. RGB просто описва всички цветове по отношение на червено, зелено и синьо, тъй като всички цветове могат да бъдат описани като комбинация от тези три. Човешкото око обработва информацията за цвета по подобен начин. Отделете малко време, за да си поиграете със стойностите на цвета и да видите как се променят стойностите на HSB и RGB и как се свързват помежду си. Ето стандартна RGB диаграма (обърнете внимание какво се случва, когато цветовете се припокриват):

Вижте как комбинацията от трите цвята произвежда бяло. Можете да си представите как цветовете играят игра на дърпане на въже, защото когато са с еднаква яркост, нюансите се компенсират взаимно и това, което остава, е бяло или сиво. Но ако смесвате цветове в различни пропорции, можете да се объркате в логиката на получаване на резултата, поради което препоръчваме HSB, когато работите върху графики.

Сега, след като разбрахме какво е цвят, нека започнем да разглеждаме цветовите комбинации. Теорията на цветовете е сложна и доста субективна, така че следното не трябва да се приема като желязно правило, а като посока за по-нататъшно развитие.

Основата на самата теория на цветовете е цветното колело (цветен кръг). За да се опрости обяснението, колелото е субективното подреждане на нюанси на цвета по отношение на червено, жълто и синьо, които разделят колелото на три части (така наречените основни цветове) и зелено, оранжево, лилаво (вторични цветове) в между.

Нюансите обикновено се разделят на топли и студени по отношение на цветовата температура. Освен това червено-жълтите цветове се считат за топли, а сините са студени, както е показано по-долу:

Тук се добавя зона на несигурност, тъй като цветовете, включени в нея, са донякъде гранични. Но жълто-зеленото често се класифицира като студени цветове, а лилавото като топли цветове. Важно е да запомните, че студените цветове се свързват с тъмни нюанси, така че студената сянка ще се възприема като по-тъмна от топъл цвят със същата яркост.

Други връзки между цветовете също могат да бъдат обяснени с помощта на цветното колело. Аналогичните цветове са просто нюанси един до друг, като зелено, жълто и цветове между тях. Контрастните цветове са цветове (нюанси) на 180 градуса един от друг, които изглеждат по-ярки, когато се използват заедно. Вероятно сте ги виждали в действие, дори и да не знаете защо. Синьото и оранжевото дори се превърнаха в троп (стандартно стилистично средство).

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

Накратко:Цветовете могат да бъдат разделени и сравнени един с друг по различни начини, а двойките цветове могат да изглеждат по-добре или по-зле в различни комбинации.

Препоръчваме да изучавате (на английски):Теория на цветовете за дизайнери

Осветление и засенчване

В тази част ще видите много примери за пикселно изкуство, но те обхващат основни понятия, които се отнасят за всеки тип 2D графики.

Източници на светлина

Начинаещите художници често не разбират защо всъщност рисуват светлина и сенки. Засенчването (или засенчването) на рисунка обикновено означава прилагане на различни нюанси, за да се създаде илюзията за светлина в рисунката, точно както перспективата е илюзията за дълбочина. И точно както при перспективата, трябва да създадете някои 2D аналози на ефектите, видими в реалността. Има само едно правило: светлината трябва да идва отнякъде. Не може да е навсякъде, така че ако просто оцветите чертежа, няма да изглежда правилно. Когато начинаещите се опитват да нарисуват сянка, но не разбират как, това води до обекти, които изглеждат така:

Сравнете с опцията без сенки:

Това се нарича засенчване с възглавница и е много лесно за рисуване, без да мислите за това. Изглежда естествено да засенчвате предмети по външния им контур... но изглежда напълно неестествено. За да изглежда правилно осветлението, то трябва да има посока и осветяването/засенчването на повърхността трябва да се регулира в зависимост от това от коя страна източникът на светлина сочи към обекта. Източникът на светлина може да бъде слънцето, лампа, езеро от кипяща лава и т.н., или може да бъде оставен абстрактен.

Например, можете просто да предположите, че почти цялата светлина идва от безкрайно отдалечен източник под ъгъл от 45 градуса. Това е достатъчно, за да засенчи добре обектите в повечето случаи. За анимирани спрайтове, които ще се използват на различни фонове, малко неяснота им помага да изглеждат уместни навсякъде.

Ето пример с източник на светлина в горния ляв ъгъл:

Частите, обърнати към източника на светлина, ще бъдат по-светли, а тези срещу тях ще бъдат по-тъмни. Какво може да бъде по-просто? Но това не винаги е така...

Плоски и извити повърхности

Плоските повърхности обикновено имат почти еднакъв нюанс навсякъде, но на извитите повърхности ще видим градиент. Хубави примери от реалния свят:

Да се ​​върнем към параграфа за формулярите. Кой от тези лоши ще ви се стори добър и кой ще ви накара да внимавате само с вида си?

Можете да видите действителния градиент между светлина и сянка. Обърнете внимание на лявото крило, градиентът върху него е просто перфектен. Сега нека се върнем към споменатата по-рано мизерия със засенчване на възглавници:

И тук, за всяко лице, кубът се нуждае само от един нюанс, но сферата се нуждае от много повече от тях - за да имитира градиентния характер на сенките върху извити повърхности.

По-горе разгледахме опростеното засенчване, тъй като светлината може допълнително да отскача от повърхностите и да подчертава сенчестите зони. Това често означава, че частта от сянката, която е най-отдалечена от основния източник на светлина, всъщност е по-светла от други места. Ефектът е най-забележим, когато обектът е голям или много близо до отразяваща повърхност. По-долу е класически пример:

Още няколко цифрови примера по същата тема.

В левия пример можете да видите отражението на светлината, разположено извън ръба на дизайна, това се случва при силно отразяващи повърхности. Колкото по-силна е падащата светлина, толкова по-ясно се вижда отразената светлина.

Промяната в тона се дължи на отразяването на светлината и може да бъде много добре илюстрирана с примера на пикселното изкуство. Основната точка на това явление е, че тонът на сянката или отразената светлина не винаги е просто по-тъмна или по-светла версия на основния цвят на обекта.

Най-често промяна в тона може да се открие в обекти, които са осветени от слънцето. Директната слънчева светлина има жълт тон, но синьото небе отразява цвета си върху сенките, така че получаваме жълти отблясъци и сенки със сини тонове.

Тази концепция става важна, когато имате допълнителни източници на светлина и те са различни по цвят от основните (например гореща лава). Не забравяйте, че цветната светлина ще промени цвета на осветения обект. Промяната в тона обаче може да е просто стилистично решение. Чрез преувеличаване на ефекта или добавяне на допълнителни цветове можете да постигнете много интересна картина:

Също така си струва да знаете, че сенките може да са по-малко наситени и че по-малко наситените цветове може да изглеждат по-тъмни, отколкото са в действителност.

Няма консенсус сред артистите относно промяната на тона. Намерете вашето решение, но не забравяйте, че колкото повече променяте тона, толкова по-сюрреалистична ще стане вашата рисунка.

Засенчване и текстуриране

Засенчването може да подскаже не само формата на даден обект, но и неговата текстура. Текстурата на даден обект влияе върху това как светлината се отразява от него. Следователно чрез промяна на засенчването понякога можете да промените впечатлението за текстурата. За да се разграничат някои видове текстури, има термини:

От повърхността с лъскаваТекстурата отразява добре светлината и с много малко разсейване. Това означава, че осветената част на обекта ще бъде много ярка (поради доброто отражение), а неосветената част ще бъде много тъмна (тъй като допълнителното осветление идва от дифузна светлина, но такава няма). Добър пример за лъскава текстура е прясно полирана каросерия на автомобил.

Матовотекстурата не отразява много добре и разпръсква светлина при отражение. Това означава, че изглежда по-равномерно осветен. Добър пример за повърхност с матова текстура е стара автомобилна гума.

Гладкатекстурата е някъде по средата. Отразява добре, но силно разсейва светлината при отражение. Пластмасата често има гладка текстура, като повечето компютърни клавиатури.

Така че не забравяйте за свойствата на материалите, които изобразявате. Гланциран метал ли е или матов плат? Облеклото на средновековните герои не трябва да отразява светлината като пластмаса, а космическата броня не трябва да се чувства мека на допир.

Накратко:За да изглежда 2D графиката автентична, светлината трябва да има посока.

Изостряне на вашите умения

Какво да правите сега, след като всички основи са изложени? Напред! Започнете да опитвате! Вярно е: всеки може да рисува. Разбира се, някои хора имат повече умения, но най-голямата разлика между лош артист и добър е колко практикуват. Колкото повече практика, толкова по-добри ставате в умението. Но практикувайте разумно. Проектите за игри предоставят отлична възможност за това. Ако сте мечтали за своя собствена игра, започнете да правите скици за нея, докато четете тази статия.

Ако нямате свой собствен, присъединете се към проекти за игри на други хора! Дори и най-малката игра има достатъчно графики, за да ви даде страхотна практика и да рисувате видимо по-добре следващия път. Още нещо: за да бъдете художник на игри, не е нужно да рисувате като ренесансовите художници.

Молив и хартия

Единственият начин да станете по-добри в рисуването е да се упражнявате, а най-евтиният и лесен начин е да го правите с молив и хартия. Изкушаващо е да използвате само дигитални инструменти, защото веднага ще получите готов резултат. Но не се изкушавайте! Когато рисувате на ръка, вие участвате по-активно в процеса. Освен това ще можете да избегнете някои от лошите навици, които възникват, когато разчитате изцяло на компютъра. Разбира се, инструментите в програмата може да изглеждат много мощни. Но ако се опитате първо да нарисувате спрайтове с помощта на автоматични фигури, повярвайте ми, ще получите смешни и грозни неща, които не могат да бъдат направени със скица с молив.

След като сте развили добри основни навици, все още има достатъчно време да изследвате безмилостно всички инструменти и техники. Изглежда ли странно да рисувате с молив върху хартия, ако вече сте свикнали да работите в програма? Но не само това стана отправна точка за артисти от цял ​​свят.

Купете скицник (на корицата пише скицник), моливи и добра гума. Ще трябва да използвате ластика много често. Но тетрадка за скици не е задължителна. Основната идея е, че имате нужда от практика, за да можете дори да рисувате в полетата на училищния си бележник. Но в тетрадката цялата работа ще бъде на едно място, така че няма да се налага да съжалявате по-късно, че най-успешната рисунка на злодея се е озовала на листа с домашното ви.

Скици (известни още като скици)

В скиците с молив е по-добре да се приеме, че всички линии са само временни предложения, а не окончателната версия. Не ставайте зависими от вашите линии. Начертайте отгоре, изтрийте и нарисувайте отново без оглед на това, което вече е там. Разбира се, за това трябва да направите линиите достатъчно леки. Започнете с основната форма на вашия обект и постепенно добавяйте детайли. Повечето обекти могат да бъдат апроксимирани чрез основни форми, тоест сфера, цилиндър и кутия, което е особено полезно за рисуване в перспектива.

Например, не рисувайте повече или по-малко цялостна глава, а преминете към гърдите, след това към ръцете, краката и т.н. Ако навлезете в детайлите твърде рано, може да загубите представа как всички те си пасват. Начертайте всичко заедно върху голяма груба скица и добавете подробности отгоре. Не се страхувайте да продължите да скицирате върху първите редове, докато получите перфектна цялостна форма, и не се страхувайте да започнете отначало.

Това видео върши страхотна работа, като показва как художникът изгражда основната структура на герой, като поставя груби форми отгоре, като същевременно добавя повече детайли, докато върви, и изтрива и прерисува части, които изглеждат зле. А ето и снимка от бележника на начинаещ художник:

Чернова, чернова, пак чернова

В началото може да изглежда лудост, но трябва да начертаете поне три версии на всеки герой/обект/елемент от менюто с молив и хартия. Едва след това можете да ги прехвърлите на вашия компютър за преглед. Големите студиа често създават буквално десетки концепции за един герой, преди дори да помислят за кастинг. Скицирането на три версии, дори за неинтерактивни фонови активи като дървета или храсти, е обичайно. Поемате голям риск, ако заложите на първия вариант като единствен и краен. Като измислите три различни варианта, можете да вземете най-доброто от всеки и да ги комбинирате във финала. Ето един прост пример, при който всеки от готините космически шлемове се различава от окончателния дизайн по-долу (който се основава на още по-груби ранни скици):

Ако този съвет изглежда много труден за следване, не забравяйте: вие рисувате груби, много груби, груби скици. Не си губете времето с тях. Всъщност в повечето случаи по-малкото е повече. Колкото по-дълго работите върху опция, толкова по-трудно ви е да се съгласите да я преработите или да създадете друга опция. Оставете настрана подробностите, просто предайте общата идея и продължете напред. Винаги можете да се върнете и да работите върху скицата, ако ви харесва.

Бъдете готови да рисувате, и то много, и понякога да се разочаровате. Ако вашите рисунки ви се струват неразбираеми, това означава само, че нищо човешко не ви е чуждо. Следващия път ще бъде по-добре, а след това още по-добре. Не забравяйте, че е добре да бъдете нещастни. Ако рисуването беше проста дейност, тази статия нямаше да се появи. По принцип, ако сте 100% доволни от рисунката си, вие не се опитвате, започвате да губите приятели и се убеждавате, че това е размазаната бъркотия, която сте искали да нарисувате на първо място.

Накратко:Винаги първо правете няколко версии с молив на вашето игрово изкуство и не се опитвайте да постигнете съвършенство веднага.

Заключение и допълнително четене

Вече знаете основите и сте напълно готови да създавате прилична графика за 2D игри. Ако се интересувате да научите повече по темата, може да забележите връзки към допълнителни източници в цялата статия. Самата статия до голяма степен се основава на книгата „Основи на рисуването и изкуството на видеоигрите“ от Крис Соларски. Можете да прочетете някои от неговите писания. Направи го!

Оригинална статия на английски: Пълно ръководство за начинаещи за по-добро изкуство на 2d играта

P.S.

Може също да се интересувате

Компютърната индустрия се издигна много, много високо през последните години. Ако по-рано компютърните игри бяха само забавление за тесен кръг фенове, сега те са нещо повече. Те могат да се играят от хора от всички възрасти и се създават проекти, които отговарят и на най-деликатните вкусове. И най-важното, появиха се невероятни възможности, които преди бяха немислими, така че сега компютърните игри могат да бъдат практически неразличими от реалността по отношение на графики и физика, те могат да потопят потребителя в непознати светове, позволявайки му да изживее невероятни истории и да бъде ключът към техен характер. Но в същото време някои хора не искат да се ограничават до процеса на „игра“ - те са очаровани от процедурата за създаване на игри. Повечето от тези мечтатели обаче остават на нивото на фантазията, защото смятат, че този процес е твърде сложен. Всъщност това не е така, както се вижда от огромния брой независими разработчици, които сега произвеждат много проекти без големи бюджети или подкрепа от издатели. Просто трябва да започнете с малко и постепенно да вървите напред. В тази статия ще научите какво представляват спрайтовете на играта и как да ги използвате, за да можете да започнете да създавате свои собствени проекти.

Какво представляват спрайтовете?

Ако имате компютърна игра на монитора си, какво виждате пред себе си? Графичната обвивка на този проект, различни текстури, съставени от малки пиксели. Ако планирате да създадете компютърна игра, тогава ще трябва да работите много с графики. Но ако все още не сте се насочили към голям проект, тогава не се изисква да работите перфектно с 3D графични редактори. Тук ще ви помогнат спрайтове за игри, които можете да изтеглите от интернет. Но какво е това? Как могат да бъдат използвани и как това ще улесни задачата ви? Спрайтовете на играта са готови текстури на герои, обекти и т.н., които можете да изтеглите на вашия компютър и след това да използвате в процеса на създаване на игра. Това означава, че няма да е необходимо да рисувате всеки обект в играта, както и всяка фаза от движението му - вече ще имате всичко готово. Както можете да видите, спрайтовете на играта наистина могат да направят живота ви много по-лесен.

Спрайт изглед

Сега имате обща представа какво представляват игровите спрайтове, но това няма да е достатъчно, за да ги използвате на практика. Трябва да разберем какви точно са те и как да ги приложим при създаването на игри. Ако ще използвате спрайтове, тогава трябва да ги изтеглите на вашия компютър. В повечето случаи те ще изглеждат като голям или дори огромен графичен файл с десетки или дори стотици малки изображения на прозрачен фон. Съответно, можете да нарежете този голям файл на малки, за да имате директен достъп до вашите спрайтове. Някои от тях може да не ви трябват и можете да ги изрежете, така че този метод е много по-удобен от изтеглянето на десетки или стотици отделни изображения. Просто избирате голям файл, маркирате област и имате спрайт.

Използване на спрайтове

Както добре знаете, в повечето случаи ще можете да намерите спрайтове за 2D игри, тъй като 3D изображенията не са толкова стандартизирани, така че ще отнеме много място, за да предадете всички движения на един 3D обект. В същото време работата с 2D спрайтове е изключително проста. Просто зареждате спрайтовете в редактора, в който създавате, и ги свързвате заедно, за да създадете ефекти на движение. След това го заредете в нивото и се насладете на резултата.

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

Няма да можете да прекарате целия си живот в използване на спрайтове за създаване на игри, така че ако сте амбициозни, ще трябва или да се научите как да ги използвате, или да намерите някой, който да ви помогне с това умение.

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

Веднага ще отбележим метода, според който играта се рисува за един формат и се мащабира за всички останали. Този метод изкривява изображението на екрана и всичко не изглежда така, както е замислил художникът.

Нашият метод ще се състои в изрязване на тази част от изображението при различни пропорции, които няма да повлияят нито на играта, нито на художествената композиция. Но какъв размер трябва да бъде оригиналното фоново изображение?

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

Резолюции на екрана

Съотношения на страните

А ето как изглежда списъкът с най-популярните резолюции една спрямо друга:

Ще отрежем излишното отстрани, оставяйки височината на изображението непокътната. Следователно трябва да вземете решение за максималния размер на изображението във височина.

Ако нарисувате нещо по размер 2048 x 2048 пикселаи след това програмно го намалете до размер 512 x 512 px, тогава изображението ще остане ясно, но не можете да направите това в обратна посока с растерна графика - картината ще излезе размазана.

Както можете да видите по-горе, от списъка с най-популярните резолюции максималната височина е 1536px.

За най-популярните формати на пропорциите (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 активи, включително потребителски интерфейс, символни спрайтове, икони и среди. Художниците предлагат активи за продажба и обхватът нараства всеки ден.

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 хиляди актива, включително елементи на потребителския интерфейс и различни спрайтове за 2D платформинги. Повечето ресурси са представени във векторна графика и са подходящи за всяко устройство, независимо от разделителната способност на екрана. Активите могат да се изтеглят поотделно (безплатно) или в един комплект (срещу скромна такса от $9).

9. Game-Icons.net (безплатно)

Game-icons.net е най-добрият сайт с безплатни икони, от които има не по-малко от 2000. Въпреки факта, че всички икони са черно-бели, те са доста универсални и могат да се използват за представяне на действия, заклинания, умения, елементи и т. н. Приятен бонус е векторният формат.

10. Reiner's Tilesets (безплатно)

Най-добрият сайт с безплатни плочки. Тук можете да намерите спрайтове на животни, растения, сгради, оръжия, визуални ефекти и почти всякакви обекти за ролеви игри с изометрична графика. Стилът на активите напомня на 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 активи, включително потребителски интерфейс, символни спрайтове, икони и среди. Художниците предлагат активи за продажба и обхватът нараства всеки ден.

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 хиляди актива, включително елементи на потребителския интерфейс и различни спрайтове за 2D платформинги. Повечето ресурси са представени във векторна графика и са подходящи за всяко устройство, независимо от разделителната способност на екрана. Активите могат да се изтеглят поотделно (безплатно) или в един комплект (срещу скромна такса от $9).

9. Game-Icons.net (безплатно)

Game-icons.net е най-добрият сайт с безплатни икони, от които има не по-малко от 2000. Въпреки факта, че всички икони са черно-бели, те са доста универсални и могат да се използват за представяне на действия, заклинания, умения, елементи и т. н. Приятен бонус е векторният формат.

10. Reiner's Tilesets (безплатно)

Най-добрият сайт с безплатни плочки. Тук можете да намерите спрайтове на животни, растения, сгради, оръжия, визуални ефекти и почти всякакви обекти за ролеви игри с изометрична графика. Стилът на активите напомня на Diablo II. Това е чудесен ресурс за нови разработчици, които искат да изпробват двигател на играта или да започнат да създават своя собствена игра.