Спрайты
Слово «спрайт» часто используется в программировании игр для обозначения фигурок героев и предметов. Такие фигурки – это на самом деле рисунки или фотографии, то есть компьютерная графика.
Однако спрайт – не только картинка, это объект, наделенный программным кодом и как следствие свойствами и способностями. Со спрайтом можно взаимодействовать как с виртуальной сущностью, отдавать ей команды и получать от нее данные.
Кот в Scratch – не единственный объект-спрайт. Добавить на сцену другие можно несколькими способами: загрузить картинку с компьютера, нарисовать в самой среде программирования, выбрать из библиотеки. Для всего этого в Scratch предусмотрено специальное меню, которое находится внизу справа на панели спрайтов:
Пока ограничимся тем, что будем выбирать готовые спрайты из библиотеки. Для этого надо нажать лупу. Откроется библиотека, где можно найти подходящего героя.
После клика по нему он появится на сцене. Также на панели спрайтов под свойствами появится его иконка. Рядом с иконкой кота. Свойства объекта, где вы задаете ему имя, положение, размер и поворот, отображаются только для того спрайта, который выделен.
Если вы захотите удалить один из спрайтов, кликните по его иконке под свойствами. Этот спрайт станет выделенным, выбранным, у него появится значок корзины с крестиком, кликнув по которому можно удалить спрайт из игры.
Когда в Scratch мы собираем блоки в программный код, этот код не существует в прострации сам по себе. Чаще всего он относится к какому-то спрайту. Другими словами, у каждого спрайта свой программный код, своя программа, свое предназначение. Герои могут «общаться» между собой через сигналы, которые посылают друг к другу. Но это другая история.
Сейчас надо запомнить, что когда мы работаем с блоками, следует обращать внимание на то, какой объект выделен. В Scratch появляется подсказка в верхнем правом углу поля редактора кода. Там бледным цветом отображается фигурка выделенного на данный момент спрайта. А значит весь код, который вы видите в рабочей области, относится только к данному герою.
Когда выделяется другой спрайт, то код предыдущего становится невидимым.
Нередко код одного спрайта оказывается похожим на другой. Например, оба героя ходят по сцене, просто с разной скоростью и в разные направления. Собирать два раза почти одинаковую комбинацию блоков – не слишком удачное решение. Проще скопировать программу одного спрайта, добавить ее другому, а потом немного изменить.
В Scratch копировать собранные в программу блоки можно как в пределах одного проекта, так и переносить копию в «рюкзаке» из одного проекта в другой. Рюкзак находится внизу интерфейса среды разработки.
Допустим, у нас есть проект под названием «Проект 1», где мы составили программу движения кота туда-сюда. Мы хотим скопировать этот код в «Проект 2». Тогда мы заходим в первый проект, открываем рюкзак и перетаскиваем сюда конструкцию блоков.
При этом надо помнить правило: переносится участок кода от верхнего блока, за который мы держимся, и блоки, расположенные ниже него. Если вы взялись за блок, расположенный где-то в середине программы, то верхние блоки оторвутся и не будут захвачены.
Положив в рюкзак программу, мы возвращаемся во второй проект. Выделяем спрайт, которому хотим добавить код. Открываем рюкзак и достаем из него нашу программу.
Чтобы скопировать программу одного спрайта на другой в пределах одного проекта, достаточно захватить код и бросить его на иконку другого спрайта, которая расположена под свойствами на панели спрайтов.
Если надо скопировать код в пределах одного спрайта, надо кликнуть по конструкции правой кнопкой мыши и в контекстном меню выбрать «Дублировать».
Также обратите внимание на пункт «Добавить комментарий». Программисты часто пользуются комментариями, чтобы пояснить себе и остальным, что делает та или иная часть программы. Ведь при взгляде на сложный код не всегда сразу можно понять, для чего он, и как все это работает.
Когда на сцене обитают несколько спрайтов, становится важным их положение относительно друг друга, их место на сцене. Как вы уже должны были понять, изучая панель свойств спрайта, положение героя задается координатами, то есть точкой на плоскости.
В Scratch начало отсчета, то есть точка с координатами (0; 0), находится в центре сцены. Общая ширина сцены составляет 480 точек. Это значит, что координата x может принимать значения от -240 до 240. Общая высота сцены составляет 360 точек. Это значит, что координата y может принимать значения от -180 до 180.
Хотя работу с фонами мы будем изучать позже, добавим на сцену координатную сетку. Это поможет нам сориентироваться в системе координат Скретча. Чтобы выбрать фон из библиотеки, надо нажать на лупу в меню сцены, которое находится в нижнем правом углу окна, на панели «Сцена».
Откроется библиотека фонов, прокрутите ее в самый низ и выберите фон «Xy-grid». На сцене появится координатная сетка.
Давайте уменьшим размер наших спрайтов раза в два, то есть примерно до 50%, чтобы они не занимали большую площадь сцены, а больше походили на точку. Теперь поиграем с их координатами. Для этого можно менять значения x и y на панели свойств и смотреть, где после этого окажется герой. Или просто перетаскивать мышью спрайт на сцене и смотреть как меняются x и y в свойствах.
Например, если x = 0, y = 150, спрайт окажется в центре по горизонтали и вверху по вертикали. Если x = 200, y = 0, то спрайт окажется справа по горизонтали и в центре по вертикали.
На самом деле не обязательно до запуска программы устанавливать спрайты в нужное место с помощью мыши или панели свойств. Обычно это делают программно, с помощью специальных блоков кода, находящихся в разделе «Движение». Одним из управляющих местоположением блоков является команда «перейти в x: … y: …». Вместо точек указываются желаемые координаты.
Эта команда быстро перебрасывает спрайт в заданную точку, поэтому ее часто используют в начале программы:
В приведенном примере, где бы ни стоял на сцене спрайт до запуска программы, как только будет нажат зеленый флажок, герой тут же окажется в точке (0; 50).
Отметим напоследок про слои. Наше пространство не двумерное, как плоскость, а трехмерное. У нас есть высота, ширина и длина. Хотя Scratch позволяет создавать только двумерные анимации, на самом деле даже в 2D-анимации есть своего рода третье измерение. Это слои.
Пусть по сцене перемещаются два спрайта. Что будет когда их координаты совпадут? Ничего. Они не столкнуться и не затормозят друг друга. Один спрайт пройдет как бы позади другого, а другой – поверх первого. Каждый живет на своем слое плоскости и ему нет дела до другого.
Однако бывает важно, слой какого спрайта расположен выше, то есть впереди. Посмотрите на рисунок:
Слева слой ракеты расположен выше, слоя кота. Справа, наоборот, кот находится над ракетой.
В Scratch изменить очередность слоев можно как мышкой на сцене, так и с помощью блоков кода. Чтобы это сделать первым способом, надо взять тот спрайт, который должен быть над, и кинуть его на спрайт, чей слой должен быть под.
Блоки изменения очередности слоев находятся в фиолетовой секции «Внешний вид». Это команды «перейти на передний/задний фон» и «перейти вперед/назад на … слоя».
Составьте программу, в которой один спрайт постоянно ходит за указателем мыши, а второй – находится в центре сцены и, стоя на одном месте, медленно крутится по часовой стрелке. Слой первого объекта должен быть над слоем второго.
Для выполнения задания потребуются две дополнительные команды – «повернуться к указатель мыши», «повернуть по часовой стрелке на … градусов» (вместо слов «по часовой стрелке» на блоке изображена дуговая стрелка).
X Скрыть Наверх
Программирование в Scratch. Курс
Среда Scratch — первое знакомство
Важным направлением медиатворчества является анимация, т.е. “оживление” графических персонажей. Посмотрим, насколько просто обстоит с этим дело в Scratch.
Разумеется, в подобной среде просто не может не быть средств для анимации. И действительно, в Scratch предусмотрен механизм смены изображений (“костюмов”), что, собственно говоря, и решает сформулированную задачу. Если каждая из картинок представляет собой определенную фазу движения, то смена их с определенной скоростью и породит на экране своеобразный компьютерный мультфильм.
Для практического освоения навыков анимации в Scratch удобно воспользоваться набором картинок, изображающих шагающего мальчика. Они находятся в папке People (Люди) и называются boy4-walking-a, boy4-walking-b и т.д. до “e”, т.е. всего 5 картинок.
Загрузить картинки можно следующим несложным способом. Запустим Scratch и в спрайте традиционного кота перейдем на вкладку Costumes. Удалим картинки с веселыми котиками, для чего используем круглую кнопку с крестиком возле каждого из изображений (справа внизу). Теперь щелкнем по кнопке Import, что позволит нам загрузить первую картинку под буквой a. Затем повторим процедуру импорта еще 4 раза, не забывая каждый раз “наращивать” букву в имени файла. В результате у вас получится следующая галерея рисунков (рис. 2.1).
Примечание. Поскольку система не позволяет удалять последний образ спрайта, лучше сначала импортировать мальчика, а потом удалить оба изображения кота.
Теперь остается организовать периодическую замену рисунков с некоторой задержкой для того, чтобы зритель имел возможность рассмотреть отдельные кадры.
Для этой цели соберем несложный скрипт, приведенный на рис. 2.2. Как видно из текста программы, она запускается стартовой клавишей с зеленым флажком и в “вечном” цикле forever делает следующее. После паузы в 0,1 сек. (время подбирается для максимальной правдоподобности движения) сменяется картинка, а затем мальчик сдвигается на заданное число пикселей (он же должен не просто перебирать ногами на месте, но и двигаться). Последний блок if on edge bounce обеспечивает автоматический поворот (“отражение”) мальчика, когда он доходит до границы экрана.
Вот, собственно, и все. Остается запустить проект и полюбоваться шагающим мальчиком. (Ах да, чуть не забыл: смените режим поворота спрайтов на лево-право, иначе влево мальчик будет идти вниз головой!)
Кстати, скрипт, который мы написали, весьма универсален: вы можете, не трогая его, заменить образы идущего мальчика на бегущую собаку или любое другое существо, для которого вы найдете (или, если сможете, нарисуете сами) фазы движения.
Разумеется, Scratch позволяет и усложнить скрипт, что сделает сюжет вашего мультфильма более содержательным и интересным. Попробуйте!
Рис. 2.2. Программа создания анимации
Проект 3. “Столкновение”
Часто в мультфильмах и особенно в играх необходимо отслеживать столкновение спрайтов. Scratch, разумеется, умеет и это. Давайте научимся фиксировать факт столкновения на следующем примере.
Пусть спрайт-1 движется вдоль экрана и наталкивается на неподвижный спрайт-2 — этакая сильно урезанная модель катастрофы “Титаника”.
Картинки объектов найдем в библиотеке рисунков Scratch. Вместо корабля выберем, например, роскошную яхту (файл yacht в папке Transportation), а вместо отсутствующей картинки айсберга — скалу (файл rock в папке Things). Разумеется, вы можете выбрать два любых других понравившихся вам рисунка.
Очень важно понимать разницу между данным проектом и предыдущим. В проекте-2 был единственный спрайт, у которого было несколько “костюмов”. Сейчас же мы имеем дело с двумя спрайтами, а механизм Costumes для простоты вообще не задействуем. Иными словами, в автоматически созданном первом спрайте мы опять удалим кота и заменим его веселые образы рисунком яхты, а затем создадим новый спрайт, второй. Возможно, читатели запомнили, что это делается при помощи группы кнопок 8, причем сейчас нам лучше всего подходит средняя из кнопок (при подведении к ней мыши высвечивается Choose new sprite from file — Выберите новый спрайт из файла).
Обязательно обратите внимание, что теперь в списке спрайтов (в правом нижнем углу экрана) у вас уже будет 2 спрайта: яхта и скала. Выделим щелчком мыши яхту, так как скрипт логичнее писать для нее, а не для неподвижной скалы.
Скрипт устроен крайне просто: яхта движется вправо до тех пор, пока ( until ) не заденет Sprite2, — условие имеет вид touching (Sprite2) .
Обязательно обратите внимание на тот факт, что Scratch работает со спрайтами очень аккуратно: он не считает их прямоугольниками, а фиксирует факт касания самих рисунков. Посмотрите внимательно на рис. 3.1, где на сцене произошло столкновение спрайтов. Мы видим, что мачта яхты задела скалу, хотя ее нос уже успел продвинуться очень далеко. Механизм такой аккуратности состоит, по всей видимости, в наличии “прозрачного” цвета — как в PhotoShop и других графических редакторах. Действительно, вернитесь к рис. 1.8 и обратите внимание на клетчатое поле вокруг изображения — именно так принято обозначать прозрачный цвет.
Заметим, что работа с цветом лежит в основе и многих других “сенсоров” (фиксируемых системой условий) Scratch. В частности, спрайт может задеть заданный цвет, например, синий, что может свидетельствовать о попадании в воду. Можно также зафиксировать факт касания края сцены ( touching edge ) и некоторые другие. Такое разнообразие позволяет строить весьма изощренные по логике проекты.
В заключение можем порекомендовать для повышения эмоционального воздействия добавить к нашей сцене фоновую картинку (background). Для этого в области списка спрайтов найдем сцену (Stage), щелкнем по ней и выберем закладку Backgrounds. Подобно тому, как мы это делали при импортировании “костюмов” спрайтов, загрузим изображение фона. Из готовых изображений наиболее подходящим мне показался файл city-with-water2, находящийся в папке Outdoors (рис. 3.2).
Еще раз подчеркнем, что данный проект не претендует на высокохудожественный уровень: его цель заключается в том, чтобы показать технологию обработки столкновения спрайтов.
Проект 4. “Пишем музыку”
Цель этого короткого проекта — показать, что Scratch не просто может проигрывать звуковые файлы, но и предоставляет детям с музыкальными способностями возможность самим синтезировать музыкальное сопровождение в виде своеобразной нотной партитуры.
Для целей звукоизвлечения в Scratch предусмотрена страница с командами, блоки которых окрашены в розовый цвет. Перейдем на соответствующую страницу палитры блоков и обратимся к оператору play note (60) for (0.5) beats . Этот оператор играет заданную ноту в течение указанного времени. Ноты пронумерованы, но для удобства настройки при выборе ноты вместо выпадающего списка появляется рисунок с клавиатурой пианино (рис. 4.1).
Рис. 4.1. Выбор ноты
Примечание. По-видимому, это недоработка ПО, но нарисованная клавиатура содержит только ноты с 48-й по 72-ю, что соответствует всего двум октавам (как это изменить, мне найти не удалось). Тем не менее вместо числового значения Scratch принимает (и затем правильно воспроизводит) любые номера нот с 0-го до 127-го.
В качестве легкого упражнения автор реализовал некоторую гармоническую “распевку”, которая выглядит как “до-ми-соль-ми-до”. Затем, чтобы проверить возможности многоголосия, были дописаны еще две “партии”, которые состояли из паузы на первые 4 ноты ( rest for (2.1) beats ), а на пятую обеспечивали аккорд из трех выбранных нот.
Самая первая команда в скрипте выбирает музыкальный инструмент. Мне понравился номер 20 — это церковный орган. Разумеется, вы можете выбрать и любой другой из более чем 120 инструментов.
Примечание. Логика подсказывает, что длительность паузы в течение четырех нот по 0.5 бита должна равняться 2.0 бита. Но на практике хочется ее сделать немного больше.
Конечно, те, кто любит музыку, не ограничатся столь примитивным проектом. Надеюсь, они не просто запрограммируют свою любимую мелодию, но и оркеструют ее с помощью ударных инструментов или даже создадут свой небольшой виртуальный оркестр.
Предыдущие проекты из группы A были задуманы для освоения приемов и технологий работы со средой Scratch. В то же время, их практическая ценность как самостоятельных проектов была невелика: едва ли нашего “ходящего человека” или аккорд из трех нот даже родственники согласятся воспроизвести хотя бы несколько раз.
Приводимые ниже проекты несколько иного рода. Они тоже продемонстрируют читателям некоторые новые идеи работы со средой Scratch, но результаты проектов можно будет в дальнейшем многократно демонстрировать или включать в качестве составной части в другие проекты.
Проект 5. “Создаем стандартные элементы управления”
Любые интерактивные приложения нуждаются в визуальных органах управления. Поэтому не случайно в визуальных средах на палитре компонентов обязательно представлены все стандартные органы управления, такие, как флажок проверки, радиогруппа или отдельные радиокнопки, разные виды списков и т.д.
Как с этим обстоит дело в среде Scratch? Подобные компоненты там отсутствуют. Если речь идет о детях
8–10 лет, то это придется признать оправданным — ребенку такого возраста проще произвести свой выбор между красочными картинками, чем читать подписи и выбирать требуемый вариант с помощью радиокнопок. Но более старшие ученики, вполне возможно, будут иного мнения. Поэтому давайте посмотрим, как можно решить эту проблему, если нам все-таки потребуются подобные элементы управления.
Для конкретности рассмотрим следующую задачу. Пусть мы хотим управлять видимостью спрайта (например, того же “титульного” кота) с помощью флажка проверки (checkbox). Реализовать этот проект средствами Scratch вполне реально и даже не очень сложно. Обсудим, как это можно сделать.
Прежде всего, в стандартной библиотеке изображений флажка проверки нет, так что нам придется его нарисовать. Опыт показал, что при этом могут возникать некоторые проблемы. Конечно, можно вызвать встроенный графический редактор Scratch и создать нужное изображение непосредственно в нем. Но мне кажется более интересным и поучительным сделать картинку в другом редакторе, так как проблема подключения внешних изображений все равно рано или поздно возникает, как ни старайся ее отсрочить.
Итак, берем любой редактор, например встроенный Paint, и создаем в нем флажок проверки с произвольной подписью (на серый фон рис. 5.1 пока не обращайте внимания).
Рис. 5.1. Создаем рисунок флажка проверки
Мы быстро нарисовали квадратик и сделали подпись (кстати, нарисовать ее вне среды — это единственный способ получить русский текст в текущей версии Scratch). Теперь возникает вопрос, в каком формате сохранить рисунок. Он решается легко: заглядываем в библиотеку рисунков (папка media) и видим, что файлы там имеют расширение GIF или PNG. Сохраним наше творение в формате GIF.
Примечание. Для сохранения собственных рисунков рекомендуем внутри папки Media\Costumes создать отдельную папку.
Загрузив в Scratch данный рисунок, мы ничего не увидим. Почему — понять непросто, но Scratch очень чувствителен к наличию прозрачного цвета. Как его установить? Прежде всего надо закрасить неиспользуемым цветом ту область, которую вы хотите сделать прозрачной (вернемся к рис. 5.1). Казалось бы, можно просто сделать прозрачным белый фон. Но это плохое решение. В дальнейшем мы обнаружим, что щелчок по прозрачной области спрайта системой не засчитывается. Именно поэтому площадь внутри квадрата ни в коем случае не должна быть прозрачной!
Остается задать цвет, которым закрашен фон нашей картинки, прозрачным. С ужасом вспоминая, насколько это длинная процедура в PhotoShop (включая обязательный временный переход в формат RGB), я использовал для этой цели редактор MS Photo Editor, в котором данная операция выполняется элементарно: нажимаем кнопку на панели инструментов (см. рис. 5.2) и щелкаем мышкой в любую точку прозрачной области. В результате получаем рисунок, который уже нормально читается в Scratch.
Рис. 5.2. Сделаем фон прозрачным
Далее аналогичным образом необходимо изготовить образ выбранного флажка, т.е. содержащего внутри квадратика знак отметки — “птичку”. Очень важно, чтобы оба рисунка имели совершенно одинаковое положение в площади рисунка: только при этом условии замена одного изображения другим не будет вызывать визуального скачка. Наилучший способ не думать про это состоит в том, чтобы создать копию файла и в ней нарисовать “птичку”.
На этом подготовительная работа завершена и можно наконец запустить Scratch.
Как мы уже твердо усвоили, Sprite1 — это кот. Создаем Sprite2, в который в качестве “костюмов” загружаем обе подготовленные картинки. Он-то и будет являться заготовкой для флажка проверки.
Далее создадим внутреннюю переменную, которая будет хранить либо 0, либо 1 в зависимости от состояния нашего флажка. Для этого открываем на палитре блоков страницу Variables и щелкаем по кнопке Make a variable (создать переменную). В появляющемся диалоговом окне впишем имя переменной (на рис. 5.3 в качестве имени использовано сокращение от checkbox — cb ) и, учитывая локальный характер величины, поменяем значение For all sprites (для всех спрайтов) на For this sprite only (только для этого спрайта).
Рис. 5.3. Создание переменной в Scratch
После этого на палитре блоков появятся новые блоки оранжевого цвета для работы с переменной cb — см. левую часть рис. 5.5.
Теперь создадим обработчик, который будет устанавливать визуальный образ флажка в зависимости от значения только что созданной нами переменной. Для этого к заголовку When Sprite2 clicked пристыкуем оператор if / else. Теперь в него после слова if надо добавить условие. Это также делается мышкой: на рис. 5.4 показано, как условие в виде равенства буксируется со страницы Numbers (зеленый цвет) на требуемое место.
Пустой шаблон для условия готов. Теперь уже внутрь него надо заносить левую и правую части необходимого равенства cb = 0 . Переменную возьмем и перетащим со страницы Variables (рис. 5.5), а числовое значение просто впишем.
Условие готово, теперь займемся содержимым ветвей развилки. Внутри нее должны быть описаны альтернативные варианты для следующих действий:
— изменение значения переменной cb на противоположное; если cb = 0 , то c b = cb + 1 (реализуется блоком change cb by (1)), иначе cb = 0 (set cb to (0));
— установка соответствующего изображения: если cb = 0 , то switch to costume [checkbox1], иначе switch to costume [checkbox0];
— выключить или включить Sprite1.
Рис. 5.4. Создание условия в Scratch
Рис. 5.5. Посещаем переменную внутрь условия
Первые два действия собираются из стандартных блоков элементарно, но с последним возникают принципиальные трудности. В Scratch предусмотрены команды hide и show, которые нам подходят для включения спрайта, однако проблема в том, что они применяются к тому спрайту, для которого написан скрипт. Иными словами, тот скрипт, который мы разрабатываем для флажка, в состоянии спрятать только сам флажок, но не кота!
Примечание. Вот она, плата за “облегченность”! Согласно классическим принципам ООП, перед именем метода указывается тот объект, к которому он применяется: например, для выключения изображения кота следовало бы писать Sprite1.hide. Но ради простоты языка для малышей запись сократили, вследствие чего объект указывать уже не надо (но зато и нельзя, даже если потребуется!).
Выход из тупиковой ситуации заключается в использовании механизма сообщений: флажок должен послать сообщение коту, и тот, получив сообщение, сам “спрячется”.
Чтобы объект послал сообщение, на странице Control (цвет желтый) есть команда broadcast [ ], т.е. разослать широковещательное сообщение всем объектам. Параметром команды является имя сообщения. В начальный момент никаких сообщений нет, их надо создать, выбрав пункт new…, который всегда возникает в конце списка после имен уже имеющихся сообщений. После создания сообщений с именами 0 и 1 окончательная программа для флажка примет вид, приведенный на рис. 5.6.
А для кота, который только получает сообщения, программа будет еще проще (рис. 5.7). Заметим, что when I receive [ ] означает “когда я получу сообщение”.
Как только все набрано (а точнее сказать, собрано из блоков), можно пощелкать по флажку и убедиться, что он работает сам (обязательно проконтролируйте значение переменной cb в левом верхнем углу сцены!) и правильно “руководит” видимостью кота.
В качестве самостоятельного упражнения читатели могут снабдить спрайт флажка звуками (одним общим или двумя разными для перехода в выбранное и невыбранное состояние) и воспроизводить их при переключении флажка.
Рис. 5.6. Программа для спрайта с флажком
Рис. 5.7. Программа для спрайта с котом
Кроме того, можно разработать и реализовать проект, имитирующий работу кнопок радиогруппы и, что несколько сложнее, выпадающего списка.
Если визуальные компоненты получились удобными, красивыми и универсальными, то их можно сохранить в качестве отдельных спрайтов и в дальнейшем просто загружать в другие проекты.
Все эти эксперименты должны убедить вас, что в Scratch вполне достаточно средств для создания развитых интерактивных приложений.
Проект 6. “Имитируем Лого-Черепашку”
Во введении мы упоминали, что Scratch вполне может имитировать Лого-Черепашку. Настало время проверить это.
Начнем с того, что нарисуем образ будущей героини проекта, так как в галерее рисунков ее, как ни странно, нет. Возможное (и, видимо, не лучшее, учитывая мои более чем скромные художественные способности) решение показано на рис. 6.1. Подчеркнем, что для правильной работы программы очень важно, чтобы спрайт-Черепашка смотрел в направлении оси x, т.е. вправо.
Рис. 6.1. Образ Черепашки
Дальнейшая работа показала, что моя черепашка оказалась слишком большой. К счастью, Scratch предложил простое решение проблемы — оказалось, что спрайт очень легко уменьшить. Для этого надо на панели инструментов воспользоваться самой правой кнопкой. На ней изображены стрелки, которые направлены внутрь, а при подведении указателя мыши выдается текст про уменьшение спрайта: Shrink sprite. Выберем данный инструмент, щелкнув по нему мышкой. Наставив изменившийся курсор на Черепашку, будем щелкать по ней, пока она не уменьшится до нужного размера (рис. 6.2). Кстати говоря, аналогичным способом можно и увеличивать спрайт соседним инструментом панели.
Когда Черепашка примет удовлетворительный вид, займемся скриптом. Пусть мы хотим заставить Черепашку нарисовать квадрат со стороной 100 единиц. Окончательный вариант программы виден из рис. 6.3.
Рис. 6.2. Уменьшаем размер спрайта
Рис. 6.3. Черепашка нарисовала квадрат
Скрипт запускается по кнопке с зеленым флажком и состоит из двух частей. Первая, образованная четырьмя блоками, инициализирует Черепашку; она универсальна и будет открывать любые “Лого-алгоритмы”. А вторая, начинающаяся блоком pen down, рисует квадрат. В целом программа настолько проста, что понятна без комментариев.
Результат виден в окошке сцены и вполне напоминает “настоящее” Лого.
Усложним теперь задачу так, чтобы потребовалась работа с переменными. Итак, пусть Черепашка должна нарисовать окружность радиуса R, которую обычно подменяют правильным n-угольником с большим числом сторон n; обычно n = 36 вполне достаточно.
Начнем с того, что создадим переменные R и n, которые являются параметрами задачи, и придадим им требуемые значения блоком типа set r to (0).
Вычислим из геометрических соображений угол поворота и размер стороны, считая заданными R и n. Угол, как известно, вычисляется по формуле 360/n, а длина стороны легко находится, если приравнять периметр многоугольника n*L к длине окружности. В итоге получаем требуемую длину стороны 2R/n 6*R/n.
Примечание. Если захотите более точно учесть значение , набирайте дробную часть через точку, например, 6.28.
Заметим, что даже “сборка” таких относительно несложных выражений, каковым является 6*R/n (см. рис. 6.4), у меня породила очень отрицательные эмоции. Захотелось вернуться к старой доброй клавиатуре, а не мучиться с мышью, вставляя друг в друга многочисленные блоки. Возможно, поклонники Microsoft Equation найдут подобный способ сборки выражений вполне естественным.
Все остальное достаточно просто. Программа легко получается путем переделки предыдущего проекта о рисовании квадрата заменой числовых параметров на необходимые арифметические выражения. Итоговый результат приведен на рис. 6.5.
Рис. 6.4. Собираем арифметическое выражение
Таким образом, мы видим, что средства Scratch вполне достаточны, чтобы в простейших задачах заменить Черепашку. Тем не менее, как уже отмечалось во введении, Лого-программы с процедурами без переделок в среду Scratch перенести не удается (по крайней мере в текущей версии).
Проект 7. “Готовим учебную презентацию”
Русская народная пословица гласит: лучше один раз увидеть, чем сто раз услышать. Руководствуясь ею, используем средства Scratch для создания проекта, который будет являться примером динамической учебной презентации. В качестве учебной тематики для презентации выбран материал, описывающий некоторые принципы функционирования компьютера, но с таким же успехом можно было взять абсолютно любой школьный материал по любому предмету, где только возникает потребность продемонстрировать учащимся некоторую последовательность изменяющихся состояний.
Итак, попробуем “оживить” перед глазами учеников процесс чтения данных из оперативной памяти, продемонстрировав его на экране средствами Scratch.
Обсуждаемый нами процесс, с точки зрения инженера, достаточно сложен. Поэтому определенный интерес для курса информатики представляет некоторое упрощенное его описание, которое позволило бы ученикам понять наиболее важные принципы обмена информацией при помощи шины.
Воспользуемся описанием процесса чтения ОЗУ, которое дано в статье о функциональном устройстве компьютера в “Энциклопедии учителя информатики”, опубликованной в газете прошлым летом (нас сейчас интересует стр. 26 в номере 13 за 2007 год). Там дано следующее представление процесса взаимодействия процессора и ОЗУ:
— процессор выставляет на шину адреса необходимый адрес ячейки памяти;
— процессор передает по шине управления необходимые сигналы, обеспечивающие чтение из ОЗУ;
— ОЗУ принимает управляющие сигналы процессора и в ответ считывает с соответствующей шины адрес, находит его содержимое и выставляет на шину данных;
— ОЗУ по соответствующим линиям шины управления сообщает процессору о готовности данных;
— процессор, наконец, считывает с шины необходимую информацию.
Для визуализации материала нам потребуется разделить материал на части еще более четко. Назвав, несколько условно, каждый из этапов процесса термином фаза, получим приведенную ниже таблицу, которая планирует содержание нашей будущей презентации.
Примечание. Строка 6 таблицы может быть опущена. На практике так часто и происходит: процессор, выждав время, заведомо достаточное для появления данных на шине, считывает ее содержимое. Нам кажется методически целесообразнее разобрать полный цикл взаимодействия, поскольку он более четко демонстрирует методы шинного взаимодействия между двумя устройствами.
Как видно из приведенной таблицы, для разрабатываемого проекта выбраны простейшие средства визуализации. В частности, движение информации отображается стрелкой, хотя можно было бы сделать “бегущую” группу нулей и единичек. Помимо стремления к простоте реализации, есть еще основания полагать, что слишком яркие визуальные эффекты будут отвлекать учащихся от попыток вникнуть в суть изучаемого явления.
Следующим шагом заготовим необходимые картинки. В качестве фона потребуется общая схема шинной организации компьютера, которая представлена на рис. 7.1.
Рис. 7.1. Фоновый рисунок для презентации
Далее придумаем динамические образы для спрайтов — это стрелки и символическое изображение двоичного кода (рис. 7.2).
Рис. 7.2. Заготовки для спрайтов
Для указания направления движения информации использованы стрелки. Поскольку обе стрелки никогда не будут использоваться одновременно, предлагается поместить их образы на один спрайт. В оригинальном проекте стрелки имеют разный цвет; если же вас устраивает одинаковый, то достаточно будет одного “костюма”: перевернуть стрелку можно командой point in direction (ее действие мы опробовали в проекте 1).
Спрайты 2–4 для простоты взяты с одинаковым графическим образом. Для усиления выразительности можно было бы сделать три разных рисунка, например, используя различные последовательности нулей и единиц или фон разного цвета.
Подготовка завершена, пора наконец-то запустить Scratch. Сразу же заменяем, как это мы уже не раз делали, образы кота на новые — в данном случае стрелки, затем создаем Sprite2 с образом двоичной информации. Далее копируем полученный спрайт с помощью кнопки на панели инструментов, как это показано на рис. 7.3 на. Так мы получим идентичные Sprite3 и Sprite4.
Затем выберем в качестве выделенного элемента сцену и загрузим ее фон. После расстановки спрайтов на ориентировочные места получим следующую заготовку презентации (рис. 7.4 ).
Рис. 7.3. Дублирование спрайта
Рис. 7.4. Все подготовленные рисунки помещены в проект
Рис. 7.5. Основной скрипт презентации
Переходим к написанию скриптов. Начнем с главного скрипта, который будет сменять картинки. Свяжем его со сценой. Прежде всего создадим локальную переменную p, значение которой будет равно длительности паузы в секундах.
Примечание. Может показаться, что тогда все паузы по необходимости получатся одинаковыми, но это не так. “На нашей стороне” возможность вставить в оператор wait (1) secs произвольное выражение вроде p+1 или 2*p.
Структура самого скрипта оказывается весьма тривиальной: после паузы wait (p) secs следует команда извещения всех динамических компонентов broadcast (1) and wait, которая рассылает сообщение 1, вызывающее в них все необходимые динамические эффекты фазы 1. Затем такой же кусок повторяется для сообщения 2
и т.д. К сожалению, язык не позволяет вставить в оператор broadcast (1) and wait параметр в виде переменной и затем организовать по ней цикл, а потому приходится для каждого кадра помещать собственный блок.
В итоге вместо компактного цикла получается длинная и “нудная” линейная программа.
Примечания. 1. Слово wait (ждать) в команде означает, что следующий блок скрипта начнет выполняться только после завершения обработки отправленного сообщения. 2. Сообщение 0 нужно для инициализации сцены, которая состоит в выключении видимости всех спрайтов.
Полный главный скрипт, “привязанный” к сцене, будет иметь вид, изображенный на рис. 7.5.
Теперь остается очень аккуратно определить реакцию каждого динамического компонента на сообщения с номерами фаз в полном соответствии с приведенной ранее таблицей.
Поскольку поведение стрелок наиболее сложное, начнем со спрайта с номером 2, который символизирует данные на шине адреса. Из анализа таблицы очевидно, что сначала он не отображается, а в конце фазы 1 появляется на экране. Первое из названных событий обозначено 0, а вот второе пока не определено. Поскольку оно должно произойти в конце (финале) фазы 1, обозначим его 1F. В результате скрипты для спрайта примут вид, изображенный на рис. 7.6. Посылку сообщения 1F мы организуем позже.
Рис. 7.6. Скрипты Sprite2 (код на шине адреса)
Совершенно аналогичные скрипты получаются и для спрайтов 3 и 4 — коды шин данных и управления. Единственная разница заключается в имени сообщения: вместо 1F следует указать 5F и 2F соответственно.
Примечание. Если заранее предвидеть такую идентичность скриптов, то лучше было бы создать Sprite2, собрать из “кубиков” все его скрипты и только потом скопировать, уже вместе с программой. Мы же скопировали только рисунок, когда скриптов на спрайте еще не было.
Остается описать поведение стрелки.
Как видно из скриптов рис. 7.7, в ответ на инициализирующее презентацию сообщение 0 стрелка исчезает.
Рис. 7.7. Скрипты Sprite1 (стрелка; сообщения 0-2)
Обработчик сообщения 1 устроен следующим образом. Стрелка устанавливается в начальное состояние, переключается на вид стрелки вниз и появляется на экране. Далее следует цикл ее перемещения вниз (change y by (–1) ) и затем после секундной паузы стрелка, которая указывала в конце цикла на шину адреса, с экрана убирается. Последней командой обработчик посылает сообщение 1F (финал первого этапа). Данное сообщение предназначается для спрайта номер 2, и его обработчик уже готов (см. рис. 7.6).
Примечание. В Scratch реализован очень удобный и понятный, хотя и не совсем очевидный механизм установки начальных координат спрайта. Когда спрайт мышкой отбуксирован в нужную точку, достаточно выполнить на нем двойной щелчок, и текущие координаты будут автоматически занесены в тело блока go to x: ( ) y: ( ) на палитре блоков. Остается лишь перетащить этот автоматически сформированный оператор в программу, так что знание координат практически не требуется.
В фазе 2 поведение стрелки во многом аналогично, так что и скрипт обработчика сообщения 2 практически такой же. Отличия весьма незначительны и заключаются в следующем. Удалена излишняя команда switch to costume [down]; увеличен параметр цикла repeat — стрелка теперь должна доходить до шины управления; изменено имя завершающего сообщения на 2F.
Cкрипты для фаз 3 и 4 во многом похожи на описанные выше, но и они имеют некоторые особенности (рис. 7.8). Оба они двигают стрелки не от процессора к шине, а от шины к ОЗУ, так что имеют другую координату x, а также направлены на перемещение стрелки вдоль оси y вверх, а не вниз, как ранее (switch to costume [up] и положительный шаг по y). Кроме того, в описываемых фазах презентации не требуется посылать сообщения другим спрайтам, поэтому команда broadcast отсутствует.
Рис. 7.8. Скрипты Sprite1 (сообщения 3 и 4)
Особенности остальных скриптов, приведенных на рис. 7.9, предлагаем читателям разобрать самостоятельно. В процессе анализа рекомендуем пользоваться исходной таблицей для презентации.
Рис. 7.9. Скрипты Sprite1
(сообщения 5–7)
Рис. 7.10. Один из динамических кадров итоговой презентации
Теперь можно запустить и посмотреть созданную презентацию. Поскольку получаемая картина существенно динамическая, здесь мы приведем только один из кадров — рис. 7.10. На нем изображена фаза 5 (в левой части рисунка видно, что обведена реакция на сообщение 5). В запечатленный на рисунке момент стрелка уже дошла от ОЗУ до шины данных, и вот-вот на последней высветится считанное из памяти содержимое.
Те из читателей, кто внимательно выполнил проект и понаблюдал за результатом, вероятно, обратили внимание, что фаза 6 выглядит не очень наглядным образом. Дело в том, что ОЗУ должно выдать на шину управления другие коды, т.е. содержимое шины должно бы как-то поменяться. Предлагаем внести данное усовершенствование самостоятельно.
И еще одно, более существенное, предложение по улучшению нашей презентации. Если к вашему компьютеру подключен микрофон, вы можете записать голосовые комментарии к тому, что происходит, в виде звуковых файлов. Для этой цели в среде Scratch предусмотрен встроенный “магнитофон” — рис. 7.11.
Полученный дикторский текст можно подсоединить к сцене (Stage) или спрайту стрелки (Sprite1), и тогда наша презентация станет подлинно мультимедийной. Разумеется, при наличии звуковых комментариев придется подстроить длительности в операторах ожидания wait, которые определяют время демонстрации каждого кадра.
Теперь, когда работа над презентацией закончена, хочется сравнить возможности Scratch и PowerPoint. Конечно, и в PowerPoint тоже есть довольно мощные анимационные возможности, но, по-моему, даже на нашей достаточно тривиальной задаче разницу при желании можно заметить. Сравните Scratch-программу движения стрелки с механизмом, который предлагает пользователям PowerPoint (рис. 7.12). Видно, что движение стрелки по прямой — это предел его возможностей * . В Scratch, напротив, движение элементарно модернизируется, например, программируется остановка в середине пути или траектория делается синусоидальной. Важно подчеркнуть доступность любого анимационного эффекта, даже такого, который не был предусмотрен создателям ПО в MIT (в PowerPoint ваши возможности строго ограничены фантазией и усилиями, затраченными при разработке эффекта программистами Microsoft!).
Рис. 7.11. Встроенная в среду запись звука
Рис. 7.12. Сопоставляем возможности с PowerPoint
* Возможности VBA мы здесь не принимаем во внимание, что, может быть, делает сопоставление не совсем честным; тем не менее ясно одно: для школьника запрограммировать движение в Scratch много проще, чем в VBA.
В чем особенность передвижения спрайтов
Компонент Sprite Renderer позволяет вам отображать изображения в виде спрайтов( Sprites ), чтобы использовать их и в 2D и в 3D сценах.
Add it to a GameObject via the Components menu (Component > Rendering > Sprite Renderer or alternatively, you can just create a GameObject directly with a Sprite Renderer already attached (menu: GameObject > 2D Object > Sprite).
| Свойство: | Функция: |
|---|---|
| Sprite | Спрайт, который надо рендерить. Спрайты можно создать из текстур используя настройку Sprite в импортере текстур (Texture importer). |
| Color | Цвет меша, который рендерится. |
| Flip | Flip the sprite in the X or Y planes. |
| Material | Материал, используемый для рендера спрайта. |
| Sorting Layer | Слой, используемый для задачи приоритета наложения во время рендеринга. |
| Order In Layer | Приоритет наложения спрайта в рамках его слоя. Чем ниже число, тем раньше будет рендериться спрайт, а спрайты с числами повыше, будут рисоваться поверх тех, что ниже. |
Детали
В 3D графике внешний вид объекта может быть разным в соответствии с освещением и с точкой обзора на объект. А вот в 2D изображение просто отображается на экране без каких-либо трансформаций, кроме базовых перемещения, масштабирования и вращения. Позиция спрайта задаётся 2D координатами, таким образом здесь нету концепта “глубины” или расстояния от камеры.
Тем не менее, важно иметь способ определения приоритета наложения разных спрайтов(т.е, какие спрайты будут рисоваться поверх других, в случае пересечения). Например, в игре с вождением, автомобиль должен быть виден при проходе по плоским объектам на дороге. Unity использует концепт слоёв сортировки ( sorting layers ), чтобы позволить разделять спрайты на группы с приоритетами наложения. Спрайты, с более низким сортировочным слоем будут рисоваться под спрайтами с более высоким сортировочным слоем.
Иногда, два или более объекта в одном и том же сортировочном слое могут накладываться (например, 2 персонажа в сайд-скроллере). Свойство order in layer может быть использовано, чтобы задать приоритеты спрайтам в одном и том же слое. Так же, как и со слоями сортировки, применяется правило, что сначала рендерятся объекты с более низким значением номера и перекрываются объектами с более высоким значением. Для деталей о редактировании слоёв сортировки см.layer manager.
Рендеринг
Sprite Renderer использует текстуру указанную в свойстве Sprite, но использует шейдер и другие свойства из свойства Material (это выполняется используя за сценой MaterialPropertyBlock). Это значит, что вы можете использовать один и тот же материал для рендера разных спрайтов не трогая каждую текстуру по отдельности.
Спрайт рендерится на меше, который использует позицию, цвет и UV на каждой вершине, но у него нет вектора нормали. Если ваш материал требует векторы нормалей, то вы можете рассчитать их используя вертексный шейдер (см. Surface Shader Examples.
Стандартные шейдеры, используемые для спрайтов:
- Sprites/Default — простой шейдер с альфа смешиванием, который не взаимодействует с освещением в сцене.
- Sprites/Diffuse — просто шейдер поверхности с альфа смешиванием который взаимодействует с освещением. Он генерирует переднесторонний вектор нормали (0,0,–1).
Flipping
While Sprites can be flipped by setting negative transform.scale , this has the side effect of also flipping the child GameObjects and also flipping the colliders, which can be performance intensive or otherwise not preferred.
The SpriteRenderer flipping feature provides a lightweight alternative which doesn’t affect any other components or GameObjects. It simply flips the rendered sprite on x or y axis and nothing else.
Координаты в Scratch(перемещение спрайтов)
Рассмотрим на практике как можно заставить спрайтов в Scratch перемещаться по координатам.
Команды перемещения спрайта по сцене находятся в ящике «Движения» (выделен синим цветом). Для перемещения спрайта по сцене можно воспользоваться координатной сеткой. Каждая точка сцены имеет две координаты (х по горизонтали и у по вертикали). При наведении указателя мыши на любую точку в правом нижнем углу сцены показываются ее координаты.
Рассмотрим команды синего ящика:
Команды для работы с координатами
Влиять на положении спрайта на сцене можно двумя способами:
- Установить спрайт в заданные координаты (x,y).
- Изменить текущие координаты спрайта на заданные значения (только x, только y или обе координаты сразу).
В первом случае спрайт устанавливается в заданные координаты независимо от его текущего места. Во втором — текущие координаты меняются на заданные значения. Разницу в этих подходах иллюстрирует следующий рисунок: Команды для работы с координатами спрайта находятся в группе Движение. Установить в …
| Команда | Координаты до | после |
 Устанавливает спрайт в заданные координаты |
Не важно | Стало: (100,50)  |
 Плавно перемещает спрайт с текущего места в заданные координаты |
Не важно | Стало: (100,50) |
 Координата y не меняется. Координата x устанавливается в заданное значение |
Было: (?,50)  |
Стало: (100,50) |
 Координата x не меняется. Координата y устанавливается в заданное значение |
Было: (100,?)  |
Стало: (100,50) |
Изменить на …
| Команда | Координаты до | после |
 Координата y не меняется. Координата x меняется на заданное значение |
Было: (50,50) y не меняется  |
Стало: (100,50) x меняется на 50  |
 Координата x не меняется. Координата y меняется на заданное значение |
Было: (100,0) x не меняется  |
Стало: (100,50) y меняется на 50  |
 Спрайт перемещается в текущем направлении на заданное число шагов |
Было: (0,0)  |
Стало: (8.66,5)  |
Самостоятельная работа. Создайте свой проект движения спрайта (любого), использую скрипт (программу): Добавьте в свою историю изменения внешности героя и движение, используя команды ящиков «Движение» и «Внешность».