Как сделать танец в скретч

Обновлено: 05.07.2024

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

Чтобы зарегистрироваться на сайте, надо нажать кнопку "Присоединяйся", которая находится вверху сайта.

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

В заголовке сайта после логотипа Scratch есть четыре кнопки – "Создавай", "Исследуй", "Идеи", "О проекте".

Если кликнуть по "Создавай", откроется среда программирования Scratch. Как в ней работать, рассмотрим чуть позже. Если вы зашли сюда и не знаете как выйти, просто кликните по логотипу Scratch в верхнем левом углу. Это вернет вас на главную страницу сайта.

Если кликнуть по "Исследуй", вы перейдете на страницу, где можете посмотреть чужие проекты. Часть из них доступна также с главной страницы.

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

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

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

Вернемся к шапке сайта и рассмотрим меню справа:

В первую очередь нас интересует ссылка "Мои работы". Она открывает страницу, с которой вам доступны собственные проекты. На эту страницу также можно перейти, кликнув по изображению папки в меню.

Что же, создадим новый проект и изучим интерфейс Скретча:

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

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

В основной области экрана слева на вкладке "Код" расположены строительные блоки. Они задают поведение объектов, которые вы видите в области справа на игровом холсте, или сцене. Сейчас там только кот.

Большое пустое поле посередине – это самая важная область – редактор кода. Здесь вы "пишите" код, а точнее, конструируете его из блоков, которые перетаскиваете из левой части.

Строительные блоки слева разделены по секциям-разделам "Движение", "Внешний вид", "Звук" и так далее. Нажимая на соответствующий цветной кружок, вы быстро перейдете к блокам необходимой секции.

В этом уроке не будем рассматривать весь интерфейс среды программирования Scratch. Постепенно, изучая курс, мы познакомимся и с другими возможностями. А сейчас для создания первой программы достаточно уже полученных сведений.

Возьмите блок "идти 10 шагов" и киньте его в редактор кода. Теперь пощелкайте по нему мышью. Вы увидите, как от каждого клика кот на сцене будет смещаться на небольшое расстояние.

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

По идее программа должна запускаться, когда кликают по расположенному над холстом зеленому флажку, а не по блоку команды, как это делали мы. Если мы сейчас кликнем на флажок, то ничего не произойдет.

После этого два блока – "когда флажок нажат" и "идти 10 шагов" – надо соединить подобно элементам конструктора Лего.

Последовательность блоков важна. Команда, которая расположена выше, будет выполняться раньше, чем команда, которая расположена ниже. Часто конфигурация самих блоков подсказывает, как их надо соединять. Например, мы никогда не сможем сделать команду "когда флажок нажат" второй, третьей или какой угодно, кроме как первой. У этого блока нет выемки сверху, куда можно было бы вставить другой блок. Программа всегда начинается с команды "когда флажок нажат".

Теперь кот будет перемещаться при клике по зеленому флажку над холстом.

Однако от каждого клика кот по прежнему шагает всего где-то на 10 пикселей, и никакой нормальной анимации перемещения мы не видим.

Обратите внимание, что в команде "идти 10 шагов" поле с числом редактируемое. Туда можно записать любое число. То есть команда может выглядеть так: "идти 100 шагов". Или так: "идти -25 шагов". Поэтому правильно упоминать эту команду так: "идти … шагов", где вместо троеточия подразумевается произвольное число.

Мы могли бы предположить, что если вместо числа 10 в команде "идти 10 шагов" вписать число больше, то кот будет перемещаться на большее расстояние. Правильно. Кот будет перемещаться. Однако анимации все-равно не будет. Кот будет делать гигантский прыжок от каждого клика по флажку.

Поэтому вернем наше заветное число 10, а может быть даже 5 или 1.

Давайте вернемся к реальности и подумаем, как мы на самом деле ходим. По-сути мы много раз делаем одно и тоже: шаг левой, шаг правой, шаг левой, шаг правой. Мы зацикливаем шаг, повторяем его много раз. Правильнее сказать: "мы шагаем в цикле".

Аналогично делается в Scratch. Следует поместить команду "идти … шагов" в какой-нибудь цикл. Циклы – это тоже строительные блоки и одно из важнейших понятий программирования. Циклам стоит посвятить отдельный урок. Однако сейчас не будем теряться, зайдем в оранжевый раздел "Управление" и перекинем в редактор кода блок "повторить 10 раз".

Однако куда его присоединять? Если мы подставим блок цикла снизу к команде "идти … шагов", это будет неправильно. В программировании логика важна. Получится, что кот сначала сделает шаги, а потом будет 10 раз повторять непонятно что. На самом деле ничего, так как тело цикла пусто, то есть блок "повторить … раз" ничего не обрамляет, ничего в себя не включает.

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

Теперь поместим команду "идти 10 шагов" внутрь цикла "повторить 10 раз", а цикл присоединим к блоку "когда флажок нажат".

В данном случае кот сделает в общей сложности 100 шагов, так как 10 раз умножить на 10 шагов будет 100 шагов. Однако эта программа отличается, если бы мы просто дали команду "идти 100 шагов". В случае цикла перед каждым его повторением будет небольшая невидимая на глаз задержка, в результате чего будет наблюдаться относительно плавная анимация.

Анимацию можно сделать более плавной, если установить меньшее число шагов и большее число повторений. Например, 1 шаг и 200 повторений. Но в этом случае кот будет двигаться медленно. Таким образом можно регулировать скорость перемещения объекта: чем больше шагов он делает за один повтор цикла, тем больше его скорость.

Заменим в нашей программе цикл "повторить … раз" на "повторять всегда". Эта команда также находится в оранжевой секции "Управление". Запустим программу. Что произойдет, когда кот дойдет до края экрана? Он остановится. Программа продолжает работать, но кот уже никуда не идет.

Чтобы принудительно остановить программу, надо нажать на красный кружок над холстом.

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

Команду "если касается края, оттолкнуться" следует поместить в цикл. А вот до команды "идти 10 шагов" или после, не столь важно. Кот сначала может сделать 10 шагов, а потом, если коснулся края холста, то перевернуться. Или же он сначала проверит, не касается ли края холста, после чего перевернется.

Когда вы запустите такую программу, кот будет ходить от левого края к правому без конца, до тех пор, пока вы сами не остановите программу. Однако скорее всего ваш кот будет ходить немного странно: влево идет ногами, а как направо – становится на голову.

Дело все в том, что в Scratch по умолчанию объекты при перевороте вращаются по кругу. Что это значит? Вы должны знать, что полная окружность составляет 360 градусов. Когда же мы переворачиваемся в обратную сторону, то делаем разворот на половину окружности, то есть на 180 градусов.

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

Теперь представьте, что вы подтянулись на перекладине так, что ваши руки и перекладина находятся на уровне пояса. И вы решили перевернуться на 180 градусов вокруг этой перекладины. После этого ваша голова окажется внизу. Смотреть же вы будете туда, куда и хотели: если смотрели влево, будете смотреть вправо.

Примерно тоже самое происходит с нашим виртуальным котом. Однако мы можем поменять это поведение по умолчанию с помощью команды "установить способ вращения влево-вправо". Она находится в разделе "Движение". Команду достаточно выполнить один раз, так что место ей до цикла.

Эта команда многовариантная. Вместо влево-вправо можно выбрать "кругом" или "не вращать". Кругом мы уже видели, так ведут себя объекты по умолчанию. Если выбрать "не вращать", объект при отталкивании никак не будет вращаться. Он будет двигаться задом, когда натолкнется на край холста передом, и будет двигаться передом, когда натолкнется на край задом.

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

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

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

Изучите представленные здесь поля самостоятельно. Что определяют их значения? Подумайте, почему важно задавать объектам, которые в Scratch по умолчанию называются Спрайтами, осмысленные имена.

Составьте программу, согласно которой кот ходит туда-сюда, но через каждые 300 шагов останавливается на 1 секунду и говорит "Мяу". Подсказка: среди прочего вам понадобятся две команды, которые не рассматривались в этом уроке. Одна из них находится в разделе "Управление", а вторая – в разделе "Звук".

Обложка: Scratch

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

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

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

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

Главные особенности Scratch

Чем привлекает пользователей платформа? Во-первых, это интуитивно понятный интерфейс. Даже неопытный пользователь сможет освоить её в самые сжатые сроки.

Во-вторых, красочный дизайн. Он вдохновляет самых юных программистов создавать свои проекты и настраивает на рабочий лад.

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

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

Также Scratch​ позволяет создавать клоны популярных игр. Мы заново спроектировали часть игры Among Us и подготовили для вас подробную инструкцию по её созданию. Также мы подготовили полный видеоурок, в котором рассказали обо всех особенностях разработки игры (видео вы найдете в конце статьи).

Добавление материалов

На первом этапе разработки игры необходимо подготовить материалы: в основном это спрайты (картинки). Нам понадобятся изображения главного героя, а также фоновые заставки:

  • карта (по ней наш герой будет перемещаться);
  • запись, которая сигнализирует о запуске игры;
  • фон здания.

Вы можете скачать наши материалы или нарисовать самостоятельно в графическом редакторе на самой платформе.

Мы запрограммируем изменение фонов и игровых карт, движения персонажа и выполнение одного задания — командиру необходимо починить проводку.

Также мы изменим размер героя, чтобы он был пропорционален карте (25). Каждому фону дается свое название — так вы сможете легко ориентироваться между ними.


После всех этих операций мы приступаем непосредственно к самому программированию.

Заставка


Карта



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



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


Член экипажа




Очень важно, чтобы, когда персонаж закончит выполнять задание и вернётся обратно на карту, он не продолжал стоять на жёлтом кружке. Поэтому необходимо прописать, что после возвращения наш герой переместился по оси y на 15 шагов. Зацикливаем эти действия, чтобы они всегда повторялись.


Задание с проводами

Перейдём на фон задания. В графическом редакторе Scratch необходимо нарисовать спрайты (цветные прямоугольники). Из этих прямоугольников и будут торчать провода.


Иллюстрация: Scratch

Иллюстрация: Scratch

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

Иллюстрация: Scratch

Иллюстрация: Scratch

Создаём код. При нажатии на указатель мыши перо будет меняться: оно будет менять свой цвет на жёлтый, опускаться и менять размер на 15.

Иллюстрация: Scratch

Когда вы будете касаться второго спрайта, то есть второго конца провода, то вам будет начисляться 1 очко. После того как провод будет соединён, перо останавливается. Обратите внимание, что весь скрипт пера зациклен.

Иллюстрация: Scratch

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

Сыграть в наш Among Us, посмотреть код и другие важные моменты можно на официальном сайте Scratch.

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

Использование Scratch 3.0 при создании видеоконтента

Школа дает возможность всестороннего развития каждого ребенка. Но с появлением новых технологий не все школьные предметы могут соответствовать современным запросам общества. Именно поэтому все большее количество учреждений образования начинает вводить в школьную программу такие факультативные предметы, которые могли бы дать ребенку информационную базу для получения в будущем перспективной ИТ-профессии.

До выхода Scratch 3.0 мы использовали версию 2.0. Что же изменилось с появлением новой версии Scratch?

Если раньше работа с анимацией занимала много времени из-за того, что загрузка элементов шла слишком долго, то сейчас работать стало намного быстрее, были устранены все технические неполадки и неточности. Теперь работать со Scratch можно не только на компьютере, но и на планшете или телефоне, что тоже очень удобно.

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

А теперь от теории перейдем к практике. Как же использовать Scratch 3.0 при создании видеоконтента?

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

Рассмотрим поэтапно процесс создания логотипа и последующее использование его в видео.

Первый этап. Создание логотипа в Scratch 3.0

1 фото.jpg

Второй этап. Программирование анимации

Анимация – это последовательный показ (слайд-шоу) заранее подготовленных графических файлов, а также движение с помощью изменения (и перерисовки) формы объектов или показа последовательных изображений с фазами движения. В данном случае солнце и его лучи на логотипе меняют размер, а левая сторона книги приходит в движение. Для того чтобы это сделать, я покадрово прорисовал каждый костюм и запрограммировал спрайт на смену его костюмов. Они, сменяя друг друга, и создают анимацию. Также я запрограммировал спрайт на смену местоположения. Так я получил эффект плавного движения логотипа

2 фото.jpg

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

3 фото.jpg

Третий этап. Сохранение анимации в видеофайл

Поскольку в Scratch 3.0 отсутствует функция сохранения анимации в видеофайл, возникает необходимость воспользоваться сторонней программой. Нам потребуется та, которая будет производить захват видео с экрана монитора. Я использовал самую популярную программу для записи видео с экрана – Bandicam.

Далее нам потребуется произвести следующие действия:

1. Запустить программу Bandicam;

4. Указать размер окна записи;

5. Начать запись;

6. Включить анимацию спрайта;

7. Завершить запись.

4 фото.jpg

Записавшееся видео по умолчанию сохранится на рабочем столе вашего компьютера. После этого переходим к следующему этапу.

Четвертый этап. Использование анимации в видео

5 фото.jpg

Вывод: используя среду программирования Scratch 3.0, можно создавать различные виды анимации, которые будут использоваться при создании видеоконтента. Несмотря на то, что Scratch, в первую очередь, это язык программирования для обучения детей, с его помощью можно разнообразить, украсить и сделать лучше любое видео, прикладывая минимум усилий, так как не придется нерационально тратить время на изучение других, более узконаправленных, программ для создания анимации. Так можно создать целый анимационный фрагмент видеоролика!

scrolling scratch sprite

Подготовим спрайты как будущий движущийся фон

Первым делом надо провести графическую работу и нарисовать один спрайт (№ 1 на принт-скрине ниже), сделать его дубль (№ 2), и добавить еще один спрайт из коллекции скретч. Фон так же стоит нарисовать по аналогии со спрайтами. Если вы не знаете как рисовать в scratch, то посмотрите предыдущие материалы в моем блоге. Должно получиться как на картинке ниже:

скроллинг в скретч - смена фона

Плавная смена фона и движение спрайта в Скретч

Как вы уже догадались, движение фона будет реализовано за счет постепенной смены нарисованных спрайтов. Причем, спрайты будут автоматически подставляться друг за другом до бесконечности! Фон же нарисован для сглаживания этого перехода. На старых игровых приставках движение объекта было возможно сделать только в одном направлении, на новом уроке по программированию мы пойдет по такому же алгоритму и реализуем только движение объекта вправо, без возврата назад.


Подумать и постараться реализовать движение в обоих направлениях. При смене направления движения запрограммировать разворот спрайта в нужную сторону.

Пишем код для скроллинга в скретч

В левом меню визуального программирования найдем раздел отвечающий за переменные и создадим в нем три разных блока переменных: ScrollX, Times, Clones. Из картинки выше выбираем Спрайт 2 и переносим в него несколько блоков из меню визуального программирования. Первым делом опишем события, которые последовательно произойдут после нажатия на Зеленый флажок. Зададим начальные данные для переменных, отцентрируем нарисованный спрайт, дадим ему команду появиться и добавим условия для последующего плавного движения. Должен получиться следующий древовидный блок:

scrolling scratch sprite

Находясь в предыдущем спрайте напишем код для изменения значений в переменной ScrollX. Именно за счет этого куска программного кода регулируется скорость скроллинга в скретч, поиграйтесь с числами и посмотрите что получится! Визуальный блок должен получиться следующего вида:

изменяем координаты Х в скроллинге скретч

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

вторая часть кода по скроллингу в скретч


После полного написания кода для скроллинга и проверки его работоспособности раздели этот код, как показано выше и посмотри, что получится. Как объяснить получившийся эффект и за что отвечает этот кусок кода?

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

Читайте также: