Как сделать игру «Марио» в «Скретч»

Выпущенная в 1985 году игра Super Mario Bros является, вероятно, самой популярной игрой всех времен и точно главным проектом Nintendo.

Марио — игра-платформер, в этом жанре герой должен прыгать по платформам в 2D-мире и собирать очки. Пройдя с нами до последней буквы этой статьи-руководства, вы создадите своего Марио в визуальной событийно-ориентированной среде «Скретч». Интересно? Тогда давайте приступим!

Как делают игру? Сначала пишут ее «движок». Это что-то вроде скелета, на который потом можно наращивать остальной организм: графика, общие правила взаимодействия «спрайтов», то есть графических объектов. Эти аспекты не изменятся по мере создания остальных компонентов игры, уровней, новых частей. Поэтому их делают в первую очередь.

Больше уроков «Скретч» для детей — на официальном канале нашей школы в Youtube.

«Скретч» иногда называют языком программирования, а иногда — средой разработки. Попросту говоря, это учебный язык, где роль операторов и сложных команд настоящих языков выполняют визуальные блоки. Фактически, это конструктор.

Установлена и настроена среда программирования Scratch может быть по-разному. Самый простой вариант — воспользоваться онлайн-версией.

Мы будем указывать названия элементов интерфейса Scratch на русском и на английском, так как вы можете столкнуться с разными языками интерфейса.

Писать код «Марио» на «Скретч» начнем с создания фона и графических объектов (игровых ассетов — на языке геймдева): персонажа, препятствий, наград и тому подобного.

Если плашка «Сцена» у вас в активном состоянии, то есть вы кликнули по ней левой кнопкой мыши, то слева вам доступны загруженные в проект фоны, в том числе и Assets. Кликните по маленькой иконке Assets, чтобы посмотреть, с чем мы работаем. Закройте демонстрационный материал в центре окна Scratch, чтобы увидеть Assets не только в правом большом окне, но и в центральной, рабочей области. Видите?

Здесь собрано все, что нам понадобится: элементы, по которым Марио будет прыгать, труба перемещения и даже монетки и облака. Этот фон сам по себе мы не будем нигде использовать. Просто удобно, если все собрано в одном месте. Новые игры или дополнения к нашей игре обычно включают немало тех же самых объектов, которые мы уже использовали на этапе разработки первых уровней. Имея единый файл с игровыми ассетами, вы сможете просто копировать компоненты, которые в игре уже встречались.

Теперь взгляните левее плашки «Сцена». Там будет другое поле — «Спрайт» (Sprite). На нем по умолчанию доступен спрайт котик. Нажмите на него. Слева вы увидите маленькие иконки «Костюмов» (Costumes). «Костюмы» — это различные положения, которые может принимать наш спрайт в движении. Если «Спрайт» добавлен на «Сцену», то он будет отображаться поверх всех изображений всех фонов (backdrops) «Сцены».

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

А сейчас поработаем с фоном. Переключитесь на фон sky. Сейчас у нас только заливка голубым цветом. В фоне «Assets» скопируйте белое облако и вставьте его несколько раз в верхней части фона sky. Получилось?

Все получается? Смелее! Если мы создадим Марио, то сумеем сделать любую игру-платформер на «Скретч». На плашке спрайтов, где у нас находится персонаж, создайте новый спрайт. Назовите его «Фон» или Background. Этот спрайт будет важной частью игры. Каждый его костюм будет представлять собой новый уровень игры. Вы можете создать сколько угодно спрайтов, но мы в нашей игре пока сделаем только пять. Просто копируйте объекты из нашего рабочего файла Assets в очередной уровень – так и создаются новые локации в игре «Марио».

Можно назвать уровни Screen-1, Screen-2 как здесь или Уровень 1, Уровень 2 и так далее. Теперь подготовим первый код для нашей игры. Его еще нельзя будет запустить, но в комплексе с другими командами он заработает. Кликните по спрайту «Фон» и переключитесь на вкладку «Код» (Code). Вы увидите справа разноцветные элементы, которые можно выделять мышью и переносить в центр, закрепляя один за другим. Эти «кирпичики» на языке Scratch называются блоками и служат для создания сценариев, которые оперируют с добавленными нами изображениями, музыкой и другими составляющими программы. Добавьте блоки Scratch таким же образом, как показано на скриншоте:

В русскоязычном интерфейсе все будет так же, например, блоку broadcast будет соответствовать блок «передать». В некоторых блоках нужно установить аргументы, то есть дополнительные параметры того, как они должны будут себя вести. Если вы называли уровни игры на русском языке, то в аргументе блока switch costume (изменить костюм на) поставьте «Уровень 1».

Вы могли заметить, что мы оставили немного места между блоками, когда создавали «Уровень 1» (Screen-1). Некоторые из этих промежутков мы дополним блоком со знаком вопроса. Помните, Марио надо было прыгать, и он головой выбивал какой-нибудь случайный бонус?

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

Напишем код для блока. Кликните на нужный спрайт и только после этого переключитесь на вкладку «Код» (Code). Воспроизведите приведенную ниже структуру у себя. За появление блоков на разных уровнях отвечают условия «if» из самой длинной последовательности команд. Когда выполняется первое условие, активируются координаты X и Y, отвечающие за появление спрайта со знаком вопроса в первом уровне.

Во втором условии обрабатывается уже второй уровень игры и так далее. Этот код вы уже можете тестировать, чтобы убедиться, что идете в правильном направлении. Меняйте координаты X и Y, затем запускайте код зеленым флажком над правым экраном.

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

Хорошая новость: мы уже получили мощный практикум по программированию в среде Scratch. Плохая новость: многого для полноценного Марио у нас еще нет. Например, как наш герой будет понимать, что перед ним: стена или другое препятствие? Самый простой способ решить эту проблему — создать несколько спрайтов в виде прямой черты, которые мы разместим с таким расчетом, чтобы они отделяли фигурку персонажа от окружающего мира: спереди, сзади, снизу и сверху.

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

Например, если мы касаемся передней линией фонового объекта, то можем установить значение right touch в позицию 1. Так Марио поймет, что нечто находится перед ним. Если установим значение 0, значит перед ним ничего не находится. Посмотрите на скриншоты ниже и воспроизведите логику для каждой стороны персонажа. Будьте внимательны, переключайтесь между спрайтами для формирования команд.

(Спрайты правой, левой, верхней и нижней стороны можно скачать или нарисовать самостоятельно в редакторе).

Чтобы получилась полноценная игра, персонаж должен быть способен двигаться влево-вправо, прыгать в том случае, если он на чем-то стоит или падать, если под ним ничего нет.

Всего этого мы сможем добиться с нашими спрайтами обнаружения препятствий из предыдущего шага. Нам понадобится как-то удостовериться, что спрайт Марио анимирован по мере движения с помощью своих костюмов (помните, у нас в этом спрайте два положения персонажа?). Уровень 1 (Screen-1) — персонаж должен начинать в правильной точке, глядя в правильном направлении. Приступим!

Один из методов запрограммировать движение персонажа в Scratch состоит в том, чтобы переходить на новый уровень каждый раз, когда он достигает правой границы предыдущего. Мы решим проблему постоянной проверкой координаты X нашего Марио. Если оказалось, что он коснулся правой границы экрана, то включается broadcast с текстом «Next Screen». Таков будет принцип нашей программы.

Можно сделать и иначе. Весь «мир» делаем одним большим костюмом спрайта «Фон» (Background) и сдвигаем координату X этого спрайта налево по мере того, как наш герой продвигается вперед. Последний способ — остроумное и изящное решение, но заставит в будущем постоянно редактировать ваш проект с добавлением новых уровней. Причем, написать придется гораздо больше, чем если бы вы просто сделали движение с помощью подхода, который мы описали первым. Думайте о расширяемости своих проектов. Программист — это человек, который выбирает наилучший путь.

Код, состоящий из блоков Scratch, который у нас ниже представлен, все равно будет довольно объемным, хотя и реализует первый подход. Хорошей практикой является комментирование. Новый комментарий можно добавить, щелкнув по тому или иному блоку правой кнопкой мыши и нажав «Add Comment». Переключившись на спрайт нашего котика «Марио» (помните, мы надевали на него шляпу?), добавьте блоки движения персонажа из скриншота ниже.

Сейчас мы займемся созданием счета очков в игре. Точно так же, как мы добавляли блоки со знаком вопроса, распределите в уровнях новый спрайт – монетки. Изображение монет можно взять из нашего фона (backdrop) Assets. Как и раньше, мы будем «пролистывать» уровни и клонировать спрайт для них. После этого добавим блок с постоянной проверкой: касается Марио данного клона монетки или нет. В зависимости от этого прибавляем счет. Можно создать несколько костюмов для спрайта монетки и анимировать ее, чтобы она слегка колебалась в воздухе. Переключитесь на спрайт монетки, кликнув по ней и добавьте внутрь блоки в соответствии со скриншотом ниже.

В оригинальном Super Mario, если герой касался блока «?», то он мог получить либо монетку, либо увеличение силы. Чаще всего вы будете получать монетки, но иногда знак вопроса скрывает звезду, взяв которую ваш Марио получит временную непобедимость. Непобедимость защитит от врагов, которых мы добавим позже. Нам предстоит создать код к спрайту блока со знаком вопроса, который без врагов мы пока не сможем протестировать.

План такой: когда Марио будет касаться нашего блока с сюрпризом, нам надо будет поменять костюм этому блоку. Подвигайте его вверх и вниз в качестве визуального эффекта, выберите приз, который блок даст персонажу. Координаты X и Y спрайта блока «?» будут отвечать за движение призовой Звезды или призовой Монеты после их появления. Теперь настало время создать отдельные спрайты «Призовая звезда» (Prize Star Sprite) и «Призовая монета». Спрайты можно скопировать из фона «Assets».

Когда они будут получать определенное сообщение из блока broadcast, то появятся около блока «?», который только что был затронут. Если выпала монета, то она сразу появляется и исчезает, пополняя счет. Если выпала звезда, то она должна продвинуться и ждать, когда Марио ее заберет. В тот самый момент программа включает broadcast и передает invincible (непобедимый).

На языке программирование Scratch это лучше сделать так: передаем блоком broadcast сообщение «invincible», если Марио касается призовой звезды. Задача в том, чтобы он сразу изменился в ответ на появление этого сообщения. Во-первых, нам надо создать переменную непобедимости. Во-вторых, Марио должен изменить цвет, чтобы показать, что он временно неуязвим для врагов. Непобедимость продлится, скажем, 5 секунд, после чего эта переменная станет снова равна 0, когда мы нажмем на зеленый флаг.

Сейчас самое время дополнить игру врагами! Для этого учебного проекта мы создадим трех. Каждый будет вести себя немного по-своему. Для каждого сделаем собственный спрайт. Вы можете также нарисовать других противников. Созданных персонажей добавьте в фон Asset, помните? Там у нас собраны игровые ассеты.

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

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

Ежик маленький, и Марио будет легко его пропустить, поэтому он опасный противник. Мы добавим этого врага в уровни 1, 2, 5. Если наш герой его касается, будучи уязвимым, то игра окончена, он проиграл.

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

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

Попугай, вероятно, самый опасный противник Марио. Он бросает в него яйца, а герой должен уворачиваться, продвигаясь по уровню. Нужно добавить не только спрайт самого попугая, но и отдельный спрайт яйца, которое в нашем коде будет время от времени передавать с помощью broadcast сообщение «Throw Egg».

Попугай встретиться лишь на 4 уровне игры.

Мы спроектировали алгоритмы для всех наших врагов. Теперь нам нужно в спрайте нашего котика в шляпе, играющего роль Марио, дописать логику, связанную с касанием до врага (в отсутствии неуязвимости). Нужно добиться, чтобы при касании первого и второго врага, когда их костюм – 4, или яйца, или попугая, нам выдавалось сообщение о том, что игра окончена и мы потерпели поражение (Game over).

При этом код, связанный с Марио, должен «умереть», а сам спрайт персонажа — спрятаться. Просмотрев этот фрагмент кода, мы увидим, что он реализован в ряде почти одинаковых логических конструкций If-Then. Возникает вопрос: почему бы не объединить все это в один большой «if»? В будущем, программируя на настоящих языках программирования, вы не раз столкнетесь с ситуацией, когда лучше написать побольше кода, но чтобы он выглядел и читался просто. Так легче код потом менять. Нет никакой пользы от лаконичного фрагмента, если работать с ним тяжело и невозможно понять, что там происходит.

Давайте создадим два новых спрайта. Один будет «Флаг победителя» (или Victory Flag) и спрайт надписи «Победа» (Win).

Флаг победы будет ждать нас в конце «Уровня 5», и мы его разместим точно так же, как мы размещали врагов, с помощью блока «Go To X, Y» (Перейти в x, y). Когда Марио касается флага, broadcast передает «Победа» (Win), показывается спрайт «Победа», а также счет.

Самое время позаботиться о звуковом оформлении. Наш «Супер Марио на Скретч» почти закончен. Если вы хотите создать атмосферу традиционного Super Mario Bros, то лучше добавьте аранжировку из самой игры, файл с которой легко отыскать в интернете. В этой тренировочной игре мы используем стандартные звуки Scratch (Video Game 1). Еще нам понадобится специальный звуковой эффект для момента, когда наш Марио получает непобедимость, а также звук, сопровождающий сообщения о выигрыше и проигрыше.

Когда мы запускаем один звук, другие должны перестать звучать. К счастью, сделать это не так сложно. Достаточно использовать в нужном спрайте блок «Стоп» (Stop) с параметром в положении «другие скрипты спрайта» (other scripts in sprite). Еще один broadcast потребуется, чтобы начать опять основную мелодию, когда время неуязвимости Марио уже истекло.

Итак, мы создали нашу игру, классно провели время и изучили основы программирования Scratch. Нам пришлось поломать голову, приложить внимание, усидчивость и терпение. И результат — вот он! Реальное дело наших рук, которым можно гордиться.

Написав Марио на Scratch, вы в будущем можете сделать любую игру-платформер на «Скретч»! Если вы или ваш ребенок хотите приобщиться к захватывающему миру программирования, записывайте его на один из учебных курсов Pixel! Будет очень интересно! Кроме программирования для детей на Scratch, Lua и Python, в школе есть множество других курсов на любой вкус.