?

Log in

No account? Create an account

Previous Entry | Next Entry

SnailScreen_1

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




Всё началось с идеи сделать игру, что-то старорежимное и в стиле пиксель арт. Я вырос на приставочных играх Dendy и Sega, очень их люблю до сих пор, так что по поводу стилистики и направления долго думать не пришлось. То, что это будет аркада, додумалось уже позже. Ну а то, что главным героем будет улитка... просто у меня была улитка, улитки крутые, одна такая вполне может быть героем игры.

На момент начала работы я не имел ВООБЩЕ никакого представления о том, как делать игры и с чего начинать. По этому начал с того, что показалось мне основой - с эскиза главного героя игры, т.е. улитки и её эмоций. Видимо в силу того, что сам я человек нервный, улитка тоже вышла несколько неврастеническая, с выражение постоянной тревоги на лице.


IMG_20181012_143351



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

sn1color

s4



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

Что теперь? Теперь время отправиться в игровой движок. После загугливания я решил делать игру на движке Unity. Во-первых он бесплатный (практически), во-вторых по нему в сети есть множество туториалов (хотя они как правило на английском, но учитывая, что все слова дублируются действиями на экране, понятно 99.99% материала).
Я решил не осваивать движок в целом, а составить список задач и двигаться по нему, находя последовательно решение для каждой задачи. В движке мне нужно было создать механику 2D-аркады: заставить улитку двигаться по поверхности, прыгать, приземляться. Нужно было сделать для нее препятствия, которые бы выводили из игры, систему очков, меню смерти и меню загрузки (если вкратце).

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

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

Освоение Unity потянуло за собой неизбежное - необходимость изучения языка программирования C#. Не то чтобы я этого не ожидал, но морально непросто было начать разбираться в куче непонятных символов

code

Ранее я пытался вникнуть в языки Java и Ruby, но сами по себе меня эти вещи не интересовали никогда и казались довольно унылыми.

Забавно то, что как только эти языки стали средством в достижении задачи, которая мне интересна (сделать игру, блин!), дело пошло. Сейчас я не могу назвать себя человеком, который уверенно кодит на C#, тем не менее основные принципы языка я смог освоить и могу менять код так, чтобы получать нужное. А когда не могу, есть Гугл и Ютуб ( в основном второе).

Ютуб в таком деле (да и в многих других делах) вещь первостепенная. Если ты хоть немного умеешь в поиск, тебе не нужно хранить в голове кучу информации и подробно изучать какой-либо вопрос со всеми сопутствующими нюансами, можно сконцентрироваться на какой-то мелкой конкретной задаче и искать её решение, а дальше двигаться к следующей задаче. По крайней мере для меня этот способ работает и экономит ценный ресурс мозга. Ну , скажем, не нужно изучать весь движок Unity и все его возможности, максимум посмотреть обзор, чтобы понять, что он может и для чего лучше приспособлен. А дальше просто выбирать направление, строить цепочку задач и решать их. Моё направление - 2d платформер-аркада, вот я и решаю как её сделать такой, как мне хочется. То что Unity умеет в 3D и мега-анимацию с шейдерами\тенями\светом меня сейчас мало волнует, отложу это знание на потом. Ну вы поняли, примерно так.

Когда анимация,действия улитки и её управление подружились, настало время дизайна уровня. Поначалу я думал сделать несколько уровней (дневной, вечерний, ночной), но потом мне показалась забавной идея пустить улитку в путешествие только по ночному городу. Так что я принялся отрисовывать задник (Background). Бэк в игре состоит из нескольких частей-слоев. Первый слой - звездное ночное небо, на фоне неба приделан следующий слой - небоскребы в отдалении. Ближе всего к игроку третий слой задника - улица города после дождя, с щербатыми домами, фонарями и неоновой рекламой.
Для того, чтобы хотя бы примерно понять, как вообще рисовать в жанре пиксель арт, пришлось перерыть немало всего, я тормозил в неуверенности недели три, прежде чем наконец открыть Photoshop и сделать первые наброски. Ну и конечно, все сделал не так, пришлось потом переделывать. Не буду вдаваться в подробности, но скажу, что при масштабировании пиксельных артов в Photoshope есть ряд нюансов, если их не учитывать, рисунок при увеличении ( а его надо увеличивать!) исказится и будет выглядеть уродливо и нечетко. Не за это мы любим пиксель арт:)

В игре части бэкграунда движутся относительно игрока с разной скоростью: небо медленнее, небоскребы чуть быстрее, улица проносится совсем быстро. Так происходит из-за настроек камеры (да, в игре тоже есть камера, как в фото и видео). Если перевести камеру в режим перспективы, как раз и получается эффект объемного задника при сохранении 2d формата. Картинка сразу получается более глубокой, а это круто и работает на атмосферу.
Первые арты улицы были весьма унылыми, напоминали спальные районы Подмосковья. Я дорисовал улицу ночью, а утром ужаснулся сделанному

city_buildings

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

LIGHTS-1

night3full

С этим всё!

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

Мне хотелось, чтобы препятствия были расположены рандомно, так их не получится просчитать, это подталкивает быть в постоянном напряженном ожидании (нервно!). Еще нужно было сделать так, чтобы появляющиеся препятствия не создавали непроходимых мест, выяснилось, что сделать это не так-то просто, на отладку ушло еще пару недель. Важно было сделать и другое: все препятствия, которые прошел игрок должны были исчезать из игры за приделами видимости камеры. Делается это для оптимизации, иначе с какого-то момента оперативной памяти смартфона начнет не хватать, он не сможет поддерживать наличие всего, что осталось в игре за спиной улитки и игра зависнет или упадет. Допустить такого нельзя, так что препятствия появляются немного до того, как камера продвинется вперед и исчезают после того, как мы перестаем их видеть. Строго говоря, всё иначе(держитесь за голову): движется фон и препятствия, а улитка ползет и прыгает на месте, камера следит за улиткой и тоже почти неподвижна! Так что скольжение улитки, по сути, иллюзия.

Ок, тут все готово, игра почти завершена, остался звук. С отдельными звуками было просто, а вот музыка меня затормозила на месяц с лишним - очень давно ничего не писал в плане музыки. Не хотелось делать проходной саунд, музыка должна была работать на атмосферу ночного города, быть запоминающейся и красивой. Вначале я думал делать музыку в стиле ChipTune (так озвучивались 8- и 16-bit игры) но постепенно пришел к идее сделать трэк в духе 80-х годов, с характерными синтезаторами и электрогитарой. Всё это делалось в программе Fruity Loop с добавлением нужных плагинов. Для написания музыки на компьютере удобно использовать midi-клавиатуру, но у меня её не было, так что мелодии я набивал на обыкновенной клавиатуре (музыкальная программа так устроена, что определенными нотам там соответствуют свои клавиши на qwerty клавиатуре), а дальше корректировал вручную на звуковых дорожках. Начал с ударных, а дальше понеслось. В голове звучали хиты из Street of rage и Enigma.
Музыка была готова спустя, наверное, месяц, после начала работы и , судя по отзывам, она народу понравилась.
Примерно так это было, я начал в октябре 2017 и закончил игру в апреле 2018, сейчас Sliding Snail лежит на Google Play и её можно скачать: https://play.google.com/store/apps/details?id=com.TwoDogs.SlidingSnail

А я уже работаю над следующей игрой (не одной даже), и блин, она уже в несколько раз сложнее Улитки!


Comments

( 8 comments — Leave a comment )
reinbach
Oct. 12th, 2018 12:31 pm (UTC)

Вау! Спасибо за рассказ!

hegdehog
Oct. 12th, 2018 12:55 pm (UTC)
ссылка не работает
lindal
Oct. 12th, 2018 12:59 pm (UTC)
Обновил ссылку
llawenydd
Oct. 12th, 2018 01:50 pm (UTC)
Спасибо за такой подробный рассказ, очень интересно!
shanille
Oct. 12th, 2018 02:49 pm (UTC)
Неожиданно захотелось самой сделать игру или как-то помочь тебе со следующей.

Я тебе кидала картинки улитки, которую я рисовала как-то?
lindal
Oct. 12th, 2018 04:16 pm (UTC)
Ага, помню твою улитку, понравилась.

Если вдруг захочется самой, пиши, чем смогу помогу. А поучаствовать - есть кое-какие мысли, но пока не скажу, чуть попозже)
sulwen_earel
Oct. 12th, 2018 05:43 pm (UTC)
Аплодирую!
osting
Oct. 12th, 2018 07:32 pm (UTC)
Ужасно интересно, как такое вообще происходит.
( 8 comments — Leave a comment )

Latest Month

February 2019
S M T W T F S
     12
3456789
10111213141516
17181920212223
2425262728  

Tags

Powered by LiveJournal.com