Как сделать 3D-игру в Scratch

❯

Как сделать 3D-игру в Scratch

06.02.2025 • Айтигенио

Scratch — это визуальная среда программирования и отличная платформа для юных разработчиков. Несмотря на то, что она создана для 2D-проектов, с ее помощью можно реализовать и более глобальные идеи. Создание 3D-игры в Scratch — захватывающий процесс, который позволит вдохнуть жизнь в сюжет на экране без сложного кода. Чтобы сделать это, потребуются только желание, время и… наш материал! В статье Айтигенио подробно рассказываем, как создать 3D-игру в Scratch.

Введение

Как сделать 3D игру в Scratch: пошаговая инструкция

Создание карты лабиринта и игрока

Улучшение качества 3D-рендеринга

Добавление существ в игру

Создание списков для хранения данных

Как сделать 3D игру в Scratch: пошаговая инструкция

Создание карты лабиринта для передвижений игрока

Открываем Scratch и удаляем стандартного кота.
Создаем новый пустой спрайт, который будет картой лабиринта.
В режиме «Костюмы» выбираем форму «Прямоугольник».
Включаем «Без заливки» и устанавливаем толщину контура 25.

Размещаем прямоугольник по центру сцены (X = 0, Y = 0).
Используем инструмент «Линия», чтобы нарисовать преграды внутри лабиринта.
Для колонн рисуем круги. Чтобы они были ровными, нажимаем клавишу Shift.

Заливаем колонны цветом, чтобы они отличались от фона (например, желтым).

Добавление игрока и скрипта управления им

В Scratch есть спрайты, отображаемые видом сверху. Выбираем подходящего героя.
Уменьшаем его размер до 20, чтобы он хорошо вписывался в лабиринт.
Чтобы реализовать управление персонажем, переходим в раздел «Код». Движения можно делать по-разному, за основу берем вариант, когда на стрелочке влево-вправо игрок просто поворачивается, а идет с помощью клавиш вперед-назад.

Добавляем скрипты. Если нажата стрелка вправо, поворачиваем игрока на 15 градусов. Если нажата стрелка влево, поворачиваем игрока на -15 градусов. Если нажата стрелка вверх, двигаем игрока вперед на 4 шага. Если нажата стрелка вниз, двигаем игрока назад на -4 шага. Проверяем, как движется персонаж.
Сейчас игрок может проходить сквозь стены. Чтобы этого не происходило, добавляем условие: если касается лабиринта, двигаться назад. Для стрелки вверх: если сталкивается, перемещаем его назад на 4 шага. Для стрелки вниз — аналогично, но в другую сторону.

Создание луча для 3D-эффекта

Чтобы в будущем правильно отрисовать стены и показать их в 3D-модели, нужно создать лучик, который будет плыть от игрока до ближайшей стены и как бы утыкаться в него. Для этого создаем новый спрайт: рисуем маленький круг размером 6×6, делаем его, например, зеленым и называем «Лучик».

Реализуем движение луча. При запуске игры луч переходит в положение игрока, поворачивается в ту же сторону, что и персонаж, двигается вперед, пока не коснется черного цвета.
Исправляем проблему с перескакиванием стен. Чтобы изменить это, вместо большого шага добавляем цикл, который двигает луч по 1 шагу, пока он не коснется стены.
Чтобы визуализировать луч и добавить лазерный след, открываем ячейку «Расширения» и добавляем «Перо». Перед движением стираем все, чтобы убрать старые лучи, опускаем перо, чтобы оставить след). После движения поднимаем перо. Теперь луч оставляет красивый след!

Добавление поля зрения игрока

В реальной 3D-игре игрок видит не одну точку, а целую область перед собой. Для этого нам нужно создать несколько лучей, расходящихся веером.
Вместо одного луча добавляем цикл, который будет повторять отрисовку луча несколько раз (например, 90).
Каждый новый луч будет поворачиваться на 1° по сравнению с предыдущим.
Чтобы управлять шириной поля зрения, создаем переменную «Угол обзора». Например, если он установлен на 90 градусов, лучи будут расходиться в диапазоне от -45° до +45° относительно направления игрока. В цикле рисуем каждый луч, поворачивая его на маленький шаг.
Чтобы код был аккуратным, создаем новую функцию «Отрисовка фонарика», которая перемещает луч на позицию игрока, запускает цикл отрисовки и после нее поворачивает каждый луч на 1°. Теперь игрок видит перед собой область, похожую на свет фонарика!

Запишите ребенка на первый пробный урок

Оплатите пакет занятий в течение 24 часов

Получите до 5 уроков в подарок

Получите до 5 уроков по Scratch в подарок

Создание лучей для фонарика

В Scratch можно создать эффект 3D, используя метод рейкастинга. Это когда измеряют расстояние от игрока до стен лабиринта с помощью лучей (как в фонарике) и рисуют стены в зависимости от их удаленности. Чем дальше стена — тем она будет ниже и темнее, а чем ближе — тем выше и ярче.
Создаем переменные: X — для позиции линий стен, расстояние до нее и высота.

Отрисовываем стены с помощью пера. Сначала X устанавливаем в -240, затем двигаем на 480 ÷ угол обзора (чтобы линии располагались ровно). Каждая линия рисуется от верхнего до нижнего края стены. С помощью пера она делается сплошной.

Улучшение качества 3D-рендеринга

Добавляем переменную «разрешение» — это толщина линий стен. Если оно = 4, то стены рисуются с шагом 4 пикселя. Если разрешение = 1, картинка выглядит более плавной.
Используем формулу. Чтобы убрать зазоры между стенами, нужно учесть толщину линий: X = -240 + (размер пера ÷ 2).

Добавление реалистичного освещения и исправление нюансов

Чтобы создать эффект фонарика, добавим изменение яркости стен. Чем дальше стена, тем она темнее. Добавляем блок «установить яркость пера» и используем формулу. Теперь стены, находящиеся вдалеке, становятся менее заметными, создавая реалистичное 3D-ощущение.
При движении может казаться, что стены выгнули. Это происходит, потому что мы измеряем расстояние от игрока до стены, а не от его воображаемой «линии взгляда». Чтобы исправить это, используйте тригонометрию. Добавляем переменную «начальное направление игрока». Используем «косинус угла» для исправления перспективы: расстояние до стены x cos. Теперь стены выглядят ровно!

Добавление четких границ стен

Если стены сливаются, их границы можно сделать ярче. Для этого дублируем лабиринт и создаем новый спрайт «Лабиринт цвет».
Делаем два костюма — один сдвигаем на 1 пиксель влево, другой вправо.
Проверяем, касается ли лучик этого спрайта. Если да, рисуем стену другим цветом, чтобы выделить края. Теперь углы стен лучше различимы, и лабиринт выглядит аккуратнее.
Добавляем последние штрихи. Прячем оригинальный лабиринт и игрока, чтобы не мешали 3D-отображению. Добавляем градиентный фон, чтобы пол и потолок выглядели реалистично. Тестируем и корректируем параметры толщины линий и яркости стен.

Добавление направления камеры

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

Оптимизация отображения

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

Исправление искривления стен

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

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

Добавление существ в игру

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

существо X = X существа — X игрока,
существо Y = Y существа — Y игрока.

Реалистичное вращение существ

Когда игрок поворачивается, существо тоже должно менять положение. Для этого Создаем блок «вращение существа» с параметрами X и Y.
Устанавливаем новые значения:

существо X = - (X x cos (направление камеры) — Y x sin (направление камеры);
существо Y = X x sin (направление камеры) + Y x cos (направление камеры).

Отображение существ на экране

Теперь создаем само изображение существа. Для этого рисуем спрайт (например, сердечко).
Добавляем невидимый квадрат 200×200.
Настраиваем позицию и размер существа в коде.

Создание списков для хранения данных

Чтобы правильно отрисовывать объекты в 3D-пространстве, создадим три списка: «Расстояние», X и «Тип объекта».
В самом начале игры очистим эти списки, добавив в блок «Повторять всегда» команды удаления всех элементов.

Изменение алгоритма отрисовки

Ранее стены и существа отрисовывались разными алгоритмами. Теперь объединим их, чтобы сперва рисовались дальние стены, затем существа, и потом стены, которые должны их перекрывать. Для этого добавляем новый блок «Нарисовать» с параметрами: тип объекта, X-координата, расстояние до игрока.
При вызове этого блока записываем значения в соответствующие списки.

Сортировка объектов по удаленности

Чтобы правильно рисовать предметы, сперва отсортируем их по расстоянию (от дальних к ближним). Для этого введем новую переменную «Индекс списка».
Добавим в начало списка «Расстояние» большое число (например, 9999), чтобы у алгоритма была начальная точка отсчета.
Используем алгоритм сортировки вставками. Перебираем элементы, начиная со второго. Если текущий элемент меньше предыдущего, меняем их местами. Продолжаем, пока не отсортируем весь список.

Отрисовка объектов

Создаем новый блок «Отрисовать объекты», который будет перебирать все элементы списков и рисовать их в правильном порядке.
Вводим переменную «Строка номер», которая отвечает за текущий элемент списка.
Используем цикл «Повторить (длина списка X)», где: читаем из списка «Тип объекта», X и «Расстояние», определяем, рисуем ли мы стену или существо, применяем яркость в зависимости от расстояния (чем дальше — тем темнее), используем команду «Печать», чтобы существа и стены корректно отображались.

Добавляем существ на карту

Теперь разместим несколько существ на случайных позициях, избегая их появления внутри стен. Создаем блок «Добавить существ» с параметром количество.
Используем цикл «Повторить (Количество)», в котором: случайно выбираем X и Y координаты, проверяем, касается ли существо лабиринта или другого существа. Если нет, создаем клон существа. Теперь игра будет отображать несколько существ, и они смогут скрываться за стенами.
Протестируйте свое обновление.
На этом этапе вы можете добавить дополнительные функции, например, врагов, которые двигаются по карте или персонажа игрока, который будет стрелять.

Удобнее создавать 3D-игру через видеоуроки? Учитесь наглядно через записанные тренером Айтигенио You-Tube-гайды! Посмотреть еще больше видео по Scratch можно в этом плейлисте.

Хотите не просто повторять за видео, но глубже разобраться в программировании, создавать собственные проекты, получать поддержку опытных наставников и повысить свой уровень? Онлайн-курс по Скретч от Айтигенио специально для вас!

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

Программа курса построена таким образом, чтобы каждый ученик двигался от базовых понятий к более сложным проектам. Сначала ребята изучают основы блокового программирования, а затем переходят к созданию анимаций, игр и даже 3D-эффектов. Главное преимущество Айтигенио — это практический подход: у нас подростки программируют настоящие игры, делятся своими работами и растут как юные разработчики.

Если вы освоите Scratch, будет легче перейти к изучению Python, JavaScript и других языков программирования. Курсы Айтигенио помогают заложить прочную основу для дальнейшего развития в сфере IT, что в будущем может стать интересной профессией или полезным навыком.

Пробное занятие в Айтигенио — бесплатно! Убедитесь, что мы вам подходим, и начните глубже разбираться в циклах, переменных и написании кода!

Если вам понравилась статья, поделитесь ей!

Откройте мир IT для ребёнка
на бесплатном уроке

С реальным учителем

Итоговый проект в конце урока

Без продаж

5 языков программирования для детей 7–12 лет

Спрайты в Scratch: как сделать

Чем заняться в Minecraft? Идеи для строительства

Чит-коды и консольные команды для Minecraft

12-летний ученик Айтигенио освоил язык программирования за год и написал 6 игр

Создать свою игру в 6 лет? С Roblox Studio это возможно

Подпишитесь, чтобы не пропустить самое интересное!