Сделайте свою собственную игру Mario! Основы нуля для детей и взрослых

Знаете ли вы, что любой может сделать видеоигру без программирования?

? Хотя есть несколько дружественных для начинающих языков

вам не нужно тратить полгода на изучение Java или C ++, чтобы создать игру. Вы можете выбрать один из множества инструментов для различных типов игр, но один отличный вариант для детей (и взрослых) — это бесплатная Scratch от MIT.

Это руководство доступно для скачивания в формате PDF. Скачать игру «Сделай свой собственный Марио»! Основы нуля для детей и взрослых сейчас. Не стесняйтесь копировать и делиться этим со своими друзьями и семьей.

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

в процессе. Давайте посмотрим, что вы можете создать в Scratch, а затем пройдитесь по шагам создания простой игры Mario.

Встречайте Scratch

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

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

Экранные элементы

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

1. стадия — Показывает краткое изложение вашей игры. Все активные спрайты и выбранный вами фон появятся здесь. Вы можете перемещать спрайтов, если хотите. Дайте вашему проекту имя в поле выше этого.
2. Фон — Здесь вы можете выбрать фон для своей игры. Выберите из библиотеки Scratch, нарисуйте свою или импортируйте файл. Вы также можете получить изображение с камеры вашего ПК, хотя большинству людей, вероятно, эта опция не понадобится.
3. Спрайты — Центр всех спрайтов в вашем проекте. Как и фоны, вы можете добавлять по умолчанию, создавать свои собственные или загружать изображения. Нажмите маленький синий я значок на спрайте, чтобы переименовать его, изменить его угол или скрыть.
4. Рабочая зона — Где большая часть вашей работы в Scratch имеет место. Используйте вкладки выше (помечены Сценарии, костюмы, а также Звуки изменить то, над чем вы работаете.
   1. Сценарии для добавления блоков кода, о которых мы скоро расскажем.
   2. костюмы позволяет создавать дополнительные позы для ваших спрайтов. Эта вкладка изменится на фоны если у вас есть один выбранный в области 2, и обратно к костюмы когда вы выбираете спрайт в области 6. Базовый редактор изображений позволяет вносить изменения в графику в вашей игре. Вы также можете переименовать активы здесь.
   3. Звуки, неудивительно, что это центр для добавления и редактирования звуков.
5. Блоки — В зависимости от того, какую из трех вкладок вы выбрали, эта область будет переключаться между блоками кода, костюмами / фонами спрайтов и звуковыми клипами.
6. Кнопки управления — Зеленый флаг начинает вашу игру, в то время как красный знак остановки завершает его. Вы будете использовать их для тестирования.

Использование блоков

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

, что позволяет легко увидеть, как они влияют друг на друга.

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

• движение — Переместить заданный спрайт пошагово, к другому объекту или по прямым координатам.
• Видать — Позволяет спрайту скрывать или показывать себя, переключать костюмы, изменять размер или перемещаться между слоями.
• звук — Воспроизведение звуков, изменить громкость или отрегулировать темп.
• Ручка — Нарисуйте маркером и измените его цвет и форму.
• Данные — Позволяет создавать свои собственные переменные. Это очень удобно для элементов, которые в Scratch отсутствуют.
• События — Критерии для запуска других действий, например, когда вы нажимаете зеленый флаг или нажимаете пробел. Вам нужны эти блоки, чтобы все остальные ваши блоки действительно что-то делали!
• контроль — Повторяет действие, выполняет оператор if-else или что-то останавливает.
• считывание — Поместите эти блоки в другие для выполнения действий, когда спрайт касается другого элемента или пользователь удерживает нажатой клавишу.
• операторы — Математические элементы, которые позволяют выполнять арифметические или базовые логические операции над переменными.
• Больше блоков — Сделайте свои собственные блоки, если этого недостаточно!

Простой пример

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

Во-первых, вам нужен крутой футбольный фон. Голова в Фон раздел в левом нижнем углу и щелкните значок изображения, чтобы выбрать один из фонов Scratch. Там один называется Цель 1 это будет работать отлично. Затем щелкните значок спрайта, чтобы добавить новый готовый спрайт. Вы должны увидеть Бал-Футбол в списке — дважды щелкните по нему, чтобы добавить его в свои спрайты.

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

Как только вы начинаете, вы хотите, чтобы кошка переехала и пнула мяч, верно? Это звучит как то, что подпадает под движение Вкладка. У вас есть несколько вариантов заставить кошку двигаться, например, Переместить X шагов блок. Но мы не можем гарантировать, сколько шагов потребуется кошке, чтобы достичь мяча. Для этого есть лучший блок — попробуйте Скользить X секунд до блок. Одна секунда — хорошее время, и вам нужно нажать на синий я значок футбольного мяча, чтобы увидеть его координаты. Введите их в блок, и ваше первое действие завершено!

Пинать мяч

Как только кошка коснется футбольного мяча, она должна влететь в цель. Итак, выберите футбольный мяч, чтобы вы могли добавить к нему некоторые действия. Помните, что каждое действие должно начинаться с Событие — зеленый флаг подходит для этого случая. Теперь вы не хотите, чтобы футбольный мяч двигался, пока кошка не коснется его. Посмотрите на контроль категория для блока, который позволяет нам ограничить его поведение. Подожди пока блок звучит о праве!

Обратите внимание, как Подожди пока блок имеет удлиненную форму шестиугольника внутри него. Многие из считывание блоки соответствуют этой форме, поэтому посмотрите на них, чтобы найти правильный. Увидеть трогательный блок в верхней части списка? Вы можете перетащить это прямо в отверстие внутри Подожди пока. Измените раскрывающийся список на Кошка или как вы назвали кота спрайтом.

Теперь вам просто нужно, чтобы футбольный мяч влетел в цель. Скользить X секунд до блок в движение Категория, которую мы использовали ранее для кошки, будет работать нормально. Привязать этот блок под Подожди пока, и наведите указатель мыши на сетку ворот. Вот увидишь Икс а также Y координаты под сценой — вставьте их в скольжение блок. Мяч должен двигаться довольно быстро при ударе, так что давайте попробуем 0,5 секунды для сроков.

И толпа сходит с ума

Последний шаг — добавление звука! Выберите Звуки вкладка над рабочей областью, чтобы добавить новую. Нажмите на значок динамика под Новый звук взять один из библиотеки Скретча. Там один называется одобрительные возгласы под Человек категория, которая идеально подходит. Дважды щелкните по нему, чтобы добавить, а затем вернитесь в рабочее пространство для футбольного мяча.

Вы найдете блок с надписью Воспроизвести звук под звук категория. Щелкнуть что под скольжение блок, и все готово! Нажмите на зеленый флаг, чтобы воспроизвести анимацию. Кошка подбегает к мячу, и когда он касается его, мяч летит в цель, и толпа приветствует.

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

Создание базовой игры Mario

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

Пожалуйста, обратите внимание: Поскольку я не художник, для целей данного урока я копирую спрайты Mario из Интернета. Графика Mario принадлежит Nintendo, и вы не должны публиковать игры с использованием защищенных авторским правом спрайтов. Это представлено только в качестве примера.

Импортировать графику

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

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

• Марио бегает (нам достаточно двух кадров)
• Прыжки марио
• Анимированная монета
• Наземные блоки
• Облака

Царапина имеет Голубое небо 3 фон, который будет хорошо работать для наших нужд.

Редактировать Спрайт Костюмы

Поскольку есть два спрайта, которые составляют анимацию бега Марио, вам нужно добавить их в виде отдельных костюмов. Используйте графический редактор, такой как Paint.NET

чтобы сохранить две рамки Mario как отдельные файлы — вы можете игнорировать третью. Загрузите первый спрайт Mario, затем выберите его и используйте костюмы вкладка, чтобы загрузить другой спрайт в качестве своего второго костюма. Дайте им различимые имена, такие как Марио-1 а также Марио-2. Добавьте прыгающего спрайта в качестве другого костюма для Марио.

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

Для земли вам понадобится много блоков, так как Марио бежит вдоль них. Используйте Paint.NET, чтобы захватить шесть блоков в середине Наземные блоки изображение, затем сохраните их как отдельный файл. Вам понадобится около 12 блоков, чтобы покрыть всю нижнюю часть экрана, как только вы уменьшите их до хорошего размера. Таким образом, вы должны поместить две копии этих шести блоков бок о бок для вашего земля спрайт. Загрузите это, а затем сделайте два дубликата наземных спрайтов в Scratch.

Монета — это анимированный GIF, поэтому она немного другая. Всякий раз, когда вы загружаете его, Scratch создает костюмы для каждого кадра анимации. Это изображение имеет всего 11 кадров, но, к сожалению, также имеет белую рамку вокруг него, которая смотрится на синем фоне. Вы должны будете открыть каждый костюм для монеты в редакторе Царапин. Используйте инструмент пипетки, чтобы выбрать синий цвет фона, затем используйте инструмент заливки, чтобы изменить белые края монеты на бледно-голубой.

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

Импортировать звуки

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

,

• Super Mario Bros. Theme
• Марио прыгать звук
• Монета собирать звук

Оживить монеты

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

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

Анимационный скрипт выглядит примерно так:

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

Снимите флажок рядом с Монета-FPS в Данные tab (это настраиваемая переменная, которую вы создаете), поэтому она не отображается на экране.

Заставить Марио двигаться

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

Во-первых, вам нужно сделать четыре переменные в Данные Вкладка. Все четыре из них Для всех спрайтов кроме Скорость, который только для Марио:

• Сила тяжести константа, которая тянет Марио обратно на землю, когда он прыгает.
• На земле отслеживает, касается ли Марио земли или нет.
• ScrollX измеряет горизонтальное движение экрана.
• Скорость (Только Марио) контролирует скорость, с которой Марио прыгает.

Анимация Земли

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

Вот кодовый блок, который вам понадобится для каждого земля спрайты:

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

Для второго (и последующих) наземных блоков увеличьте цифра в ScrollX + 480 * 0 по одному на каждый новый кусок земли. Это сместит его, чтобы он плавно прокручивался.

Марио Логика

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

Этот блок кода изменяет ScrollX переменная, когда Марио движется. Всякий раз, когда вы нажимаете влево или вправо, Марио смотрит в нужном направлении и делает шаг, увеличивая ScrollX на 3. Если вы обнаружите, что Марио переворачивается при движении влево, нажмите на синий я на его спрайте и убедитесь, что Стиль вращения настроен на второй вариант. Это перевернет его влево и вправо, а не по кругу.

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

Простой кусок кода, который выясняет На земле переменная. Если он касается одного из наземных блоков, На земле равно 1 (верно). Когда он прыгает, На земле 0 (ложь).

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

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

Собирать монеты

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

Вот наш скрипт сбора монет:

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

Свиток монет и облаков

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

Это помещает монету в Y значение (это вертикальное положение экрана), где Марио может легко захватить его. Затем он использует аналогичную логику с наземными блоками, чтобы прокрутить в сторону Марио. Обратите внимание, что мы увеличили скорость прокрутки до 0,75 так что монеты движутся к Марио быстро. Для второй и третьей монет мы увеличиваем установить у в поле для -40 а также -20 поэтому они немного выше и Марио труднее их схватить. в Установите х в блок, увеличить 150 * 1 в 150 * 3 а также 150 * 5 для второй и третьей монет, чтобы поместить их дальше вправо, за кадром.

Облака используют практически идентичный блок кода:

Опять же, это помещает облако на определенную высоту, а затем прокручивает его по мере движения Марио. Для второго облака, которое находится перед Марио, а не позади него, измените установить х в блок для (ScrollX * 0.1) + (150 * 1), как монеты

Добавить границы

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

Самый простой способ сделать это — щелкнуть правой кнопкой мыши на сцене и нажать Сохранить изображение сцены. Откройте это в Paint.NET и используйте инструмент пипетки, чтобы выбрать синий цвет фона. Добавьте новый слой, используя нижний правый диалог. Затем с помощью инструмента «Прямоугольник» нарисуйте закрашенный синий прямоугольник с любой стороны экрана. Покройте примерно половину каждого блока, затем удалите фоновый слой.

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

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

Расширяя свою игру

Попробуйте окончательный продукт ниже!

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

Мы хотели бы поблагодарить пользователя Scratch dryd3418, так как мы использовали часть кода из его Super Mario: Scroll Jump Tutorial — проект в нашем собственном проекте для этой статьи. Для получения более подробной справки, включая сценарии, которые вы можете скопировать, ознакомьтесь с руководством другого пользователя по созданию игры Mario. Если вы хотите пойти по более простому маршруту, посмотрите проект «Создайте свою собственную игру Mario», который позволяет перетаскивать спрайты в простую игру.

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

Заинтересованы в этом шаг? Проверьте Scratch For Arduino

строить проекты на этой платформе. Если вы готовы окунуться, посмотрите все, что нужно для создания игры для iPhone

с нуля.»

Мы хотим услышать от вас, если вы попробовали Scratch! Вы расширили нашу основную игру Mario? Оставляйте свои вопросы, комментарии и обновления в комментариях ниже, пожалуйста!