Как сделать скроллинг в скретч
Новая тема по детскому программированию будет посвящена движению спрайта за счет плавной смены заднего фона — иначе говоря скроллинг в скретч по координатам Х. Создание каждой компьютерной игры потребует от юного программиста уметь пользоваться рассматриваемым программным кодом и понимать принципы взаимодействия спрайтов при использовании этого метода. Если вы впервые в моем блоге, то обязательно посмотрите предыдущие уроки по scratch: движение спрайта, прыжок спрайта, изменение внешнего вида спрайта, рисуем объекты самостоятельно и другие. Остальным же предлагаю отправиться в мир переменных, условий и циклов вместе со мной!
Подготовим спрайты как будущий движущийся фон
Первым делом надо провести графическую работу и нарисовать один спрайт (№ 1 на принт-скрине ниже), сделать его дубль (№ 2), и добавить еще один спрайт из коллекции скретч. Фон так же стоит нарисовать по аналогии со спрайтами. Если вы не знаете как рисовать в scratch, то посмотрите предыдущие материалы в моем блоге. Должно получиться как на картинке ниже:
Плавная смена фона и движение спрайта в Скретч
Как вы уже догадались, движение фона будет реализовано за счет постепенной смены нарисованных спрайтов. Причем, спрайты будут автоматически подставляться друг за другом до бесконечности! Фон же нарисован для сглаживания этого перехода. На старых игровых приставках движение объекта было возможно сделать только в одном направлении, на новом уроке по программированию мы пойдет по такому же алгоритму и реализуем только движение объекта вправо, без возврата назад.
Подумать и постараться реализовать движение в обоих направлениях. При смене направления движения запрограммировать разворот спрайта в нужную сторону.
Пишем код для скроллинга в скретч
В левом меню визуального программирования найдем раздел отвечающий за переменные и создадим в нем три разных блока переменных: ScrollX, Times, Clones. Из картинки выше выбираем Спрайт 2 и переносим в него несколько блоков из меню визуального программирования. Первым делом опишем события, которые последовательно произойдут после нажатия на Зеленый флажок. Зададим начальные данные для переменных, отцентрируем нарисованный спрайт, дадим ему команду появиться и добавим условия для последующего плавного движения. Должен получиться следующий древовидный блок:
Находясь в предыдущем спрайте напишем код для изменения значений в переменной ScrollX. Именно за счет этого куска программного кода регулируется скорость скроллинга в скретч, поиграйтесь с числами и посмотрите что получится! Визуальный блок должен получиться следующего вида:
Третий кусок кода я приведу только как набор программных блоков, так как он будет домашним заданием. Наберите следующий код:
После полного написания кода для скроллинга и проверки его работоспособности раздели этот код, как показано выше и посмотри, что получится. Как объяснить получившийся эффект и за что отвечает этот кусок кода?
Переходим ко второму спрайту. Добавляем код по событию — Нажать зеленый флажок. Далее программируем показаться спрайту, размещаем его по центру и добавляем под постоянный цикл условие для движения спрайта в зависимости от значения в переменной ScrollX. Должен получиться следующий код:
Смена фона в Скретч
Меняем локацию в scratch для финального сражения
Открываем официальный сайт по Скретч — https://scratch.mit.edu/, создаем новый проект, добавляем любой спрайт из коллекции программы с двумя костюмами движения и отправляемся в короткое путешествие по написанию коду. Так же понадобится загрузить один любой фон из коллекции и в разделе Фоны (для спрайтов раздел Костюмы) загрузить еще один фон. Выбираем спрайт )объект движения) и перейдя на закладку Код начинаем перетаскивать следующие блоки визуального программирования:
Теперь небольшое пояснение к описанному выше программному коду. При нажатии на кнопку Старт запускаем визуальный блок позиционирования и помещаем спрайт в указанное место. Далее начинает работать код, в котором указаны действия с фоном — программируем установку первого фона. Следующим этапом запускается скретч цикл постоянной работы, в котором указаны условия и действия при выполнении каждого из условий программы. При нажатии влево или вправо меняет значения по координатам Х у спрайта (Похожий блок: Идти 10 шагов). Блок Ждать делает паузу для плавной смены костюма, ну а последний блок осуществляет непосредственную смену костюма у спрайта. Таким образом мы рассмотрели еще один способ программирования движения у объекта!
Теперь рассмотрим визуальный ряд блоков, за счет которых программируется переход в новую локацию и смену фона с переносом позиции спрайта в пространстве.
Идея написанного в скретч программного кода следующая: Объект движется вперед по координатам Х и когда достигает значения больше 250 (в нашем случае собачка уже наполовину уйдет с экрана) происходит смена фона и перемешение спрайта в исходную точку слева. Код получился простой и понятный, если хочется посмотреть еще уроки по scratch, то рекомендую обратить внимание на дополнительные материалы по программированию:
Scratch-разминка
Предлагаем несколько простых заданий для начинающих скретчеров и даже для тех, кто не знает программирования. В каждой задаче необходимо собрать скрипт (алгоритм, программу) из заданных блоков. Эти задачи можно использовать как для закрепления изученного, так и в качестве первого знакомства с миром программирования. Мы провели эксперимент и убедились в том, что даже не зная Scratch и не умея программировать, каждый может справиться с решением и понять, что программировать может каждый!
Задачи можно (и даже удобнее) решать без использования компьютера. Для этого необходимо предварительно распечатать и вырезать задания и необходимые блоки. Мы подготовили для вас листы для распечатки. Решайте задачи и получайте удовольствие!
Задание 1
На сайте Scratch войти внутрь проекта можно по ссылке https://scratch.mit.edu/projects/534435871/
Собери из данных блоков скрипт, который делает так, что:
…кот постоянно ходит влево-вправо по сцене
Блоки для распечатки можно скачать здесь (кликни правой кнопкой мыши по картинке и выбери пункт меню Сохранить изображение как… (Save image as…).
Задание 2
На сайте Scratch войти внутрь проекта можно по ссылке https://scratch.mit.edu/projects/534436832/
Собери из данных блоков скрипт, который делает так, что:
…цветок постепенно растет и расцветает (у спрайта цветка 13 костюмов)
Блоки для распечатки можно скачать здесь (кликни правой кнопкой мыши по картинке и выбери пункт меню Сохранить изображение как… (Save image as…).
Задание 3
На сайте Scratch войти внутрь проекта можно по ссылке https://scratch.mit.edu/projects/534440451/
Собери из данных блоков скрипт, который делает так, что:
…динозаврик один раз проходит по периметру сцены
Примечание: динозаврик начинает движение из левого нижнего угла и идет против часовой стрелки: вправо, вверх, влево, вниз. Координаты могут быть немного другие.
Блоки для распечатки можно скачать здесь (кликни правой кнопкой мыши по картинке и выбери пункт меню Сохранить изображение как… (Save image as…).
Задание 4
На сайте Scratch войти внутрь проекта можно по ссылке https://scratch.mit.edu/projects/534441476/
Собери из данных блоков скрипт, который делает так, что:
…снежинка медленно падает сверху вниз и одновременно вращается, а внизу исчезает (подсказка: лучше сделать 2 скрипта)
Блоки для распечатки можно скачать здесь (кликни правой кнопкой мыши по картинке и выбери пункт меню Сохранить изображение как… (Save image as…).
Задание 5
На сайте Scratch войти внутрь проекта можно по ссылке https://scratch.mit.edu/projects/534442247/
Собери из данных блоков скрипт, который делает так, что:
…стрелка поворачивается в сторону мышки
Примечание: Для усложнения задачи здесь добавлено несколько лишних блоков, которые в скрипте не нужны либо не обязательны.
Блоки для распечатки можно скачать здесь (кликни правой кнопкой мыши по картинке и выбери пункт меню Сохранить изображение как… (Save image as…).
Делитесь идеями своих задач для Scratch-разминки, и мы с радостью разместим их на нашем сайте со ссылкой на автора.
Игровая механика Прыжок (подпрыгивание) в Scratch
Примеры игр с использованием механики прыжка (чтобы персонаж подпрыгнул, надо нажать на клавишу Пробел):
Дополнительные уроки, которые могут помочь в создании этой игры, перечислены здесь.
Открыть проект на сайте Scratch можно по адресу https://scratch.mit.edu/projects/104584635/
1. Первый простой способ реализации подпрыгивания персонажа игры
Как сделать так, чтобы по нажатию на клавишу персонаж подпрыгивал, смотри в уроке и делай самостоятельно:
2. Улучшаем прыжок
После этого улучшения может понадобиться создать анимацию, как в проекте «Кот гуляет с мячом», урок о котором можно найти здесь.
3. Второе улучшение прыжка
Делаем так, чтобы в состоянии прыжка кот не двигал лапами, словно идет по воздуху.
Дополнительные уроки:
4. Способ 2 реализации прыжка: на основе гравитации
Используя понятие гравитации, реализуем более универсальный алгоритм прыжка персонажа. Это, конечно, неточная физическая модель, но в игровой физике очень многое делается похожим на нашу реальность, но не обязательно путем точного применения физических законов.
Делитесь своими проектами, задавайте вопросы в комментариях.
Напиши вопрос или комментарий
Программирование игр
Новости
22.09.2021 Урок 16. Черепашья графика, инструмент «Перо» дополнен инструкцией по работе с Пером в Scratch 3.0 и примерами творческих проектов.
31.08.2021 29 августа в Минске прошла Первая Международная конференция «Про разработку игр: школьникам, учителям, родителям» EduGame 2021. Публикуем итоги конференции и списки победителей.
1.06.2021 Публикуем материалы (задания и блоки для распечатки) Scratch-разминка
В помощь учителю
Обучение детей основам создания компьютерных игр на языке программирования Scratch
Учебное пособие для учителей и родителей
«Entry Level Programming with Scratch»
новый бесплатный курс для учителей и родителей от ЕПАМ
Расширение «Перо»
В Scratch кроме стандартных категорий блоков таких как «Движение», «Внешний вид» и так далее, которые сразу доступны во всех проектах, имеются другие. Их называют расширениями или дополнениями. Чтобы увидеть все доступные расширения, надо нажать на кнопку «Добавить расширение», которая находится на вкладке «Код» в самом низу. После этого откроется окно, где можно выбрать дополнение.
Большинство дополнений предполагают использование внешних устройств, таких как камера, робот и другие. Однако не все.
После выбора расширения «Перо» во вкладке «Код» среды программирования Scratch появляется новый раздел с блоками-командами, которые позволяют рисовать на сцене. Это значит, что спрайты при перемещении смогут оставлять после себя видимую линию.
Вот пример сценария для кота:
Проиграв его, получим такую картину:
Когда у спрайта поднято перо, то он не оставляет линии при перемещении. Когда перо опущено, как бы вы не перемещали спрайт из точки А в точку Б, от А до Б будет рисоваться линия установленного цвета и толщины.
Команда «печать» отпечатывает изображение спрайта в том месте, где он находится.
В Scratch можно создать сценарий, когда при его запуске пользователь сам будет рисовать, перемещая героя. Добавим на сцену спрайт-карандаш и запрограммируем его следующим образом:
Игру следует запускать в полноэкранном режиме. В режиме программирования скрипт не сможет правильно работать.
После запуска карандаш можно перемещать мышью, и он будет оставлять след. Можно намалевать на сцене что-угодно. Однако линия будет выходить не из кончика карандаша, а его середины, что неправильно. Исправляется это редактированием костюма.
В центре холста есть чуть видимая точка, которая обозначает центр спрайта. Именно из этого центра рисуется линия. Надо переместить к центру холста кончик карандаша.
Рисовать мышью не совсем удобно. Поменяем управление на клавиатуру:
Теперь карандаш управляется стрелками клавиатуры. Когда мы нажимаем пробел, то попеременно меняем состояние пера. Поднимая перо, мы можем перемещать карандаш по сцене без рисования линии.
Сценарий спрайта можно усложнить, добавив к нему скрипты смены толщины пера и цвета. Пусть цвет, например, задается случайным образом:
А что если мы хотим, чтобы карандаш печатал не самого себя, а какой-то другой спрайт? Этот другой спрайт должен появляться из кончика карандаша при нажатии, скажем, клавиши 0.
Тогда этому спрайту надо как-то передать координаты карандаша. Однако проще воспользоваться командой «перейти на …», в которой вместо «случайное положение» следует выбрать имя спрайта-карандаша.
Составьте программу, которая при запуске выводит на сцене окружность, состоящую из печатей спрайта.