Как добавить героя, нарисовать ему костюм и оживить анимацией

Что такое спрайт в Scratch

Спрайт — это объект на сцене, у которого есть 3 собственных набора: скрипты, костюмы и звуки. Каждый спрайт программируют отдельно, и он сам знает своё положение, размер и направление.

Само слово пришло из компьютерной графики старых игр, где спрайтом называли небольшую картинку, которая двигается поверх фона. В Scratch смысл тот же, но спрайт ещё и «умеет думать»: к нему прикрепляют блоки, и он выполняет их независимо от других. Авторы среды из MIT Media Lab описывают проект как сцену, на которой спрайты действуют параллельно, каждый по своим скриптам^[1]. В описании Maloney и соавторов проект состоит из сцены и спрайтов Scratch: всё, что видно на экране и что действует, — это они. Именно поэтому в игре одновременно бегут враги, падают монеты и тикает таймер.

Все спрайты проекта видны в панели под сценой. Щелчок по значку выбирает героя: в центре окна появляются его скрипты, а в полях панели — имя, координаты x и y, размер, направление и переключатель видимости. Имя лучше сразу поменять с «Спрайт1» на понятное — «Игрок», «Монета», «Кнопка старт».

Митчел Резник из MIT Media Lab советует начинать не с блоков, а с героя: ребёнку проще придумать программу для персонажа, которого он сам выбрал или нарисовал^[2]. Поэтому первый урок про спрайты Scratch часто начинается с вопроса «кто будет главным в твоей истории?», а уже потом — «что он должен делать?». Свой герой держит интерес лучше любого готового задания.

Как добавить спрайт в Scratch: 4 способа

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

1. Выбрать из библиотеки. Готовые персонажи разложены по разделам: животные, люди, фэнтези, спорт, еда, буквы. У многих уже есть несколько костюмов для анимации.
2. Нарисовать. Откроется пустой костюм в графическом редакторе — подходит для простых предметов: стены, платформы, кнопки.
3. Сюрприз. Среда выберет случайного героя из библиотеки — весёлый способ начать мультфильм без долгих раздумий.
4. Загрузить. Картинку с компьютера можно превратить в персонажа; удобнее всего форматы PNG с прозрачным фоном и SVG.

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

Костюмы: один герой — много обликов

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

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

Библиотеку героев и фонов собрала команда MIT, и её разрешено использовать в своих проектах и публиковать. Костюмы нужны не только для анимации. Через них показывают состояние героя: обычный, раненый, с щитом. Кнопка может иметь костюм «нажата» и «не нажата», светофор — три костюма разных цветов. Так один спрайт заменяет несколько, а скрипты остаются в одном месте.

Анимация сменой костюмов

Анимация в Scratch — это быстрая смена костюмов в цикле с короткой паузой: при паузе 0,1–0,2 секунды глаз уже не замечает отдельных кадров, и герой кажется живым.

когда щёлкнут по флажку
повторять всегда
    следующий костюм
    идти 5 шагов
    если касается края, оттолкнуться
    ждать 0.15 секунд

Здесь кот шагает по сцене, перебирая два костюма, и разворачивается у края. Если убрать «ждать», ноги замелькают слишком быстро; если поставить 1 секунду — движение станет дёрганым. Попробуйте разные паузы и посмотрите, при какой анимация выглядит естественно. Исследование группы Lifelong Kindergarten описывает именно такой путь: менять одно число, запускать и сравнивать, пока результат не понравится. Когда кот после отскока идёт вверх ногами, добавьте в начало скрипта «установить способ вращения влево-вправо». Как работают повторения и почему без цикла анимация длится один кадр, объясняет урок про циклы в блоках Scratch.

Редактор костюмов: вектор и растр

Графический редактор работает в 2 режимах: векторном, где рисунок состоит из фигур и линий, и растровом, где он состоит из точек-пикселей. Переключатель «Преобразовать в растровую» или «в векторную» находится под холстом.

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

Центр костюма и вращение

Центр костюма — это точка, вокруг которой спрайт поворачивается и по которой считаются его координаты x и y. В редакторе она отмечена маленьким значком-прицелом посередине холста.

Если нарисовать героя в углу холста, центр окажется далеко от картинки. Тогда при повороте спрайт будет «летать по кругу», а блок «перейти в x: 0 y: 0» поставит его не в середину сцены. Исправить просто: выделите весь рисунок и перетащите его так, чтобы прицел оказался в нужной точке — например, в середине тела или у основания ног. Для стрелки часов центр ставят на её конец, тогда она вращается правильно. Без этой настройки аккуратная анимация поворота не получится, сколько ни подбирай числа в блоках. Этот же принцип есть у исполнителя Черепашка, которого по ФОП изучают в 8 классе: она поворачивается вокруг точки, где стоит.

Сцена и фоны

Сцена — это особый объект размером 480 на 360 точек, а не один из спрайтов Scratch: у неё нет костюмов, зато есть фоны, и она не умеет двигаться. Фоны меняют блоками «переключить фон на …» и «следующий фон».

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

Когда смена костюмов не поможет

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

• Герой должен переместиться на 100 точек. Это работа блоков движения, а костюм меняет только облик на месте.
• Нужно 30 одинаковых снежинок. Дублировать персонажа 30 раз неудобно — тут нужны клоны.
• Нарисовать след длиной в 1 экран. Линии за персонажем рисует расширение «Перо», а не костюмы.
• Плавный поворот на 360 градусов. Вращение делают блоком «повернуть», а не десятками нарисованных кадров.

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

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

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

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

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

Справка Scratch Foundation для родителей напоминает, что проекты в сообществе видят все, поэтому персонажа лучше рисовать, а не фотографировать^[3]. Если где-то в интерфейсе потерялись вкладки или панель, освежите в памяти устройство окна редактора.

Источники

[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] Resnick M. Lifelong Kindergarten: Cultivating Creativity through Projects, Passion, Peers, and Play. Cambridge, MA: MIT Press, 2017.

[3] Scratch Foundation. Scratch: For Parents (раздел справки Scratch).

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

Есть ли предел числу спрайтов в Scratch?

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

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

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

Как сделать прозрачный фон у загруженной картинки?

Загружайте PNG с прозрачностью или удалите фон ластиком в растровом режиме. Белый прямоугольник вокруг героя — признак того, что фон остался.

Можно ли перенести героя в другой проект?

Да: «экспортировать» сохраняет его файлом вместе со скриптами, костюмами и звуками. Второй способ — «Рюкзак» для тех, кто вошёл в аккаунт.

Чем костюм отличается от фона?

Костюм принадлежит персонажу и двигается вместе с ним, фон принадлежит сцене и всегда занимает весь экран 480 на 360.

Можно ли публиковать проект с героями из библиотеки?

Да, библиотека для этого и создана. Ограничения касаются чужих картинок из интернета и личных фотографий.