Как создать копию популярной игры Among Us в Scratch

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

IT-сфера все больше проникает в нашу жизнь. Дети не являются исключением, уже в раннем возрасте у них закладываются игровые навыки. Многие ребята учатся кодить и создавать игры при помощи инструментов в визуальных средах программирования. Одна из наиболее простых и популярных сред — Scratch. Данная среда разработки была создана в Массачусетском технологическом институте специально для детей, которые хотят обучиться программированию.

Средний возрастной порог визуальной среды составляет 8-9 лет. Программа обладает чрезвычайно простым интерфейсом, специально для того, чтобы ребенок не испытывал трудностей во время обучения. Scratch программирование чем-то напоминает известный конструктор LEGO: каждая команда в данной среде разработки — это определённый блок, который можно перемещать и сочетать с другим блоком-командой. Блочный код позволяет детям управлять анимированными персонажами, добавлять звуки, передавать сообщения по заранее реализованным алгоритмам. Скретч познакомит ребенка с азами программирования: поможет понять, что такое переменные, как использовать условия, нестандартные подходы к реализации циклов, включая вложенность, ветвление, классы, функции, методы и т.д. Помимо этого язык программирования Scratch развивает логическое мышление, учит ставить перед собой сложные задачи и находить пути их решения.

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

Сегодня школа «Пикcель» расскажет, как создать популярную игру Among Us в Scratch.

Добавление материалов для игры

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

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

Приступим к работе

Запустим новый проект и добавим в него спрайты. Делается это путем нажатия кнопки «Загрузить спрайт». После этого необходимо растянуть изображение, чтобы полностью заполнить игровую сцену. Карту следует увеличить до максимума (у нас 731). Следующим шагом будет отрисовка желтого кружка – он будет являться точкой, в которой персонаж может приступить к заданию. А также местом, где будут срабатывать скрипты. Далее нам нужно изменить размер капитана, чтобы он соответствовал размеру карты (25). Каждый фон должен иметь свое название, так нам будет проще ориентироваться в игре: заставка, задание и т.д.

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

Заставка

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

Карта

В момент, когда флажок будет нажат, фон спрячется и появится заставка. Но как только основной фон получит сообщение «Начало», он вновь покажется и перейдет в координаты x=0, y=0 (начнет рисоваться с верхней левой части экрана). После того как карта вновь станет видимой, она будет перемещаться на задний план.

Следующим шагом будет программирование управления картой. Начнем писать код для клавиш управления.

Если нажата клавиша «Стрелка вверх», мы будем увеличивать наши координаты по оси Y на 5, то есть 5 единиц вверх. При нажатии клавиши «Стрелка вниз» мы будем уменьшать наши координаты по оси Y на 5. Реализация перемещения вправо и влево точно такая же, только в этот раз мы используем ось X.

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

Последний шаг: изменять игровой фон при выполнении задания. Для этого необходимо прописать еще одно условие: в момент, когда основной фон получит сообщение: «Задание», он спрячется, а на его место придет фон задания.

Член экипажа

На этом шаге нам нужно добавить тот же код, что имеется у карты: при нажатии на флаг персонаж будет прятаться, а при получении сообщения «Начало» — показываться.

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

Напишем логику: при нажатии клавиш вверх, вниз, влево или вправо, мы будем менять наш костюм. В блоках «Внешнего вида» находится команда «Изменить костюм на», она нам и нужна. Чтобы смена костюма не происходила слишком резко, следует добавить паузу в 0,2 секунды.

Теперь вернемся к ранее созданному желтому кругу, пропишем для него условие: если наш спрайт коснется желтого цвета, то мы отправляем основному фону сообщение: «Задание». Персонаж скрывается и появляется фон задания.

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

Задание с проводами

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

В момент нажатия флага спрайт будет скрываться, а после того как он получит сообщение «Задание», он будет перемещен на следующие координаты: х=-212, y=-116. В конце следует прописать уменьшение размера спрайта до 40%.

Каждое наше действие в задании будет обрабатывать единственная переменная, создадим ее и назовем «Провода».

Изначально значение будет равняться 0, при присоединении первого провода оно увеличится на 1.

Далее нам нужно нарисовать путь от начала до конца провода, сделать это можно в том же визуальном редакторе с помощью расширения «Перо».

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

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

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

Вы можете посмотреть получившуюся у нас игру на сайте. Тут же можно войти «внутрь проекта» и увидеть код.

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

Данная статья была создана школой программирования для детей «Пикcель» с целью обучить основам программирования на примере создания простой 2D-игры. Мы обучаем детей в возрасте от 5 до 17 лет основам программирования, анимации, создания собственных игр, разработке веб-сайтов.