© 2016 Your company
Занятие №2 "Графический редактор. Создание первой игры"
Вы можете использовать графический редактор для создания или редактирования костюмов и фонов (подойдет и любая другая программа, которая вам по душе).
Есть две важные функции, о которых вам нужно узнать уже сейчас: обозначение центра изображения и прозрачные цвета.
Обозначение центра изображения
Когда вы даете спрайту команду повернуться (направо или налево), он поворачивается относительно какой-то опорной точки — центра его костюма.
Для того, что бы установить центр костюма - выделите его и перемещайте по графическому редактору.
Серый плюсик с кружком обозначает центр данного костюма.
Синий плюсик на выделенном фрагменте спрайта - центр изображения.
Когда вы даете спрайту команду повернуться (направо или налево), он поворачивается относительно какой-то опорной точки — центра его костюма.
Для того, что бы установить центр костюма - выделите его и перемещайте по графическому редактору.
Серый плюсик с кружком обозначает центр данного костюма.
Синий плюсик на выделенном фрагменте спрайта - центр изображения.
Установка прозрачных цветов
Когда два изображения накладываются друг на друга, то, которое оказывается сверху, перекрывает часть нижнего. Точно так же спрайты закрывают часть Сцены. Если вы хотите видеть, как выглядит Сцена за каким-то изображением, нужно воспользоваться графическим редактором, чтобы сделать хотя бы часть изображения прозрачным, как пингвин справа на рисунке ниже
Кликните на цветовой палитре по квадратику с красной диагональной линией и рисуйте «прозрачным» цветом, чтобы сделать что-то невидимым. Представьте себе, что это знак «Цвета нет», что-то вроде знака «Не курить» с красной линией, перечеркивающей сигарету.
Когда два изображения накладываются друг на друга, то, которое оказывается сверху, перекрывает часть нижнего. Точно так же спрайты закрывают часть Сцены. Если вы хотите видеть, как выглядит Сцена за каким-то изображением, нужно воспользоваться графическим редактором, чтобы сделать хотя бы часть изображения прозрачным, как пингвин справа на рисунке ниже
Кликните на цветовой палитре по квадратику с красной диагональной линией и рисуйте «прозрачным» цветом, чтобы сделать что-то невидимым. Представьте себе, что это знак «Цвета нет», что-то вроде знака «Не курить» с красной линией, перечеркивающей сигарету.
Ваша первая игра в Scratch
В этом разделе вы создадите свою компьютерную игру, в которой пользователю нужно будет передвигать ракетку, чтобы не дать прыгающему мячику удариться об пол. Она основана на классической аркадной игре Pong. Пользовательский интерфейс показан на рисунке ниже.
Как показано на рисунке, мяч начинает движение в верхней части Сцены и перемещается вниз под случайным углом, отскакивая от краев Сцены. Игрок перемещает ракетку по горизонтали (при помощи мыши), чтобы отбить мяч обратно наверх. Если мяч коснется нижней границы Сцены, игра окончена. Мы будем создавать игру пошагово, и первым делом нужно открыть новый проект. Выберите Файл — Новый, чтобы начать новый проект Scratch. Затем удалите спрайт кота, кликнув по значку урны в углу миниатюры спрайта.
В этом разделе вы создадите свою компьютерную игру, в которой пользователю нужно будет передвигать ракетку, чтобы не дать прыгающему мячику удариться об пол. Она основана на классической аркадной игре Pong. Пользовательский интерфейс показан на рисунке ниже.
Как показано на рисунке, мяч начинает движение в верхней части Сцены и перемещается вниз под случайным углом, отскакивая от краев Сцены. Игрок перемещает ракетку по горизонтали (при помощи мыши), чтобы отбить мяч обратно наверх. Если мяч коснется нижней границы Сцены, игра окончена. Мы будем создавать игру пошагово, и первым делом нужно открыть новый проект. Выберите Файл — Новый, чтобы начать новый проект Scratch. Затем удалите спрайт кота, кликнув по значку урны в углу миниатюры спрайта.
Шаг 1: подготовка фона
Чтобы определить, когда мяч попадает мимо ракетки, мы обозначим нижнюю границу Сцены определенным цветом и используем блок дотронуться до цвета ? (из раздела Сенсоры), чтобы определять, когда мяч будет касаться этого цвета. Сейчас у нас белый фон, и мы можем нарисовать у нижней границы Сцены тонкий цветной прямоугольник, как показано ниже.
Кликните по иконке Сцены, чтобы выбрать ее, а затем идите в закладку Фон. Повторите шаги, чтобы нарисовать тонкий прямоугольник внизу фона Сцены.
Чтобы определить, когда мяч попадает мимо ракетки, мы обозначим нижнюю границу Сцены определенным цветом и используем блок дотронуться до цвета ? (из раздела Сенсоры), чтобы определять, когда мяч будет касаться этого цвета. Сейчас у нас белый фон, и мы можем нарисовать у нижней границы Сцены тонкий цветной прямоугольник, как показано ниже.
Кликните по иконке Сцены, чтобы выбрать ее, а затем идите в закладку Фон. Повторите шаги, чтобы нарисовать тонкий прямоугольник внизу фона Сцены.
Шаг 2: добавляем ракетку и мяч
Нажмите кнопку Нарисовать новый спрайт наверху списка спрайтов, чтобы добавить в свой проект спрайт Ракетка (Paddle). Поскольку ракетка — просто узкий короткий прямоугольник, повторите шаг 1, чтобы нарисовать нужную фигуру. Раскрасьте ее в любой цвет, какой вам нравится, и установите центр приблизительно посередине прямоугольника. Затем дайте спрайту имя, которое объясняло бы, что он собой представляет. А также кликните по изображению ракетки на Сцене и передвиньте его так, чтобы координата y была около –120.
Нажмите кнопку Нарисовать новый спрайт наверху списка спрайтов, чтобы добавить в свой проект спрайт Ракетка (Paddle). Поскольку ракетка — просто узкий короткий прямоугольник, повторите шаг 1, чтобы нарисовать нужную фигуру. Раскрасьте ее в любой цвет, какой вам нравится, и установите центр приблизительно посередине прямоугольника. Затем дайте спрайту имя, которое объясняло бы, что он собой представляет. А также кликните по изображению ракетки на Сцене и передвиньте его так, чтобы координата y была около –120.
Теперь у нас есть ракетка, но пока не хватает мяча, который скакал бы вокруг. Нажмите Выбрать спрайт из библиотеки наверху в списке спрайтов, чтобы импортировать спрайт. В появившемся окне выберите категорию Предметы, затем изображение теннисного мяча и добавьте его в ваш проект. Переименуйте спрайт в Мяч.
Прежде чем вы начнете работать над скриптами для игры, выберите Файл — Скачать на свой компьютер, чтобы сохранить то, что вы уже сделали. В появившемся диалоговом окне выберите папку, куда вы хотите сохранить свою работу, назовите файл Pong и нажмите Сохранить. Если вы вошли на сайт Scratch под своим логином, вы можете сохранить свою работу в облаке (на сервере Scratch). В любом случае не забывайте сохранять файлы достаточно часто.
Теперь, когда у нас есть спрайты Ракетка и Мяч, Сцена должна выглядеть приблизительно как на рисунке. Следующим шагом будет добавление скриптов, необходимых, чтобы игра заработала. Не переживайте из-за отдельных непонятных блоков, мы их обсудим позже. А пока сосредоточимся на том, чтобы научиться складывать из отдельных частей готовый проект.
Шаг 3: начать игру и заставить спрайты двигаться
Вам решать, как игроки могут начать новый раунд. Например, нажав кнопку, кликнув по спрайту на Сцене или даже хлопнув в ладоши или помахав рукой (если у вас есть веб-камера).
Зеленый флажок (расположенный над Сценой) — еще одна популярная функция, ею-то мы и воспользуемся.
Идея проста. Любой скрипт, начинающийся с блока-триггера когда щелкнут по , начинает работать, как только вы нажмете эту кнопку. Флажок становится ярко-зеленым и остается таким до тех пор, пока скрипт не завершит работу. Чтобы увидеть это в действии, создайте скрипт для спрайта Ракетка, как показано ниже.
Вам решать, как игроки могут начать новый раунд. Например, нажав кнопку, кликнув по спрайту на Сцене или даже хлопнув в ладоши или помахав рукой (если у вас есть веб-камера).
Зеленый флажок (расположенный над Сценой) — еще одна популярная функция, ею-то мы и воспользуемся.
Идея проста. Любой скрипт, начинающийся с блока-триггера когда щелкнут по , начинает работать, как только вы нажмете эту кнопку. Флажок становится ярко-зеленым и остается таким до тех пор, пока скрипт не завершит работу. Чтобы увидеть это в действии, создайте скрипт для спрайта Ракетка, как показано ниже.
После того как игрок кликает по зеленому флажку, блок перейти в х: у: v устанавливает вертикальную позицию ракетки на –120, про- сто на тот случай, если вы до этого мышкой убрали ее оттуда. Ракетка должна парить прямо над розовым прямоугольником внизу Сцены, так что если ваш прямоугольник толще, измените координаты ракетки на те, которые вам подходят лучше.
Затем в скрипте используется блок всегда, чтобы постоянно отслеживать позицию мышки. Мы будем двигать ракетку туда-сюда за счет того, что укажем в качестве ее позиции по оси x позицию мыши x. Запустите скрипт (кликнув по зеленому флажку) и попробуйте двигать мышь горизонтально. Ракетка должна следовать за ней.
Кликните по значку Стоп рядом с зеленым флажком, чтобы остановить скрипт.
Затем в скрипте используется блок всегда, чтобы постоянно отслеживать позицию мышки. Мы будем двигать ракетку туда-сюда за счет того, что укажем в качестве ее позиции по оси x позицию мыши x. Запустите скрипт (кликнув по зеленому флажку) и попробуйте двигать мышь горизонтально. Ракетка должна следовать за ней.
Кликните по значку Стоп рядом с зеленым флажком, чтобы остановить скрипт.
Скрипт для спрайта-мяча немного длиннее, чем предыдущий, так разобьем его на простые части. Мяч должен начинать двигаться, как только мы кликаем по зеленому флажку, поэтому первым делом добавьте спрайту-мячу скрипт
УПРАЖНЕНИЕ 2.1
Замените цифру 12 внутри блока идти 12 шагов на другие значения, запустите скрипт и посмотрите, что получится. Это покажет вам, как сделать игру для пользователя сложнее или легче. Когда закончите — нажмите кнопку Стоп.
Замените цифру 12 внутри блока идти 12 шагов на другие значения, запустите скрипт и посмотрите, что получится. Это покажет вам, как сделать игру для пользователя сложнее или легче. Когда закончите — нажмите кнопку Стоп.
Сначала мы перемещаем мяч наверх Сцены и заставляем его лететь вниз под случайным углом, используя блок выбрать случайный угол (из раздела Операторы). Затем скрипт использует блок всегда, чтобы мяч перемещался по Сцене и отпрыгивал от ее краев. Используйте зеленый флажок, чтобы проверить, что у вас получилось. Мяч должен передвигаться зигзагами, а ракетка — следовать за мышкой.
Теперь пора добавить самое веселое — блоки, которые заставят мяч отскакивать от ракетки. Мы можем изменить блок всегда, который только что создали, так, что мяч будет лететь вверх, отскочив от ракетки, как показано на рисунке
Когда мяч и ракетка соприкасаются, мы даем мячу команду повернуть в случайном направлении от –30 до 30. Когда блок всегда зайдет на второй круг, он начнет выполнять блок идти, который теперь будет заставлять мяч лететь вверх.
Кликните снова по зеленому флажку, чтобы протестировать эту часть игры. Когда вы удостоверитесь, что мяч отскакивает от ракетки, как и предполагалось, нажмите Стоп.
Кликните снова по зеленому флажку, чтобы протестировать эту часть игры. Когда вы удостоверитесь, что мяч отскакивает от ракетки, как и предполагалось, нажмите Стоп.
Теперь единственный недостающий фрагмент — код, который останавливает игру, если мяч касается нижней границы Сцены. Добавьте спрайту-мячу скрипт, как показано ниже, либо непосредственно перед, либо сразу после блока если. Блок касается цвета ? вы найдете в разделе Сенсоры, блок стоп — в разделе Управление. Когда вы кликнете мышью по цветному квадрату внутри блока касается цвета ?, стрелка курсора изменится на руку. Когда вы переместите курсор и кликнете по розовому прямоугольнику внизу Сцены, этот квадрат внутри блока станет такого же цвета. Блок стоп все делает именно то, о чем говорит его название: останавливает все работающие скрипты. Ни Мяч, ни Ракетка не будут исключением.
Теперь наша простейшая игра Рong полностью готова к работе. Кликните по зеленому флажку и сыграйте несколько раз, чтобы про- тестировать ее. Надеюсь, после того как вы увидели, что можете самостоятельно создать целую игру, сделав так мало, вы согласитесь, что Scratch — что-то невероятное!
Шаг 4: приправим блюдо звуком
Играть, конечно, гораздо веселее, когда есть звук. Добавим один завершающий штрих: звук, который будет раздаваться каждый раз, когда мы отбиваем мяч. Дважды кликните по мячу на Сцене, чтобы выбрать его, а затем зайдите в закладку Звуки. Кликните по кнопке Выбрать звук из библиотеки, чтобы добавить звук спрайту-мячу. В появившемся диалоговом окне выберите категорию Эффекты, затем pop и нажмите OK, чтобы добавить звук в закладку Звуки. Потом вернитесь в закладку Скрипты и вставьте блок играть звук (из раздела Звуки), как показано
Играть, конечно, гораздо веселее, когда есть звук. Добавим один завершающий штрих: звук, который будет раздаваться каждый раз, когда мы отбиваем мяч. Дважды кликните по мячу на Сцене, чтобы выбрать его, а затем зайдите в закладку Звуки. Кликните по кнопке Выбрать звук из библиотеки, чтобы добавить звук спрайту-мячу. В появившемся диалоговом окне выберите категорию Эффекты, затем pop и нажмите OK, чтобы добавить звук в закладку Звуки. Потом вернитесь в закладку Скрипты и вставьте блок играть звук (из раздела Звуки), как показано
Запустите игру еще раз. На этот раз вы будете слышать короткий звук каждый раз, когда мяч касается ракетки.
Поздравляю! Ваша игра готова (если, конечно, вы не хотите добавить еще каких-нибудь функций). Вы только что написали свою первую прогрaмму в Scratch.
Если вы хотите еще поэкспериментировать, попробуйте продублировать спрайт Мяч, чтобы у вас было два (или более) мяча в игре, и посмотрите, что из этого получится!
Поздравляю! Ваша игра готова (если, конечно, вы не хотите добавить еще каких-нибудь функций). Вы только что написали свою первую прогрaмму в Scratch.
Если вы хотите еще поэкспериментировать, попробуйте продублировать спрайт Мяч, чтобы у вас было два (или более) мяча в игре, и посмотрите, что из этого получится!
Scratch - Учись играя!
