Задний фон для игры 2d: D1 84 d0 be d0 bd 2 d0 b4 векторы, картинки, клипарт D1 84 d0 be d0 bd 2 d0 b4

Из этой статьи вы получите общие представления, как рисовать крутую 2D графику для игр. Это не пошаговый туториал, это что-то в разы более крутое!

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

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

Список тем:

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

Если эти пункты не схватили вас за живое, наглядная демонстрация ваших способностей «до» и «после» идет ниже:

Это реальные картинки. Верхнюю самостоятельно нарисовал и хотел использовать в своей игре программист, а нижняя – это то, что получилось после небольшой доработки его друга-дизайнера.

В повседневной жизни мы привыкли часто видеть 2D изображения. Но понимать, что вещь выглядит красиво, не то же самое, что знать, почему это так. Любое двумерное изображение можно разбить на базовые элементы, поэтому вы можете представлять себе создание двумерной графики как объединение этих элементов, чтобы: 1) Получилось похоже на то, что вы имели ввиду; и 2) Не было супер уродливо. Например, мы все знаем, как выглядят квадрат и сфера, но какое отношение это имеет к созданию понятного на вид персонажа?

Чтобы ответить на это, мы приступаем к первой части:

Формы

Зная о том, какую роль на самом деле играют формы, вы можете применять их для создания приветливой или неприветливой на вид игровой среды, а также делать, чтобы персонажи и объекты соответствовали (или намеренно не соответствовали) этой среде.

Начинайте с самых простых форм: кругов, квадратов и прямоугольников. Попробуйте нарисовать персонаж, состоящий только из квадратов или только из треугольников, а затем посмотрите, кто из них будет больше похож на героя, а кто – на злодея. Сохраняя свои первоначальные задумки в виде зарисовок с простыми фигурами, вы сможете генерировать много идей, преждевременно не отвлекаясь на проработку деталей (об этом много говорится в части «Оттачивание навыков»).

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

Сравните, например, пейзаж Мордора во «Властелине колец» и холмы Шира. Когда круглый и дружелюбный на вид персонаж бродит по остроугольным окрестностям, он выглядит более тревожным, нежели тот же персонаж, первоначально показанный рядом с округлыми формами. В том же духе вы можете совершать свои стилистические выборы и тем самым влиять на впечатление, которое местность производит на игрока.

Вот еще очень хороший пример. Давайте разберем два персонажа, которые имеют одновременно очень много и очень мало общего друг с другом. Это Годзилла и динозавр Барни. Какие геометрические фигуры заставляют одного из них выглядеть как бездушное орудие убийства, а другого как милого обаяшку?

Только задумайтесь: оба персонажа – это монстры, срисованные с тираннозавра таким образом, чтобы внутри мог поместиться человек. Но они находятся на противоположных концах спектра привлекательности. Почему? Это связано с тем, что один имеет плавные округлые линии, а другой – более резкие, и местами даже острые (есть и другие причины, мы поговорим о них ниже).

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

Силуэт объекта тесно связан с его формой, поэтому небрежность при выборе силуэта способна разрушить форму. Если по силуэту персонажа трудно отличить от других, то его дизайн недостаточно хорош, даже если вы уже поработали со смыслом геометрических форм. Некоторые художники даже начинают отрисовку с силуэта, а затем двигаются вовнутрь. Упрощение объекта до его силуэта поможет еще раз убедиться, что он выглядит правильно. Короче говоря: при разработке графики для своих игр не забудьте убедиться, что вы учитываете формы и очертания объектов – и смысл, общепринято с ними связанный. Одного этого порой бывает достаточно, чтобы графика выражала ваш замысел.

Также помните, что предметы часто распознаются по их форме, поэтому объекты в вашей игре должны иметь различную форму, чтобы игрок с легкостью их различал. И усыпанный колючками морской ёж в роли главного героя сил Добра не заслужит популярности у игроков.

Короче говоря: Все предметы имеют форму, и разные формы подсознательно создают разное впечатление.

Анатомия и пропорции

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

Основная идея заключается в том, что для длины, размера и положения различных частей тела существуют определенные правила и отношения. Это важно потому, что анатомические ошибки бросаются в глаза. Более стилизованный персонаж, такой как Микки Маус, может менее строго придерживаться правил анатомии. Но начинать обучение лучше с реалистичных фигур. Чтобы нарушать правила, их надо хорошо знать. Берите за основу человеческие пропорции и двигайтесь к идеалу путем сравнения размеров разных частей тела.

Существуют конкретные пропорции для измерения почти каждой части человеческого тела, но обычно отправной точкой является голова. В реальной жизни люди имеют высоту около 7,5 голов, но часто это значение округляется до 8, чтобы получить чуть более идеализированную фигуру:

Изменение размера головы персонажа по сравнению с его телом может достаточно сильно влиять на то, как воспринимается этот персонаж. Большая голова делает существо похожим на ребенка, поэтому ее чаще рисуют дружелюбным персонажам, а персонажи с маленькими головами кажутся более взрослыми и относительно крупными. Годзилла и Барни снова помогут нам:

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

Рекомендуем изучить (на английском): Справочник по пропорциям от FOERVRAENGD

Перспектива

Перспектива – это создание иллюзии глубины на 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.

Если Вас интересует пиксель-арт, очень рекомендую прочитать перевод статьи Как рисовать пиксельарт? от создателя знаменитой игры Spelunky.
И, ознакомтесь с Полезными ресурсами для художников.- сайты с референсами, видео школы и много других полезностей.

Отзыв про Компьютерная игра Streets of Rage 4: «Отличный 2d beat em up, но опоздавший по времени.»

Отзыв:

Я как фанат streets of rage с момента первых новостей ждал выхода четвёртой части и всячески следил за ней. А потом купил на старте продаж. В данном отзыве я проведу не большой разбор игры.

Сюжет: Над сюжетом неплохо так поработали и он чем то напоминает сюжет предыдущих частей. Конечно в игре отсутствует та изюминка с неожиданным развитием и сменой сюжета. Сюжет больше прямолинейный и постепенно развивается и дополняется новой информацией. Почти на всех beat em up-ах сюжет всегда отходит на второй план.

Графика: Над графикой тут явно поработали, причём не плохо. Игра отлично будет смотреться на портативках и мобильных устройствах. Задний фон анимирован и наделён жизнью. Всё сделано в стиле предыдущих частей. Анимированные видеовставки тоже не плохого качества. К разрушениям и взрывам тоже не придраться.

Динамика: С динамикой у игры всё в порядке. Толпы противников, взрывы, различные ловушки. Игра держит в постоянном напряжении. И даже при диких замесах тормозов не наблюдалось.

Управление: Кроме основного удара и прыжка есть ещё и другие действие. Есть отдельная клавиша, которая позволяет ударить противника подошедшего сзади. Так же под сбор предметов тоже есть отдельная клавиша. Спец-приём хоть и отнимает часть энергии, но иногда очень эффективен, особенно в сложной ситуации. Так же есть спец-атака, которая снимает одну звезду. Звёзды можно найти на уровнях. Одна звезда даётся в начале каждого уровня. На геймпаде играть хорошо. Можно назначить практически все кнопки геймпада под различные действия, гораздо сложнее играть на клавиатуре.

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

Геймплей: В плане геймплея всё хорошо. Разнообразные противники, локации, боссы. Целых 12 полноценных уровней с подуровнями и мини-боссами. В первый раз играешь с большим интересом. Но в игре отскакивание противника от конца экрана явно было делать лишним. Это во первых выглядит не правдоподобно, во вторых портит всю динамику игры. Ладно бы отскакивали просто от стен.

Персонажи: У каждого персонажа свои характеристики. Скорость, сила удара, серии и спец-атаки. По этому каждый персонаж уникален и под него приходится разрабатывать свою тактику. Играть за разных персонажей придерживаясь одной тактики просто не выйдет.

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

Сложность: Мне, как человеку прошедшему все части, игра показалась не очень сложной. Сложность, по ощущениям, что то среднее между второй и третьей частью. Для человека прошедшего все части игра спокойно пройдётся с первого раза и за один присест. Обычно жизни сливаются именно на боссах, чем на обычных противниках. При чём так называемые лечилки расставлены практически на каждом углу, в предыдущих частях они встречались на много реже. А вот сложность у игры не стабильная и даже не нарастающая, а просто на каждом уровне своя. То же самое и с боссами: одни валятся на раз — два, на других спокойно можно слить жизнь.

Бой: Как и писалась выше тактика боя у каждого персонажа разная, можно создавать серии ударов различными комбинациями добавляя в них спец приёмы. Так же легко взаимодействовать с напарником делая парные атаки. Так же у противников есть свой интеллект и они не плохо так могут накостылять если допустить маленькую оплошность. Они не плохо взаимодействуют друг с другом, по этому загнав себя в «кольцо» очень сложно выйти из него без урона. Да даже от стенки противников можно не плохо так получить. По этому лучше не стоять на месте и не доводь до окружения противниками. Оружие можно не только пулять, но и ловить. По этому использую эти хитрости и особенность с отскакиванием противников от экрана, можно не плохо облегчить себе прохождение. Особенно при игре вдвоём можно спокойно загасить босса не давая ему даже приземлиться.

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

Как вывод. Игра в целом получилась не плохая. Но не много опоздала со временем. Да, сейчас инди проекты пользуются не плохой популярностью. Но выйдя она на консолях четвёртого или пятого поколения, была бы просто хитом своего времени.
В игре есть много секретов и секретных персонажей, которые открываются после прохождений игры на различных режимах. Причём это не просто спрайты, а полностью играбельные персонажи со своими особенностями. Именно это и удерживает тебя играть в эту игру по несколько раз, а не забросить её после первого же прохождения.

P. S.: В своём отзыве я не стал раскрывать сюжет, персонажей, боссов и т. П., чтобы не портить впечатления о данной игре. Когда меньше знаешь играть на много интереснее.

Пример игры на Python c Pygame: графика ~ PythonRu

Четвертая часть проект «Стрелялка с Pygame». Если пропустили, обязательно вернитесь и начините с первой части. В этот раз речь пойдет об использовании заготовленной графики.

В этой серии уроков будет создана полноценная игра на языке Python с помощью библиотеки Pygame. Она будет особенно интересна начинающим программистам, которые уже знакомы с основами языка и хотят углубить знания, а также узнать, что лежит в основе создания игр.

Выбор графики

В уроке, посвященном спрайтами, затрагивалась тема Opengameart.org — источника бесплатного арта для игр; и популярного местного автора, Kenney. Kenney создал набор арта, который прекрасно подойдет для этой стрелялки. Он называется «Space Shooter Pack». Найти его можно здесь:

https://opengameart.org/content/space-shooter-redux

Он включает массу качественных изображений с космическими кораблями, лазерами, астероидами и так далее.

Архив содержит несколько папок. Для этого проекта нужно папка PNG со всеми изображениями по отдельности. Для спрайтов пока что нужно только три, а также изображение звездного неба для фона.

Изображения необходимо скопировать туда, где игра сможет их найти. Лучше всего создать новую папку в том же месте, где хранится код игры. Назовем ее «img».

Загрузка изображений

Чтобы быть уверенными в том, что код будет работать в любой операционной системе, нужно использовать функцию os.path, которая определяет правильный путь к файлам вне зависимости от ОС.

В верхней части программы необходимо определить местоположение папки img:

from os import path

img_dir = path.join(path.dirname(__file__), 'img')

Прорисовка фона

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

background = pygame.image.load(path.join(img_dir, 'starfield.png')).convert()
background_rect = background.get_rect()

Теперь можно прорисовать фон в разделе Draw игрового цикла до прорисовки любого из спрайтов:

screen.fill(BLACK)
screen.blit(background, background_rect)
all_sprites.draw(screen)

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

Изображения спрайтов:

Теперь можно загрузить изображения спрайтов:

background = pygame.image.load(path.join(img_dir, 'starfield.png')).convert()
background_rect = background.get_rect()
player_img = pygame.image.load(path.join(img_dir, "playerShip1_orange.png")).convert()
meteor_img = pygame.image.load(path.join(img_dir, "meteorBrown_med1.png")).convert()
bullet_img = pygame.image.load(path.join(img_dir, "laserRed16.png")).convert()

Начнем с игрока — необходимо заменить зеленый прямоугольник, то есть self.image и не забыть убрать параметр image.fill(GREEN), который больше не нужен:

class Player(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image = player_img
        self.rect = self.image.get_rect()

Тем не менее имеется пара проблем. Во-первых, картинка чуть больше, чем требуется. Есть два варианта: 1) открыть ее в графическом редакторе (Photoshop, GIMP) и отредактировать; 2) поменять размер прямо в коде. Выбираем второй вариант. Для этого понадобится функция Pygame под названием transform.scale(). Уменьшим изображение вдвое — до размера 50х30 пикселей.

Вторая проблема — черный прямоугольник вокруг корабля. Чтобы это исправить, нужно назначить прозрачный цвет с помощью set_colorkey:

self.image = pygame.transform.scale(player_img, (50, 38))
self.image.set_colorkey(BLACK)

Если повторить то же самое для классов Bullet и Mob (хотя их размер менять не нужно), игра будет выглядеть намного лучше:

Код урока — shmup-4.py

Итого

Теперь в игре есть графика, и это помогает заметить новую проблему: астероиды уничтожают корабль, даже когда не касаются его. В следующем уроке поработаем над тем, чтобы столкновения работали корректно.

Catchy Backgrounds for 2D Games

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

О коллекции

Фоны из этой коллекции были созданы специально для разработки 2D-игр.Подборка подходит в первую очередь для аркад с максимально простым управлением, минимумом сюжета и насыщенным игровым процессом: платформеры, файтинги, шутеры, летчики и другие не-3D игры. Вы можете использовать как растровые (формат PNG или PSD), так и векторные изображения (Al, EPS и PNG). Почти все фоны бесшовные, поэтому вы можете делать бесконечную прокрутку по горизонтали или вертикали с соответствующей ориентацией. Повторяющиеся элементы выглядят максимально ненавязчиво и не привлекают внимание игрока, а места склейки не видны.

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

• Первые фоны из подборки особенно понравятся любителям олдскульных аркад из 90-х. Например, фоны планет напоминают Баки О’Хара, а фоны городов имеют дух Darkwing Duck, Double Dragon и Contra.
• Категория горизонтальных фонов для игр типа Dendy также включает Apocalyptic, Forest, Fantasy, Mountain. Эти фоны сочетают в себе пиксельную графику и некоторую строгость, идеально подходящую для экшн-игр. War и Destroyed City не пиксельные, но идеально подходят под жанр.
• Улица и научная фантастика стали более плавными и универсальными. Это могут быть жестокие шутеры или файтинги, а также более нейтральные платформеры.
• Также есть яркие и сочные горизонтальные фоны: Sweet, Cartoon, Candy, Cartoon City, Ocean, Underwater World, Cartoon Forest, Jungle, Nature, Snowy, Beach, Stone.Они идеально подходят для детских игр, и даже Хэллоуин не получился слишком мрачным.
• Следующая категория — фоны для космических стрелков. Они включают 2 изображения с вертикальной ориентацией и 2 с эффектом параллакса. Они более реалистичны и детализированы.
• В отдельной категории вертикальных фонов можно найти картинки для Jump Games вроде популярного Doodle Jump. Эти варианты отличаются тёплым, «мультяшным» рисунком, идеально подходящим для игр подобного жанра.

Выберите подходящие изображения бесплатно или купите премиум-подписку и получите еще больше качественных фонов для 2D-игр. Вся коллекция ниже.

Рисование фонового изображения для 2D-игры: сравнение методов

В настоящее время существует два основных способа разработки первоклассного фона для 2D-игр. Один из них использует 2D-технологию как фундаментальный метод, другой основан на 3D-подходе.

Метод 2D считается традиционным и позволяет делать фотографии с помощью цифровой живописи и редактирования фотографий.

Метод 3D, напротив, требует больше времени и усилий, так как основан на модели будущего изображения, построенной в программе 3D. Позже изображение будет перекрашено 2D художниками и дополнено деталями.

3D-Ace провела собственное исследование и представила исчерпывающий анализ этих двух методов.

Графические возможности

2D

3D

Мы полагаем, что эти два метода нельзя сравнивать с точки зрения качества графики, поскольку они совершенно разные.Было бы неправильно предполагать, что один лучше другого. Здесь все зависит от предпочтений дизайнера или художника (или клиента).

Объем работы

Теперь давайте посмотрим на действия, которые художники должны предпринять, чтобы создать желаемое фоновое изображение. Техника 2D требует четырех следующих этапов:

• создание эскиза
• штриховая графика (черно-белый набросок)
• цветовой дизайн
• заключительный этап (рисование, добавление дополнительных деталей, тени и осветление)

Метод 3D одновременно требует пяти этапов:

Несмотря на то, что в 3D-моделировании художники должны сделать пять шагов для достижения цели, объем работы, который им требуется, остается таким же.Однако, по мнению авторитетных студий, метод 3D немного дешевле 2D. Давайте посмотрим, почему они могут так заявить.

Ресурсы и стоимость

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

Техника 2D:

Художники 2D

Думаю, не стоит упоминать, что необходимо нанимать профессиональных дизайнеров, которым вы доверяете или готовы сделать это. Это может быть ваша собственная команда, независимая студия или фрилансеры.Заработная плата и расходы на управление могут варьироваться в зависимости от уровня квалификации исполнителя, навыков, опыта, надежности и т. Д.

Изображения, текстуры, фоны

Иногда в студии или компании, в которой вы работаете, нет материала (изображений, изображений), накопленного за годы, а затем вам придется потратить значительное количество времени на поиск, покупку и загрузку подходящего изображения. Если у вашей компании есть обширная библиотека, вы значительно сократите время разработки.

Техника 3D:

Художники 3D и дизайнеры 2D

Здесь у вас есть несколько вариантов. Во-первых, вы можете нанять обученного профессионала с необходимым опытом, который не требует надзора. Он или она, вероятно, будет иметь представление о других связанных областях, таких как анимация, разработка игр или приложений и т. Д., И по этой причине способен создавать фоновое изображение с правильной цветовой палитрой и композицией. Эти художники дорогие. Во-вторых, вы можете нанять новичка, обладающего достаточными знаниями для создания необходимой модели, но которому требуется руководитель для инструктирования и проверки работы.Они вполне доступны по цене, однако часто не могут уложиться в сроки или выполнить ожидаемый объем работы.

Модели, текстуры, изображения

Если вы привлекаете новичка к работе над своим проектом, вы определенно не будете просить его или ее создать новую 3D-модель. Как вариант, вы купите и загрузите необходимые модели или выберете ту, что есть в вашей библиотеке. Это, конечно, может произойти, если у вас есть отдел 2D и 3D и есть запас 3D моделей. Тогда этот подход очень эффективен и дешев.Если вам не повезло с такой поддержкой, приготовьте деньги, потому что это будет стоить немалые деньги.

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

Плюсы и минусы

Теперь давайте суммируем преимущества и недостатки каждого метода и структурируем их в вашей голове.

Плюсы 2D:

• Традиционный стиль, приятный глазу смотрящего
• Гибкость с точки зрения достижения желаемого стиля

Недостатки 2D:

• Требовалось нанять много опытных и квалифицированных художников. Собрать такую ​​высокопоставленную команду — непростая задача.

Плюсы 3D:

• Точность перспективы, что очень удобно для объектной анимации
• Подходит для архитектурных и интерьерных моделей

Минусы 3D:

• Сложный индивидуальный дизайн требует много времени и усилий, поэтому разработчики часто используют методы 2D для расширения изображения сложными элементами.
• Программное обеспечение для создания трехмерных ландшафтов стоит дорого, и здесь снова широко используется технология 2D для добавления деталей к изображению.
• трудно стилизовать изображение, так как оно требует большого дело 2D редактирования и рисования.Здесь вы начинаете думать, что было бы неплохо начать рисовать в 2D с самого начала.

Результат

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

Компания 3D-Ace специализируется как на 2D, так и на 3D технологиях и готова стать вашим надежным партнером в мире игрового дизайна.

Добавление и отображение фона — Pixelnest Studio

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

Ваш первый фон будет статичным. Мы будем использовать следующее изображение:

(щелкните правой кнопкой мыши, чтобы сохранить изображение)

Импортируйте изображение в папку «спрайты». Просто скопируйте в него файл или перетащите его из проводника.

Пока не беспокойтесь о настройках импорта.

В Unity создайте новый игровой объект Sprite в сцене.

Что такое спрайт?

Обычно мы называем «спрайтом» 2D-изображение, отображаемое в видеоигре. Здесь это особый объект Unity, созданный для 2D-игр.

Добавьте текстуру к спрайту

Теперь мы выберем реальный спрайт для отображения. Убедитесь, что выбран «New Sprite», и посмотрите на инспектора.Установите для свойства Sprite значение «фоновое» изображение:

(необходимо щелкнуть небольшой круглый значок справа от поля ввода, чтобы открыть инспектор «Выбрать спрайт»)

Вы можете видеть, что есть еще несколько спрайтов. Это изображения по умолчанию, используемые uGUI (система пользовательского интерфейса Unity).

«Мой спрайт не отображается в диалоговом окне?» : сначала убедитесь, что вы находитесь на вкладке «Активы» диалогового окна «Выбор спрайта».

Некоторые читатели сообщили, что в их проекте это диалоговое окно было пустым. Причина в том, что для некоторых установок Unity, даже в новом новом 2D-проекте, изображения импортируются как «Текстура», а не как «Спрайт».

Чтобы исправить это, вам нужно выбрать изображение на панели «Проект» и в «Инспекторе» изменить свойство «Тип текстуры» на «Спрайт»:

Мы не знаем, почему у всех разное поведение.

Итак, мы создали простой спрайт, отображающий фон облачного неба.Вы можете подумать, что это было немного сложно. Фактически, мы могли бы перетащить спрайт из вкладки «Проект» прямо в «Сцену».

Давайте реорганизуем сцену.

На панели «Иерархия» выберите Новый спрайт . Переименуйте его в Background1 или что-нибудь, что вы легко запомните.

Затем переместите объект на место: Уровень -> Фон . Измените его позицию на (0, 0, 0) .

Быстрое упражнение: продублируйте фон и поместите его на (20, 0, 0) .Он должен идеально подходить к первой части.

Совет : вы можете продублировать объект с помощью сочетаний клавиш cmd + D (OS X) или ctrl + D (Windows).

Следующее утверждение может показаться довольно очевидным, но оно имеет некоторые последствия: мы отображаем 2D-мир.

Это означает, что все изображения имеют одинаковую глубину, т.е. 0 . И вы (как и графический движок) не знаете, кто будет отображаться первым.

Sprite позволяют нам сообщать Unity, что находится спереди, а что сзади.

В Unity мы можем изменить «Z» наших элементов, и это позволит нам иметь слои. Фактически это то, что мы делали в этом руководстве до обновления Unity 5.

Но мы подумали, что использовать слои спрайтов — хорошая идея.

В компоненте «Sprite Renderer» у вас есть поле с именем… «Sprite Layer», в настоящее время установлено значение По умолчанию .

Если щелкнуть по нему, появится короткий список:

Давайте добавим несколько слоев в соответствии с нашими потребностями (используйте кнопку «+»):

Примените слой Background к нашему фоновому спрайту:

Совет : настройки «Порядок в слое» позволяют ограничить подслои.Спрайты с меньшими номерами визуализируются с до спрайтов с большими номерами.

Примечание : слой «По умолчанию» нельзя удалить, потому что это слой, используемый трехмерными элементами. В вашей 2D-игре могут быть 3D-объекты. Частицы рассматриваются Unity как 3D-объекты, поэтому они будут отображаться на этом слое.

Также известен как props . Эти элементы используются не для улучшения игрового процесса, а для визуального улучшения сцены.

Вот несколько простых спрайтов летающих платформ:

(щелкните правой кнопкой мыши, чтобы сохранить изображение)

Как видите, у нас две платформы в одном файле.Это хороший способ научиться обрезать спрайты с помощью инструментов Unity.

Получение двух спрайтов из одного изображения

1. Импортируйте изображение в папку «спрайты»
2. Выберите спрайт «платформы» и перейдите к инспектору.
3. Измените «Sprite Mode» на «Multiple»
4. Щелкните «Редактор спрайтов».

В новом окне («Редактор спрайтов») вы можете нарисовать прямоугольники вокруг каждой платформы, чтобы разрезать текстуру на более мелкие части:

Назовите платформы «платформа1» и «платформа2».

Совет : верхняя левая кнопка «Slice» позволяет быстро и автоматически выполнять эту утомительную задачу.

Unity найдет объекты внутри изображения и автоматически их разрежет. Вы можете указать точку поворота по умолчанию или установить минимальный размер среза. Это действительно эффективно для простого изображения без артефактов. Однако, если вы используете этот инструмент, будьте осторожны и проверьте результат , чтобы убедиться, что вы получили то, что хотите.

Теперь под файлом изображения вы должны увидеть два спрайта по отдельности:

Добавление их в сцену

Мы будем действовать так же, как и для фонового спрайта: создать новый Sprite и выбрать спрайт «platform1» (или перетащить их один за другим из «Project» на вкладку «Scene»).Повторите для «platform2».

Установите их «Слой спрайтов» на «Платформы».

Поместите их в объект Middleground .

И… работает! Я до сих пор удивляюсь, насколько это просто сейчас (честно говоря, это было немного сложно без 2D-инструментов, включая квадрирование и мозаичное отображение изображений).

Сборные

Сохраните эти платформы как сборные. Просто перетащите их в папку «Prefabs» на панели «Project» из «Hierarchy»:

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

Примечание к кнопкам «Prefab» : если вы измените игровой объект позже, вы можете «Применить» его изменения к Prefab или «Вернуть» его к свойствам Prefab (отменив любые сделанные вами изменения на игровом объекте). Кнопка «Выбрать» переместит ваш выбор непосредственно к активу Prefab в представлении «Проект» (он будет выделен).

Создание префабов с объектами платформы упростит их повторное использование в дальнейшем. Просто перетащите Prefab в сцену, чтобы добавить копию. Попробуйте таким образом добавить другую платформу.

Теперь вы можете добавлять больше платформ, изменять их положение, масштаб и плоскость.

Вы также можете поместить некоторые изображения на задний план или на передний план. Помните, что объекты «Фон», «Средний план» и «Передний план» — это просто папки. Поэтому вам нужно установить правильный «Слой спрайтов» (Платформы) и изменить «Порядок в слое».

Используйте -10 для удаленных платформ и увеличивайте это число по мере достижения переднего плана. Пример:

Это не очень сложно, но в двух главах мы добавим параллаксную прокрутку, и она внезапно оживит сцену.

Хорошо. В предыдущей версии этого руководства (для Unity 4.2) у нас было длинное и подробное объяснение того, как настроить камеру и освещение для 2D-игры.

Хорошая новость в том, что сейчас это совершенно бесполезно.Тебе нечего делать. Это просто работает ™.

Помимо : если вы щелкнете по игровому объекту Main Camera , вы увидите, что для него установлен флаг «Projection» в положение «Orthographic». Это параметр, который позволяет камере визуализировать 2D-игру без учета 3D. Имейте в виду, что даже если вы работаете с 2D-объектами, Unity по-прежнему использует свой 3D-движок для рендеринга сцены. На гифке выше это хорошо видно.

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

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

KO_OP нанимает 2D-художника фона

** Эта вакансия закрыта. **

KO_OP — игровая студия, принадлежащая рабочему. Основанная в 2012 году, мы с тех пор экспериментируем с играми и интерактивным искусством. Мы создатели GNOG, Lara Croft GO: The Mirror of Spirits, Winding Worlds и Goodbye Volcano High.Узнайте больше о студии на ko-opmode.com.

Мы приглашаем на временную работу художника по 2D-фону, чтобы он помог нам закончить Goodbye Volcano High. Эта должность требует, чтобы вы имели законное право работать в Канаде из-за финансовых ограничений. На эту должность требуется 30-40 часов работы в неделю. Ставка для этой должности в KO_OP основана на зарплате в 50 000 канадских долларов. Роль включает в себя частное медицинское страхование, 5-недельный оплачиваемый отпуск и неограниченное количество больничных.Срок действия контракта — 1 год.

Идеальный кандидат имеет опыт работы с цифровой живописью, фоном, средой и прочными знаниями в области освещения и цвета. Стиль фона будет живописным (без штриховой графики).

‍

Работа:

• Способность работать в установленные сроки и придерживаться методологии схватки (спринт-система)
• Отчитываться перед арт-директором проекта и ведущим художником фона
• Способность создавать искусство внутри утвержденное руководство по художественному стилю и стилю игры
• Поддержите маркетинговую команду, предоставляя случайные изображения и ресурсы WIP, которые будут использоваться для рекламных материалов
• Способность мотивировать себя и искать отзывы

‍

Мы ищем:

• Сильное портфолио
• Опыт в живописи и сильный визуальный словарь
• Кто-то с всесторонним и продемонстрированным пониманием динамических и кинематографических композиций кадров (т.е .: освещение, панорамирование и т. д.)
• Тот, кто хорошо вписывается в нашу коллективную творческую культуру
• Тот, кто целеустремлен и ищет обратную связь
• Способность выполнять работу, соответствующую визуальному стилю игры и художественным направлениям
• Отличные навыки тайм-менеджмента и организаторские навыки
• Отличные коммуникативные навыки
• Тот, кто в настоящее время проживает и имеет законное право работать в Канаде

‍

Отправьте нам свое портфолио и короткое электронное письмо с заявлением о себе! Если вас выберут в качестве финалиста на эту позицию, будет проведен платный художественный тест. Крайний срок подачи этой заявки — 21 января 2021 года.

Вы можете подать заявку по адресу: [email protected]

‍

Информацию о типах фонов в игре см. Ниже:

‍

‍

О Goodbye Volcano High

Клык — типичный 18-летний динозавр: их больше беспокоит распространение своей группы, чем то, что происходит после окончания учебы. Но когда окончание школы затмевается ужасными новостями, все меняется.Найдут ли они время, чтобы разобраться? Смогут ли они найти баланс между изменяющимся миром и зарождающимся романом? Чем мы должны друг другу в трудные времена? Goodbye Volcano High — это разветвленное повествовательное приключение о конце эпохи… и начале истории любви.

‍

Моя первая 2D-игра в UE4: начало работы

В этом уроке мы впервые познакомимся с Unreal Engine, изучим и поймем, что находится на основных вкладках интерфейса, как перемещаться и подготовить все к созданию нашей Первой 2D-игры.При первом контакте с двигателем вы можете почувствовать сильное головокружение, но как только вы поймете, что все такое, все станет действительно очень захватывающим.

Предполагая что вы уже скачали и запустили Unreal, вы получите экран аналогично этому (если это ваш первый проект, вы получите только вариант Новый проект).

Наша игра сохранена по умолчанию в нашу папку Documents в новой папке, созданной Unreal внутри, и там вы найдете все проекты, которые вы создаете. Это удобно чтобы узнать, используете ли вы более одного компьютера, и вам нужно скопировать игру куда-нибудь еще.

В верхнем левом углу окна просмотра мы можем см. эти вкладки:

Ваш взгляд вероятно изменится на что-то вроде этого. Не о чем паниковать: движок также установил ваш вид на каркасный.

Мы собираемся сделать нашу игру не слишком сложной, чтобы этот проект мы пойдем незажженными.

В World Outliner очень удобен, когда ваше окно просмотра очень загружено, и вы не можете находите вещи, но важно, чтобы вы все правильно назвали и все было удобно организовано.

(Чтобы найти объекты в области просмотра, нужно выбрать в outliner и нажмите F, и окно просмотра очень быстро сфокусируется на нем).

Щелкните правой кнопкой мыши внутри в пустом месте и в развернутом меню в в самом верху вы увидите и выберите вариант новый папка и назовем ее UI ​​ (пользователь interface), и там мы будем хранить все интерфейсы, которые мы не создали пока как экран меню, пауза, игра окончена…

Слева от вкладки «Сохранить» у нас есть «Импорт».Мы используем это, чтобы передать в движок все изображения и ресурсы, которые мы собираемся использовать в нашей игре. В идеале каждое изображение, которое мы загружаем в движок, должно быть в формате .png или .tga, а размер должен быть кратным двум (это означает, что значение в пикселях изображения должно соответствовать правилу 2, 4. , 8, 16, 32, 64,…). Мы собираемся использовать изображение в качестве фона для нашей игры. Тот, который уже есть, имеет размер 512 на 512 пикселей, так что давайте выберем этот размер.

Найдите или создайте в фотошопе изображение , которое вам нравится, убедитесь, что оно соответствует правилам, которые мы уже установили, и сохраните его на свой компьютер (I рекомендую сохранять все изображения в папке, которую вы можете создать для этого игра).Найдите в движке папку под названием textures. и откройте , потому что именно туда мы хотим импортировать наше изображение.

Теперь выберите один из выступов и вы увидите, что значение в y ось в местоположении 0.Таким образом, мы можем сказать, что в 2D-игре в Unreal мы используем ось Y для упорядочить наши элементы в слоях , и если мы хотим, чтобы эти объекты сталкивались между ними в большинстве случаев они должны находиться в одном и том же значении оси Y.

Следующее заметить в преобразовании Панель масштаб фона, который сейчас равен 28. Если мы изменим это значение на 1, вы увидите, что фон будет очень маленьким. (Ctrl + Z, чтобы отменить изменения)

Следующий раздел на панели сведений — спрайт информации.

Разверните меню и найдите спрайт , который мы создан с нашим новым фоном, и обратите внимание, что произойдет, если вы выберете его.

Мы заменили фоновое изображение нашим собственным. Изображение, даже если оно было того же размера в пикселях, теперь кажется больше.

11 бесплатных игровых фонов | UnLucky Studio

Привет, друг!

Сегодня я представляю отличную подборку сайтов со свободным горизонтальным фоном. Они идеально подходят для тех, кто разрабатывает 2D-игры в популярных жанрах, например: платформеры, головоломки, аркады, приключения и многое другое.Здесь вы найдете разные стили и, возможно, вам подойдет один из вариантов. Все работы могут быть использованы в коммерческих целях. Тем не менее, я рекомендую вам более внимательно изучить лицензию на каждом сайте.

Итак, вот мой список рекомендаций.

1) Скачать бесплатные обои для 2D-игры Desert Scrolling

Отличное качество. Интересный стиль. Возможность создания бесконечной прокрутки и эффекта Parallax.

2) Скачать бесплатно сказочную игру фоны

Отличная производительность.Вы можете сделать эффект параллакса и бесконечную прокрутку. Отличная работа!

3) Скачать бесплатно Cartoon Parallax 2D Backgrounds

Идеально подходит для детских игр, например, в качестве фона для пазлов.

4) Скачать бесплатно горизонтальные 2D игровые фоны

Красивые цвета. Также есть возможность создания бесконечной прокрутки. Подходит для создания раннеров.

5) Загрузить Промышленный фон 2D

Интересные цвета.Рекомендую для логических игр.

6) Скачать набор 2D фонов

Отличная работа. Подходит в качестве фона для многих казуальных игр, например Match4.

7) Скачать Лесная сцена

Красочный и яркий фон. Хорошая качественная работа!

8) Скачать бесплатно Pixel BG

Для любителей пиксельной графики. Возможность создания эффекта Parallax.

9) Скачать фон Nature Parallax

Приятные цвета.Высокого качества.

10) Скачать 3 бесплатных игровых стола

3 высококачественных фона, разделенных на слои для возможности создания эффекта Parallax.

11) Скачать Pixel art Game Art Background

Еще один фон для любителей пиксельной графики.

бесшовные фон игры плоский стиль 2d игровое приложение Клипарты, векторы, и Набор Иллюстраций Без Оплаты Отчислений. Изображение 62999356.

Бесшовные игровой фон плоский стиль 2d игровое приложение

Таблица размеров

Используете это изображение на предмете перепродажи или шаблоне?

Распечатать Электронный Всесторонний

7117 x 3556 пикселей | 60.2 см x 30,1 см | 300 точек на дюйм | JPG

Масштабирование до любого размера • EPS

7117 x 3556 пикселей | 60,2 см x 30,1 см | 300 точек на дюйм | JPG

Скачать

Купить одно изображение

6 кредита

Самая низкая цена
с планом подписки

• Попробовать 1 месяц на 2209 pyб
• Загрузите 10 фотографий или векторов.
• Нет дневного лимита загрузок, неиспользованные загрузки переносятся на следующий месяц

221 pyб

за изображение любой размер

Цена денег

Ключевые слова

Похожие векторы

Нужна помощь? Свяжитесь с вашим персональным менеджером по работе с клиентами

@ +7 499 938-68-54

Мы используем файлы cookie, чтобы вам было удобнее работать.