Как заставить спрайт ходить: оси x и y, направления, стрелки

Как устроены координаты сцены

Сцена Scratch — это прямоугольник 480 на 360 точек: x меняется от −240 у левого края до 240 у правого, y — от −180 внизу до 180 вверху, а центр сцены имеет координаты (0, 0).

Это та же координатная плоскость, что в математике, и любое движение в Scratch описывается изменением этих двух чисел: x растёт вправо, y — вверх. Для пятиклассника, который ещё не проходил отрицательные числа, сцена часто становится первым знакомством с ними: «минус 100» просто значит «левее центра». Текущие координаты выбранного персонажа видны в панели под сценой, а в палитре есть овальные блоки «положение x» и «положение y», которые можно вставлять в другие блоки и показывать на сцене галочкой.

Группа Lifelong Kindergarten из MIT Media Lab выбрала для сцены именно декартовы координаты с центром посередине, чтобы движение вправо и влево было симметричным, а числа — небольшими^[1]. Благодаря этому средний ученик быстро привыкает к мысли, что у каждой точки экрана есть «адрес» из двух чисел.

Блок «идти 10 шагов» и направление

Блок «идти 10 шагов» сдвигает спрайт на 10 точек в ту сторону, куда он сейчас смотрит; один шаг равен одной точке сцены. Куда именно смотрит герой, задаёт его направление в градусах.

Задать направление можно блоком «повернуться в направлении 90» или прямо в панели спрайта, повернув стрелку на круге. Блок «повернуться к указателю мыши» разворачивает героя к курсору, а «повернуться к …» — к другому спрайту. Это основа для врагов, которые преследуют игрока. Тригонометрия для этого не нужна: среда, созданная в MIT, сама вычисляет угол до цели.

Повороты на угол

Повороты делают 2 блока: «повернуть ↻ на 15 градусов» поворачивает по часовой стрелке, «повернуть ↺ на 15 градусов» — против неё. Угол можно заменить любым числом.

Полный оборот — 360 градусов, поэтому четыре поворота на 90 возвращают героя в исходное направление. Если соединить шаг и поворот в цикле, получится движение по фигуре: «идти 100 шагов, повернуть на 90» четыре раза — квадрат. Чтобы увидеть его линию, подключают расширение «Перо», о котором есть отдельный урок. Для правильного многоугольника угол поворота равен 360, делённому на число сторон: у треугольника 120, у шестиугольника 60.

когда щёлкнут по флажку
повторить 4 раз
    идти 100 шагов
    повернуть ↻ на 90 градусов

Перейти в точку и плавно плыть

Блок «перейти в x: 0 y: 0» мгновенно переносит спрайт в нужную точку, а «плыть 1 секунд в точку x: y:» ведёт его туда плавно за указанное время — это самый простой способ анимировать перелёт.

Мгновенный переход нужен в начале игры: под блоком «когда щёлкнут по флажку» почти всегда стоит «перейти в x: y:», чтобы герой каждый раз стартовал с одного места. Скольжение удобно для мультфильмов: птица перелетает с ветки на ветку за 2 секунды, мяч катится к воротам. Есть и варианты со случайной точкой: «перейти на случайное положение» и «плыть 1 секунд к случайному положению» — так получается муха, которая мечется по экрану. Важно помнить: пока блок «плыть» работает, следующий блок скрипта ждёт. Плавное движение в Scratch без цикла получается только так — одним блоком с указанным временем.

Изменить x и y: движение по осям

Если нужно сдвинуть героя строго по горизонтали или вертикали независимо от того, куда он смотрит, используют 4 блока: «изменить x на 10», «установить x в 0», «изменить y на 10» и «установить y в 0».

«Изменить» прибавляет число к текущей координате, «установить» записывает новое значение. Отрицательное число двигает в обратную сторону: «изменить y на −10» опускает спрайт вниз. Для платформеров это важнее, чем «идти»: герой бежит вправо и влево изменением x, а прыгает и падает изменением y, при этом всегда смотрит прямо. Блок «идти» удобнее для машинок, ракет и других объектов, которые разворачиваются в сторону движения.

Отскок от края и способ вращения

Блок «если касается края, оттолкнуться» разворачивает спрайт, когда тот упирается в границу сцены, — так мяч прыгает по экрану без единого условия. Работает он только внутри цикла, на каждом шаге.

После отскока кот часто оказывается вверх ногами: он развернулся на 180 градусов вместе с картинкой. Это исправляет блок «установить способ вращения» с тремя вариантами: «влево-вправо» — герой только смотрит в одну из двух сторон, «не вращать» — картинка вообще не поворачивается, «вращаться кругом» — поведение по умолчанию. Ещё одна особенность: Scratch не даёт персонажу целиком уйти за край, часть картинки всегда остаётся на сцене.

Управление стрелками: 2 способа

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

когда клавиша [стрелка вправо] нажата
изменить x на 10

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

когда щёлкнут по флажку
повторять всегда
    если <клавиша [стрелка вправо] нажата?> то
        изменить x на 5
    если <клавиша [стрелка влево] нажата?> то
        изменить x на -5

Именно так устроено управляемое движение в Scratch почти во всех играх сообщества. Здесь цикл много раз в секунду спрашивает, нажата ли клавиша, и движение получается ровным. Подробнее про блок «если» рассказано в уроке про условия и касания в Scratch. Готовый пример с этим управлением — игра-лабиринт пошагово.

Движение в Scratch и черепашка в Python

Синие блоки почти дословно совпадают с командами модуля turtle в Python: «идти 100 шагов» — это forward(100), «повернуть ↻ на 90» — right(90), «перейти в x: y:» — goto(x, y).

import turtle

t = turtle.Turtle()
for i in range(4):
    t.forward(100)
    t.right(90)
t.goto(0, 0)

Это не совпадение: обе среды выросли из идей Сеймура Пейперта и языка Logo, где ребёнок управлял черепашкой, рисующей линии^[2]. По федеральной образовательной программе в 8 классе изучают исполнителей Черепашку и Чертёжника^[3], поэтому опыт со сценой Scratch пригодится и на уроках информатики. Когда синие блоки освоены, переход к коду удобно начать со статьи про черепашью графику в Python.

Робот в лабиринте: разминка на направления

Тренажёр под заголовком — это 4 вводных уровня «Робота в лабиринте» с блоками «вперёд», «повернуть налево» и «повернуть направо»; задача — довести робота до флажка.

Методика восходит к Пейперту: он предлагал детям «побыть черепашкой» и пройти маршрут самим, прежде чем объяснять его компьютеру. Здесь тренируется то же, что в синих блоках: понимать, куда смотрит исполнитель, и не путать его «лево» со своим. Если робот развёрнут к вам лицом, его «направо» — это ваше «налево». Соберите программу, нажмите «▶ Запустить», а при ошибке — «Сначала». Полезно поворачивать голову или лист бумаги вслед за роботом: это тот же навык, что нужен для поворотов спрайта.

Когда синий блок не подходит

Синий блок не подходит, когда задача не про перемещение, а про облик, количество объектов или физику. Вот 4 таких случая.

• Герой должен «шагать ногами». Перемещение даст «идти», а шаг ног — смена 2 костюмов.
• Нужно 50 падающих снежинок. Пятьдесят спрайтов с одинаковыми скриптами неудобны — нужны клоны.
• Прыжок с ускорением. Одного «изменить y на 10» мало: гравитацию делают переменной скорости, которая меняется каждый 1 шаг цикла.
• Движение по 3D-миру. Сцена плоская, 2 координаты; объём только имитируют размером и слоями.

Миф: «Чем больше число в блоке „идти“, тем быстрее герой». Не подтверждается: большое число делает скачок, а не быструю плавную ходьбу. Скорость задают маленьким шагом и частыми повторами в цикле.

Миф: «Направление 0 — это вправо, как на часах в 3 часа». В Scratch такого нет: 0 — вверх, 90 — вправо, отсчёт идёт по часовой стрелке от верха.

Чего делать нельзя

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

• Нельзя забывать «перейти в x: y:» под блоком флажка — иначе каждый запуск начнётся с нового места.
• Не стоит ставить «идти 100 шагов» в цикл без паузы — герой мгновенно улетит к краю.
• Не следует путать «изменить x» и «установить x»: первое прибавляет, второе заменяет координату.
• Не стоит управлять платформером блоком «идти», если герой при этом разворачивается вверх ногами.
• Нельзя ставить «если касается края, оттолкнуться» вне цикла — проверка выполнится один раз.

Источники

[1] Maloney J., Resnick M., Rusk N., Silverman B., Eastmond E. The Scratch Programming Language and Environment // ACM Transactions on Computing Education. 2010. Vol. 10, № 4. Article 16.

[2] Papert S. Mindstorms: Children, Computers, and Powerful Ideas. New York: Basic Books, 1980.

[3] Приказ Минпросвещения России от 18.05.2023 № 370 «Об утверждении федеральной образовательной программы основного общего образования».

Вопросы и ответы

Почему кот уходит за край и не возвращается?

В скрипте нет отскока или проверки края. Добавьте в цикл «если касается края, оттолкнуться» или верните героя на старт блоком «перейти в x: y:».

Как узнать координаты нужной точки?

Перетащите героя мышкой в эту точку и посмотрите поля x и y в панели под сценой. Блок «перейти в x: y:» в палитре тоже подставит текущие числа.

Как сделать движение в Scratch быстрее?

Увеличьте шаг в цикле, например с 5 до 8, или уберите лишние паузы. Слишком большой шаг сделает ход рывками.

Почему герой при отскоке переворачивается?

По умолчанию он вращается кругом. Поставьте в начало скрипта «установить способ вращения влево-вправо».

Можно ли управлять героем мышкой?

Да: в цикле «повернуться к указателю мыши» и «идти 3 шагов» заставят его следовать за курсором, а «перейти к указателю мыши» — прилипнуть к нему.

Сколько точек в одном шаге?

Ровно одна. Поэтому «идти 240 шагов» из центра в направлении 90 доводит героя до правого края.