Создание проекта
Итак, начнём с создания проекта. Запустите Construct 2 и выберите пункт меню «File -> New». Сделаем пустой проект с расчётом на экраны с большим расширением. Выберите шаблон «New empty HD portrait 1080p project» (игра будет работать в портретной ориентации) и нажмите кнопку «Open».
В панели свойств задайте данные о проекте: название, версию, описание, автора (название компании или имя и фамилия разработчика), адрес электронной почты и адрес вебсайта. В поле ID нужно указать уникальный идентификатор программы. Чтобы этот идентификатор был уникальным, за основу берут доменное имя без www и записывают его наоборот, например, для сайта www.proghouse.ru, начало идентификатора будет ru.proghouse. Затем через точку приписывают название программы. У меня получилось так: ru.proghouse.red-n-blue. В дальнейшем этот идентификатор можно будет использовать для добавления игры в Google Play или App Store.
Сохранить созданный проект вы можете в один единственный файл (пункт меню «File -> Save As Single File…») или в папку (пункт меню «File -> Save As Project…»). В папку сохранять проект будет полезным, если вы работаете в команде или для хранения версий вы будете использовать систему управления версиями, например, SVN или Git.
Делаем первый уровень игры
После создания проекта у нас появилось 2 закладки «Layout 1» и «Event sheet 1». Первая закладка – это макет экрана или сцены, который будет видеть игрок, на второй закладке – страница событий. Я решил использовать для каждого уровня игры отдельный макет и одну для всех страницу событий. Ну, что ж, раз макет «Layout 1» уже создан будем использовать его для первого уровня.
Для начала переименуем макет «Layout 1». Чтобы открыть свойства макета, щелкните по нему на панели «Projects».
Я назову макет первого уровня «Level1» и сделаю размер макета таким же, как и размер окна (в моём случае – это 1080х1920).
Узнать размер окна и поменять его в случае необходимости можно в свойствах проекта. Для этого щёлкните по названию проекта в панели «Projects» и найдите свойство «Window Size».
Теперь нарисуем объекты. В игре я решил использовать прямоугольники и квадраты чёрного цвета, поэтому мне рисовать ничего сложного не придётся. На закладке «Level1» щёлкните правой клавишей мышки по макету и в появившемся меню выберите «Insert new object».
В диалоге «Insert new object» выберите объект «Sprite» (объект-картинка), введите имя для нового объекта «BlackBlock» и нажмите «Insert».
После этого указатель мыши превратится в крестик и вам нужно будет щёлкнуть в то место, где нужно создать новый объект. Щёлкните посередине макета. После щелчка сразу открывается четыре окна: окно «Edit image» для рисования нашего объекта, окно «Image points» для указания ключевых точек на объекте, например, центра объекта, и окна «Animations» и «Animation frames» для управления анимацией.
Для того, чтобы изобразить черные прямоугольники и квадраты, мне не нужна такая большая картинка, поэтому я сделаю её меньше. Для этого нажмите на кнопку со стрелкой, направленной в обе стороны и укажите новый размер в диалоговом окне.
Теперь выбираем инструмент заливку, выбираем чёрный цвет и заливаем прямоугольник, чёрным цветом.
Всё готово, можно закрыть окно «Edit image». После закрытия окна вы увидите объект на макете. Можно увеличить его до нужного размера и передвинуть в нужное место.
После добавления объекта на макет, он появился и в проекте на панели «Projects». Чтобы теперь добавить на макет ещё один экземпляр объекта «BlackBlock» перетащите его мышкой из панели «Projects» на макет «Level1». После перетаскивания на макете будет два чёрных блока одинакового размера. Сделаем нижний блок шире. Таким же образом можно сделать любое количество чёрных блоков любого размера.
Теперь добавим героев нашей игры – красный и синий кружки. Сначала сделаем красный кружок. Для этого вставим спрайт, так же как вставляли спрайт для черного блока, с помощью пункта меню «Insert new object». Назовём его «Red».
Чтобы нарисовать красный круг, воспользуемся инструментом кистью. Выберем красный цвет, размер кисти меньший, чем размер картинки (я сделал 199) и почти максимальную жесткость (я выбрал на 1 меньше - 199), чтобы края были четь размытыми. Теперь установите указатель мыши примерно посередине картинки и щёлкните один раз. Так мы получим ровный круг.
Теперь нужно подрезать картинку по размеру круга. Для этого щёлкните по пиктограмме подрезки. Как видите, картинка после этого стала размером 201x201.
Теперь нужно выровнять исходную точку вокруг, которой кружок будет крутиться в будущем. Для этого нажмите на пиктограмму «Set origin and image points», в появившемся диалоге щёлкните правой клавишей мыши по исходной точке и выберите пункт меню «Quick assign -> Middle». После этого исходная точка будет установлена строго в центре.
Точно так же сделаем синий круг. После этого уменьшим круги, задав им размеры 101x101 на панели «Properties» и разместим на чёрных панелях друг под другом (координата x должна быть равна 540).
Теперь нужно задать нашим объектам поведение «Physics» (физика), чтобы на них действовало притяжение, и они могли сталкиваться друг с другом. Для этого выберите объект Red и на панели свойств щёлкните по ссылке «Behaviors». В появившемся диалоге «Behaviors» щёлкните по плюсику и в очередном диалоге «Add behavior» выберите поведение «Physics» и нажмите на кнопку «Add».
Добавленное поведение теперь будет отображаться в диалоге «Behaviors».
Закройте этот диалог и посмотрите на панель «Properties». Теперь здесь появились свойства поведения «Physics». В свойствах поведения для кружка нужно выставить для свойства «Collision mask» (контур столкновения) значение «Circle» (окружность). Только выделите объект на панели «Projects», а не экземпляр объекта на макете «Level1», так вы выставите это свойство для всех будущих экземпляров на всех уровнях. Этим самым мы даём знать движку Box2D, который двигает объекты и обрабатывает столкновения, что красный и синий объекты – круглые. Тоже самое проделайте с объектом Blue.
Теперь выполните макет, для этого нажмите на кнопку «Run layout», сверху в заголовке окна или нажмите на клавишу F5.
При этом откроется браузер, который используется на вашем компьютере по умолчанию (к слову, выбрать другой браузер для отладки можно в свойствах проекта) и в нём отобразится наш макет, на котором красный и синий кружки начнут падать вниз.
Теперь вы видите, что поведение работает, но наши кружочки не сталкиваются с чёрными прямоугольниками, а пролетают как бы над ними. Чтобы сделать столкновения, нужно к чёрным прямоугольникам тоже добавить поведение «Physics», как мы это делали для объектов Red и Blue. Только в свойствах поведения выставите свойству «Immovable» (неподвижность) значение «Yes», чтобы объекты были неподвижны и не падали вниз. А свойству «Collision mask» выставьте значение «Bounding box» (обрамляющая рамка), - это означает, что границы объекта совпадают с границами картинки, т.е. это прямоугольники. При изменении свойств выберите объект на панели «Projects», а не экземпляр объекта на макете «Level1»! Так вы поменяете эти свойства для всех существующих и для всех будущих экземпляров объекта.
Запустите макет теперь и вы увидите, что красный и синий кружочки лежат на чёрных прямоугольниках. Теперь нужно сделать, чтобы прикасаясь к чёрным прямоугольникам их можно было убрать. Чтобы обрабатывать прикосновения к сенсорному экрану или события с мышкой, добавьте в проект объект «Touch». Для этого, так же как мы добавляли предыдущие объекты, добавляем объект «Touch» на наш макет.
После нажатия на кнопку «Insert» на несколько секунд появится предупреждение, что объект «Touch» доступен для всего проекта. Т.е. добавляя этот объект к макету, добавление происходит для всего проекта. Это нормально.
Теперь, чтобы обработать прикосновения к сенсорному экрану и щёлканья мышкой, откройте закладку «Event sheet 1», нажмите на ссылку «Add event» (добавить событие) и в появившемся диалоге «Add event» выберите объект «Touch» и нажмите на кнопку «Next».
На следующем шаге выберите событие, которое вы хотите обработать. В нашем случае – это событие «On tap object» (если тапнули по объекту). Нажмите на кнопку «Next».
На следующем шаге выберите объект, по которому должны тапнуть. В нашем случае – это объект «BlackBlock». Нажмите на кнопку «Done».
После закрытия диалога мы видим, что на странице событий появилось наше первое событие, которое будет возникать, если игрок тапнул по сенсорному экрану или щёлкнул мышкой по объекту «BlackBlock».
Теперь по событию нам что-то нужно сделать. В нашем случае мы должны удалить экземпляр объекта «BlackBlock», по которому тапнули или щёлкнули. Чтобы добавить действие по событию, щёлкните по ссылке «Add action» (добавить действие). В диалоге «Add action» выберите объект, с которым нужно совершить действие. В нашем случае – это объект «BlackBlock». Нажмите «Next».
На следующем этапе нужно выбрать действие с выбранным объектом. Нас интересует удаление объекта, поэтому выберем «Destroy» и нажмём копку «Done».
Теперь на странице событий появилось наше действие.
Запустим макет теперь и посмотрим, работает ли событие. После запуска мы видим два чёрных прямоугольника и на них лежат кружочки. Щёлкнем по верхнему прямоугольнику, он исчез, и красный кружок начал падать вниз. Всё прекрасно.
Теперь нужно сделать надпись, которая будет появляться, когда уровень пройден. Для отображения текста с результатом прохождения уровня добавим на макет объект «Sprite font» с именем «ResultText».
После добавления объекта на макет поднимется уже известный нам диалог «Edit image», на котором вы увидите картинку с изображением букв.
Дело в том, что в объекте «Sprite font» для отображения текста используются нарисованные на этой картинке буквы. Конечно, можно было использовать объект «Text» и шрифты TrueType, но эти шрифты работают некорректно в некоторых случаях, например, при экспорте проекта под платформу Android с помощью сервиса CocoonJS. Поэтому, чтобы игра выглядела одинаково на всех платформах, лучше сразу использовать объект «Sprite font» для вывода текста. Кроме того вы сможете нарисовать шрифты на свой вкус.
В примере я не буду использовать предложенный по умолчанию пиксельный шрифт, а возьму специально заготовленный шрифт с русскими и латинскими буквами (файл шрифта см. в конце статьи). Чтобы подгрузить картинку, нажмите на кнопку «Load an image from a file». После загрузки картинки это окно можно закрыть.
Теперь, в свойствах объекта «Sprite font» нужно выставить размеры одной буквы (свойства «Character width» и «Character height») и набор символов (свойство «Character set»). В наборе символов перечисляются все символы, которые есть на картинке. На картинке, которую я использовал символы следующие:
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;:?!-_~#"'&()[]|`\/@°+=*$£€<>АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя
Писать будем посередине макета, поэтому выравнивание текста сделайте по центру (свойства «Horizontal alignment» и «Vertical alignment»).
Подравнять сам объект по центру макета вы можете, щёлкнув по нему правой клавишей мышки, и выбрав в меню пункты «Align -> Layout -> Center horizontal» и «Align -> Layout -> Center vertical».
Чтобы надпись в начале уровня была спрятана, установите в свойство «Initial visibility» значение «Invisible».
Теперь можно сделать анализ результата, с которым пройден уровень и выдача результата. Для начала нам нужно отследить столкновение красного кружочка с синим, чтобы закончить прохождение уровня. Для этого будем отслеживать событие о столкновении от красного кружочка. На странице событий щёлкните по ссылке «Add event», выберите красный кружок, нажмите «Next», выберите событие «On collision with another object» (при столкновении с другим объектом) и нажмите «Next».
На следующем этапе выберите объект, с которым ожидается столкновение. В нашем случае – это объект «Blue».
После того как событие добавлено, нужно добавить обработчик этого события. Нажмём на ссылку «Add action» справа от события и выберем объект «ResultText». Нажмите «Next».
На этом этапе выберите действие «Set visible» и нажмите «Next».
В следующем диалоге выберите значение «Visible».
Кроме того, что нужно показать текст ещё нужно написать поздравления. Поэтому для события добавляем ещё одно действие. Нажмите «Add action», выберите объект «ResultText» и найдите действие «Set text». Нажмите «Next».
В следующем диалоге введите текст поздравления. Здесь ключевое слово newline обозначает переход на новую строку, а символы & сцепление строк в одну.
Теперь страница событий будет содержать два события.
Теперь нужно узнать о том, что игрок не прошёл уровень. Это случается, если кружки вылетели за границу макета. Чтобы это узнать добавляем новое событие для объектов Red «Is outside layout».
И делаем такие же обработчики, как и для предыдущего события, только текст будет сообщать о поражении. Для синего кружка события будут такие же, поэтому щёлкните правой клавишей мышки по событию «Is outside layout» с красным кружком и выберите пункт меню «Add another conditions» и аналогично добавьте событие для синего кружка.
Теперь чтобы действия выполнялись по любому событию, щёлкните по общему пространству чуть левее событий правой кнопкой мыши и выберите пункт меню «Make 'Or' block» (сделать блок 'или').
Результат будет выглядеть так.
Теперь можно запустить игру и попробовать разные варианты: убрать верхний чёрный блок – будет победа или убрать нижний блок – будет проигрыш.
Добавим ещё один небольшой штрих. После того как прохождение уровня завершено, подождём несколько секунд и начнём уровень сначала. Для этого добавьте в каждое событие о завершении действие «Wait» и действие «Go to layout», см. картинки.
И установим количество секунд – 3.
Должно получиться вот так.
Теперь можно проверить, как работает первый уровень игры в действии.
Оформляем уровень
Для начала нужно предусмотреть, чтобы игра работала на экранах с разными пропорциями. Сейчас игра рассчитана на пропорции экрана 16:9 и, если запустить её на экране с пропорциями 4:3, то по бокам будут чёрные полоски. Но лучше будет смотреться, если игра будет занимать всё пространство экрана. Чтобы это сделать, установите свойству проекта «Fullscreen in browser» значение «Scale outer». А чтобы макет всегда был по центру, установите свойству «Unbounded scrolling» значение «Yes». Теперь вы не увидите чёрных полос по бокам.
Дальше добавим фоновый рисунок. Вы можете использовать объект «Tiled Background», который автоматически заполняется нужной вам текстурой, или объект «Sprite», если у вас есть большая фоновая картинка. Я буду использовать второй вариант.
Итак, добавляем объект «Sprite» с именем «Background» и загружаем картинку (картинку я заранее нарисовал). Чтобы сделать картинку под всеми остальными элементами, щёлкните по ней правой кнопкой мышки и выберите пункт меню Z Order -> Send to bottom of layer.
После этого фоновая картинка встанет под всеми остальными объектами макета. Запустим выполнение макета и увидим, что фоновая картинка закрывает не всё окно. По краям будут видны белые полосы. Это нам не подходит.
Чтобы картинка растягивалась на всё окно, нужно добавить к нашему объекту «Background» поведение «Anchor» (якорь).
И выставить свойствам «Right edge» и «Bottom edge», соответственно, значения «Window right» и «Window bottom». Остальные значения трогать не нужно. Тем самым мы привяжем углы фоновой картинки к углам окна и картинка будет растягиваться и сжиматься вместе с окном.
Запустим нашу игру и удостоверимся, что фоновая картинка растягивается на всё окно.
Теперь сделаем кружочки более привлекательными. В свойстве красного кружочка щёлкните по ссылке «Effects», в появившемся диалоге «Effects» щёлкните по плюсику и в следующем диалоге «Add effect» найдите эффект «Darken». Нажмите кнопку «Add».
Кружок после этого стал более тёмным и прозрачным. Так гораздо лучше. Закройте диалог «Effects» и добавьте такой же эффект для синего кружочка. Вы можете экспериментировать с эффектами, добавлять несколько эффектов, чтобы достигнуть лучшего результата. Запустите игру и посмотрите результат.
Здесь нужно заметить, что для создания эффектов используется WebGL и, если эта технология не поддерживается браузером, то никаких эффектов, к сожалению, мы не увидим.
Теперь, чтобы победный текст не сливался с чёрными блоками на будущих уровнях нужно чуть осветить всё, что находится ниже текста. Для этого создадим новый объект «Sprite» с именем «Light» и на картинке, так же как мы рисовали красный и синий кружки нарисуем белый, только жёсткость кисти сделаем 20, а диаметр кисти – 220.
После этого также подрежем картинку и выставим исходную точку по центру. Затем установите в свойство объекта «Initial visibility» значение «Invisible», а в свойство «Opacity» (прозрачность) значение 50 и растяните этот объект так, чтобы он был больше поздравительной надписи. Затем надпись вернём наверх (Z Order -> Send to top of layer).
Теперь нужно сделать, чтобы свет появлялся вместе с надписью «ResultText». Добавьте соответствующие действия на странице событий.
Для объекта «ResultText» тоже добавьте эффект «GlowVertical» (вертикальное свечение) и установите в свойство «Intensity» значение 30.
Резкое появление текста и белого света нам ни к чему, поэтому сделаем плавное появление. Для этого добавьте к объектам «ResultText» и «Light» поведение «Fade» (исчезновение).
И установите свойствам поведения следующие значения: «Active at start» (активировать при старте) - «No», «Fade in time» (появление через) - 0.2, «Fade out time» (исчезновение через) - 0, «Destroy» (удаление) - «No».
И на странице событий эти поведения нужно активировать в момент появления надписи. Для этого в самое начало добавьте к уже имеющемуся событию «On collision with» действие «Start fade» для объектов «ResultText» и «Light». У вас должно получиться так, как на рисунке. Точно так же включите эффект по событиям «Is outside layout».
Теперь сделаем пульсирующее свечение кружочков, чтобы сделать их как бы живыми. Для этого сначала нужно нарисовать будущее свечение. Для этого добавьте очередной спрайт «Sprite» с именем «RedLight», размер картинки сделайте 500x500, ширину кисти 399, жёсткость 20, цвет красный. После этого один раз щёлкните посередине картинки, обрежьте картинку и выставьте исходную точку посередине так же, как мы уже это не раз делали. В результате должна получиться картинка размером 381x381 как на рисунке.
Теперь уменьшите размер объекта до размера 191x191, прозрачность сделайте равной 50. После этого добавьте поведение «Sine» (синус).
И в свойствах поведения «Sine» выставьте следующие значения свойствам: «Movement» (движение) - «Size», «Wave» (волна) - «Reverse sawtooth», «Period» (период) - 1.
Теперь выставьте объект «RedLight» так, чтобы его координаты совпадали с координатами объекта «Red». В моём случае – это 540x207. Затем точно также сделайте синее свечение, только кисть выберите синего света.
После этого объекты «RedLight» и «BlueLight» нужно разметить под кружочками «Red» и «Blue» по оси Z. В бесплатной версии придётся постараться, а в платной версии есть диалог «Z order». Чтобы вызвать диалог, щёлкните по макету правой кнопкой мышки и выберите меню «Z Order -> Edit Z order…».
Теперь нужно сделать, чтобы свет перемещался вместе с кружочками. Для этого объект «RedLight» нужно прикрепить к объекту «Red», а объект «BlueLight» - к объекту «Blue». Чтобы это сделать добавьте к объектам «RedLight» и «BlueLight» поведение «Pin» (кнопка).
Затем откройте страницу событий и добавьте новое событие для объекта «System» - «On start of layout».
И для этого события добавьте действие для объекта «RedLight» - «Pin to object».
И в следующем диалоге выберите, к какому объекту вы прикрепляете объект «RedLight». В нашем случае – это объект «Red».
Аналогично прикрепите объект «BlueLight» к объекту «Blue». Вот что должно получиться на странице событий.
Теперь обыграем столкновение кружочков. Сделаем их исчезновение и добавим эффект взрыва. Для того чтобы это сделать, сначала добавим пустой макет. Для этого щёлкните правой кнопкой мыши на панели «Projects» по папке «Layouts» и выберите пункт меню «Add layout».
В диалоге «Add layout» выберите пункт «Don’t add event sheet» (не добавлять страницу событий).
Выставьте новому макету имя «Empty», и такой же размер, как и у макета «Level1» - 1080x1920.
Теперь на новый макет добавьте объект «Particles» (частицы).
В диалоге «Edit image» выставьте кисти размер 100, жесткость 10, цвет белый и хаотично поставьте несколько точек. Я поставил 8 белых точек. Закройте диалог.
После добавления установите свойствам объекта следующие значения: «Spray cone» - 360, «Type» - «One-shot», «Speed» - 150, «Size» – 200.
Теперь взрыв заготовлен, осталось его добавить в момент столкновения между кружочками. Для этого на странице событий в событии «On collision with» добавьте действие объекта «System» «Create object» (создать объект).
В диалоге с параметрами создания выберите объект «Particles», а координаты нужно посчитать. По оси X и Y это должны быть средние значения координат кружочков.
Также нужно сразу удалить кружочки. Для этого добавьте в это же событие в самое начало действия «Destroy» для объектов «Red», «RedLight», «Blue» и «BlueLight».
У вас должно получиться, так как на рисунке.
Вот собственно и всё. Проверяем результат проделанной работы. Ещё один момент, если у вас несколько макетов, то выполняться в браузере будет макет на активной закладке.
Добавляем уровни и делаем переходы между уровнями
Прежде чем добавлять второй уровень уберём мешающиеся общие объекты «ResultText» и «Light» на макет «Empty». Для этого выбелите экземпляры этих объектов на макете «Level1», вырежьте их (контекстное меню «Cut» или Ctrl+X), переключитесь на макет «Empty» и вставьте их туда (контекстное меню «Paste» или Ctrl+V).
После вставки центрируйте объекты с помощью пунктов меню «Align -> Layout -> Center horizontal» и «Align -> Layout -> Center vertical». Теперь раз уж экземпляры этих объектов находятся на отдельном макете, сделайте их видимыми при инициализации (свойство «Initial visibility» установите в «Visible») и удалите действия «Set visible» на странице событий.
Теперь нужно создавать объекты «ResultText» и «Light» на макетах с уровнями после прохождения или провала уровня. Откройте страницу событий, и добавьте для событий «On collision with» и «Is outside layout» действия системы «Create object» и объект для создания выберите «Light». Точно так же добавьте действия для создания объекта «ResultText». Координаты при создании укажите такие же, как и для существующих экземплярах объектов на макете «Empty». Добавленные действия перетащите в начало, но после создания объекта «Particles».
Здесь нужно отметить, что события «Is outside layout» особенные. Они будут возникать постоянно, пока объект будет падать за пределами макета и получится, что объекты «Light» и «ResultText» будут создаваться очень много раз. Это нас не устраивает, поэтому для события «Is outside layout» (так же как и для события «On collision with»), добавьте действия для удаления объектов «Red», «Blue», «RedLight» и «BlueLight» и создание экземпляров объектов Particles посередине объектов «Red» и «Blue». Вот, что должно получиться.
Запустите выполнение макета «Level1» и проверьте, что теперь при вылете синего кружка за пределы макета, взрываются оба кружочка.
Но есть одна особенность. Когда дым рассеется, вы можете увидеть, что красный кружочек остаётся на макете. Давайте разберёмся, почему так происходит.
Дело в том, что при возникновении события, экземпляры объектов, для которых эти события описаны, помечаются. Далее, производятся описанные действия следующим образом. Если объект упомянут в событии, то действия производятся со всеми помеченными экземплярами. Если объект не упомянут в событии, то действие происходит со всеми экземплярами объекта.
В нашем случае это работает так:
- происходит событие;
- в событии участвует объект «Blue», значит для него отмечаются экземпляры, с которыми это событие произошло, т.е. помечается один единственный экземпляр – наш кружочек;
- в событии участвует объект «Red», значит для него отмечаются экземпляры, с которыми это событие произошло, но т.к. единственны экземпляр объекта не вылетел за пределы макета, он не помечается;
- команда «Delete» объекта «Blue» выполняется для объекта, который участвовал в событии, поэтому эта команда выполняется только для выделенных экземпляров объектов, в нашем случае это единственный экземпляр и он удаляется;
- команда «Delete» объекта «Red» выполняется для объекта, который участвовал в событии, поэтому эта команда выполняется только для выделенных экземпляров объектов, в нашем случае нет выделенных экземпляров, поэтому кружочек и не удаляется.
Чтобы эту особенность обойти, сделаем функцию, в которой будет удалять объекты и заодно делать все завершающие действия для уровня. Для этого добавьте на макет объект «Function». При добавлении появится такое же предупреждение, как и при добавлении объекта «Touch», что объект используется для всего проекта в целом. Не обращаем на него внимания.
После этого на страницу событий начните добавлять новое событие. В диалоге «Add event» на первом шаге выберите объект «Function» и нажмите «Next».
На следующем шаге выберите событие «On function» и нажмите «Next».
На последнем шаге задайте имя для функции и нажмите «Done».
Теперь в функцию перетащите все действия из события «Is outside layout».
Теперь по событию «Is outside layout» нужно вызвать функцию «EndOfLevel». Добавьте такое действие: в диалоге «Add action» выберите объект «Function» и на следующем шаге выберите «Call function» (вызвать функцию).
На последнем шаге задайте имя вызываемой функции.
На странице событий должно получиться так.
Проверьте работу макета, выполнив его.
Теперь, чтобы ничего не мешало для изменения будущих уровней, уберём объекты «RedLight» и «BlueLight» на макет «Empty» (вырежьте их с макета «Level1» и вставьте в макет «Empty» в любое место). После этого для события «On start layout» добавьте создание этих объектов так, чтобы координаты объекта «Red» совпадали с координатами объекта «RedLight» и аналогично для объектов «Blue» и «BlueLight».
Выполните макет «Level1» и удостоверьтесь, что кружочки пульсируют светом.
Теперь давайте сделаем, чтобы при альбомной ориентации экрана фоновая картинка не растягивалась шире игрового пространства. Т.е. будем растягивать её только по вертикали. Чтобы это сделать на макете «Level1» щёлкните по фоновой картинке «Background» и для поведения «Anchor» выставьте свойствам «Left edge» и «Right edge» значение «None».
Выполните макет и убедитесь, что картинка не тянется по ширине.
Чтобы теперь закрасить белый фон чёрным цветом, для события «On start layout» добавьте системное действие «Set layer background color» и установите чёрный цвет.
Перетащите это действие в самое начало. В результате действие в событии должно выглядеть так:
Теперь после запуска мы увидим чёрный фон слева и справа.
Также нужно предусмотреть, что у нас игра рассчитана на пропорции экрана 16:9, а на iPad пропорции экрана 4:3 и в портретной ориентации в полноэкранном режиме на этом планшете в игре будут появляться наши чёрные поля. Чтобы этого не было можно растянуть картинку по ширине до пропорции 4:3. Подсчитать новую ширину картинки можно так: 1920 * 3 / 4 = 1440. Этот метод работает хорошо, но тогда на экранах с пропорцией 16:9 будет обрезаться картинка и в нашем случае обрежется постепенное затемнение к краям. Это будет выглядеть так:
Если у вас фон, который можно подрезать, то можно сделать так, как здесь описано, но мы пойдём более сложным путём, зато сохраним края фоновой картинки. Будем корректировать ширину картинки по изменению размера окна. Событие об изменении размера окна посылает объект «Browser». Добавьте его на макет.
После этого на странице событий добавьте событие «On resized» объекта «Browser».
После этого для события добавьте действие «Set width» нашего объекта «Background».
И будем вычислять конечную ширину по следующей формуле: min(ViewportRight(0) - ViewportLeft(0), 1440).
Теперь ширина фоновой картинки будет подгоняться под ширину макета, но не более 1440. Аналогично нужно сделать и по событию «On start of layout», т.к. при старте событие «On resized» не срабатывает. Просто скопируйте в это событие новое действие. Проверим, как теперь выглядит игра для пропорции 16:9. Как видим всё прекрасно, края картинки не обрезаются.
Есть ещё один неприятный момент в событии «On resized». Когда при обработке события мы получаем размеры макета, то иногда возвращаются размеры до изменения, а иногда – размеры после изменения. Чтобы точно получить установленные размеры макета, нужно немного подождать с помощью действия «Wait», например, 1 секунду, и только потом выставлять размер фоновой картинки. Так и сделаем. В итоге должно получиться так:
Ну вот, всё и готово для добавления второго уровня. В начале, добавим макет для второго уровня. Для этого щёлкните правой кнопкой мышки по макету «Level1» на панели свойств и в меню выберите «Duplicate».
Там же сразу после добавления укажите имя для нового макета «Level2».
Чтобы теперь открыть созданный макет на отдельной закладке, дважды щёлкните по нему на панели проекта. После этого добавьте ещё один прямоугольник на макет и расставьте прямоугольники и кружочки, как показано на рисунке.
Когда у нас есть два уровня, можно сделать переходы между уровнями. Чтобы это сделать поменяем действие «Go to», которое происходит по событию «On collision with». Щёлкните по нему дважды, чтобы вызвать диалог изменения действия. Как видите, здесь сейчас указан переход на уровень 1.
Нажмите «Back». Так мы вернёмся на этап выбора действия. Выберите здесь действие «Go to layout (by name)» (переход к макету по имени) и нажмите «Next».
Здесь нам нужно вычислить имя следующего уровня. Для этого в имени макета (у нас это «Level1», «Level2», …) нужно взять число стоящие справа от слова «Level» и прибавить 1. Так и сделаем.
Здесь, функция right возвращает указанное количество символов в строке, находящиеся справа, функция len возвращает количество символов в строке, а функция int преобразует строку в число, чтобы можно было прибавить 1.
Запустим теперь макет «Level1», уберём верхний чёрный блок, чтобы кружочки столкнулись и через 3 секунды после этого появится 2-й уровень. Всё работает.
Точно так же измените действие «Go to layout» для функции «EndOfLevel», но имя макета менять не нужно. Оно должно остаться таким же.
Теперь сделаем плавное затемнение и осветление между уровнями, чтобы не было скачков при смене уровней. Для этого нам понадобится чёрный прямоугольный объект. Клонируем объект «BlackBlock». Для этого щёлкните правой кнопкой мышки по этому объекту на панели «Projects» и выберите пункт меню «Clone».
После этого на этой же панели или на панели свойств поменяйте имя на «CoverFadeOut». Затем добавьте этот объект на макет «Empty» (перетащите) и растяните на весь макет и поместите его под все объекты (меню «Z Order -> Send to bottom of layer»). Кстати, чтобы не было никаких миганий в дальнейшем ширину объекта «CoverFadeOut» сразу сделайте равной максимальной ширине фоновой картинки 1440. Затем уберите у этого объекта поведение «Physics» и добавьте поведения «Fade» и «Anchor». Выставьте свойствам поведений следующие значения.
Теперь в событие «On start of layout» добавьте действие для объекта «System» действие «Create object» и укажите объект для создания «CoverFadeOut». Координаты выставим по центру макета.
Запустите макет «Level1» или «Level2» и убедитесь, что при запуске окно макета чёрное и за секунду проявляется уровень.
Теперь сделаем затемнение после прохождения уровня. Для этого клонируйте объект «CoverFadeOut» и новый объект назовите «CoverFadeIn». Так же создайте экземпляр нового объекта на макете «Empty», растяните его на весь макет (ширина так же 1440). Установите свойствам «Right edge» и «Bottom edge» значения «Window right» и «Window bottom» соответственно. Затем для нового объекта свойства поведения «Fade» поменяйте так, как показано на рисунке.
Теперь для события «On collision with» добавьте действие объекта «System» «Create object» и выберите объект «CoverFadeIn» и так же задайте координаты, как и для объекта «CoverFadeIn».
Чтобы сначала сработало затемнение, а затем произошел переход к следующему уровню, переместите наше новое действие над действием «Go to layout» и добавьте сюда же действие «Wait» на 1 секунду. Вот что должно получиться.
То же самое сделайте для функции «EndOfLevel».
Теперь добавим ещё один уровень. Так же клонируем макет «Level1», даём новому макету имя «Level3» и переставляем объекты, так, чтобы уровень был чуть сложнее. А вот и результат. Кстати теперь можете попробовать игру в полноэкранном режиме и не только на компьютере, но и на планшете и смартфоне.