Gen Jam 2016: процедурно генерируемые спрайты

Original author: David York
  • Translation
GenJam 2016

19 ноября 2016 года в Сан-Франциско прошёл первый ежегодный Gen Jam (геймджем по процедурной генерации). Идея была в том, чтобы за субботу создать генератор графики, «объект, создающий объекты», если вам угодно.

Я создал программу, рисующую спрайты персонажей в удивительном стиле набора 16-битных спрайтов Кристофера «Oryx» Барретта из Oryx Design Lab. Посмотрите на примеры того, что делает программа:

image

Основной план


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

Итак, я разбил исходные спрайты на части — шлемы, волосы, тела, ноги, оружие и т.д. Потом я случайным образом выбирал их и собирал вместе. Затем я менял цвета. Вот основная идея:

image

Входные данные


Исходные спрайты из набора 16-битных спрайтов, которые я использовал в качестве основы, выглядят вот так (исходный набор спрайтов ОГРОМЕН, вот всего 5 примеров из него):

image

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

image

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

Палитра


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

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

image
Каждый из рядов, кроме первого — это линейный градиент. Один градиент выбирается случайно. Первый ряд — это входные цвета. Когда алгоритм видит один из этих цветов, он заменяет его цветом в той же колонке из выбранного линейного градиента.

Потом я взял сами спрайты и перекрасил их, чтобы использовать «входные цвета», которые можно заменить цветами из линейного градиента. Например, если у меня были 3 рубахи синего, зелёного и красного цветов, я мог сделать их все красными, добавить линейные градиенты для синего, зелёного и красного в файл палитры и заставить алгоритм заменить красные цветами из случайно выбранного линейного градиента.

Вот примеры результатов:

image

Материалы


Материалы — это отрисовываемые вещества, такие как одежда, выделанная кожа, металл, тело, драгоценные камни и т.д. Мне нужны были разные цветовые градиенты для разных материалов, потому что только определённые цвета выглядели естественными для конкретных типов материалов. Например, цвета, выглядящие хорошо для металла, не подходят для оттенков кожи, и наоборот.

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

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

Вот окончательная палитра:

image

Группировка объектов


Группировка — это получение набора входных данных и объявление некоторых из них сочетающимися, а других — несочетаемыми. Например, могут быть группы спрайтов «спрайты мага» и «спрайты воина» для разных наций, нарисованных в разных эстетических стилях, группы хороших и плохих персонажей, богатых и бедных, и т.д. В результате получается множество вариантов генерации спрайтов согласно выбранному вами эстетическому подходу.

Процесс в целом


Если вкратце, то я сделал следующее:

  • Разбил большую коллекцию спрайтов на части: оружие, головы, тела и т.д.
  • Изменил входные цвета на «стандартные» цвета материалов (5 оттенков одежды, 5 оттенков металла, 4 оттенка кожи и т.д.).
  • Написал алгоритм выбора одной части из каждого набора и отрисовки их одной поверх другой.
  • Написал алгоритм смены «стандартных» цветов на один из нескольких наборов цветов (называющихся «линейными градиентами») из палитры.


Вот и всё! Так получились тысячи уникальных и интересных спрайтов.

Github, заключение и благодарности


Это был очень интересный способ провести субботу, и я хочу поблагодарить Galaxy Kate (Kate Compton) и Ben Grue (Ben McGraw) за организацию мероприятия, а также коворкинг GameNest за предоставленное помещение.

Можете посетить мой персональный блог http://davideyork.com, в котором я пишу о процедурной генерации и инди-разработке игр.

Мой код реализации этого проекта можно скачать на Github. Я написал его на C# и он должен быть совместим с Unity. Учтите, что я включил в него полную палитру и примеры изображений, но там нет исходных спрайтов и изображений, полученных из набора 16-битных спрайтов. Эти спрайты можно приобрести у Кристофера Барретта aka Oryx из Oryx Design Lab. Они не разделены на части, я делал это сам. Это огромный набор спрайтов, и он практически бесплатный. Oryx потратил на него кучу времени, рекомендую оценить его (нет, мне за эти слова ничего не платили).

Развлекайтесь!
Support the author
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 26

    +1
    Прикольно.
    А в чём вообще смысл крупнопиксельных спрайтов в 2016м году? Я не понимаю.
      +16
      Просто вы сильно молоды и вас не тревожит ностальгия по прошлому.
        0
        Четвёртый десяток идёт. Но я не понимаю такую ностальгию.
        Графика уровня Sega mega drive, Super Nintendo — это да, это клёва. Сам на PS3 поставил эмулятор, чтобы поиграть в те игры.
        Но вот графика уровня Dendy / NES так не торкает. Есть там исключительные игры, типа Bucky O'Hare, ради которых можно заморочиться с эмулем.
        Я просто не понимаю преимуществ именно таких спрайтов с особо низким разрешением — не видно же ничего.
          +4
          Скажу про себя: просто ностальгия и отголоски детства. Для меня в играх нет графики красивее, чем NES/SNES-style.
            +1
            Кроме ностальгии, кстати, есть и вполне объективный момент. Такие спрайты _приходится_ рисовать тщательно, задумываясь над каждой точкой. Это даже не вопрос умения рисовать.
            Соответственно потом, когда видишь нарисованную таким образом графику, этот момент очень ощущается — сразу видно, что не просто кто-то (пусть и отличный художник) взял планшет и нарисовал картинку в удобном софте. А что в картинку была вложена если не душа то, по крайней мере, уйма времени и сил. Аналогично и с кодом.
            Этим, на мой взгляд, отличаются многие так называемые «олдскульные» игры для старых платформ от многих современных (понятно, исключения всегда были и есть).
            +1
            Думаю смысл в том, что они неплохо выглядят, не занимают много ресурсов, и, конечно, проще рисуются чем полноценная графика, т.е. банально дешевле.
              +1
              Для инди-проекта этот вид графики часто спасает положение, т.к. по трудозатратам это на порядок дешевле и проще чем рисовать большие детальные спрайты.
              Сам мечтаю реализовать одну идею в виде 2D инди-игры и понимаю что единственный вариант — это рисовать спрайты низкого разрешения, потому что я смогу это сделать сам, ибо для того чтобы рисовать большие красивые спрайты мне как минимум необходимо нанимать целую команду художников/аниматоров.
                0
                На мой взгляд это как раз единственная настоящая причина — обойтись без художника.
                  0
                  Собственно так часто и рождаются ASCII-игры и прочие Hexagon-ы.
                0
                Есть люди, которым подобная графика наоборот нравится. Например у меня современная отполированная высокодетализированная 3д графика восторга не вызывает совсем, скорее даже наоборот. С большим бы удовольствием играл в ИНТЕРЕСНУЮ игру с графикой к примеру как диабло 2.
                  0
                  Спрайт низкого разрешения всего лишь обозначает общее направление и границы для воображения игрока. Дальше игрок уже сами представляет богатое убранство героя, круто выглядящий меч, магически сполохи пробегающие по рунам, и т.д. Конечно если игрок способен на это и присутствует определенная степень вовлечения(погружения).

                  Есть мнение что чтение книг нехило так прокачивает «внутреннюю видеокарту» (воображение) позволяя получить без преувеличения — невиданные спец эффекты а также делающие игру более «своей».

                  Тем не менее высокодетализированная графика тоже хороша и тоже доставляет массу удовольствия. В любом случае надо только знать и уметь как его получать в наибольшем количестве и как это делать правильно)
                  0
                  Согласен, я тут как-то недавно наткнулся на эмулятор ZX Spectrum в браузере… так залип на пол дня играя в старые и досихпор прикольные игрушки, Bomb Jack сила :)
                  +2

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

                    +1
                    Вряд ли в этом вся суть, скорее всего это просто такой стиль арт… Гляньте на Magicite, там просто огромные пиксели, что не мешает наслаждаться рогаликом и придает игре некий олд-скульный хардкорный шарм.
                      +1
                      олд-скульный хардкорный шарм

                      Вот и я о чем.

                    0
                    Это для инди-игр в стиле pixel graphics. Они все еще выходят, популярны и я в них играю Оо… Посмотрите, к примеру, Terraria (и ее многочисленные клоны) и Stardew Valley. Они жутко интересны, затягивают и к ним вырабатывается привыкание.

                    Генератор спрайтов, я думаю, сэкономит кучу времени разработчикам, особенно если он, как я понял, работает в реальном времени и что-то там с цветами еще понимает (я сам не разработчик игр).
                      0

                      Stardew Valley популярна не из-за графики, а потому что там отлично сделанный fun loop. Если б там было lowpoly, или обычное 3D с текстурами или просто пиксели помельче, играть было бы так же интересно.

                        +2
                        Посмотрел — явное желание сделать спрайты пиксель в пиксель, то есть с нормальным разрешением. То есть именно крупнопиксельность только отталкивает.
                        На мой вкус ремастированные старые платформеры в хорошем разрешении гораздо приятней. Напирмер
                          +1
                          Полностью поддерживаю, но в трудозатратах разница просто колоссальная между лоу-пиксельной и полностью рисованной графикой. Тот же ремастер DuckTales — это ну совсем не дешевый проект, в котором графика одна из самых дорогих составляющих.
                        0
                        Одна из законодателей моды — Square Enix с её серией игр Final Fantasy.
                        В мобильных FFBE и FFRK вся графика «современная» кроме персонажей.
                        +4
                        Делал когда-то схожий проект для своего косморогалика — генерировать живность и растительность на планетах. Работать с цветами он так красиво не умел (выбирал полностью случайные цвета, в итоге иногда выходило неколько вырвиглазно, впрочем для инопланетной жизни в этом даже был свой смысл), зато не привязывался к одинаковости генерируемых объектов. Для каждого базового кусочка кроме картинки нужно еще написать текстовое описание в json, которое определяет его тип (тело, конечность или украшение) и где у него находятся точки крепления других частей. То есть у тела можно указать несколько точек для конечностей, несколько — для украшений (глаз и зубов всяких). Можно даже соединять несколько тел.




                        Если что — есть открытый репозиторий https://bitbucket.org/e_smirnov/frankenstein/wiki/Home
                          0

                          (Прошу прощения за минус к комментарию, случайно промахнулся. Эх, и почему поправить нельзя?)

                            +1
                            Замечательные спрайты. Ничего вырвиглазного, кстати.
                              +1
                              Ну это в данном случае. А так бывают какие-нибудь ярко-бирюзовые монстры в ядрено-розовую крапинку.
                              0
                              Подобные генераторы спрайтов — были практически стандартом при программировании игр для старых телефонов на Java me.
                              0
                              Cпасибо за перевод! Нашел для себя много интересного.

                              Кстати, в Rogue Legacy после смерти вашего персонажа появлялся новый (потомок) с обновленным видом (и характеристиками). Использовали они похожую генерацию или имели заготовленные шаблоны? Если кто-то знает, поделитесь информацией.
                              И нужно будет попробовать создать свой генератор… более «радикальный» и разнообразный :))

                              Only users with full accounts can post comments. Log in, please.