Scratch (Скретч) — это визуальная среда для программирования и создания игр. Она напоминает конструктор LEGO: вместо текстового кода здесь блоки с командами, их нужно переставлять и скреплять друг с другом.
Что такое Scratch
Scratch – это не только среда для программирования, это еще большое сообщество. Во многих странах мира дети и взрослые, учителя и школьники используют Scratch, чтобы учиться программированию, развивать творческие способности, создавать игры и интерактивные анимации, а также общаться между собой, изучать и использовать проекты друг друга.
Сайт сообщества и среды программирования находится по адресу https://scratch.mit.edu/ . Поскольку это общемировая социальная сеть, язык интерфейса сайта может оказаться английским. Чтобы поменять его на русский, надо прокрутить страницу вниз и в выпадающем списке выбрать русский язык.
Программирование с нуля на Scratch
Чтобы зарегистрироваться на сайте, надо нажать кнопку «Присоединяйся», которая находится вверху сайта.
После этого на экране появится диалоговое окно, где будет предложено придумать себе псевдоним, пароль, заполнить другие поля. Также у вас должен быть адрес электронной почты. После регистрации на него придет письмо, кликнув по ссылке в котором, вы подтвердите свою учетную запись на сайте Scratch.
В заголовке сайта после логотипа Scratch есть четыре кнопки – «Создавай», «Исследуй», «Идеи», «О проекте».
Если кликнуть по «Создавай», откроется среда программирования Scratch. Как в ней работать, рассмотрим чуть позже. Если вы зашли сюда и не знаете как выйти, просто кликните по логотипу Scratch в верхнем левом углу. Это вернет вас на главную страницу сайта.
Если кликнуть по «Исследуй», вы перейдете на страницу, где можете посмотреть чужие проекты. Часть из них доступна также с главной страницы.
Чтобы посмотреть чужой проект, надо кликнуть по нему. Откроется страница, где слева будет сам проект, справа – его описание, внизу – комментарии. Проект будет в режиме исполнения, то есть вы смотрите готовую работу, а не то, как она запрограммирована и из каких блоков собрана.
Чтобы запустить игру, надо нажать на зеленый флажок. Чтобы остановить – на красный кружок. Значок с четырьмя стрелками разворачивает игру на большую площадь экрана.
Если вы кликните по кнопке «Войти внутрь проекта», то окажетесь в среде программирования Scratch и сможете посмотреть внутреннее устройство проекта, его логику. На основе чужого проекта можно создать свой, то есть ремикс. Однако сначала надо научиться работать в среде программирования и создавать собственные простые проекты.
Вернемся к шапке сайта и рассмотрим меню справа:
Основы scratch. Урок 1: изучаем интерфейс и делаем анимацию | Программирование TutorOnline
В первую очередь нас интересует ссылка «Мои работы». Она открывает страницу, с которой вам доступны собственные проекты. На эту страницу также можно перейти, кликнув по изображению папки в меню.
Чтобы начать новый проект, надо нажать кнопку «+ Новый проект». Откроется та же среда программирования, что при клике по ссылке «Создавай» вверху. Если вы хотите править ранее созданный проект, нажимайте на кнопку «Войти внутрь проекта». А вот клик по названию проекта откроет его в режиме исполнения, то есть просмотра.
Что же, создадим новый проект и изучим интерфейс Скретча:
Если редактор открылся не на русском языке, нажмите глобус слева вверху и выберите русский язык.
По умолчанию проект назван Untitled (Неозаглавленный). В поле, где написано это слово, можно задать более осмысленное имя. Оно сохранится автоматически.
Если же нажать на кнопку «Поделиться», ваш проект станет доступен всем для просмотра. Обычно сырые проекты не публикуют, и они остаются доступными только своим создателям.
В основной области экрана слева на вкладке «Код» расположены строительные блоки. Они задают поведение объектов, которые вы видите в области справа на игровом холсте, или сцене. Сейчас там только кот.
Большое пустое поле посередине – это самая важная область – редактор кода. Здесь вы «пишите» код, а точнее, конструируете его из блоков, которые перетаскиваете из левой части.
Строительные блоки слева разделены по секциям-разделам «Движение», «Внешний вид», «Звук» и так далее. Нажимая на соответствующий цветной кружок, вы быстро перейдете к блокам необходимой секции.
В этом уроке не будем рассматривать весь интерфейс среды программирования Scratch. Постепенно, изучая курс, мы познакомимся и с другими возможностями. А сейчас для создания первой программы достаточно уже полученных сведений.
Возьмите блок «идти 10 шагов» и киньте его в редактор кода. Теперь пощелкайте по нему мышью. Вы увидите, как от каждого клика кот на сцене будет смещаться на небольшое расстояние.
Если кот на холсте далеко ушел от середины, его можно взять здесь мышью и перетащить в новое место холста.
По идее программа должна запускаться, когда кликают по расположенному над холстом зеленому флажку, а не по блоку команды, как это делали мы. Если мы сейчас кликнем на флажок, то ничего не произойдет.
Чтобы исправить это, нам нужна команда «когда флажок нажат» (в команде вместо слова «флажок» будет изображение зеленого флажка). Эта команда находится в желтом разделе «События». Переключимся сюда и бросим в редактор кода «когда флажок нажат».
После этого два блока – «когда флажок нажат» и «идти 10 шагов» – надо соединить подобно элементам конструктора Лего.
Последовательность блоков важна. Команда, которая расположена выше, будет выполняться раньше, чем команда, которая расположена ниже. Часто конфигурация самих блоков подсказывает, как их надо соединять. Например, мы никогда не сможем сделать команду «когда флажок нажат» второй, третьей или какой угодно, кроме как первой.
У этого блока нет выемки сверху, куда можно было бы вставить другой блок. Программа всегда начинается с команды «когда флажок нажат».
Теперь кот будет перемещаться при клике по зеленому флажку над холстом.
Однако от каждого клика кот по прежнему шагает всего где-то на 10 пикселей, и никакой нормальной анимации перемещения мы не видим.
Обратите внимание, что в команде «идти 10 шагов» поле с числом редактируемое. Туда можно записать любое число. То есть команда может выглядеть так: «идти 100 шагов». Или так: «идти -25 шагов». Поэтому правильно упоминать эту команду так: «идти … шагов», где вместо троеточия подразумевается произвольное число.
Как работать в программе скретч
Практика в учебнике и его иллюстрации ориентированы на версию Скретч 2.0 . Об установке этой версии рассказано в разделе «Как установить Скретч на свой компьютер» на странице Слово к наставнику .
- Жажда нового
- Задача 1. Поскорее «окунуться» в Скретч
- Задача 2. Изобразить полёт летучей мыши
- Задача 3. Добавить в мультик бегемота на водопое
- Задача 4. Мышь и бегемот издают звуки, когда на них щёлкают
Жажда нового
Когда я был маленьким крокодилом, я никогда не лазил по пожарным лестницам.
Э. Успенский, «Чебурашка и крокодил Гена»
У меня хорошая новость для тех, кто не любит выстукивать на клавиатуре буковки!
Обычная программа — это текст. Но есть язык, в котором программа собирается из блоков, как собирается игрушка из кубиков Лего.
Сборка домика из набора конструктора Лего
Если Скретч -приложение ещё не установлено у вас на компьютере, пройдите в раздел Установка Скретч.
Откройте Скретч -приложение , и вы увидите на экране:
- исполнителя (кота);
- среду исполнителя (белое поле);
- СКИ — набор команд, записанных на блоках;
- поле для сборки программы.
- исполнитель
- среда исполнителя
- СКИ
- поле для сборки программы
Исполнитель находится в центре, но его можно перетащить мышкой в любое место его среды
Исполнитель может работать в двух режимах: и .
В командном режиме исполнитель получает команду, выполняет её и ждёт следующую. Чтобы задать команду на исполнение, нужно щёлкнуть на ней в СКИ.
Задание . Щёлкните в СКИ на команде , и вы увидите, как кот сместится на 10 шагов.
В программном режиме исполнитель получает программу — последовательность команд и выполняет по порядку все команды в неё входящие.
Программы собираются из блоков в поле программы, и именно этот режим интересен для нас — программистов!
Задача 1 ( 1 кук ). Поскорее «окунуться» в Скретч .
«Сначала дело, потом умные слова» — говорит роботландский Лисёнок.
— Хорошо! Давайте без лишних слов погрузимся в мир программ Скретча !
Для начала повторяйте за мной!
- Перетащите мышкой блок с командой в поле для сборки программы. Щёлкните на этом блоке. Программа (состоящая из одной команды) сработает, кот сместится на 10 шагов.
Исполнитель смещается на 10 шагов
- А если нужно сделать 20 шагов? Перетащите ещё одну команду и соедините два блока вместе. Щелчок на нашей программе (на любом блоке), и кот смещается на 20 шагов.
Исполнитель смещается на 10 шагов, а потом ещё на 10
- На самом деле второй блок не нужен. В белом окошке любого блока можно менять значение.
Сбросьте нижний блок назад в область СКИ (так из программы удаляется последняя команда), щёлкните на белом окошке в оставшейся команде (в нём появится мигающий текстовый курсор) и исправьте значение 10 на 20.
Щёлкаем, кот смещается на 20 шагов.
Исполнитель смещается на 20 шагов
- Воспользуемся блоком . Он расположен в СКИ в группе Управление . Этот блок резиновый! В него можно поместить сколько угодно блоков, и то, что им охвачено, повторяется непрерывно.
Задано непрерывное повторение команды движения
- Не будем больше щёлкать на программе!
Добавьте в начало программы блок . Он расположен в СКИ в группе События .
Посмотрите, над средой исполнителя расположены две кнопки: — зелёный флажок и красный восьмиугольник.
Флажок запускает программу, если она начинается с блока . Восьмиугольник останавливает выполнение.
Щёлкаем на флажке!
Кот непрерывно повторяет команду движения и уходит из среды
- Жалко кота! Добавим в программу ещё одну команду: . Она расположена в группе Движение .
Щёлкаем на флажке и видим, что кот совершает бесконечную прогулку, не покидая среды, но…
- Упс! Почему справа налево кот идёт вверх ногами? Дело в том, что когда кот отталкивается, он поворачивается. Стиль поворота задаётся в паспорте исполнителя.
Чтобы открыть паспорт кота, нажмите в разделе Спрайты , и измените стиль вращения:
Меняем стиль вращения в паспорте исполнителя
Теперь кот не будет ходить подобно мухе по потолку! Проверьте.
Сохраним работу на диске ( Файл/Сохранить как ) и продолжим.
Спрайты, костюмы, скрипты, звуки
Спрайт — газированный напиток, со вкусом лайма и лимона, принадлежащий американской компании The Coca-Cola Company.
А у нас в Роботландии предпочитают чай с сухариками!
Но… Дело в том, что исполнитель в Скретч (тот самый кот, которого мы заставили бегать туда-сюда) является спрайтом !
Спрайт (англ. Sprite — фея; эльф) — графический объект в компьютерной графике. Спрайт может свободно перемещаться по экрану под управлением программы.
Если вы думаете, что исполнителем в среде Скретч может быть только фирменный кот, вы ошибаетесь!
Удалим кота и назначим исполнителем летучую мышь.
Удалить спрайт из среды можно разными способами.
- Можно взять инструмент Ножницы и щёлкнуть этим инструментом на коте:
Берём ножницы и щёлкаем на коте
- Можно открыть контекстное меню на исполнителе и выбрать в нём позицию Удалить :
Удаляем через контекстное меню спрайта
— это меню, связанное с тем объектом, на котором щёлкают правой кнопкой мыши.
- Можно открыть контекстное меню на паспорте исполнителя и выбрать в нём позицию Удалить :
Удаляем через контекстное меню паспорта спрайта
Важно! При удалении спрайта программа, которая для него написана, тоже будет удалена.
Итак, кот удалён (вместе со своей программой). Выбрать новый спрайт можно разными способами:
Выбрать спрайт можно из библиотеки, нарисовать в редакторе, загрузить из файла, получить с видеокамеры компьютера
Выбираем в библиотеке спрайтов в группе Животные изображение летучей мыши.
Щёлкаем на нужном изображении (выделяем его) и нажимаем Ok
Задача 2 ( 2 кука ). Изобразить полёт летучей мыши.
Можно заставить спрайт мыши, как ранее спрайт кота, двигаться в среде, отталкиваться от краёв и поворачиваться в сторону движения.
Программа, составленная для кота, будет прекрасно работать и для мыши! Тогда зачем мы её удалили вместе с котом?
Но такое движение далеко от реального! Почему? Кот, когда идёт, должен двигать лапками, а мышь — крыльями!
Вы, конечно, знаете, как устроены мультики — нам показывают друг за другом несколько фаз движения, глаз не успевает разглядеть их по отдельности, и рисунки сливаются в мультик.
Отдельные фазы движения персонажа. При быстрой смене фаз отдельные картинки сливаются, и мы видим бегущего зайца
Чтобы показать полёт, нужно иметь не одно, а несколько изображений, с разными положениями крыльев!
Скретч прекрасно понимает наши мультяшные желания, и в нём каждый спрайт может иметь несколько «костюмов»!
Откройте вкладку Костюмы . Оказывается у летучей мыши уже предусмотрено два костюма:
Костюм спрайта — это один из предусмотренных вариантов его изображений. При помощи смены костюмов удобно программировать мультипликацию
Теперь легко собрать код, отвечающий за смену костюмов.
Сколько времени будет ждать исполнитель по команде ? Если вы не знакомы с десятичными дробями, то вот краткое пояснение.
| 1 секунда | одна секунда |
| 0.1 секунды | одна десятая часть секунды |
| 0.2 секунды | две десятых частей секунды |
| 0.3 секунды | три десятых частей секунды |
| 0.4 секунды | четыре десятых частей секунды |
Число 0.2 в два раза больше числа 0.1 и в два раза меньше числа 0.4 .
Получается, что программа полёта состоит из 2-х частей — части, отвечающей за передвижение и части, отвечающей за смену костюмов. Эти части собраны под двумя отдельными «шапочками»:
Программа полёта мыши
Обе части программы запускает флажок, и они работают одновременно или, как говорят программисты, параллельно . Подробнее о параллельности (когда она нужна, а когда нет) будет рассказано в уроке 2.
Задача 3 ( 1 кук ). Добавить в мультик бегемота на водопое.
Для бегемота нарисовано 6 костюмов, картинки эти находятся в папке practical/sprlib/ . Имена файлов: hippo1.png , hippo2.png ,… hippo6.png :
Посмотрите: водопой бегемота правдоподобнее полёта мыши! Почему так? .
А можно ли добавить ещё одного исполнителя в среду? Да!
Скретч допускает сколько угодно исполнителей-спрайтов в среде, и для каждого спрайта записывается собственная программа работы.
- Загружаем новый спрайт с адреса practical/sprlib/hippo1.png . Эта картинка автоматически становится первым костюмом.
- Переходим на вкладку Костюмы и загружаем оставшиеся 5 костюмов.
Загружаем спрайт бегемота из 6 костюмов.
Устанавливаем исполнителя-мышь слева сверху, а исполнителя-бегемота справа внизу
Групповая загрузка
Заметим, что загрузить все 5 костюмов можно, как обычно при работе с файлами, за один раз, выделяя нужные картинки.
Щелкаем по первой картинке, затем по последней с нажатой клавишей Shift
Если файлы в поле выбора идут не подряд, то щёлкаем по первому, выделяя его, затем добавляем к выделению другие файлы щелчками с нажатой клавишей Ctrl .
Загрузка анимированного gif
Анимированный gif — это графический файл с расширением gif , содержащий набор картинок одинакового размера и сценарий смены этих картинок при показе на экране.
Если загрузить анимированный gif в качестве спрайта, он автоматически будет разделён на составляющие картинки-костюмы.
Автоматическое разделение анимированного gif на костюмы
Часть программы полёта мыши, отвечающая за смену костюмов, вполне подойдёт и для бегемота. Копируем её:
Выделяем паспорт мыши. На вкладке Скрипты перетаскиваем нужный код мыши на паспорт бегемота (отпускаем, когда курсор мыши оказывается на паспорте бегемота)
Проверяем, выполнилось ли копирование:
Выделяем паспорт бегемота, и на вкладке Скрипты видим скопированный код
Запускаем мультик, нажимая зелёный флажок.