Жду новый пост

Серия «Мои игры»

Всего в игре 7 уровней - столько же, сколько цветов радуги.

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

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

Скриншот одной из самых первых версий (ужас, да и только), и это на RPG Maker

RPG Maker совсем не предназначен под платформеры, так что решила переносить на другой движок, а тут как раз джем подвернулся на Stencyl .Сделала где-то за месяц основную часть игры - Stencyl довольно простой конструктор в освоении и поддерживает HTML5, и при этом он с бесплатной лицензией (нужна только регистрация на их сайте). Вот, например, "код" портала, который переносит зайку на следующий уровень:

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

Благодарности

Отдельная благодарность Naarassusi Game и Жене Власовой за помощь с графикой (всё окружение рисовала сама, но вот с зайкой и его анимацией они мне помогли).

Первая версия зайки полупрозрачная и немного кривая - моя, второй заяц - это Валера рисовал, третьего я собирала из запчастей второго зайца, то есть смешанная версия, ну и моську его маленько перерисовала. В итоге получилось мило, я надеюсь!

Поиграть можно тут - прямо онлайн!

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

Как боунс - вид с колеса обозрения, один из эпизодов из игры:

Ладно, не буду растягивать пост (а то я люблю это делать), просто жду ваших отзывов!

Идея.

Практически сразу же придумала название "Smile It", оно как нельзя лучше отражает основную идею и цель игры. А цель игры, чтобы человек, который в нее играет, улыбнулся, чтобы люди стали больше ценить радостные мгновения своей жизни, ну и просто чтобы было чуточку веселее. Проще говоря, в игре планировалось показать силу настроения. А главные герои, конечно же - смайлики. Задумка заключается в том, что мы кликаем на мордочки-смайлики, и от этого они становятся веселее - те, на которые нажимаешь.

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

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

Бумажный прототип.

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

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

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

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

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

Минусом этого способа считаю то, что чем сложнее ваша модель игры, тем дольше ее составлять на бумаге, и дольше в нее потом играть. То, что на компьютере занимает пару секунд, на бумаге может занять уйму времени. В моем случае мне каждый ход постоянно приходилось перелеплять им выражение морды лица, поэтому испытать на бумажном прототипе большое поле мне просто не удалось. Даже на маленьких полях игра очень сильно «лагала» и затягивалась, и один уровень запросто мог длиться больше часа. В целом у меня это заняло недели две, параллельно мы обсуждали идею игры, и я писала ее описание в "дизайн-документ".

Создание графики для игры.

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

Сначала скетч:

А потом и мордочки.

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

Программирование.

Игра создавалась на языке С/C++ с использованием Cocos2d-x. Cocos2d-x оказался далеко не идеален и имел кучу своих проблем, в частности крайне плохую поддержку настольных систем, что вынудило лепить свои грабли даже для работы с клавиатурой и самим прикручивать звуковой движок OpenAl.

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

Сначала вместо спрайтов в игре были вот такие циферные заглушки:

Цифры показывали степень веселости смайликов. В таком состоянии проще было понять, насколько правильно оно работает.

Да, между тем время шло...

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

Создание уровней.

Сначала предполагалось, что в игре будет 50 уровней. Потом все-таки решили, что это маловато, и на данный момент игра насчитывает 75. Один экран вмещает в себя 15 уровней.

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

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

Звездочки я рисовала сама, некоторые из них смешные не вошли в игру.

Редактор уровней в блокноте.

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

Открываем мы его простым Notepad++, ну можно еще подсветку синтаксиса настроить разве что.

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

Для интереса приведу кусок кода из этого файла:

[LEVEL053]

$title:ru."Вместе мы сила!"

$title:en."We are strong together."

$stars:{65,67,69}

$layer:"bck_layer04"

$music:"mus_theme04"

$decay:4

$swing:"<< >> ^^ __"

$field:"

=+++ <>7o <>7o <>5o <>8o =+++

=+++ >>3o >>5s <<5s <<3o =+++

=+++ >>3o <<5s >>5s <<3o =+++

=+++ <>8o <>5o <>7o <>7o =+++

"

Так этот же уровень выглядит в игре:

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

o - обычный смайл

n - смайл нельзя вращать

u - смайл нельзя тапать

s - смайл нельзя ни вращать ни тапать

Число от 1 до 9, что определяет настроение смайла. 9 - самое лучшее настроение, 2 - почти самый грустный, когда настроение падает до 1 - уровень проигрывается.

А вот эти значки >> - определяют направление взгляда. Если, например, напишем вот так ^^, то наш смайлик смотрит вверх.

Вот такой вот необычный способ придумали!

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

Сейчас игра уже считай готова и вполне играбельна, и я решила попробовать выложить её на Гринлайт. Пожалуйста, поддержите её, если вам понравился этот длиннопост... или сам проект http://steamcommunity.com/sharedfiles/filedetails/?id=870519...

И спасибо, что дочитали до конца. Я знаю, что это не лучший мой проект, но просьба сильно тапками не кидаться, я старалась сделать эту статью интересной и писала несколько дней.

С чего начать.

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

Вот, например, две картинки - основа и изнанка:

Первая картинка в игре называется "find begin.jpg", а вторая "find begin_map.jpg"

И теперь самое интересное, как это реализовано в скрипте:

# помечены комментарии-пояснения

label click:

# Все эти цифры в конструкции - координаты.

# Координаты хотспотов - невидимых активных зон -

# икс-игрек левой верхней точки прямоугольника,

# затем икс-игрек правой ниженй - всего 4 цифры.

# При наведении мыши на хотспот "просвечивает" второй фон,

# причем только та часть, которая ограничена координатами.

# Так можно сделать предметы, "оживающие" под курсором мыши.

# После координат задаем метку, на которую будем переходить по клику на хотспот.

# Координаты в пикселях удобнее смотрять прямо в фотошопе.

# Сначала получаем результат клика -

$ result = renpy.imagemap("find begin.jpg", "find begin_map.jpg", [

(0, 0, 112, 91, "help"),

(13, 274, 120, 346, "home"),

(643, 497, 765, 580, "karusel"),

(674, 275, 790, 357, "pravo"),

(650, 152, 740, 245, "river"),

(300, 283, 430, 409, "cat"),

(66, 116, 738, 126, "volga")

])

# Внимание - не теряй нужные закрывающие скобки!

# Теперь проверяем получившися результат и переходим -

if result == "home":

if yes:

play sound "begin5.mp3"

#"Скоро я уже буду дома! Вот она обрадуется!"

"I'll soon be home! She would be so happy!"

jump home

else:

play sound "begin6.mp3"

#"Пойду домой."

"Let's go home."

jump home

elif result == "pravo":

play sound "begin7.mp3"

#"Пойду вперед!"

"Let's go forward!"

jump img

elif result == "karusel":

play sound "begin8.mp3"

#"Пойду к каруселям."

"Let's go to the carousels."

jump attr

elif result == "river":

play sound "begin9.mp3"

#"Пойду к речке!"

"Let's go to the river."

$ wwerh = True

jump river

elif result == "cat":

if yes:

play sound "homeA.mp3"

#"В какую сторону домой?"

"Which way leads back to my home?"

else:

play sound "gdeIskat.mp3"

"Where should I search?"

#"Где же искать?"

jump click

elif result == "volga":

play sound "begin10.mp3"

#"Это река - Волга"

"This river is called the Volga."

jump click

elif result == "help":

call menuuu

jump click

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

Для  как каждой области задаем метку. Допустим, мы кликнули на область, огороженную х1=650, y1=152, x2=740,y2= 245, что соответствует метке "river".

В результате у нас подсвечивается область с подписью "к речке" из изображения find begin_map.jpg и будет выполняться часть скрипта, идущая после elif result == "river":

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

А если нажимаем на котёнка, то идёт фраза "Где же искать?" и возвращаемся к нашей первой метке click:, то есть на начало. И можем дальше сколько хочется кликать.

Заключение.

Эта игра про котёнка сейчас проходит гринлайт, и вы можете поддержать её по этой ссылке: http://steamcommunity.com/sharedfiles/filedetails/?id=865351...

Спасибо вам и приятных выходных!