У меня горят глаза! Как нарисовать игру (коллаж) — Gamedev на DTF

{«id»:4036,»url»:»\/distributions\/4036\/click?bit=1&hash=469c7c6fa5eb80c0d1b15c1b31584e7529c062f0882acf8a5772d01f94ada833″,»title»:»\u041a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u044e\u0434\u0441\u044b \u0432 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e»,»buttonText»:»\u041f\u043e\u043a\u0430\u0436\u0438\u0442\u0435″,»imageUuid»:»45b8e81d-0d30-575c-b6af-fc12c46d9b7f»,»isPaidAndBannersEnabled»:false}

Всем привет!

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

На данный момент я сделал игры в трех разных визуализация:

— Цифровой коллаж (the Line, Marginal act)

— Пиксель-арт (Need a packet?, Blind Boris)

— Рисунок от руки (Vasilis)

Я напишу 3 заметки про работу с визуальным контентом и мои ошибки — это первый текст.

2611 просмотров

Коллаж

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

Сразу отмечу — не стоит ждать какого-то фундаментального текста, это мои ошибки и приемы, кому-то они покажутся очевидными, но для кого-то будут полезны.

Поиск материала

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

Я бы советовал использовать специализированные сайты, на которых есть картинки по вашей тематике.

К примеру для получения живописных картин в хорошем качестве я использовал Google art project.

Я бы не советовал брать визуальные элементы без изменений, если вы их не покупали. Так что приступаем к редактированию и вырезанию.

Внешний вид боя в the Line

Marginal act — общая карта

Обрезка

Большинство материала это JPG картинки, но вам то нужны PNG. Следовательно нужно обрезать все и делать это вручную, иначе контуры будут рваными. Автоматические средства подходят только, если на изображении есть однородный фон.

Спрайт-лист главной героини

Собранная героиня

Анимация

Это самая сложная часть для коллажа.

Если вы работаете со спрайтами, то всегда есть вариант по кадровой анимации.

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

Естественно, по кадровая анимация вам не подойдет. Один спрайт-лист будет весить от 3МБ до 20МБ, да и занимает она значительно больше времени, чем остальные методы.

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

По кадровая анимация. Спрайт-лист

Пример собранной по кадровой анимации головы

Запись движения

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

С этих базовых возможностей я и начал. Руки и ноги анимировал просто: объект — кисть, вложенный в объект — локоть, вложенный в объект — плечо. И записывал перемещение и вращение объектов.

Минусы — это занимает много оперативной памяти и в какой-то момент система просто не будет справляться с огромным файлом анимации, где записано перемещение 17 — 20 объектов.

Плюсы — анимация получается именно коллажная и резкая. Для такого эффекта этот метод хорош.

Увы мой компьютер не вытягивал огромный файл анимации и это заняло много времени. Если в персонаже составные руки и ноги, то есть смысл воспользоваться костевой анимацией.

Программная анимация в движке без костей

Монстр с большим количеством конечностей

Костевая анимация

Затем я воспользовался бесплатным плагином Anima 2D для анимации, который позволяет делать костевую анимацию для спрайтов.

Плюсы — с ним анимировать легче и не так затратно для ресурсов системы.

Минусы — гладкость, искажение, определение областей. К каждой кости привязана часть спрайта, которую она приводит в движение и выставлять эти области часто приходилось вручную.

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

Я бы советовал использовать этот плагин, если планируется много разных анимаций для одного персонажа. Если у каждого героя по одной — две анимации, то процесс будет неоправданно долгим.

Стрим на канале Unity по созданию костевой анимации персонажа

Спрайт — лист для работы с Anima 2D

Бекграунды

Когда вы собираете задник, то важно закрывать все резкие ровные линии, если вы делаете природные пейзажи.

Это предаст аккуратность и законченность всему пейзажу.

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

По возможности нужно делать параллаксинг, разбивая задники на слои. В the Line много важных элементов находилось на пути героини и не было сегментов, где не происходило бы ничего механически важного, поэтому сильно перебивать путь героини передним планом не выходило. В итоге почти весь параллаксинг происходит на заднем плане.

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

Они выглядят примерно так:

Фон второй техногенно-заводской локации the Line. Сегмент с фонарями — передний план, остальное — задний

Цветокоррекция

В играх она весьма специфично работает. Нужно дать понять игроку что является активным объектом, что фоном, а что противником. Особенно это важно в 2д играх.

Мне это удалось далеко не везде, особенно плохо дела с выделением цветом и тоном обстоят в игре Marginal act, где порой не всегда понятно что стена, а что пол.

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

Общая локация — Marginal act

Резко выделять активные объекты не всегда нужно, они могут быть обозначены анимацией или контекстом.

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

Персонажи в the Line обозначены анимацией, сундуки котекстом и тоном, а другие активные зоны спрайтом свечения.

Поглощение огня и бой с совой

Объемы

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

Если фон темный, то затемнить край почти всегда помогает, чтобы «посадить» персонажа в фон.

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

Я бы советовал пройтись по контуру персонажа, чтобы подвести его к общему цвету и тону фона. Примерно как на руках и ногах в этом спрайт-листе.

Оптимизация процесса

Для ускорения работы стоит искать уже обрезанные PNG и по возможности использовать их.

Есть вариант находить картинки на монохромном фоне и автоматически их обрезать. Края, которые останутся с ненужным цветом, можно обесцветить и затемнить. Иногда это работает. Но этот прием как правило хорош для фона.

Основную часть персонажей придется резать по контуру, а потом анимировать записью движения.

Стандартизация

Часть действий героев я стандартизировал. К примеру атаки представлены движущимися заглушками, на каждом враге таких заглушек от 2 до 4, но из-за разного строение пришлось делать на каждого монстра отдельный файл анимации, это отобрало много времени.

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

В целом это все мои маленькие наставления тем, кто желает попробовать делать коллаж. Если вы хотите знать что-то еще, то можно задать вопрос в комментариях.

Атаки — заглушки героини

Все что я сделал можно найти на издательской (я издаю свои игры сам) страничке в стиме.

А вот текущий, еще не вышедший проект (Vasilis). Можете добавить его в виш лист, в конце марта — начале апреля выйдет демка, а сам релиз запланирован на середину апреля.

Всем спасибо!

#геймдизайн #gamedev #marginalact

видеоигры, коллаж, HD обои | Wallpaperbetter

видеоигры, коллаж, HD обои

Выберите разрешение и загрузите эти обои

PC(720P, 1080P, 2K, 4K,8K):

• 1366×768
• 1920×1080
• 1440×900
• 1600×900
• 1280×800
• 1024×768
• 1280×1024
• 1536×864
• 1680×1050
• 1280×720
• 1360×768
• 360×640
• 2560×1440
• 2560×1080
• 1920×1200
• 1280×768
• 1024×600
• 800×600
• 1364×768
• 320×570
• 3840×2160
• 7680×4320

iMac:

iMac 21.5″ LED-backlit 1080P:

1920×1080

iMac 21.5″ Retina 4K:

4096×2304

iMac 27″ Retina 5K:

5120×2880

MacBook:

MacBook Air 11.

6″:

1366×768

MacBook Air 13″, MacBook Pro 15.4″:

1440×900

MacBook Pro 13.3″:

1280×800

MacBook Pro 15.4″ Retina:

2880×1800

MacBook Pro 16″:

3072×1920

MacBook Pro 17″:

1920×1200

MacBook Pro 13.3″ Retina, MacBook Air 13″ Retina, MacBook Air 13.3″(2020, M1):

2560×1600

Двойной монитор:

• 2732×768
• 3840×1080
• 2880×900
• 3200×900
• 2560×800
• 2048×768

Тройной монитор:

• 4098×768
• 5760×1080
• 4320×900
• 4800×900
• 3840×800
• 3072×768

Четырехместный монитор:

• 2732×1536
• 3840×2160
• 2880×1800
• 3200×1800
• 2560×1600
• 2048×1536

iPhone:

iPhone 2G, iPhone 3G, iPhone 3GS:

320×480

iPhone 4, iPhone 4s:

640×960

iPhone 5, iPhone 5s, iPhone 5c, iPhone SE:

640×1136

iPhone 6, iPhone 6s, iPhone 7, iPhone 8:

750×1334

iPhone 6 plus, iPhone 6s plus, iPhone 7 plus, iPhone 8 plus:

1242×2208

iPhone X, iPhone Xs, iPhone 11 Pro:

1125×2436

iPhone Xs Max, iPhone 11 Pro Max:

1242×2688

iPhone Xr, iPhone 11:

828×1792

iPhone 12 mini, iPhone 13 mini:

1080×2340

iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, iPhone 14:

1170×2532

iPhone 12 Pro Max, iPhone 13 Pro Max, iPhone 14 Plus:

1284×2778

iPhone 14 Pro:

1179×2556

iPhone 14 Pro Max:

1290×2796

Android:

• 720×1280
• 1080×1920
• 480×854
• 480×800
• 540×960
• 600×1024
• 800×1280
• 1440×2560
• 320×480
• 1080×1812
• 1080×1800
• 720×1208
• 375×667
• 320×568
• 1440×2960
• 1080×2160

iPad:

iPad, iPad 2, iPad Mini:

768×1024, 1024×768

iPad 3, iPad 4, iPad Air, iPad Air 2, 2017 iPad, iPad Mini 2, iPad Mini 3, iPad Mini 4, 9.

7″ iPad Pro:

2048×1536, 1536×2048

10.5″ iPad Pro:

2224×1668, 1668×2224

11″ iPad Pro:

2388×1668, 1668×2388

12.9″ iPad Pro:

2732×2048, 2048×2732

10.9″ iPad Air:

2360×1640, 1640×2360

10.2″ iPad:

2160×1620, 1620×2160

8.3″ iPad mini:

2266×1488, 1488×2266

Surface & Android планшеты:

• 2736×1824
• 2048×1536
• 1024×600
• 1600×1200
• 2160×1440

• 1824×2736
• 1536×2048
• 600×1024
• 1200×1600
• 1440×2160

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

• видеоигры
• коллаж

Лицензия:

Некоммерческое использование, DMCA Связаться с нами

Pxfuel

org/ImageGallery»>
• 1920x853px Destiny 2, Искусство видеоигр, коллаж, видеоигры, череп, монохромный, HD обои
• 1920x1080px Покемон, коллаж, видеоигры, HD обои
• 2560x1440px Minecraft, коллаж, постер, Minecraft, видеоигры, HD обои
• 5401x3056px Fallout, видеоигры, коллаж, нука кола, HD обои
• 1600x900px Видеоигра, коллаж, HD обои
• 1920x1080px Super Mario видеоигры, Йоши, Bowser, Nintendo, цифровое искусство, коллаж, Super Mario Bros., видеоигры, HD обои
• org/ImageObject»> 1920x1080px аниме коллаж обои, аниме девушки, монохромный, глюк искусство, HD обои
• 2560x1440px Dota 2 цифровые обои, Dota 2, видеоигры, герой, коллаж, HD обои
• 1920x1080px Super Mario, грибной коллаж, жаба (персонаж), Mario Bros., коллаж, Nintendo, видеоигры, Super Mario, клуб Nintendo, Chain Chomp, Гумба, Купа, HD обои
• 1920x1080px коллаж из разных аниме персонажей, Street Fighter, видеоигры, цифровое искусство, коллаж, красочные, HD обои
• 3780x1920px DVD чехол, PlayStation 2, коллаж, видеоигры, PlayStation, HD обои
• 5760x1080px Dota digital wallpaper, Dota 2, видеоигры, тройной экран, коллаж, HD обои
• org/ImageObject»> 3840x1080px коллаж игровых персонажей, Mass Effect 3, коллаж, видеоигры, Mass Effect 2, HD обои
• 1920x1080px Звездные Войны, фильмы, Звездные войны, коллаж, HD обои
• 1920x1080px видеоигры, Mass Effect, Mass Effect 2, коллаж, HD обои
• 1920x1080px видеоигры, Ubisoft, коллаж, HD обои
• 3840x2160px Макима (Человек с бензопилой), коллаж, аниме, 2D, HD обои
• 2560x1440px Обои Звездные войны, Star Wars: The Force Awakens, коллаж, HD обои
• 1680x1050px Приложение Super Mario, Super Mario, видеоигры, цифровое искусство, Nintendo, коллаж, графика, ретро-игры, HD обои
• org/ImageObject»> 1920x1080px игровое искусство, видеоигры, коллаж, видеоигры, Ведьмак 3: Дикая охота, PUBG, Ракетная лига, Overwatch, Dead by Daylight, HD обои
• 3840x2509px Marvel Comics Железный человек 1, 2 и 3 иллюстрации коллаж, Железный человек, фильмы, постер фильма, постер, коллаж, Marvel Cinematic Universe, Marvel Comics, супергерой, HD обои
• 2560x1080px симпатичные, коллаж, ультраширокий, коллаж, HD обои
• 1920x1080px коллаж, карты бога, ра, обелиск, югио, слифер, HD обои
• 1920x1080px Dota 2, коллаж, видеоигры, HD обои
• 1920x1080px ассорти из злодеев ужасов фото коллаж, металл, метал музыка, Slipknot, коллаж, темнота, музыка, HD обои
• org/ImageObject»> 1920x1080px черный меч картинки, оружие, фэнтези оружие, минимализм, видеоигры, произведения искусства, черный фон, коллаж, HD обои
• 3529x2000px Nogizaka46, азиатка, идол, коллаж, женщины, HD обои
• 1680x1050px три картины разных цветов, минимализм, коллаж, простой фон, HD обои
• 2560x1080px симпатичные, коллаж, HD обои
• 3840x2160px DOTA Meepo illustration, Dota 2 digital wallpaper, Dota 2, охотник за головами, Сларк, Дух Земли, Бритва, коллаж, видеоигры, HD обои
• 1920x1080px коллаж, текст, манга, One-Punch Man, Сайтама, HD обои
• org/ImageObject»> 3432x1629px Street Fighter, видеоигры, Чунь-Ли, Рю, коллаж, HD обои
• 5478x3081px Super Heroes коллаж, Marvel Comics, герой, коллаж, произведение искусства, супергерой, HD обои
• 2560x1440px Templar Assassin коллаж, опозорился 2, Corvo, видеоигры, HD обои
• 1920x1080px Street Fighter, видеоигры, коллаж, HD обои
• 1920x1200px elvgrencollage001 коллаж elvgren Пин ап pinup HD, аннотация, коллаж, пинап, пин ап, elvgren, HD обои
• 1920x1080px Street Fighter Кен и Рю цифровые обои, Street Fighter, Рю (Street Fighter), Кен Мастерс, видеоигры, коллаж, HD обои
• org/ImageObject»> 1920x1080px коллаж из разных персонажей, Mass Effect, коллаж, видеоигры, HD обои
• 1920x1080px Marvel Superheroes фото коллаж, комиксы, Мстители, Тор, Капитан Америка, Железный человек, Халк, коллаж, HD обои
• 3840x1080px коллаж из разных цветов, Dota, Dota 2, коллаж, видеоигры, HD обои
• 1920x1080px Жаба, марио братья, коллажи, нинтендо, видеоигры, жаба, марио бро, коллажи, нинтендо, видеоигры, HD обои
• 1366x768px три футболиста коллаж, футбол, Криштиану Роналду, развлечения, HD обои
• 1024x768px Логотип Nintendo, видеоигры, коллаж, Nintendo, пиксели, ретро-игры, HD обои
• org/ImageObject»> 1920x1080px обои коллаж из разных персонажей, Cartoon Network, HD обои
• 1920x1080px ретро игры, видеоигры, коллаж, HD обои
• 1920x1080px Видеоигра, коллаж, HD обои
• 1920x1080px коллаж из зеленого дерева и коричневого вулкана, Властелин колец, Шир, Бэг Энд, Изенгард, Мордор, коллаж, HD обои
• 1920x1080px Halo Reach цифровые обои, Halo, Halo Reach, коллаж, видеоигры, HD обои
• 1920x1080px Коллаж персонажей Assassin’s Creed, ассасины, Assassin’s Creed, видеоигры, Альтаир Ибн-Ла-Ахад, Эцио Аудиторе да Фиренце, коллаж, HD обои
• org/ImageObject»> 1920x1173px Николас Кейдж, ты не говори, мем коллаж, смешно, HD обои
• 2048x1365px Властелин колец, иллюстрация коллаж, Властелин колец, Гора Гибель, Аргонат, HD обои
• 1080x1920px аниме мальчики, Tokyo Revengers, желтые волосы, коллаж, HD обои
• 1920x1080px Черный Клевер, коллаж, манга, комиксы, Аста, HD обои
• 1366x768px Street Fighter символы цифрового искусства обои, Street Fighter, коллаж, видеоигры, Street Fighter IV, HD обои
• 1920x1080px герои игр, цифровые обои, видеоигры, черный, World of Warcraft, коллаж, отражение, цифровое искусство, красочные, HD обои
• org/ImageObject»> 1732x1086px Мадара Учиха коллаж, Наруто Шиппууден, Учиха Мадара, эволюция, панно, HD обои
• 2880x1800px дверной коллаж разных цветов, дверь, деревянная поверхность, коллаж, HD обои
• 1200x800px MGM мультипликационный персонаж коллаж фото, мультфильм, HD обои
• 1920x1080px коллаж из трех разных персонажей, Mass Effect, видеоигры, Миранда Лоусон, Касуми Гото, Mass Effect 2, Джек, коллаж, HD обои
• 1920x1080px Иллюстрация частей покемонов, покемон, анатомия, видеоигры, коллаж, HD обои

Похожий поиск:

дизайнов, тем, шаблонов и графических элементов Game Collage, загружаемых на Dribbble

1. Посмотреть ностальгию по 2000 году

   Ностальгия по 2000 году

2. Посмотреть дорожную карту дронов

   Дорожная карта дронов

3. Просмотреть таблицу лидеров — версия коллажа

   Таблица лидеров — версия коллажа

4. Просмотр Apex Legends для мобильных устройств

   Apex Legends Mobile

5. Просмотр Apex Legends для мобильных устройств

   Apex Legends Mobile

6. Просмотреть таблицу лидеров — анимация версии коллажа

   Таблица лидеров — анимация версии коллажа

7. Посмотреть коллекцию игр

   Коллекция игр

8. Просмотр Apex Legends для мобильных устройств

   Apex Legends Mobile

9. Просмотр Февраль — игра ожидания

   Февраль — игра ожидания

10. Просмотр Геометрический узор №1

    Геометрический узор № 1

11. Посмотреть бумажный коллаж (3)

    Бумажный коллаж (3)

12. Посмотреть коллаж 120221

    Коллаж 120221

13. Посмотреть поляризационную иконку

    Поляризационная иконка

14. Посмотреть Геометрический узор №2

    Геометрический узор № 2

15. Посмотреть коллаж

    Коллаж

16. Посмотреть графические коллажи из журнала Physica

    Графические коллажи журнала Physica

17. Посмотреть настольную игру The Collagist

    Настольная игра The Collagist

18. Посмотреть TreeTrust

    ТриТраст

19. Посмотреть крипто

    Крипто
20. Посмотреть распечатки

    Отпечатки

21. Взгляд за пределы разнообразия

    За пределами разнообразия

22. Посмотреть сервисный коллаж

    Сервисный коллаж

23. Просмотр «Конец линии» — Коллаж

    «Конец линии» — Коллаж

24. Посмотреть Джем недели | 170

    Варенье недели | 170

Зарегистрируйтесь, чтобы продолжить или войдите

Загрузка еще…

Коллаж геймера — Etsy Turkey

Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных.