Мини-курс «Как рисовать локации, персонажей и интерфейс игры в Scratch»
Многие любят делать игры, но далеко не каждый знает и понимает, что создание картинок (профессионалы называют это артом от английского слова art) для анимации и игр тоже происходит по определенным законам и алгоритмам.
С чего начать рисование локации для игры? А персонажа? А какие нужны кнопочки и пр. элементы в игре? Разбираемся с профессиональным дизайнером Анной Василевской, которая подготовила мини-курс для начинающих игроделов.
Урок 1. Рисуем локацию
Из урока узнаём, что любую локацию можно разбить на элементы, каждый из которых можно нарисовать на основе простых геометрических фигур: прямоугольников и овалов. Используем векторный графический редактор Scratch, в котором есть инструменты для изменения формы любого объекта. Узнаём о слоях и многом другом. Становимся волшебниками, создавая эффекты объёма (3D) с помощью градиентной заливки.
Урок 2. Как правильно нарисовать персонажа игры или мультфильма
По эскизу своего персонажа (который нарисован карандашом на бумаге) создаём уникальный арт в векторном графическом редакторе Scratch.
Урок 3. Кнопки, бары, … интерфейс игры
Оказывается, интерфейс для игры может быть уникальным! Можно придумать и нарисовать самому любые кнопочки и другие необходимые элементы, умея рисовать карандашом на бумаге и зная инструменты графического векторного редактора Scratch.
Придумай и нарисуй свой интерфейс для игры!
Вроде бы никакого программирования? Но оказывается, что последовательность действий рисования для игры и мультфильма — это настоящий алгоритм, и не один!
Благодарим Анну!
Пишите свои вопросы к автору в комментариях!
Расширение «Перо»
В Scratch кроме стандартных категорий блоков таких как «Движение», «Внешний вид» и так далее, которые сразу доступны во всех проектах, имеются другие. Их называют расширениями или дополнениями. Чтобы увидеть все доступные расширения, надо нажать на кнопку «Добавить расширение», которая находится на вкладке «Код» в самом низу. После этого откроется окно, где можно выбрать дополнение.
Большинство дополнений предполагают использование внешних устройств, таких как камера, робот и другие. Однако не все.
После выбора расширения «Перо» во вкладке «Код» среды программирования Scratch появляется новый раздел с блоками-командами, которые позволяют рисовать на сцене. Это значит, что спрайты при перемещении смогут оставлять после себя видимую линию.
Вот пример сценария для кота:
Проиграв его, получим такую картину:
Когда у спрайта поднято перо, то он не оставляет линии при перемещении. Когда перо опущено, как бы вы не перемещали спрайт из точки А в точку Б, от А до Б будет рисоваться линия установленного цвета и толщины.
Команда «печать» отпечатывает изображение спрайта в том месте, где он находится.
В Scratch можно создать сценарий, когда при его запуске пользователь сам будет рисовать, перемещая героя. Добавим на сцену спрайт-карандаш и запрограммируем его следующим образом:
Игру следует запускать в полноэкранном режиме. В режиме программирования скрипт не сможет правильно работать.
После запуска карандаш можно перемещать мышью, и он будет оставлять след. Можно намалевать на сцене что-угодно. Однако линия будет выходить не из кончика карандаша, а его середины, что неправильно. Исправляется это редактированием костюма.
В центре холста есть чуть видимая точка, которая обозначает центр спрайта. Именно из этого центра рисуется линия. Надо переместить к центру холста кончик карандаша.
Рисовать мышью не совсем удобно. Поменяем управление на клавиатуру:
Теперь карандаш управляется стрелками клавиатуры. Когда мы нажимаем пробел, то попеременно меняем состояние пера. Поднимая перо, мы можем перемещать карандаш по сцене без рисования линии.
Сценарий спрайта можно усложнить, добавив к нему скрипты смены толщины пера и цвета. Пусть цвет, например, задается случайным образом:
А что если мы хотим, чтобы карандаш печатал не самого себя, а какой-то другой спрайт? Этот другой спрайт должен появляться из кончика карандаша при нажатии, скажем, клавиши 0.
Тогда этому спрайту надо как-то передать координаты карандаша. Однако проще воспользоваться командой «перейти на …», в которой вместо «случайное положение» следует выбрать имя спрайта-карандаша.
Составьте программу, которая при запуске выводит на сцене окружность, состоящую из печатей спрайта.
X Скрыть Наверх
Программирование в Scratch. Курс
Темно-зеленый ящик
В зеленом ящике собраны команды, которые позволяют управлять пером или карандашом, которым могут рисовать наши объекты. Как и черепашка Лого, все объекты Скретч могут рисовать и оставлять на экране свои отпечатки.
Мы можем менять цвета и размер карандаша, поднимать и опускать карандаш. В результате выполнения сценария на экране рисуются разноцветные геометрические фигуры.
Очистить экран от всех следов, которые на нем оставили объекты
Опустить карандаш. После этой команды за движущимся объектом будет оставаться след.
Установить цвет пера()
Выбрать цвет, которым мы собираемся рисовать. Цвет можно выбрать из объектов на экране
Изменить цвет пера на ()
Изменить цвет пера на указанное значение.
Например: Изменить цвет пера на (50)
Изменить тень на ()
Установить градиент цвета следа, который оставляет объект. 100 – белый, 0 – черный.
Отпечатать объект на экране
Создание рисунков
Как показывает наш многолетний опыт работы в школе, все дети любят рисовать, причем не только с помощью графических редакторов. При изучении языка программирования тема «Компьютерная графика» является самой любимой. На этой странице мы рассмотрим задачи на создание рисунков с помощью приемов программирования. Эти задачи хорошо знакомы всем, кто работал с языком Logo.
Замечание, общее для всех приведенных задач: рисование начинаем в точке с координатами (0,0). Так как в процессе рисования курсор может оказаться в любом месте экрана, эту начальную точку нужно фиксировать командой ИДТИ В Х: 0 У: 0.
Задача №1. Нарисовать следующий рисунок:
Начать решение следует с создания переменной, которая задаст нам длину шага при рисовании окружности, а чтобы ее не было на рабочем поле, уберем галочку слева от ее имени. Согласитесь, что будет не слишком красиво, если котенок будет носиться по экрану, рисуя окружности, поэтому мы его будем скрывать, но не удалять! Рассмотрим готовый скрипт:
Команда ОЧИСТИТЬ позволит выполнить программу несколько раз. Цвет и размер пера устанавливаете по желанию. Настройки по умолчанию — цвет пера синий, а размер равен 1. Не забудьте задать начальное значение переменной а, иначе оно будет равным 0. Для рисования окружности начальный шаг больше 1 брать нежелательно, иначе первая окружность получится довольно большой. Цикл ПОВТОРИТЬ 4 — задает рисование 4 окружностей. Второй цикл ПОВТОРИТЬ 120 рисует окружность, число 120 получено из слудующих соображений: вся окружность соответствует 360 градусам. В цикле стоит команда ПОВЕРНУТЬСЯ на 3 градусов, т.е. 360 : 3 =120 . Затем изменяем переменную а на 1, увеличивая радиус окружности, и изменяем цвет. Конечно, задавать изменение цвета совсем не обязательно, просто интереснее, когда все окружности разноцветные. Поэкспериментируйте с цветом, выбирая вместо числа 60 что — то другое.
Задача 2. Нарисовать пластину паркета, как на рисунке:
Здесь тоже понадобится переменная, задающая длину стороны наименьшего квадратика. Ее можно задать, как в первой задаче. Но будет интереснее, если она будет получаться случайным образом, затем мы будем увеличивать ее на какое — значение (шаг). В нашем решении шаг равен 20. В этой задаче также будет 2 вложенных цикла ПОВТОРИТЬ 5 (5 квадратов, можете взять больше) и ПОВТОРИТЬ 4 (этот цикл строит квадрат, поэтому только 4). Попробуйте решить самостоятельно. Нужна помощь —
она здесь. Попробуйте доработать скрипт так, чтобы все квадратики также были разноцветными.
Задача 3. Создать рисунок «паутинка»:
Замечание. Основа «паутинки» — сектор, состоящий из 6 треугольников. Каждый треугольник получается в результате перемещения на какое — то количество шагов и поворота на 120 градусов. Затем сектор «паутинки» следует повернуть на 360:6=60 градусов. И — самое главное! В каждом секторе необходимо восстанавливать начальное значение стороны треугольника (команда ПОСТАВИТЬ а В . ). Котенок в центре паутины — шутка! Если хотите ее повторить, то после построения узора выберите из блока ВНЕШНОСТЬ команду установить размер 25% и показаться.
Задача 4. Построить спираль, основой которой является треугольник, квадрат или пятиугольник. Вид спирали задается случайным образом.
Для решения нам понадобятся 3 переменные: k — случайное число, принимающее значение 3, 4 или 5, ugol — угол поворота для получения фигуры и dlina — с помощью этой переменной происходит перемещение. Вначале всем переменным следует присвоить первоначальные значения: k, ugol = 360/k, dlina = 15(можно взять и другое значение). Цикл, который виден на рисунке — ПОВТОРИТЬ 40. Для того, чтобы получилась именно спираль, а не отдельные треугольники, изменять значение переменной dlina нужно внутри цикла повторить 40 , а не после него.
Задача 5. Построить график функции y=sin x.
Данная программа является универсальной, т.е. с ее помощью можно простроить гоафик любой функции, причем потребуется внести минимум изменений. Поэтому рассмотрим скрипт программы с описанием действий, выполняемых каждым ее блоком.
Мы искусственно разбили скрипт на части. Теперь для того, чтобы получить график другой функции, достаточно изменить вид функции в командах ПОСТАВИТЬ У В.
Попробуйте, построив график указанной функции, получить график функции y=|cos x|.
Воспользуйтесь советом 6 страницы СОВЕТЫ & СЕКРЕТЫ. Модуль функции записывается так: abs.
Полякова Л.А., учитель информатики МОУ СОШ №84 г. Челябинска, larissa1401@gmail.com