• Добро пожаловать на сайт - Forumteam.wiki !

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

    Группа в телеграме (подпишитесь, что бы не потерять нас) - ForumTeam Chat [Подписатся]
    Связь с администратором - @ftmadmin

robricksan

Проявляет активность
Местный
Регистрация
16.02.20
Сообщения
60
Реакции
38
Баллы
105
FTC
30¢
В этой серии статей я на примере расскажу, как сделать игру с помощью конструктора игр Construct 2. Из этих строк вы узнаете, как создать простую кроссплатформенную игру по шагам, начиная с создания пустого проекта до добавления музыки и звуков.

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


Создание проекта
Итак, начнём с создания проекта. Запустите Construct 2 и выберите пункт меню «File -> New». Сделаем пустой проект с расчётом на экраны с большим расширением. Выберите шаблон «New empty HD portrait 1080p project» (игра будет работать в портретной ориентации) и нажмите кнопку «Open».
c2-create-project.jpg

В панели свойств задайте данные о проекте: название, версию, описание, автора (название компании или имя и фамилия разработчика), адрес электронной почты и адрес вебсайта. В поле ID нужно указать уникальный идентификатор программы. Чтобы этот идентификатор был уникальным, за основу берут доменное имя без www и записывают его наоборот, например, для сайта www.forumteam.bar, начало идентификатора будет top.forumteam. Затем через точку приписывают название программы. У меня получилось так: top.forumteam.red-n-blue. В дальнейшем этот идентификатор можно будет использовать для добавления игры в Google Play или App Store.
191Sf8IN.png

Сохранить созданный проект вы можете в один единственный файл (пункт меню «File -> Save As Single File…») или в папку (пункт меню «File -> Save As Project…»). В папку сохранять проект будет полезным, если вы работаете в команде или для хранения версий вы будете использовать систему управления версиями, например, SVN или Git.

Делаем первый уровень игры
После создания проекта у нас появилось 2 закладки «Layout 1» и «Event sheet 1». Первая закладка – это макет экрана или сцены, который будет видеть игрок, на второй закладке – страница событий. Я решил использовать для каждого уровня игры отдельный макет и одну для всех страницу событий. Ну, что ж, раз макет «Layout 1» уже создан будем использовать его для первого уровня.

Для начала переименуем макет «Layout 1». Чтобы открыть свойства макета, щелкните по нему на панели «Projects».
c2-layout1-prop.jpg

Я назову макет первого уровня «Level1» и сделаю размер макета таким же, как и размер окна (в моём случае – это 1080х1920).
c2-level1-prop.jpg

Узнать размер окна и поменять его в случае необходимости можно в свойствах проекта. Для этого щёлкните по названию проекта в панели «Projects» и найдите свойство «Window Size».
7QbJIKI2.png

Теперь нарисуем объекты. В игре я решил использовать прямоугольники и квадраты чёрного цвета, поэтому мне рисовать ничего сложного не придётся. На закладке «Level1» щёлкните правой клавишей мышки по макету и в появившемся меню выберите «Insert new object».
c2-insert-obj.jpg

В диалоге «Insert new object» выберите объект «Sprite» (объект-картинка), введите имя для нового объекта «BlackBlock» и нажмите «Insert».
c2-new-sprite.jpg

После этого указатель мыши превратится в крестик и вам нужно будет щёлкнуть в то место, где нужно создать новый объект. Щёлкните посередине макета. После щелчка сразу открывается четыре окна: окно «Edit image» для рисования нашего объекта, окно «Image points» для указания ключевых точек на объекте, например, центра объекта, и окна «Animations» и «Animation frames» для управления анимацией.
c2-new-image.jpg

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

Теперь выбираем инструмент заливку, выбираем чёрный цвет и заливаем прямоугольник, чёрным цветом.
c2-sprite-fill.jpg

Всё готово, можно закрыть окно «Edit image». После закрытия окна вы увидите объект на макете. Можно увеличить его до нужного размера и передвинуть в нужное место.
c2-level1-1obj.jpg

После добавления объекта на макет, он появился и в проекте на панели «Projects». Чтобы теперь добавить на макет ещё один экземпляр объекта «BlackBlock» перетащите его мышкой из панели «Projects» на макет «Level1». После перетаскивания на макете будет два чёрных блока одинакового размера. Сделаем нижний блок шире. Таким же образом можно сделать любое количество чёрных блоков любого размера.
c2-sprite2.jpg

Теперь добавим героев нашей игры – красный и синий кружки. Сначала сделаем красный кружок. Для этого вставим спрайт, так же как вставляли спрайт для черного блока, с помощью пункта меню «Insert new object». Назовём его «Red».
c2-new-sprite-red.jpg

Чтобы нарисовать красный круг, воспользуемся инструментом кистью. Выберем красный цвет, размер кисти меньший, чем размер картинки (я сделал 199) и почти максимальную жесткость (я выбрал на 1 меньше - 199), чтобы края были четь размытыми. Теперь установите указатель мыши примерно посередине картинки и щёлкните один раз. Так мы получим ровный круг.
c2-sprite-red-fill.jpg

Теперь нужно подрезать картинку по размеру круга. Для этого щёлкните по пиктограмме подрезки. Как видите, картинка после этого стала размером 201x201.
c2-sprite-red-crop.jpg

Теперь нужно выровнять исходную точку вокруг, которой кружок будет крутиться в будущем. Для этого нажмите на пиктограмму «Set origin and image points», в появившемся диалоге щёлкните правой клавишей мыши по исходной точке и выберите пункт меню «Quick assign -> Middle». После этого исходная точка будет установлена строго в центре.
c2-sprite-red-pt.jpg

Точно так же сделаем синий круг. После этого уменьшим круги, задав им размеры 101x101 на панели «Properties» и разместим на чёрных панелях друг под другом (координата x должна быть равна 540).
c2-sprite-blue.jpg

Теперь нужно задать нашим объектам поведение «Physics» (физика), чтобы на них действовало притяжение, и они могли сталкиваться друг с другом. Для этого выберите объект «Red» и на панели свойств щёлкните по ссылке «Behaviors». В появившемся диалоге «Behaviors» щёлкните по плюсику и в очередном диалоге «Add behavior» выберите поведение «Physics» и нажмите на кнопку «Add».
c2-add-behavior.jpg

Добавленное поведение теперь будет отображаться в диалоге «Behaviors».
c2-behaviors.jpg

Закройте этот диалог и посмотрите на панель «Properties». Теперь здесь появились свойства поведения «Physics». В свойствах поведения для кружка нужно выставить для свойства «Collision mask» (контур столкновения) значение «Circle» (окружность). Только выделите объект на панели «Projects», а не экземпляр объекта на макете «Level1», так вы выставите это свойство для всех будущих экземпляров на всех уровнях. Этим самым мы даём знать движку Box2D, который двигает объекты и обрабатывает столкновения, что красный и синий объекты – круглые. Тоже самое проделайте с объектом «Blue».
c2-red-mask.jpg

Теперь выполните макет, для этого нажмите на кнопку «Run layout», сверху в заголовке окна или нажмите на клавишу F5.
c2-run.jpg

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

c2-run1.jpg

Теперь вы видите, что поведение работает, но наши кружочки не сталкиваются с чёрными прямоугольниками, а пролетают как бы над ними. Чтобы сделать столкновения, нужно к чёрным прямоугольникам тоже добавить поведение «Physics», как мы это делали для объектов «Red» и «Blue». Только в свойствах поведения выставите свойству «Immovable» (неподвижность) значение «Yes», чтобы объекты были неподвижны и не падали вниз. А свойству «Collision mask» выставьте значение «Bounding box» (обрамляющая рамка), - это означает, что границы объекта совпадают с границами картинки, т.е. это прямоугольники. При изменении свойств выберите объект на панели «Projects», а не экземпляр объекта на макете «Level1»! Так вы поменяете эти свойства для всех существующих и для всех будущих экземпляров объекта.

c2-bb-mask.jpg

Запустите макет теперь и вы увидите, что красный и синий кружочки лежат на чёрных прямоугольниках. Теперь нужно сделать, чтобы прикасаясь к чёрным прямоугольникам их можно было убрать. Чтобы обрабатывать прикосновения к сенсорному экрану или события с мышкой, добавьте в проект объект «Touch». Для этого, так же как мы добавляли предыдущие объекты, добавляем объект «Touch» на наш макет.

c2-touch.jpg


После нажатия на кнопку «Insert» на несколько секунд появится предупреждение, что объект «Touch» доступен для всего проекта. Т.е. добавляя этот объект к макету, добавление происходит для всего проекта. Это нормально.

c2-add-touch.jpg


Теперь, чтобы обработать прикосновения к сенсорному экрану и щёлканья мышкой, откройте закладку «Event sheet 1», нажмите на ссылку «Add event» (добавить событие) и в появившемся диалоге «Add event» выберите объект «Touch» и нажмите на кнопку «Next».

c2-touch-event.jpg


На следующем шаге выберите событие, которое вы хотите обработать. В нашем случае – это событие «On tap object» (если тапнули по объекту). Нажмите на кнопку «Next».

c2-touch-on-tap.jpg


На следующем шаге выберите объект, по которому должны тапнуть. В нашем случае – это объект «BlackBlock». Нажмите на кнопку «Done».

c2-touch-on-tap2.jpg


После закрытия диалога мы видим, что на странице событий появилось наше первое событие, которое будет возникать, если игрок тапнул по сенсорному экрану или щёлкнул мышкой по объекту «BlackBlock».

c2-touch-on-tap3.jpg


Теперь по событию нам что-то нужно сделать. В нашем случае мы должны удалить экземпляр объекта «BlackBlock», по которому тапнули или щёлкнули. Чтобы добавить действие по событию, щёлкните по ссылке «Add action» (добавить действие). В диалоге «Add action» выберите объект, с которым нужно совершить действие. В нашем случае – это объект «BlackBlock». Нажмите «Next».

c2-touch-action.jpg


На следующем этапе нужно выбрать действие с выбранным объектом. Нас интересует удаление объекта, поэтому выберем «Destroy» и нажмём копку «Done».

c2-touch-action1.jpg


Теперь на странице событий появилось наше действие.

c2-touch-action2.jpg


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

c2-level1-test1.jpg


Теперь нужно сделать надпись, которая будет появляться, когда уровень пройден. Для отображения текста с результатом прохождения уровня добавим на макет объект «Sprite font» с именем «ResultText».

c2-add-font.jpg


После добавления объекта на макет поднимется уже известный нам диалог «Edit image», на котором вы увидите картинку с изображением букв.

c2-add-font2.jpg


Дело в том, что в объекте «Sprite font» для отображения текста используются нарисованные на этой картинке буквы. Конечно, можно было использовать объект «Text» и шрифты TrueType, но эти шрифты работают некорректно в некоторых случаях, например, при экспорте проекта под платформу Android с помощью сервиса CocoonJS. Поэтому, чтобы игра выглядела одинаково на всех платформах, лучше сразу использовать объект «Sprite font» для вывода текста. Кроме того вы сможете нарисовать шрифты на свой вкус.

В примере я не буду использовать предложенный по умолчанию пиксельный шрифт, а возьму специально заготовленный шрифт с русскими и латинскими буквами (файл шрифта см. в конце статьи). Чтобы подгрузить картинку, нажмите на кнопку «Load an image from a file». После загрузки картинки это окно можно закрыть.

c2-add-font3.jpg


Теперь, в свойствах объекта «Sprite font» нужно выставить размеры одной буквы (свойства «Character width» и «Character height») и набор символов (свойство «Character set»). В наборе символов перечисляются все символы, которые есть на картинке. На картинке, которую я использовал символы следующие:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;:?!-_~#"'&()[]|`\/@°+=*$£€<>АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя

Писать будем посередине макета, поэтому выравнивание текста сделайте по центру (свойства «Horizontal alignment» и «Vertical alignment»).

c2-add-font5.jpg


Подравнять сам объект по центру макета вы можете, щёлкнув по нему правой клавишей мышки, и выбрав в меню пункты «Align -> Layout -> Center horizontal» и «Align -> Layout -> Center vertical».

Чтобы надпись в начале уровня была спрятана, установите в свойство «Initial visibility» значение «Invisible».

Теперь можно сделать анализ результата, с которым пройден уровень и выдача результата. Для начала нам нужно отследить столкновение красного кружочка с синим, чтобы закончить прохождение уровня. Для этого будем отслеживать событие о столкновении от красного кружочка. На странице событий щёлкните по ссылке «Add event», выберите красный кружок, нажмите «Next», выберите событие «On collision with another object» (при столкновении с другим объектом) и нажмите «Next».

c2-col-event.jpg


На следующем этапе выберите объект, с которым ожидается столкновение. В нашем случае – это объект «Blue».

c2-col-event1.jpg


После того как событие добавлено, нужно добавить обработчик этого события. Нажмём на ссылку «Add action» справа от события и выберем объект «ResultText». Нажмите «Next».

c2-result1.jpg


На этом этапе выберите действие «Set visible» и нажмите «Next».

c2-result2.jpg


В следующем диалоге выберите значение «Visible».

c2-result3.jpg


Кроме того, что нужно показать текст ещё нужно написать поздравления. Поэтому для события добавляем ещё одно действие. Нажмите «Add action», выберите объект «ResultText» и найдите действие «Set text». Нажмите «Next».

c2-result4.jpg


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

c2-result5.jpg


Теперь страница событий будет содержать два события.

c2-result6.jpg


Теперь нужно узнать о том, что игрок не прошёл уровень. Это случается, если кружки вылетели за границу макета. Чтобы это узнать добавляем новое событие для объектов «Red» «Is outside layout».

c2-outside.jpg


И делаем такие же обработчики, как и для предыдущего события, только текст будет сообщать о поражении. Для синего кружка события будут такие же, поэтому щёлкните правой клавишей мышки по событию «Is outside layout» с красным кружком и выберите пункт меню «Add another conditions» и аналогично добавьте событие для синего кружка.

c2-result7.jpg


Теперь чтобы действия выполнялись по любому событию, щёлкните по общему пространству чуть левее событий правой кнопкой мыши и выберите пункт меню «Make 'Or' block» (сделать блок 'или').

c2-result9.jpg


Результат будет выглядеть так.

c2-result8.jpg


Теперь можно запустить игру и попробовать разные варианты: убрать верхний чёрный блок – будет победа или убрать нижний блок – будет проигрыш.

Добавим ещё один небольшой штрих. После того как прохождение уровня завершено, подождём несколько секунд и начнём уровень сначала. Для этого добавьте в каждое событие о завершении действие «Wait» и действие «Go to layout», см. картинки.

c2-result10.jpg


c2-result11.jpg


И установим количество секунд – 3.

c2-result12.jpg


c2-end-of-l2.jpg


c2-result13.jpg


Должно получиться вот так.

c2-result14.jpg


Теперь можно проверить, как работает первый уровень игры в действии.



Скрытое содержимое доступно для зарегистрированных пользователей!



Скрытое содержимое доступно для зарегистрированных пользователей!


by robricksan
 
Последнее редактирование:

robricksan

Проявляет активность
Местный
Регистрация
16.02.20
Сообщения
60
Реакции
38
Баллы
105
FTC
30¢
В первой статье вы узнали, как создать проект и сделать первый простой рабочий уровень. Из этой второй статьи вы узнаете, как можно оформить игру в Construct 2: адаптировать игру к разным пропорциям экрана, сделать фон, добавить различные эффекты. В качестве эксперимента будем изменять первый уровень, созданный в первой статье.



Для начала нужно предусмотреть, чтобы игра работала на экранах с разными пропорциями. Сейчас игра рассчитана на пропорции экрана 16:9 и, если запустить её на экране с пропорциями 4:3, то по бокам будут чёрные полоски. Но лучше будет смотреться, если игра будет занимать всё пространство экрана. Чтобы это сделать, установите свойству проекта «Fullscreen in browser» значение «Scale outer». А чтобы макет всегда был по центру, установите свойству «Unbounded scrolling» значение «Yes». Теперь вы не увидите чёрных полос по бокам.

c2-design1.jpg


Дальше добавим фоновый рисунок. Вы можете использовать объект «Tiled Background», который автоматически заполняется нужной вам текстурой, или объект «Sprite», если у вас есть большая фоновая картинка. Я буду использовать второй вариант.

Итак, добавляем объект «Sprite» с именем «Background» и загружаем картинку (картинку я заранее нарисовал). Чтобы сделать картинку под всеми остальными элементами, щёлкните по ней правой кнопкой мышки и выберите пункт меню Z Order -> Send to bottom of layer.

c2-design2.jpg


После этого фоновая картинка встанет под всеми остальными объектами макета. Запустим выполнение макета и увидим, что фоновая картинка закрывает не всё окно. По краям будут видны белые полосы. Это нам не подходит.

c2-design3.jpg


Чтобы картинка растягивалась на всё окно, нужно добавить к нашему объекту «Background» поведение «Anchor» (якорь).

c2-design4.jpg


И выставить свойствам «Right edge» и «Bottom edge», соответственно, значения «Window right» и «Window bottom». Остальные значения трогать не нужно. Тем самым мы привяжем углы фоновой картинки к углам окна и картинка будет растягиваться и сжиматься вместе с окном.

c2-design5.jpg


Запустим нашу игру и удостоверимся, что фоновая картинка растягивается на всё окно.

c2-design6.jpg


Теперь сделаем кружочки более привлекательными. В свойстве красного кружочка щёлкните по ссылке «Effects», в появившемся диалоге «Effects» щёлкните по плюсику и в следующем диалоге «Add effect» найдите эффект «Darken». Нажмите кнопку «Add».

c2-design7.jpg


Кружок после этого стал более тёмным и прозрачным. Так гораздо лучше. Закройте диалог «Effects» и добавьте такой же эффект для синего кружочка. Вы можете экспериментировать с эффектами, добавлять несколько эффектов, чтобы достигнуть лучшего результата. Запустите игру и посмотрите результат.

c2-design8.jpg


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

Теперь, чтобы победный текст не сливался с чёрными блоками на будущих уровнях нужно чуть осветить всё, что находится ниже текста. Для этого создадим новый объект «Sprite» с именем «Light» и на картинке, так же как мы рисовали красный и синий кружки нарисуем белый, только жёсткость кисти сделаем 20, а диаметр кисти – 220.

c2-design9.jpg


После этого также подрежем картинку и выставим исходную точку по центру. Затем установите в свойство объекта «Initial visibility» значение «Invisible», а в свойство «Opacity» (прозрачность) значение 50 и растяните этот объект так, чтобы он был больше поздравительной надписи. Затем надпись вернём наверх (Z Order -> Send to top of layer).

c2-design10.jpg


Теперь нужно сделать, чтобы свет появлялся вместе с надписью «ResultText». Добавьте соответствующие действия на странице событий.

c2-design11.jpg


Для объекта «ResultText» тоже добавьте эффект «GlowVertical» (вертикальное свечение) и установите в свойство «Intensity» значение 30.

c2-design12.jpg


Резкое появление текста и белого света нам ни к чему, поэтому сделаем плавное появление. Для этого добавьте к объектам «ResultText» и «Light» поведение «Fade» (исчезновение).

c2-design23.jpg


И установите свойствам поведения следующие значения: «Active at start» (активировать при старте) - «No», «Fade in time» (появление через) - 0.2, «Fade out time» (исчезновение через) - 0, «Destroy» (удаление) - «No».

c2-design24.jpg


И на странице событий эти поведения нужно активировать в момент появления надписи. Для этого в самое начало добавьте к уже имеющемуся событию «On collision with» действие «Start fade» для объектов «ResultText» и «Light». У вас должно получиться так, как на рисунке. Точно так же включите эффект по событиям «Is outside layout».

c2-design25.jpg


Теперь сделаем пульсирующее свечение кружочков, чтобы сделать их как бы живыми. Для этого сначала нужно нарисовать будущее свечение. Для этого добавьте очередной спрайт «Sprite» с именем «RedLight», размер картинки сделайте 500x500, ширину кисти 399, жёсткость 20, цвет красный. После этого один раз щёлкните посередине картинки, обрежьте картинку и выставьте исходную точку посередине так же, как мы уже это не раз делали. В результате должна получиться картинка размером 381x381 как на рисунке.

c2-design13.jpg


Теперь уменьшите размер объекта до размера 191x191, прозрачность сделайте равной 50. После этого добавьте поведение «Sine» (синус).

c2-design15.jpg


И в свойствах поведения «Sine» выставьте следующие значения свойствам: «Movement» (движение) - «Size», «Wave» (волна) - «Reverse sawtooth», «Period» (период) - 1.

c2-design16.jpg


Теперь выставьте объект «RedLight» так, чтобы его координаты совпадали с координатами объекта «Red». В моём случае – это 540x207. Затем точно также сделайте синее свечение, только кисть выберите синего света.

После этого объекты «RedLight» и «BlueLight» нужно разметить под кружочками «Red» и «Blue» по оси Z. В бесплатной версии придётся постараться, а в платной версии есть диалог «Z order». Чтобы вызвать диалог, щёлкните по макету правой кнопкой мышки и выберите меню «Z Order -> Edit Z order…».

c2-design17.jpg


Теперь нужно сделать, чтобы свет перемещался вместе с кружочками. Для этого объект «RedLight» нужно прикрепить к объекту «Red», а объект «BlueLight» - к объекту «Blue». Чтобы это сделать добавьте к объектам «RedLight» и «BlueLight» поведение «Pin» (кнопка).

c2-design18.jpg


Затем откройте страницу событий и добавьте новое событие для объекта «System» - «On start of layout».

c2-design19.jpg


И для этого события добавьте действие для объекта «RedLight» - «Pin to object».

c2-design20.jpg


И в следующем диалоге выберите, к какому объекту вы прикрепляете объект «RedLight». В нашем случае – это объект «Red».

c2-design21.jpg


Аналогично прикрепите объект «BlueLight» к объекту «Blue». Вот что должно получиться на странице событий.

c2-design22.jpg


Теперь обыграем столкновение кружочков. Сделаем их исчезновение и добавим эффект взрыва. Для того чтобы это сделать, сначала добавим пустой макет. Для этого щёлкните правой кнопкой мыши на панели «Projects» по папке «Layouts» и выберите пункт меню «Add layout».

c2-add-layout.jpg


В диалоге «Add layout» выберите пункт «Don’t add event sheet» (не добавлять страницу событий).

c2-add-layout2.jpg


Выставьте новому макету имя «Empty», и такой же размер, как и у макета «Level1» - 1080x1920.

c2-design27.jpg


Теперь на новый макет добавьте объект «Particles» (частицы).

c2-design26.jpg


В диалоге «Edit image» выставьте кисти размер 100, жесткость 10, цвет белый и хаотично поставьте несколько точек. Я поставил 8 белых точек. Закройте диалог.

c2-design28.jpg


После добавления установите свойствам объекта следующие значения: «Spray cone» - 360, «Type» - «One-shot», «Speed» - 150, «Size» – 200.

c2-design29.jpg


Теперь взрыв заготовлен, осталось его добавить в момент столкновения между кружочками. Для этого на странице событий в событии «On collision with» добавьте действие объекта «System» «Create object» (создать объект).

c2-design30.jpg


В диалоге с параметрами создания выберите объект «Particles», а координаты нужно посчитать. По оси X и Y это должны быть средние значения координат кружочков.

c2-design31.jpg


Также нужно сразу удалить кружочки. Для этого добавьте в это же событие в самое начало действия «Destroy» для объектов «Red», «RedLight», «Blue» и «BlueLight».

c2-design32.jpg


У вас должно получиться, так как на рисунке.

c2-design33.jpg


Вот собственно и всё. Проверяем результат проделанной работы. Ещё один момент, если у вас несколько макетов, то выполняться в браузере будет макет на активной закладке.





Скрытое содержимое доступно для зарегистрированных пользователей!

Скрытое содержимое доступно для зарегистрированных пользователей!


by robricksan
 

robricksan

Проявляет активность
Местный
Регистрация
16.02.20
Сообщения
60
Реакции
38
Баллы
105
FTC
30¢
В первых двух статьях вы узнали, как приступить к созданию проекта и как сделать и оформить первый уровень. В этой третьей статье мы добавим два новых уровня и сделаем переходы между уровнями.

Прежде чем добавлять второй уровень уберём мешающиеся общие объекты «ResultText» и «Light» на макет «Empty». Для этого выберите экземпляры этих объектов на макете «Level1», вырежьте их (контекстное меню «Cut» или Ctrl+X), переключитесь на макет «Empty» и вставьте их туда (контекстное меню «Paste» или Ctrl+V).

c2-levels3.jpg


После вставки центрируйте объекты с помощью пунктов меню «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».

c2-levels4.jpg


Здесь нужно отметить, что события «Is outside layout» особенные. Они будут возникать постоянно, пока объект будет падать за пределами макета и получится, что объекты «Light» и «ResultText» будут создаваться очень много раз. Это нас не устраивает, поэтому для события «Is outside layout» (так же как и для события «On collision with»), добавьте действия для удаления объектов «Red», «Blue», «RedLight» и «BlueLight» и создание экземпляров объектов Particles посередине объектов «Red» и «Blue». Вот, что должно получиться.

c2-levels5.jpg


Запустите выполнение макета «Level1» и проверьте, что теперь при вылете синего кружка за пределы макета, взрываются оба кружочка.

c2-levels6.jpg


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

c2-levels12.jpg


Дело в том, что при возникновении события, экземпляры объектов, для которых эти события описаны, помечаются. Далее, производятся описанные действия следующим образом. Если объект упомянут в событии, то действия производятся со всеми помеченными экземплярами. Если объект не упомянут в событии, то действие происходит со всеми экземплярами объекта.

В нашем случае это работает так:

- происходит событие;
- в событии участвует объект «Blue», значит для него отмечаются экземпляры, с которыми это событие произошло, т.е. помечается один единственный экземпляр – наш кружочек;
- в событии участвует объект «Red», значит для него отмечаются экземпляры, с которыми это событие произошло, но т.к. единственны экземпляр объекта не вылетел за пределы макета, он не помечается;
- команда «Delete» объекта «Blue» выполняется для объекта, который участвовал в событии, поэтому эта команда выполняется только для выделенных экземпляров объектов, в нашем случае это единственный экземпляр и он удаляется;
- команда «Delete» объекта «Red» выполняется для объекта, который участвовал в событии, поэтому эта команда выполняется только для выделенных экземпляров объектов, в нашем случае нет выделенных экземпляров, поэтому кружочек и не удаляется.

Чтобы эту особенность обойти, сделаем функцию, в которой будет удалять объекты и заодно делать все завершающие действия для уровня. Для этого добавьте на макет объект «Function». При добавлении появится такое же предупреждение, как и при добавлении объекта «Touch», что объект используется для всего проекта в целом. Не обращаем на него внимания.

c2-levels9.jpg


После этого на страницу событий начните добавлять новое событие. В диалоге «Add event» на первом шаге выберите объект «Function» и нажмите «Next».

c2-levels10.jpg


На следующем шаге выберите событие «On function» и нажмите «Next».

c2-levels11.jpg


На последнем шаге задайте имя для функции и нажмите «Done».

c2-levels13.jpg


Теперь в функцию перетащите все действия из события «Is outside layout».

c2-levels14.jpg


Теперь по событию «Is outside layout» нужно вызвать функцию «EndOfLevel». Добавьте такое действие: в диалоге «Add action» выберите объект «Function» и на следующем шаге выберите «Call function» (вызвать функцию).

c2-levels18.jpg


На последнем шаге задайте имя вызываемой функции.

c2-levels19.jpg


На странице событий должно получиться так.

c2-levels20.jpg


Проверьте работу макета, выполнив его.

Теперь, чтобы ничего не мешало для изменения будущих уровней, уберём объекты «RedLight» и «BlueLight» на макет «Empty» (вырежьте их с макета «Level1» и вставьте в макет «Empty» в любое место). После этого для события «On start layout» добавьте создание этих объектов так, чтобы координаты объекта «Red» совпадали с координатами объекта «RedLight» и аналогично для объектов «Blue» и «BlueLight».

c2-levels7.jpg


Выполните макет «Level1» и удостоверьтесь, что кружочки пульсируют светом.

Теперь давайте сделаем, чтобы при альбомной ориентации экрана фоновая картинка не растягивалась шире игрового пространства. Т.е. будем растягивать её только по вертикали. Чтобы это сделать на макете «Level1» щёлкните по фоновой картинке «Background» и для поведения «Anchor» выставьте свойствам «Left edge» и «Right edge» значение «None».

c2-levels42.jpg


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

c2-levels31.jpg


Чтобы теперь закрасить белый фон чёрным цветом, для события «On start layout» добавьте системное действие «Set layer background color» и установите чёрный цвет.

c2-levels32.jpg


c2-levels33.jpg


Перетащите это действие в самое начало. В результате действие в событии должно выглядеть так:

c2-levels34.jpg


Теперь после запуска мы увидим чёрный фон слева и справа.

c2-levels35.jpg


Также нужно предусмотреть, что у нас игра рассчитана на пропорции экрана 16:9, а на iPad пропорции экрана 4:3 и в портретной ориентации в полноэкранном режиме на этом планшете в игре будут появляться наши чёрные поля. Чтобы этого не было можно растянуть картинку по ширине до пропорции 4:3. Подсчитать новую ширину картинки можно так: 1920 * 3 / 4 = 1440. Этот метод работает хорошо, но тогда на экранах с пропорцией 16:9 будет обрезаться картинка и в нашем случае обрежется постепенное затемнение к краям. Это будет выглядеть так:

c2-levels36.jpg


Если у вас фон, который можно подрезать, то можно сделать так, как здесь описано, но мы пойдём более сложным путём, зато сохраним края фоновой картинки. Будем корректировать ширину картинки по изменению размера окна. Событие об изменении размера окна посылает объект «Browser». Добавьте его на макет.

c2-levels37.jpg


После этого на странице событий добавьте событие «On resized» объекта «Browser».

c2-levels38.jpg


После этого для события добавьте действие «Set width» нашего объекта «Background».

c2-levels39.jpg


И будем вычислять конечную ширину по следующей формуле: min(ViewportRight(0) - ViewportLeft(0), 1440).

c2-levels40.jpg


Теперь ширина фоновой картинки будет подгоняться под ширину макета, но не более 1440. Аналогично нужно сделать и по событию «On start of layout», т.к. при старте событие «On resized» не срабатывает. Просто скопируйте в это событие новое действие. Проверим, как теперь выглядит игра для пропорции 16:9. Как видим всё прекрасно, края картинки не обрезаются.

c2-levels41.jpg


Есть ещё один неприятный момент в событии «On resized». Когда при обработке события мы получаем размеры макета, то иногда возвращаются размеры до изменения, а иногда – размеры после изменения. Чтобы точно получить установленные размеры макета, нужно немного подождать с помощью действия «Wait», например, 1 секунду, и только потом выставлять размер фоновой картинки. Так и сделаем. В итоге должно получиться так:

c2-levels43.jpg


Ну вот, всё и готово для добавления второго уровня. В начале, добавим макет для второго уровня. Для этого щёлкните правой кнопкой мышки по макету «Level1» на панели свойств и в меню выберите «Duplicate».

c2-levels1.jpg


Там же сразу после добавления укажите имя для нового макета «Level2».

c2-levels2.jpg


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

c2-levels8.jpg


Когда у нас есть два уровня, можно сделать переходы между уровнями. Чтобы это сделать поменяем действие «Go to», которое происходит по событию «On collision with». Щёлкните по нему дважды, чтобы вызвать диалог изменения действия. Как видите, здесь сейчас указан переход на уровень 1.

c2-levels21.jpg


Нажмите «Back». Так мы вернёмся на этап выбора действия. Выберите здесь действие «Go to layout (by name)» (переход к макету по имени) и нажмите «Next».

c2-levels22.jpg


Здесь нам нужно вычислить имя следующего уровня. Для этого в имени макета (у нас это «Level1», «Level2», …) нужно взять число стоящие справа от слова «Level» и прибавить 1. Так и сделаем.

c2-levels23.jpg


Здесь, функция right возвращает указанное количество символов в строке, находящиеся справа, функция len возвращает количество символов в строке, а функция int преобразует строку в число, чтобы можно было прибавить 1.

Запустим теперь макет «Level1», уберём верхний чёрный блок, чтобы кружочки столкнулись и через 3 секунды после этого появится 2-й уровень. Всё работает.

Точно так же измените действие «Go to layout» для функции «EndOfLevel», но имя макета менять не нужно. Оно должно остаться таким же.

c2-levels28.jpg


Теперь сделаем плавное затемнение и осветление между уровнями, чтобы не было скачков при смене уровней. Для этого нам понадобится чёрный прямоугольный объект. Клонируем объект «BlackBlock». Для этого щёлкните правой кнопкой мышки по этому объекту на панели «Projects» и выберите пункт меню «Clone».

c2-levels24.jpg


После этого на этой же панели или на панели свойств поменяйте имя на «CoverFadeOut». Затем добавьте этот объект на макет «Empty» (перетащите) и растяните на весь макет и поместите его под все объекты (меню «Z Order -> Send to bottom of layer»). Кстати, чтобы не было никаких миганий в дальнейшем ширину объекта «CoverFadeOut» сразу сделайте равной максимальной ширине фоновой картинки 1440. Затем уберите у этого объекта поведение «Physics» и добавьте поведения «Fade» и «Anchor». Выставьте свойствам поведений следующие значения.

c2-levels25.jpg


Теперь в событие «On start of layout» добавьте действие для объекта «System» действие «Create object» и укажите объект для создания «CoverFadeOut». Координаты выставим по центру макета.

c2-levels26.jpg


Запустите макет «Level1» или «Level2» и убедитесь, что при запуске окно макета чёрное и за секунду проявляется уровень.

Теперь сделаем затемнение после прохождения уровня. Для этого клонируйте объект «CoverFadeOut» и новый объект назовите «CoverFadeIn». Так же создайте экземпляр нового объекта на макете «Empty», растяните его на весь макет (ширина так же 1440). Установите свойствам «Right edge» и «Bottom edge» значения «Window right» и «Window bottom» соответственно. Затем для нового объекта свойства поведения «Fade» поменяйте так, как показано на рисунке.

c2-levels27.jpg


Теперь для события «On collision with» добавьте действие объекта «System» «Create object» и выберите объект «CoverFadeIn» и так же задайте координаты, как и для объекта «CoverFadeIn».

Чтобы сначала сработало затемнение, а затем произошел переход к следующему уровню, переместите наше новое действие над действием «Go to layout» и добавьте сюда же действие «Wait» на 1 секунду. Вот что должно получиться.

c2-levels29.jpg


То же самое сделайте для функции «EndOfLevel».

c2-levels30.jpg


Теперь добавим ещё один уровень. Так же клонируем макет «Level1», даём новому макету имя «Level3» и переставляем объекты, так, чтобы уровень был чуть сложнее.




Скрытое содержимое доступно для зарегистрированных пользователей!


by robricksan
 

robricksan

Проявляет активность
Местный
Регистрация
16.02.20
Сообщения
60
Реакции
38
Баллы
105
FTC
30¢
В первых трех статьях вы узнали, как создать проект, оформить уровни и сделать переходы между уровнями. В этой четвёртой статье мы сделаем меню игры, сделаем сохранение прохождения игры и добавим новый уровень.

Создание меню игры
Сначала добавим макет для меню. При добавлении макета выберите создание новой страницы событий, см. картинку.

c2-menu1.jpg


Макет для меню назовите «Menu», а страницу событий для меню назовите «MenuEvents».

c2-menu2.jpg


Выставьте такие же размеры для макета (1080 x 1920) и свойству «Unbounded scrolling» установите значение «Yes».

В свойствах проекта сразу установите первый макет, который по умолчанию будет стартовать. У нас – это макет «Menu».

c2-menu77.jpg


Для меню я буду использовать другую фоновую картинку, поэтому на новый макет добавьте спрайт с именем «MenuBackground» и загрузите фоновую картинку (которую я заранее нарисовал). Как это сделать было описано во второй статье. Моя картинка имеет те же размеры, что и макет, поэтому её достаточно отцентрировать, чтобы она закрыла всё пространство макета. После центрирования, нужно на страницу событий «MenuEvents» добавить обработчик события «On resized» объекта «Browser», по которому нужно подровнять ширину фоновой картинки (как это описано в третьей статье). В результате у вас должна получиться обработка события, как показано на картинке.

На самом деле вы можете просто скопировать всю обработку события со страницы «Event sheet 1», вставить всё на страницу «MenuEvents», а затем просто поменять объект с которым вы производите действия. Для этого щёлкните правой кнопкой мышки по действию и выберите пункт меню «Replace object».

c2-menu3.jpg


После этого выберите другой объект, с которым нужно произвести действие. В нашем случае – это спрайт «MenuBackground».

c2-menu4.jpg


После смены вы увидите, что по событию «On resized» будет изменяться размер объекта «MenuBackground».

c2-menu5.jpg


Также, нужно сделать фон чёрным, сделать плавное появление меню и подровнять фоновую картинку, как это было описано в третьей статье. Для этого на странице «MenuEvents» добавьте несколько действий по событию «On start layout», см. картинку.

c2-menu6.jpg


Теперь на страницу меню добавим карту уровней. По карте уровней игрок будет видеть, сколько всего в игре уровней и какие из них доступны для прохождения. Для начала добавьте на макет новый объект «Sprite» (пункт контекстного меню «Insert new object»), который назовите «Level».

c2-menu7.jpg


Увеличьте размер картинки до 500x500.

c2-menu8.jpg


Задайте размер для кисти 299, жесткость 20, цвет белый и один раз щёлкните примерно посередине.

c2-menu9.jpg


После этого обрежьте картинку (кнопка «Crop transparent edges»).

c2-menu10.jpg


И отцентрируйте исходную точку.

c2-menu11.jpg


Пройденные уровни будем отображать белыми кругами с сине-красным свечением по краям, непройденный, но доступный для прохождения уровень – белым кругом с белым свечением вокруг, все остальные уровни будут чёрными кругами с чёрным свечением вокруг. Чтобы в будущем менять картинку обозначающую уровень, будем использовать три кадра анимации. Тогда нам просто нужно будет отображать один из трёх кадров, в зависимости от состояния уровня. Для начала добавим в наш объект «Level» ещё два кадра анимации. Для этого щёлкните по пустому пространству окошка «Animation frames» правой кнопкой мышки и выберите пункт «Add frame».

c2-menu12.jpg


Теперь точно также как мы сделали белую картинку, сделайте чёрную картинку: увеличьте картинку кадра до размера 500x500, нарисуйте точку чёрной кистью диаметром 299 и жёсткостью 20, обрежьте картинку и центрируйте исходную точку. В результате у нас получилось два кадра. Один кадр с белой картинкой, второй кадр – с чёрной.

c2-menu13.jpg


Теперь добавьте ещё один кадр, в котором будет картинка, обозначающая пройденные уровни. Здесь я воспользовался сторонним графическим редактором, чтобы нарисовать красно-синее свечение. Я сохранил белую картинку (кнопка «Save the image to a file»), подрисовал цветное свечение и загрузил картинку в новый кадр (с помощью кнопки «Load an image from a file»). После того как все кадры будут готовы и исходные точки отцентрированы выставьте кадры в следующем порядке, как показано на картинке, см. окно «Animation frames».

c2-menu72.jpg


Запустите макет и посмотрите, что получилось. После запуска мы видим чёрную картинку, потому, что анимация отработала и остановилась на последнем кадре. Это нормально.

c2-menu14.jpg


Теперь добавьте столько картинок-уровней, сколько уровней в игре. У нас пока три уровня, поэтому всего будет три картинки. Чтобы добавить уровни можно просто нажать клавишу Ctrl и, не отпуская её, схватить картинку мышкой, перетащить её и отпустить. После этого создастся копия.

c2-menu73.jpg


Теперь, чтобы как-то отличать картинки-уровни друг от друга добавим в объект «Level» переменную «Num», в которой будем хранить номер уровня, который обозначает картинка. Переменные в объекты в Construct 2 добавляются так, щёлкните по нужному объекту на панели «Projects» (или по его экземпляру на макете) и на панели свойств «Properties» щёлкните по ссылке «Instance variables». В окне «Level: Instance variables» щёлкните по плюсику, в окне «New instance variable» задайте имя переменной в поле «Name» и тип в поле «Type». В нашем случае номер уровня - это число, поэтому выбираем тип «Number». Вообще переменные в Construct 2 могут быть логического (Boolean), числового (Number) и строкового типа (Text). Значение по умолчанию (поле «Initial value») и описание (поле «Description») менять не будем. Нажмите кнопку «OK».

c2-menu74.jpg


После добавления переменной она появится прямо на панели свойств «Properties».

c2-menu17.jpg


Теперь для каждой картинки, обозначающей уровень, можно задать номер. По очереди выделите каждый экземпляр объекта «Level» на макете «Menu» и на панели «Properties» задайте номера 1, 2 и 3. После этого мы сможем отличать наши экземпляры.

c2-menu75.jpg


Теперь добавим в проект глобальную переменную «OpenLevels», в которой будем хранить количество открытых для прохождения уровней. Глобальную переменную в проекте Construct 2 можно добавить на любой странице событий. Для того чтобы это сделать, откройте страницу событий «MenuEvents», щёлкните правой кнопкой мышки на пустом пространстве страницы и в контекстном меню выберите пункт меню «Add global variable».

c2-menu19.jpg


В появившемся диалоге «New global variable» укажите имя переменной в поле «Name», тип «Number» в поле «Type» и значение по умолчанию 1 в поле «Initial value».

c2-menu20.jpg


Когда всё указано, нажмите кнопку «OK». После этого переменная появится на странице событий, см. картинку.

c2-menu21.jpg


Теперь при старте макета по событию «On start layout» нужно показать белыми с красно-синим свечением столько уровней, сколько хранится в переменной «OpenLevels» минус 1. Белым нужно показать уровень, номер которого соответствует значению переменной «OpenLevels». Все остальные уровни должны отображаться чёрными. Чтобы это сделать, нужно в цикле сравнить значение переменной «Num» каждого экземпляра объекта «Level» со значением глобальной переменной «OpenLevels». И если значение переменной «Num» меньше значения переменной «OpenLevels», то уровень должен выглядеть сине-красным, если равно значению «OpenLevels», то белым, иначе – чёрным.

Итак, приступим. Чтобы сделать цикл, щёлкните правой кнопкой мышки по пространству слева от события «On start layout» и в контекстном меню щёлкните по пункту «Add -> Add sub-event» (да-да не удивляйтесь, цикл в Construct 2 – это событие).

c2-menu22.jpg


В поднявшемся диалоге «Add event» выберите «System» и нажмите «Next».

c2-menu23.jpg


На следующем шаге выберите событие «For Each» (это событие произойдёт для всех экземпляров указанного объекта). Нажмите «Next».

c2-menu24.jpg


В диалоге «Parameters for System: For Each» выберите объект «Level», ведь у всех экземпляров этого объекта нам нужно проверять переменную «Num». Нажмите «Done».

c2-menu25.jpg


Теперь внутрь этого события нужно добавить событие сравнения переменных. Для этого щёлкните по области слева от нашего нового события «For Each» и опять выберите пункт меню «Add -> Add sub-event».

c2-menu26.jpg


В появившемся диалоге опять выберите «System» и нажмите «Next». На следующем шаге выберите событие «Compare variable» (сравнить переменную) и нажмите «Next».

c2-menu27.jpg


В следующем диалоге «Parameters for System: Compare variable» укажите переменную, значение которой нужно проверить в поле «Variable», в нашем случае это переменная «OpenLevels». Также в поле «Comparison» (сравнение) укажите, как сравнивать, в нашем случае – это «> Greater then» (больше чем). В поле «Value» нужно указать, с чем сравнивается переменная. В нашем случае сравнение производится с переменной «Num» экземпляра объекта «Level», поэтому здесь мы пишем так: Level.Num.

Кстати, можно воспользоваться полупрозрачным окошком помощи «Objects with expressions» для поиска нужного объекта и свойства (на картинке у окошка в заголовке написано «'Level' expressions»). Т.е. сначала ищите нужный объект в этом окошке, дважды щёлкаете по нему, затем ищите нужное свойство выбранного объекта или переменную и также дважды щёлкаете для выбора.

c2-menu28.jpg


Нажмите «Done», чтобы подтвердить ввод и закрыть окно.

Теперь нужно добавить обработку событий. Для каждого экземпляра объекта «Level», независимо от значения переменной «Num» нужно остановить анимацию. Поэтому сначала добавляем действие для события «For each». Для этого щёлкните по ссылке «Add action» справа от события.

c2-menu33.jpg


В появившемся диалоге «Add action» выберите объект «Level» и нажмите «Next».

c2-menu30.jpg


На следующем шаге выберите действие «Stop» в категории «Animations», чтобы остановить анимацию, и нажмите «Done».

c2-menu31.jpg


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

c2-menu29.jpg


В диалоге «Add action» также выберите объект «Level» и на следующем шаге выберите действие «Set frame» (установка кадра анимации). После этого в последнем диалоге «Parameters for Level: Set frame» задайте номер кадра в поле «Frame number». В нашем случае, нужно отобразить белый кружок с красно-синим свечением, это будет кадр 0.

c2-menu32.jpg


Аналогично добавьте условия для двух оставшихся кадров 2 и 3. У вас должно получиться следующее:

c2-menu76.jpg


Запустите макет и проверьте, как отображаются уровни. Как видите первый уровень белый (т.е. он непройденный, но открытый для прохождения), а остальные два уровня – чёрные. Подкраска уровней получилась, всё в порядке.

c2-menu36.jpg


Теперь, чтобы пользователю был виден путь от уровня к уровню, нужно соединить уровни линиями. Линии тоже нарисуем сами. Добавьте объект «Sprite» с названием «LevelLine». Выставьте толщину кисти 18, жесткость – 0, цвет – белый и точками обозначьте линию. Т.е. линия получилась состоящая из светящихся точек. Чтобы результат был виден лучше можно сделать фон редактора тёмным. Для этого нажмите на кнопку «Toggle background brightness» (на картинке кнопка обведена красным). После этого обрежьте картинку с помощью кнопки «Crop transparent edges». После обрезки не забудьте центрировать исходную точку.

c2-menu37.jpg


Полученную картинку растяните и поверните так, чтобы наши линии шли из центра уровней и соединяли их по порядку, см. картинку. Также сразу сделайте, чтобы линии были под уровнями с помощью окошка «Z order» или используя пункты контекстного меню «Z Order -> Send to top of layer» и «Z Order -> Send to bottom of layer».

c2-menu38.jpg


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

c2-menu39.jpg


Для красоты добавим немного эффектов. Выделите все уровни (чтобы задать им одинаковые свойства), на панели свойств щёлкните по ссылке «Behaviors», в окне «Level: Behaviors» добавьте два поведения «Sine». Свойства поведений выставьте, как показано на рисунке. Хотя вы можете поставить и свои значения, здесь дело вкуса. Здесь первое поведение будет плавно менять размер картинки, а второе поведение вращать её.

c2-menu40.jpg


Теперь выделите обе линии и аналогичным образом добавьте сразу три поведения «Sine». Первое поведение будет менять угол, второе чуть двигать линию и третье менять длину линии. Все вместе эти эффекты будут создавать иллюзию движения. Какие значения для поведений я выставил, можно посмотреть в примере.

Теперь нужно обработать прикосновение к уровню. Т.е. когда пользователь касается определённого уровня его нужно открыть. Чтобы это сделать, откройте страницу событий и добавьте событие «On tap object» объекта «Touch». В окне «Pick an object» выберите объект «Level».

Далее для этого события нужно добавить затемнение и переход к уровню. Для этого скопируйте действия «Create object» и «Wait» со страницы событий «Event sheet 1» (там мы это уже делали) и вставьте в наше событие. Затем добавьте сюда действие «Go to layout (by name)» и в качестве имени задайте "Level" & Level.Num. Здесь мы к строке «Level» в конец добавляем цифру, взятую из переменной Num уровня, на который тапнул пользователь.

c2-menu41.jpg


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

c2-menu42.jpg


Запустите и проверьте, как работает выбор уровня. Вы сразу заметите, что нажимать можно как на белые, так и на чёрные уровни. Нас это не устраивает. Проходить на чёрные уровни пользователь не должен. Поэтому сюда нужно добавить ещё одно событие – проверку, по которому мы сравним значение глобальной переменной «OpenLevels» и переменной уровня «Num». Если значение переменной «OpenLevels» больше или равно значению «Num», то уровень пройти можно. Для того чтобы это сделать, добавьте вложенное событие (контекстное меню «Add -> Add sub-event») «Compare variable» объекта «System», см. картинку.

c2-menu43.jpg


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

c2-menu44.jpg


Проверьте, как работает условие: запустите макет и удостоверьтесь, что при касании белого уровня, происходит переход к этому уровню, а при касании чёрного – ничего не происходит.

Кнопка возврата в меню из уровня игры
Теперь сделаем кнопку возврата в меню из уровня. Для начала её нужно нарисовать. Я добавил объект «Sprite» с именем «BackToMenu» на макет «Level1» и, воспользовавшись той же кистью, что и для рисования линий уровня в меню, нарисовал значок, обозначающий меню.

c2-menu45.jpg


Затем этот значок я поставил на всех макетах с уровнями и сделал для всех значков одинаковые координаты. Получилось вот так:

c2-menu46.jpg


Затем, чтобы значок меню всегда была на краешке фоновой картинки нужно в тех местах, где мы корректируем ширину фоновой картинки, подкорректировать и координату стрелки. Это происходит в событиях «On resized» и «On start layout». Координату X будем вычислять по следующей формуле Background.X - min(ViewportRight(0) - ViewportLeft(0), 1440) / 2 + 90, а координату Y по следующей ViewportTop(0) + 70. А чтобы значок при изменении размера окна браузера двигался совсем синхронно с фоновой картинкой, нужно добавить для значка поведение «Anchor» и привязать его только к верхнему краю.

c2-menu55.jpg


Когда пользователь будет прикасаться к значку, мы будем возвращать его в меню. Чтобы это сделать на страницу событий «Event sheet 1» добавьте событие «On tap object» объекта «Touch», как мы это уже делали выше, только здесь будем отслеживать прикосновения к объекту «BackToMenu». Для обработки события добавьте действия для затемнения (скопируйте их из события «On "EndOfLevel"»), затем добавьте действие «Go to layout» и в диалоге выбора макета выберите макет «Menu». У вас должно получиться так же как на картинке.

c2-menu47.jpg


Сохранение прохождения в игре
Теперь наступило время сделать сохранение прохождения игры, чтобы между запусками игры вы не теряли прогресс, который достигли. Для начала сделаем корректировку значения переменной «OpenLevels» при успешном прохождении уровня. Добавьте действие «Set value» объекта «System» в событие «On collision with». В диалоге «Parameters for System: Set value» удостоверьтесь, что выбрана переменная «OpenLevels» и впишите следующее выражение max(OpenLevels, int(right(LayoutName, len(LayoutName) - 5)) + 1).

c2-menu71.jpg


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

c2-menu49.jpg


В Construct 2 есть два варианта сохранения прохождения игры. Первый способ – это вызов действий «Save» (собственно, сохранение) и «Load» (последующая загрузка). Оба эти действия вы сможете найти у объекта «System». Работает это следующим образом: при вызове действия «Save», полностью сохраняются координаты и состояния объектов, текущий макет, значения переменных. Позже при вызове действия «Load» вы увидите на экране тот самый макет и все те объекты в тех же местах, в каких они находились при сохранении. Чтобы как то управлять таким процессом сохранения в Construct 2 есть поведение «No Save» (запрещает сохранение объекта) и события «On load complete» (вызывается после успешной загрузки сохранения), «On load failed» (вызывается, если загрузка не удалась, например, сохранения нет), «On save complete» (вызывается после успешного сохранения). В нашем случае такое сохранение не подходит, т.к. нам нужно сохранять только значение переменной «OpenLevels».

Второй способ – использование объекта «WebStorage» (веб-хранилище). С помощью этого объекта можно сохранять только строки. Модель сохранения очень проста – каждая строка сохраняется под именованным ключом. Для хранения можно выбирать либо локальное хранилище, либо сессионное хранилище. Локальное хранилище постоянно (помните, что в браузере пользователь может очистить кэш). Если пользователь вернулся в игру на следующий день, то локальное хранилище продолжает хранить сохранённые данные. Сессионное хранилище хранит данные только для текущей сессии браузера и, когда пользователь вернётся в игру на следующий день, хранилище будет пустым. Следует также помнить, что в браузере в режиме инкогнито локальное хранилище будет работать как сессионное.

Также при работе с объектом «WebStorage» нужно помнить, что браузеры ограничивают максимальный размер сохраняемых данных. В общем случае – это 5 МБ. Если вы превысили размер хранилища, вы получите сообщение «On quota exceeded» (квота превышена) от объекта «WebStorage».

В нашем случае для сохранения игры подходит локальное хранилище объекта «WebStorage». Добавим этот объект в проект. Щёлкните по любому макету правой кнопкой мышки и выберите пункт контекстного меню «Insert new object». Затем выберите в диалоге объект «WebStorage» и нажмите «Insert».

c2-menu56.jpg


Теперь на странице событий «Event sheet 1» добавьте в событие «On collision with» действие «Set local value» объекта «WebStorage».

c2-menu57.jpg


В диалоге «Parameters for WebStorage: Set local value» введите имя ключа «OpenLevels» (пусть имя ключа совпадает с именем переменной) и значение (в нашем случае –значение берётся из переменной).

c2-menu58.jpg


После того как действие будет добавлено, перетащите его наверх, сразу под строку, в которой корректируется значение переменной «OpenLevels», см. картинку.

c2-menu59.jpg


А при старте меню нужно загрузить из хранилища значение для переменной «OpenLevels», если это значение сохранено. Для проверки, есть ли сохранённая строка с ключом «OpenLevels», добавьте в событие «On start layout» вложенное событие «Local key exists» объекта «WebStorage» на странице событий «MenuEvents» (добавление вложенного события – это пункт контекстного меню «Add -> Add sub-event»).

c2-menu60.jpg


В диалоге «Parameters for WebStorage: Local key exists» задайте имя ключа в котором у нас хранится количество открытых уровней - «OpenLevels».

c2-menu61.jpg


Добавленное событие обязательно перетащите наверх, чтобы оно находилось до цикла, в котором подкрашиваются уровни, см. картинку. Это важно, т.к. сначала должно считаться значение переменной «OpenLevels» и только потом, можно подкрашивать уровни сине-красным, белым или чёрным.

c2-menu62.jpg


Теперь можно добавить действие для чтения из хранилища. Итак, внутрь нового события, добавьте действие «Set value» объекта «System».

c2-menu63.jpg


В следующем диалоге выберите переменную и выражение устанавливающее значение. В нашем случае это WebStorage.LocalValue("OpenLevels"). Чтобы ввести это выражение можно воспользоваться полупрозрачным окошком подсказок, на картинке оно сверху.

c2-menu64.jpg


А вот, что у вас должно получиться:

c2-menu65.jpg


Теперь можете проверить, как работает хранилище. Запустите макет «Menu», выберите первый уровень, пройдите его, после этого вернитесь в меню и вы увидите, что первый уровень стал сине-красным (пройденный уровень), второй уровень – белым (не пройденный, но открытый), а третий уровень - чёрный. Можете закрыть браузер и запустить макет «Menu» опять и, после того как браузер откроется, вы увидите, что уровни опять подсвечиваются так же. Это значит, что веб-хранилище работает и информация об открытых уровнях сохраняется.

c2-menu67.jpg


Чтобы теперь очистить хранилище в браузере Chrome нужно перейти в настройки браузера, щёлкнуть по ссылке «Показать дополнительные настройки», нажать на кнопку «Очистить историю...», затем, в поднявшемся диалоге, установить галку «Файлы cookie и другие данные для сайтов и плагинов» и нажать кнопку «Очистить историю» (см. картинку). Также при очистке учитывайте период, за который вы очищаете сохранения (на картинке – это прошедший час).

c2-menu66.jpg


Аналогично почистить хранилище можно и в других браузерах. В Construct 2 для чистки хранилища можно выполнить действие «Clear local storage» объекта «WebStorage».

Убираем подтормаживания при завершении уровня
При тестировании игры я заметил, что при шариков взрыв происходит не сразу, а через какое то время. Чтобы разобраться, в чём причина задержек нужно посмотреть, что происходит в событии «On collision with». Здесь происходит изменение переменной «OpenLevels», запись её значения в хранилище. Эти действия вызывают задержку. И только затем создаётся объект «Particles», который создаёт эффект взрыва. Затем создаются объекты «Light» и «ResultText» и начинается их плавное появление. Это тоже вызывает задержки.

Чтобы взрыву шариков ничего не мешало, перенесём действия создания объекта «Particles» и удаление шариков в самый верх и после этого подождём секунду (добавим действие «Wait») пока закончится взрыв. Вот, что получилось после оптимизации.

c2-optim1.jpg


Теперь взрыв происходит сразу после столкновения шариков. Аналогично сделаем и при вылете шариков за границы макета в функции «EndOfLevel».

c2-optim2.jpg


Прохождение последнего уровня
Осталась ещё небольшая нерешённая проблема. После прохождения последнего уровня ничего не происходит. Сделаем так, чтобы происходил возврат в меню. Чтобы определить какой уровень является последним, нужно узнать сколько всего уровней у нас в игре. Конечно, можно добавить константу с количеством уровней, но так придётся всё время поправлять её значение после добавления новых уровней. Сделаем лучше подсчёт количества уровней при старте макета «Menu», а подсчитанное количество запишем в новую глобальную переменную «LevelCount». Для подсчёта можно воспользоваться уже имеющимся циклом. Вот, что у меня получилось:

c2-menu68.jpg


Запустив макет «Menu» в режиме отладки вы можете увидеть, что количество уровней посчиталось правильно.

c2-menu69.jpg


Теперь на странице событий «Event sheet 1» в событии «On collision with Blue» нужно добавить вложенное событие с проверкой номера текущего уровня и, если текущий уровень последний, то перейти в меню. Для сравнения двух значений будем использовать событие «Compare two values» (сравнить два значения). Сравнивать будем цифру из названия макета и значение переменной «LevelCount». Вот, что должно получиться.

c2-menu70.jpg


И напоследок я добавил в пример ещё один уровень. Теперь, чтобы добавить уровень нужно не только скопировать макет уровня, но и отобразить уровень в меню.




Скрытое содержимое доступно для зарегистрированных пользователей!


by robricksan
 

robricksan

Проявляет активность
Местный
Регистрация
16.02.20
Сообщения
60
Реакции
38
Баллы
105
FTC
30¢
В первых четырёх статьях вы узнали, как создать проект, оформить уровни, сделать меню, сохранить прохождение. Но сейчас наша игра лишена звука. В этой пятой статье мы добавим в игру звуковые эффекты и фоновую музыку.

Поиск или создание звуков и музыки для игры
Раздел удален по причине рекламы других сайтов (решение автора)

Можно искать на разных сайтах, группах с запросом по-типу "Free Beats", "Type Beats" и т.д.
Но можно и делать самому, у меня кстати есть статья как делать музыку! Можете тоже прочитать ;)

Основы создания рэп минуса в Fl Studio.


Использование музыки и звуков в Construct 2
Поскольку производители браузеров не могут договориться о едином аудио формате, который должен использоваться в Интернете, все используемые звуки и музыка перед публикацией игры будут экспортированы в файлы двух форматов: Ogg Vorbis (.ogg) и MPEG-4 AAC (.m4a).

Прежде чем использовать звуки или музыку в проекте, аудио файлы нужно импортировать. Рекомендуется импортировать файлы форматов .wav, .flac, .ogg или .m4a, остальные форматы Construct 2 может просто не суметь конвертировать. Для импорта щёлкните правой кнопкой по папке «Sounds» или «Music» правой кнопкой мышки и выберите, соответственно, пункт меню «Import sounds» или «Import music». В качестве фоновой музыки я решил использовать три мелодии из пакета HalcyonicFalconX в формате .mp3, взятые с сайта. Я подсунул файлы конвертеру и получил предупреждения, говорящее о том, что MP3-файлы не могут быть конвертированы в OGG.

r-n-b-s-01.png


Поскольку у меня есть только файлы формата MP3, я воспользовался редактором аудиофайлов Audacity, чтобы преобразовать их в подходящий формат. И после повторной попытки предупреждения исчезли. Выберите здесь качество аудиофайла (я оставил 98 kbps) и нажмите на кнопку «Import».

r-n-b-s-02.png


После импорта вы увидите сообщение о результатах. У меня всё импортировалось успешно. Нажмите «ОК».

r-n-b-s-03.png


После этого посмотрите в папку «Music» и вы увидите, что каждый файл конвертировался в пару файлов форматов .ogg и .m4a.

r-n-b-s-04.png


Аналогичным образом импортируются звуки.

Чтобы после этого использовать импортированные звуки и музыку, нужно один раз добавить в проект объект «Audio». Для этого щёлкните по любому макету правой кнопкой мышки и выберите пункт меню «Insert new object», затем в диалоговом окне выберите «Audio» и нажмите «Insert».

r-n-b-s-05.png


Добавленный объект «Audio», позволит вам управлять воспроизведением звуков и музыки.

Папки «Sounds» и «Music»
Теперь поговорим о том, зачем нужны две папки «Sounds» и «Music». Звуки из папки «Sounds» полностью загружаются до начала проигрывания, а файлы из папки «Music» воспроизводятся в потоке. Это значит, что если вы поместите музыку в папку «Sounds», то прежде чем она начнёт играть может пройти несколько минут, пока она не загрузится. А если вы поместите музыку в папку «Music», то музыка начнёт воспроизводиться почти сразу без ожидания полной загрузки файла.

Кроме того на загрузку аудиофайлов папки «Sounds» влияет свойство проекта «Preload sounds». Если это свойство установлен в «Yes», то звуки будут загружены до запуска игры, пока отображается индикатор загрузки. В этом случае вы можете быть уверены, что во время игры звуки будут запускаться молниеносно без задержек. Если же свойство выставлено в «No», то игра стартует быстрее, ведь звуки загружать не нужно, но аудиофайлы будут загружаться по требованию во время игры. Другими словами, аудиофайл не будет загружен, пока вы не выполните действие Play. Если же вам нужно загрузить часть аудиофайлов сразу, вы можете вызвать действие «Preload» объекта «Audio», например, при старте макета, причём действие «Preload» умеет загружать не только аудиофайлы папки «Sounds», но аудиофайлы папки «Music».

Аудио метки
Во время проигрывания звуков вы конечно захотите менять некоторые параметры воспроизведения, например, громкость. Но одновременно в игре могут воспроизводиться сразу несколько звуков. Для того чтобы воздействовать только на определённые звуки или группы звуков используются метки. Метка – это произвольная строка идентифицирующая звук или группу звуков. Например, звукам оружия игрока присваивается метка «PlayerWeapon», а звукам оружия врагов - метка «EnemyWeapon». После этого вы сможете изменить громкость одной из групп звуков, используя метку. Метки не чувствительны к регистру.

Если в действиях со звуками в качестве метки используется пустая строка (""), то такие действия влияют только на последний воспроизведённый звуковой файл. Это удобно для установки громкости и других параметров воспроизведения только что запущенного аудио файла.

Добавляем фоновую музыку в меню игры
Чтобы запустить фоновую музыку после появления меню на экране, добавьте в событие «On start of layout» на странице событий меню действие «Play» объекта «Audio».

r-n-b-s-06.png


В окне настроек звука выберите нужный аудио файл в поле «Audio file», нужно ли зациклить воспроизведение в поле «Loop» (я пока выбрал «not looping», т.е. не зацикливать), громкость в поле «Volume» (здесь 0 означает максимальную громкость, а числа меньше нуля – насколько децибел нужно уменьшить звук, я пока оставил 0), название ярлыка для звука в поле «Tag» (я пока задам «menu»). Когда всё настроено, нажмите «Done».

r-n-b-s-07.png


Вот что должно у вас получиться.

r-n-b-s-08.png


Запустите игру и удостоверьтесь, что после появления меню на экране, сразу начинает играть музыка. Причём, когда вы переходите на уровень, музыка продолжает играть. Это нас не устраивает. Нам нужно, чтобы при выходе из меню музыка останавливалась, ведь для уровней мы будем использовать другую музыку. Чтобы остановить музыку есть действие «Stop» объекта «Audio». Добавим его в событие «On tap gesture on Level» для тэга «menu» и вот что у вас должно получиться.

r-n-b-s-09.png


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

Итак, после того как пользователь выбрал уровень будем по таймеру понижать громкость, пока меню не исчезнет полностью. После этого будем останавливать музыку. Для того чтобы это сделать, добавьте системное событие «Every X seconds».

r-n-b-s-10.png


При добавлении задайте интервал в 0.1 секунду.

r-n-b-s-11.png


В это событие добавьте действие «Set volume» объекта «Audio».

r-n-b-s-12.png


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

r-n-b-s-13.png


Теперь, чтобы звук начинал затухать только когда идёт затемнение меню, нам нужно добавить к событию «Every X seconds» проверку, а есть ли на экране объект «CoverFadeIn», который как раз и делает исчезновение меню. Для проверки, добавим условие «Is on layer».

r-n-b-s-14.png


В следующем диалоге выбираем слой.

r-n-b-s-15.png


В итоге у вас должно получиться так:

r-n-b-s-16.png


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

Теперь давайте справимся ещё с одной проблемой. Когда музыкальный трек проиграл до конца, наступает тишина. Поскольку воспроизведение у нас не закольцованное, то после некоторой паузы будем снова запускать воспроизведение. Для этого добавим на страницу событий «MenuEvents» событие «On ended» объекта «Audio».

r-n-b-s-17.png


В следующем окне укажем метку «menu».

r-n-b-s-18.png


Теперь при получении события о завершении трека, нам нужно сделать небольшую паузу, например, 10 секунд и запустить трек опять. Добавим действия «Wait» и «Play», чтобы получилось вот так:

r-n-b-s-19.png


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

Ещё при выборе уровня нужно воспроизвести короткий звук, обозначающий переход на уровень. Для этого я импортировал в проект в папку «Sounds» заранее подготовленный файл «StartLevel.wav» и добавил действие «Play» объекта «Audio» перед тем как меню начнёт затемняться. Получилось вот так:

r-n-b-s-20.png


Теперь при выборе уровня пользователем, проиграет звук «StartLevel.wav», фоновая музыка затухнет и произойдёт переход к уровню.

Добавляем фоновую музыку в уровни
Для фона уровней будем использовать два трека по очереди. Метка у звуков будет «level». При переходе между уровнями музыку останавливать не будем. Также будем запоминать, какой в настоящий момент аудио файл проигрывается, чтобы при следующем запуске игры, начинать воспроизводить этот же трек. Чтобы сделать всё перечисленной, сначала решим, что хранить имя текущего аудиофайла будем в веб-хранилище в ключе «LevelMusic».

Итак, при старте уровня по событию «On start of layout» на странице событий «Event sheet 1» будем проверять, проигрывается ли фоновая музыка, т.е. музыка с меткой «level», и, если музыка не проигрывается, то будем запускать воспроизведение. Причём, перед воспроизведением будем проверять, есть ли в хранилище ключ «LevelMusic», и, если есть, то будем по значению для этого ключа определять, какую мелодию нужно воспроизвести. Выглядеть это будет так:

r-n-b-s-21.png


Теперь нужно сделать запуск другого трека, если текущий закончился. Для этого добавляем событие «On ended» объекта «Audio» на страницу событий «Event sheet 1», затем, если это событие происходит, то берём из хранилища имя аудиофайла и воспроизводим следующий файл. Выглядит это вот так:

r-n-b-s-22.png


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

Для столкновений я буду использовать звуки металлофона, взятые с сайта (звуки предоставляются по лицензии Creative Commons Zero). Импортируем семь звуков в папку «Sounds». Имена файлов будут от 1 до 7. Теперь при столкновениях будем воспроизводить один из семи звуков:

r-n-b-s-23.png


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

При исчезновении препятствий будем выводить другой звук, взятый с сайта и нарезанный на 4 звука с помощью Audacity (лицензия та же Creative Commons Zero):

r-n-b-s-24.png


Добавляем регуляторы громкости музыки и звука
Музыка и звуки воспроизводятся у нас в игре прекрасно, но пользователь может быть хочет сделать музыку потише или выключить музыку и звуки полностью. Я решил сделать раздельную регулировку громкости музыки и звуков в меню игры в виде кнопок. При нажатии на кнопки будем менять громкость следующим образом: выключена, -30, -20, -10, 0. Для каждого уровня громкости я нарисовал соответствующую картинку, таким же образом как рисовал кнопку меню. Для каждого режима я сделал один кадр анимации. Объекты я назвал MusicVolumeButton и SoundsVolumeButton.

r-n-b-s-25.png


По событию «On start layout» нужно будет сразу остановить анимацию и выставить кадры, которые должны быть установлены при первом запуске игры на компьютере.

r-n-b-s-30.png


Чтобы хранить текущее состояние громкости я добавил две глобальные переменные MusicVolume и SoundsVolume.

r-n-b-s-26.png


Теперь, сделаем две функции для запуска аудио файлов из папки «Music» и «Sounds». Функции назовём «PlayMusic» и «PlaySounds». Все запуски аудио файлов будем делать через эти функции. В функциях будем проверять текущий уровень громкости и, если он меньше -30, то аудиофайл не будем воспроизводить. На странице «Event sheet 1» функции будут простые.

r-n-b-s-28.png


Если вы обратили внимание, то звук «StartLevel» я сделал тише на 12дб. Так мне показалось лучше.

А вот на странице событий меню «MenuEvents» функция «PlayMusic» будет сложнее. Она будет считывать сохранённые в локальном хранилище номера текущих кадров для картинок MusicVolumeButton и SoundsVolumeButton, если в первом параметре функции значение 1. После считывания номеров кадров она будет устанавливать нужные кадры и вычислять уровень громкости. Описывать переделку вызовов этих функция я описывать не буду. Вы можете посмотреть всё в проекте, скачать который вы можете по ссылке внизу статьи.

r-n-b-s-29.png


Теперь осталось по нажатию на картинки «MusicVolumeButton» и «SoundsVolumeButton» сделать изменение громкости. Этот процесс я здесь тоже не буду описывать подробно, скажу лишь, что здесь я буду циклично менять кадр анимации от 0 до 4-х и затем вызывать функцию ChangeMusicVolume, которая будет менять громкость или выключать звук полностью, в зависимости от уровня громкости. Вот обработка события от нажатия на картинку регулировки громкости музыки «MusicVolumeButton»:

r-n-b-s-31.png


А вот функция «ChangeMusicVolume»:

r-n-b-s-32.png


Аналогично нужно сделать для звуков.

Вот собственно и всё что хотелось написать. Теперь вы знаете, как работать со звуками в Construct 2, как делать уровни, оформлять их и др. Кстати я добавил ещё один уровень в игру. :)

Скрытое содержимое доступно для зарегистрированных пользователей!



Скрытое содержимое доступно для зарегистрированных пользователей!


by robricksan

Подписывайся, кста ;)
Еще будет много интересного!
:sisadmin:
 

blevota32

Пользователь на проверке
На проверке
Регистрация
23.11.20
Сообщения
6
Реакции
2
Баллы
22
FTC
  • Заблокирован
  • #6
Обратите внимание, если вы планируете совершить сделку с этим пользователем, он заблокирован.
а что на счёт гамака?
 

bashorgru

Пользователь на проверке
На проверке
Регистрация
03.12.20
Сообщения
25
Реакции
0
Баллы
23
FTC
15¢
Интересная тема, спаибо!
 

Azriel

Пользователь на проверке
На проверке
Регистрация
09.11.19
Сообщения
55
Реакции
0
Баллы
43
FTC
Спасибо!
 
Сверху Снизу