Как устроен редактор Scratch: сцена, палитра блоков и вкладки

Из чего состоит интерфейс Scratch

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

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

Над палитрой есть три вкладки: «Код», «Костюмы» и «Звуки». Пока открыта вкладка «Код», центр окна занят скриптами; две другие превращают центр в графический или звуковой редактор. Сцена и панель спрайтов при этом остаются на месте, поэтому изменения видны сразу.

Над переводом интерфейса на десятки языков работают волонтёры, а сам проект поддерживает некоммерческая Scratch Foundation. Поэтому русская версия окна полная: переведены и меню, и подписи на блоках, и названия костюмов в библиотеке. Переключать язык ради отдельных пунктов не нужно.

Карта окна редактора

Чтобы быстро ориентироваться, держите перед глазами эту таблицу: в ней 7 элементов интерфейса Scratch, их место на экране и главное действие в каждом.

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

Палитра блоков: 9 цветных категорий

Палитра — это склад блоков, разложенных на 9 категорий; цвет блока подсказывает его категорию, поэтому по цвету в готовом скрипте сразу видно, где движение, а где условие.

• Движение (синие). Шаги, повороты, координаты x и y, отскок от края.
• Внешний вид (фиолетовые). Реплики, смена костюмов и фонов, размер, эффекты, «показаться» и «спрятаться».
• Звук (розовые). Проигрывание звуков, громкость, звуковые эффекты.
• События (жёлтые). Блоки-старты: флажок, клавиши, щелчок по спрайту, сообщения.
• Управление (светло-оранжевые). Ожидание, циклы, условия, клоны, остановка.
• Сенсоры (голубые). Касания, расстояние, вопрос и ответ, клавиши, мышь, таймер.
• Операторы (зелёные). Арифметика, сравнения, «и», «или», «не», случайные числа, работа с текстом.
• Переменные (оранжевые). Создание переменных и списков, блоки «задать» и «изменить».
• Мои блоки (розово-красные). Собственные блоки — аналог функций в текстовых языках.

В описании среды у Maloney и соавторов подчёркнуто, что все команды видны в палитре: не нужно помнить названия, достаточно найти блок глазами и попробовать. Названия категорий перекликаются с понятиями, которые Brennan и Резник выделили в исследовании вычислительного мышления: события, условия, операторы, данные^[3]. Слева от палитры — колонка кружков с названиями категорий: щелчок по кружку прокручивает палитру к нужному разделу. В самом низу этой колонки — кнопка добавления расширений. Оттуда подключают «Перо», «Музыку» и другие наборы; после подключения у них появляется свой кружок и цвет.

Формы блоков и что они значат

Форма блока — это подсказка, куда его можно вставить: блоки бывают 6 видов, и защёлкнуть «не тот» блок интерфейс Scratch просто не даст.

Эта система форм — главная причина, по которой в блоках не бывает синтаксических ошибок. Создатели среды объясняли этот приём так: блоки соединяются только теми способами, которые имеют смысл, поэтому если блок не входит в гнездо, значит, так написать нельзя^[1]. Логические ошибки при этом никуда не деваются — их приходится искать самому, и никакая форма блока от них не защитит. Перепутать порядок команд интерфейс не помешает.

Область скриптов: сборка, порядок и удаление

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

Если потянуть за блок в середине столбика, вместе с ним уедут все блоки ниже. Чтобы удалить блок, его возвращают в палитру или выбирают «Удалить» в меню правой кнопки мыши. То же меню на пустом месте предлагает «Упорядочить блоки» — скрипты выстроятся ровной колонкой — и «Добавить комментарий», жёлтую записку для пояснений. В правом нижнем углу три кнопки: увеличить, уменьшить и вернуть обычный масштаб.

когда щёлкнут по флажку
говорить [Привет!] 2 секунд
повернуть ↻ на 15 градусов

Скрипт можно запустить, просто щёлкнув по нему мышкой, — он подсветится жёлтой рамкой, пока выполняется. Это удобный способ проверить кусок программы отдельно. Митчел Резник называет такую манеру работы «мастерением»: попробовать, посмотреть, поменять и попробовать снова, не дожидаясь, пока вся программа будет готова^[4]. Бояться что-то сломать не нужно — любое изменение можно отменить. Если войти в аккаунт, внизу области появится «Рюкзак»: туда складывают скрипты и спрайты, чтобы перенести их в другой проект.

Сцена, флажок и знак «стоп»

Сцена — это экран размером 480 на 360 точек с центром в точке (0, 0); над ней слева зелёный флажок запускает все скрипты с блоком «когда щёлкнут по флажку», а красный восьмиугольник останавливает всё.

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

Панель спрайтов и выбор сцены

Под сценой лежит панель спрайтов — это список всех героев проекта и их свойства: имя, координаты x и y, видимость, размер и направление. Числа в этих полях можно менять руками.

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

Вкладки «Костюмы» и «Звуки»

Вкладка «Костюмы» превращает центр окна в графический редактор, а вкладка «Звуки» — в звуковой; у сцены первая из них называется «Фоны». Слева в обеих — список элементов выбранного спрайта.

Рисовать с нуля не обязательно: библиотека MIT содержит сотни готовых костюмов. В графическом редакторе есть кисть, ластик, заливка, текст, линии, круги и прямоугольники. Рисовать можно в векторном или растровом режиме, переключатель — внизу. В звуковом редакторе запись обрезают и применяют эффекты: быстрее, медленнее, эхо, робот, громче, тише, наоборот. Звук можно взять из библиотеки, записать с микрофона или загрузить файлом.

Верхнее меню и полезные мелочи

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

Если случайно удалили спрайт, пункт «Восстановить» в меню «Редактировать» вернёт его. Не стоит включать турборежим без причины: он ускоряет выполнение и нужен редко — например, для рисования пером сложных узоров. Сохранение файлов и аккаунт описаны в статье о том, как запускать Scratch онлайн и офлайн.

Когда стандартная раскладка мешает

Стандартная раскладка мешает, когда экран маленький или проект разросся. Вот 4 ситуации и простые решения без смены редактора.

• Экран ноутбука 13 дюймов. Включите маленькую сцену — области скриптов станет заметно больше.
• У спрайта больше 20 скриптов. Щёлкните правой кнопкой и выберите «Упорядочить блоки», добавьте комментарии.
• В проекте 15 похожих спрайтов. Дайте им имена вместо «Спрайт1», «Спрайт2» — иначе в панели легко ошибиться.
• Ребёнку 5–6 лет. Обилие подписей мешает; для этого возраста удобнее планшетный ScratchJr.

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

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

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

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

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

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

Источники

[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] MIT Media Lab introduces Scratch 3.0 // MIT News. 08.01.2019.

[3] Brennan K., Resnick M. New frameworks for studying and assessing the development of computational thinking // Proceedings of the 2012 Annual Meeting of the American Educational Research Association. Vancouver, 2012.

[4] Resnick M. Lifelong Kindergarten: Cultivating Creativity through Projects, Passion, Peers, and Play. Cambridge, MA: MIT Press, 2017.

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

Как переключить интерфейс Scratch на русский язык?

Нажмите на глобус в левом верхнем углу и выберите «Русский». Переводятся и меню, и надписи на блоках.

Куда пропали блоки движения?

Скорее всего, выделена сцена, а не спрайт. У сцены нет блоков движения — выберите героя в панели под ней.

Как вернуть удалённый блок или спрайт?

В меню «Редактировать» есть пункт «Восстановить». Для блоков в области скриптов работает и привычное сочетание Ctrl+Z.

Почему блок не защёлкивается?

Его форма не подходит к гнезду: например, шестиугольное условие нельзя вставить в круглое окошко для числа. Посмотрите на форму и найдите подходящее место.

Отличается ли редактор на сайте от установленного?

Раскладка окна одинаковая. В установленной версии нет кнопок сообщества и облачного сохранения^[2].

Зачем комментарии в блочной программе?

Чтобы через неделю понять, что делает каждый скрипт. Короткая записка «управление стрелками» экономит минуты поиска в большом проекте.