Меню

Костюмы для кота скретч

Урок 5. Создание и редактирование спрайтов

Часть 1. Знакомство с редактором костюмов

В первой части 5-го урока мы узнаем несколько новых терминов и научимся рисовать свои спрайты, а также усовершенствуем игру «Кот-обжора».

Замечание: с января 2019 года на сайте Scratch доступна новая версия редактора — Scratch 3.0, который внешне немного отличается от Scratch 2.0, в котором записывался данный урок. Поэтому если возникнут вопросы, пиши их, пожалуйста, в комментариях к видео или внизу этой страницы сайта. Мы провели сравнение двух версий языка в серии прямых эфиров.

Scratch 2.0 по-прежнему можно использовать, скачав и установив программу на свой компьютер. Мы записали также видео-уроки о том, как установить Scratch 2.0 и Scratch 3.0 на свой компьютер.

Часть 2. Векторная графика. Анимация «Кот гуляет с мячом»

Во второй части 5-го урока мы узнаем, что такое векторная графика, чем она отличается и как с ней работать. И еще создадим новую анимацию «Кот гуляет с мячом». Пример проекта здесь: https://scratch.mit.edu/projects/73708580/ или прямо здесь:

А вот и сам урок:

Часть 3. Растровая графика. Импорт костюмов. Анимация «Реалистичный кот»

В третьей части 5-го урока мы разберёмся в понятии растровой графики, научимся создавать спрайты на основе фотографий, а также импортировать костюмы для создания реалистичной анимации.

Пример проекта «Реалистичный кот» здесь: https://scratch.mit.edu/projects/80731900/ или здесь:

Часть 4. Вспомогательные учебные материалы для Scratch 3.0

Мы сопоставили две версии редакторов Scratch 2.0 и Scratch 3.0, в котором появились более новые профессиональные инструменты.

Scratch 3.0 vs Scratch 2.0. Спрайты. Графический редактор костюмов и фона

Новая сортировка
Что делать, если в Scratch 3.0 нет полюбившихся спрайтов из Scratch 2.0?
Координаты и размеры спрайта

2. Инструменты графического редактора

Нововведения в векторном редакторе
Центр спрайта

3. Кнопки Импорт и Добавить

Куда исчезли?
Как быть?

Scratch 3.0 vs Scratch 2.0. Векторный графический редактор

Профессиональные функции графического редактора в Scratch 3.0

использование горячих клавиш Shift и Ctrl;
работа с русским текстом.

Источник



Создание спрайтов и костюмов

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

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

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

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

Пусть нашим героем будет смайлик. Нарисуем его с помощью инструментов «Круг» и «Линия». Также воспользуемся заливкой, чтобы раскрасить.

Костюмы можно переименовывать, как и спрайты.

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

Таким образом, создадим смайлу несколько костюмов, изменяя только его улыбку.

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

Для начала запрограммируем перемещение кота:

Теперь надо как-то узнавать, что кот касается смайла? В разделе «Сенсоры» есть команда «касается цвета …». Если кликнуть по полю с цветом, то появится панелька, где можно выбрать цвет. Чтобы точно определить тот или иной цвет, лучше воспользоваться пипеткой. Ей надо кликнуть по объекту на сцене, касание с которым будет обрабатываться программой.

Однако кто кого касается? Кот смайла или смайл кота? В данном случае разница есть, так как если кот касается смайла, то блок «касается цвета …» должен добавляться коту. Если же смайл касается кота, то блок добавляется смайлу.

Читайте также:  Как определить что кот тебя любит

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

Бросим эту команду в редактор кода смайла, выберем пипетку и наведем ей на кота. Причем так, чтобы выбрать его оранжевый цвет. Ни в коем случае не белый или черный. А только какой-то уникальный цвет кота, характерный только для него.

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

Команда «передать брысь» внутри блока «если касается цвета» нужна для того, чтобы как только кот коснется смайла, он сразу отскакивал от него. Иначе цикл, который крутится очень быстро, снова зафиксирует касание. Получится, что смайлик от одного касания кота начнет очень быстро менять свои костюмы.

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

Реализуйте сценарий, в котором при каждом нажатии пробела два спрайта попеременно превращаются друг в друга. Например, при каждом нажатии пробела яблоко превращается в бананы, а бананы – в яблоко.

Источник

Программирование в Scratch. Проект «Кот-водолаз и акула»

Задача. Кот-водолаз нырнул за морскими сокровищами и хочет всплыть. Но неожиданно появилась акула. Задача кота – всплыть так, чтобы не задеть акулу. Если акула задевает ныряльщика, он говорит «Ой-ой-ой» несколько секунд. Кот управляется с помощью кнопок «Вверх», «Вниз», «Влево», «Вправо». Акула караулит ныряльщика и плавает туда-сюда.

Оборудование: ПК, проектор, программа Scratch 2.0.

Понятия: система команд, спрайт, события, скрипт, команды движения, система координат, векторная и растровая графика, цикл, условие, сенсоры, сохранение проекта.

Вопросы:

  1. В каких единицах в команде «Идти 10 шагов» задано перемещение?
  2. Что такое спрайт?
  3. Какая ширина и высота у рабочей области программы Scratch?
  4. В чем разница команд «изменить х на 20» от «установить х в 20»?
  5. В чем разница между изображением в векторном и растровом виде?
  6. Доработайте игру, чтобы кот при движении назад поворачивался.

Решение задачи

Словесный алгоритм:

Шаг 1. Удалите стандартный спрайт с котом.

Шаг 2. Добавьте в сцену спрайт с котом Cat1Flying и акулу.

Шаг 3. Добавьте фон подводного мира или нарисуйте свой в растровом режиме. Должно получиться так:

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

После этого добавьте к событию ««Когда клавиша….» команду, которая изменяет координату х – если нужно двигаться влево-вправо, или y — если нужно двигаться вверх-вниз.

Шаг 5. Напишите для кота второй скрипт, при котором он постоянно будет менять свой костюм.

Блок-схема скрипта

Теперь кот может плавать.

Шаг 6. Напишите программу для акулы, чтобы она могла плавать туда-сюда и менять костюм. Для смены костюма используется второй способ. Как видите, команд здесь 5 вместе с циклом и код получился длиннее — это не очень хорошо. Зато этот способ позволил сохранить третий «грустный» костюм у акулы и мы меняем только первые два костюма.

Блок-схема для 1 скрипта

Шаг 7. Чтобы кот при встрече с акулой говорил «Ой-ой-ой» напишите программу по такому алгоритму: «Постоянно проверяй — если кот касается спрайта акулы, говори или думай «Ой-ой-ой» в течение 1 секунды».

Блок-схема скрипта

Методика

Задача подойдет для детей 5 класса и старше. Я даю её на первом занятии при знакомстве с программированием. Если объяснять все подробно, 45 минут не хватит.

Читайте также:  Ученный кот 3 класс

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

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

Работа с графикой

В Скретче компьютерная графика встречается везде. Можно делать двухмерную анимацию, писать игры, создавать тесты, рисовать графики функций.

Объяснение можно начать с кота, который загружается в новую сцену по умолчанию. Кот, он же Scratch (с англ. scratch — «царапать», т.е. Царапка) — это спрайт. Термин «спрайт» используется в 3D-графике. Им называют двухмерные картинки с текстурой — дым, огонь, персонажи и прочее. Анимируя движение множества спрайтов в трехмерном пространстве достигают различных эффектов – горит костер, идет дым, анимируется движение плоского персонажа.

Спрайт персонажа в 3D-окне Unity

В Скретч готовые спрайты можно найти в библиотеке спрайтов. Пусть дети удалят стандартный спрайт и добавят в сцену спрайт с летающим котом и акулу. Заметьте — все спрайты собраны в тематические каталоги, что облегчает поиск.

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

Покажите, что при конвертировании вектора в растр кот становится «пиксельным». Объясните, что векторное изображение хранится в виде формул, а растровое – это таблица (матрица) точек со своими координатами и цветом. На первом занятии этого будет достаточно.

Слева — векторная картинка. Справа — растровая

Дальше можно показать, как работать с растровой графикой и фоном. Пусть дети нарисуют свой фон подводного мира. Расскажите, как пользоваться инструментами при работе с растровым изображением – кисточкой, заливкой, как менять диаметр кисти.

Программирование

Для детей постарше или продвинутым ребятам не давайте готовые скрипты. Заменяйте их словесным алгоритмом или блок-схемами.

Вначале можно спросить детей, с какого персонажа мы начнем программировать – с акулы или с кота.

Программы в Скретч называются скриптами. Для каждого спрайта можно написать множество скриптов, выполняемых одновременно.

У каждого спрайта (объекта) одна и та же система команд. В скретче команды собраны в систему очень наглядно – в «Движении» для движения, во «Внешности» для изменения внешнего вида и эффектов. У фона система команд немного отличается. Например, там отсутствуют команды движения.

Все команды прилипают друг к другу. Щелкая двойным кликом команда запустится. Если команд несколько выполнится первая сверху, потом следующие по порядку. После завершения мы получим некоторый результат, и программа закончится (если нет цикла, но об этом попозже). Все просто. Напомните им про рецепт выпечки блюда.

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

На примере из окружающего мира объясните, что такое событие. Что событие запускает некоторый процесс. Например, капля дождя, упавшая в лужу – это событие, после которого расходятся круги на воде. В Скретче также есть события – щелчок по зеленому флажку, нажатие клавиши на клавиатуре может выполнить цепочку действий. Причем каждое событие происходит только при определенных условиях. Так, когда клавиша R нажата на русской раскладке, это буква К и ничего не произойдет.

Система координат

При программировании движения кота появляется следующая трудность – как заставить кота ходить вверх-вниз, влево-вправо. Начертите декартову систему координат. Покажите, где ось У, а где Х. Пусть дети найдут в программе координаты мыши. А также определят размер холста (-240:240 пикселей по Х, -180:180 пикселей по Y).

Читайте также:  Кот спит у мышей праздник

Расскажите, чем отличается команда «Изменить х на…» от «Установить х в…». Покажите выполнение перемещения с одинаковым числом на экране. Пусть дети ответят на вопрос, в чем разница этих команд сами. Можно объяснить, что происходит, с точки зрения программирования в виде формул (отличие х = х + 10 от х = 10).

Система координат рабочего холста в Scratch

Оператор цикла

Ничего страшного, что с первого занятия дети попробуют работать с циклом и условием. Более осознанно они будут решать задачи позже. Скретч, ввиду простоты кода и интерфейса, позволяет абстрагироваться от синтаксиса языка программирования. Важно уметь объяснять неизвестное на простых примерах из жизни и наглядно демонстрировать новое на экране.

Польза циклов – компактный код. Продемонстрируйте на экране выполнение трех вариантов движения. Во втором случае анимации не будет. Спрайт просто «телепортируется» на 10*10 = 100 пикселей. Хотя в цикле нет никаких задержек, выполнение кода в первом случае будет отличаться. Мы будем видеть плавное движение спрайта из точки старта в точку финиша. Чтобы сделать плавное движение спрайта без цикла нужно добавить блок задержки «Ждать…».

Скорость движения можно регулировать изменением шага (в пикселях). Для «бесконечного» повторения кода используется цикл «всегда».

Цикл заменяет множество блоков линейного алгоритма

Чтобы заставить акулу бродить до стенки и отталкиваться от нее нужно добавить в цикл команду «Если на краю, оттолкнуться». Но акула может оттолкнуться от стенки по разному – перевернуться на спину, зеркально отразиться или вообще не повернуться. Поэтому полезно совместно с этой командой познакомить детей с командой «Стиль вращения …». Дети часто совершают ошибку, ставя команду внутрь цикла. Объясните им, что это действие нужно выполнить лишь один раз. А если поместить команду в цикл, мы будем лишний раз нагружать процессор ненужными вычислениями.

Команду «Стиль вращения» нужно ставить до цикла

Условный оператор

Программа усложняется тем, что кот после столкновения с акулой должен сказать «Ой-ой-ой». Пусть дети подумают и сформулируют словесный алгоритм, что нужно сделать. Например «если кот задел акулу, кот говорит «Ой-ой-ой»».

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

Важно объяснить, что и тут нужно постоянно проверять, не коснулся ли кот акулы. Так как компьютер выполняет команды последовательно, друг за дружкой, то в первом случае, после запуска игры, компьютер проверит условие один раз и завершит выполнение скрипта. Спросите у детей, что нужно добавить, чтобы условие проверялось всегда. Должна получиться программа справа.

Слева программа завершится сразу после запуска игры. Справа условие будет проверяться всегда до остановки игры

Сохранение проекта

В конце занятия объясните, как правильно сохранять работу. Пусть дети заведут в «Документах» (если это Windows) отдельную папку с номером класса и фамилией. Пусть все свои проекты сохраняют в свою папку, а не на рабочий стол. Держите рабочий стол компьютера чистым.

Также нужно сказать, что на больших проектах нужно сохранять проект хотя бы раз в 15 минут, так как неожиданное выключение света или зависшая программа может испортить настроение надолго. У меня терялась работа после трех часов непрерывной работы в 3D-редакторе – было очень обидно начинать все сначала.

Источник