Когда-то давно, в начале изучения проектирования игр, я уже создавала Арканоид, но не стала его выпускать.
К сожалению, исходника у меня не осталось, но я записала видео с файлом. Выглядел мой первый арканоид так:
А сейчас я хочу рассказать, как сделать простую механику арканоида, и постараюсь действия сопроводить скриншотами.
В результате использования основных механик, должно получиться вот такое:
Как я уже говорила в статье про этапы разработки игры, продумывать дизайн лучше всего стоит после прописывания основных механик. Вы можете довести графику для этого урока до конца, например, так:
Простой Арканоид: добавление объектов на уровень
Первым делом настраиваю границы экрана моей игры. Я поставлю холст размером 1300х1300, а видимую при игре часть экрана на размер 1280х720. В этом уроке все размеры спрайтов будут подогнаны под этот размер видимой части игры экрана.
Изменение холста: нажимаю на пустую серую область за холстом, если не настроено меню Properties (если не видно место за холстом, применяю ctrl и колесо мыши) --> в левом основном меню в Layout Size ставлю размер 2000, 1000
Изменение видимой части экрана при игре: в левой основной панели нахожу Project Properties и нажимаю View -->
--> в изменившемся левом основном окне ищу Window Size и набираю там 1280, 720
Чтобы уровень не выглядел таким пустым, создаю фон размером 1280х720.
Добавление фона: дважды быстро нажимаю на холст левой кнопкой мыши или нажимаю один раз правой клавишей и выбираю Insert new object --> в появившемся окне выбираю Sprite двойным щелчком или с помощью одного щелчка и клавиши Insert -->
--> нажимаю на холст, чтобы проявить спрайт --> с помощью resize в верхней части графического редактора изменяю размер спрайта на 1280х720 -->
--> раскрашиваю спрайт с помощью Fill в правой части графического редактора или загружаю картинку с компьютера (увеличение и уменьшение масштаба ctrl плюс колесо мышки) -->
--> ставлю point на 0, 0, чтобы было легче расположить фон -->
--> закрываю графический редактор без сохранения --> в левой основной панели в Position прописываю координаты 0, 0, чтобы фон встал на место
Создаю прямоугольный спрайт-платформу, которая будет управляться нами вправо и влево, чтобы ловить шарик. После этого я придаю платформе поведение Solid, которое сделает мой объект твердым, чтобы ловить шарик.
Создание спрайта платформы 176х12: дважды быстро нажимаю на холст левой кнопкой мыши или нажимаю один раз правой клавишей и выбираю Insert new object --> в появившемся окне выбираю Sprite двойным щелчком или с помощью одного щелчка и клавиши Insert --> с помощью resize в верхней части графического редактора изменяю размер спрайта на 176х12 --> рисую платформу --> закрываю графический редактор без сохранения --> располагаю платформу на карте с помощью перетаскивания и изменения масштаба (ctrl + колесо мыши)
Поведение к платформе: нажимаю на платформу --> в левой основной панели нахожу Behaviors --> нажимаю напротив Add/edit синий текст Behaviors -->
--> в появившемся окошке нажимаю на плюс и добавляю Solid
Теперь создаю спрайт шарика и добавляю ему поведение Bullet, чтобы при игре он летал, как пуля, и поведение solid. Скорость в поведении я поставлю на ноль, чтобы шарик сразу не улетал при запуске уровня, а только если я дам ему разрешение на скорость. Bounce off solid ставлю «да», чтобы шарик отталкивался от твердых предметов - стен и платформы.
Создание шарика 30х30: дважды быстро нажимаю на холст левой кнопкой мыши или нажимаю один раз правой клавишей и выбираю Insert new object --> в появившемся окне выбираю Sprite двойным щелчком или с помощью одного щелчка и клавиши Insert --> с помощью resize в верхней части графического редактора изменяю размер спрайта на 30х30 --> рисую шарик --> нажимаю collision polygon и настраиваю границы касания шарика при игре с другими объектами (чтобы добавить еще точку, дважды нажимаю на одну из уже присутствующих красных точек) -->
--> закрываю графический редактор без сохранения
Поведение к шарику: нажимаю на шарик --> в левой основной панели нахожу Behaviors --> нажимаю напротив Add/edit синюю надпись Behaviors --> в появившемся окошке нажимаю на плюс и добавляю Solid и Bullet --> в левой основной панели нахожу поведение Bullet --> Speed ставлю 0, и остальные значения тоже должны быть 0 --> Bounce off solids ставлю Yes
Теперь нужно создать блоки, которые будет разрушать шарик при касании. Создаю небольшой прямоугольный спрайт и придаю ему поведение Solid.
Создание прямоугольного блока 36х16: дважды быстро нажимаю на холст левой кнопкой мыши или нажимаю один раз правой клавишей и выбираю Insert new object --> в появившемся окне выбираю Sprite двойным щелчком или с помощью одного щелчка и клавиши Insert --> с помощью resize в верхней части графического редактора изменяю размер спрайта на 36х16 --> рисую блок --> выхожу из графического редактора без сохранения
Поведение к блоку: нажимаю на созданный блок --> в левой основной панели нахожу Behaviors --> нажимаю напротив Add/edit синюю надпись Behaviors --> в появившемся окошке нажимаю на плюс и добавляю Solid
Теперь нужно задать границы, чтобы шарик и платформа могли взаимодействовать со стенами.
Чтобы шарик мог прыгать от стены к стене, стоит создать 2 спрайта. Один будет отвечать за то, что шарик коснулся границы под платформой и привел к проигрышу, а второй будет отвечать за отталкивание.
Спрайт для границ я залью черным цветом и закрою редактор, после чего растяну его узкой полоской по одной из сторон. После этого скопирую полоску и размещу с другой стороны. Затем скопирую еще раз и в настройках изменяю угол объекта на 90, и размещу горизонтальную полоску сверху.
Добавление черного спрайта: дважды быстро нажимаю на холст левой кнопкой мыши или нажимаю один раз правой клавишей и выбираю Insert new object --> в появившемся окне выбираю Sprite двойным щелчком или с помощью одного щелчка и клавиши Insert --> заливаю спрайт черным цветом --> выхожу из графического редактора без сохранения --> растягиваю получившийся объект в длинную вертикальную полоску за точки на спрайте и размещаю на одной из сторон фона, как стену
Копирование черного спрайта: нажимаю на черный спрайт правой кнопкой мыши --> в появившемся окошке выбираю Clone object type -->
--> переношу появившийся новый спрайт на противоположную сторону фона, применяя как вторую стену
Изменение угла черного спрайта: нажимаю на черный спрайт правой кнопкой мыши --> в появившемся окошке выбираю Clone object type --> в левом основном меню меняю Angle на 90 --> размещаю горизонтальный черный спрайт, как потолок уровня
Для черных спрайтов я ставлю поведение «Solid».
Поведение для черного спрайта: нажимаю на созданный спрайт --> в левой основной панели нахожу Behaviors --> нажимаю напротив Add/edit синюю надпись Behaviors --> в появившемся окошке нажимаю на плюс и добавляю Solid
Чтобы это все хорошо легло, приближу экран с помощью ctrl и колесика мыши. Выравниваю черные границы, немного заезжая на внутренний экран.
Теперь добавляю такой же спрайт, только красный, и располагаю его внизу, под платформой, у края экрана.
Добавление красного спрайта: нажимаю на черный спрайт, служащий потолком, правой кнопкой мыши --> в появившемся окошке выбираю Clone object type --> дважды нажимаю на появившийся спрайт и перекрашиваю его в красный цвет в графическом редакторе --> размещаю красный спрайт как пол.
Дополнительно, но не обязательно - можно увеличить количество блоков на уровне. Для этого нужно включить сетку, чтобы все установилось ровно, и расставить скопированные блоки.
Включение сетки: в верхней основной панели нужно перейти на вкладку View --> поставить галочки рядом с Snap to grid и Show grid --> в ячейках напротив Grid width и Grid height поставить цифру 2
Увеличение количества блоков и их постановка на холст: с помощью клавиши ctrl и колесика мыши приближаю холст (приближение также есть в верхней основной вкладке View --> Zoom in\Zoom out\ Zoom to 100%) -->
--> нажимаю на блок правой клавишей мыши и выбираю в появившемся меню Copy (не выбирайте Clone object type, так как при использовании этой клавиши создастся не копия с одним и тем же именем, а новый объект) -->
--> после этого на пустом месте нажимаю правой кнопкой мыши и в появившемся меню нажимаю Paste -->
--> курсор мыши меняется на крестик -->
--> нажимаю левой кнопкой мыши туда, где хочу видеть новый блок --> появляется новый блок -->
--> расставляю блоки по полю
Простой Арканоид: события
Если я сейчас запущу проект, то ничего не будет работать, потому что еще не прописаны события и условия. Поэтому сейчас я этим и займусь.
Первым делом я хочу сделать так, чтобы на экране двигалась платформа. Сделать это можно несколькими способами - с помощью мышки или с помощью клавиатуры, но я остановлюсь на мышке. Добавляю ее в проект.
Добавление мышки в проект: дважды быстро нажимаю на холст левой кнопкой мыши или нажимаю один раз правой клавишей и выбираю Insert new object --> в появившемся окне выбираю Mouse двойным щелчком или с помощью одного щелчка и клавиши Insert --> Mouse добавляется в окошке Project в правой основной панели
В Event sheet 1 прописываю событие, что, система каждый тик будет менять положение платформы относительно мышки по оси Х (горизонтальной). Теперь, при запуске проекта, платформа будет двигаться относительно того, где будет находиться мышка.
Переход в Event sheet 1: нажимаю вверху на соседнюю вкладку рядом с Layout 1 или в правом основном меню в Project ищу Event sheet 1
Движение платформы с помощью мыши: нажатие дважды по пустому пространству левой кнопкой мыши или один раз правой и выбрать Add event --> нажать на system двойным щелчком левой кнопки мыши или нажать next -->
--> выбрать Every tick --> Done -->
--> окошко закрывается, теперь нужно нажать напротив появившейся системы на Add action и выбрать спрайт с платформой -->
--> после выбора платформы нахожу в появившемся окне Set X с помощью поиска или пролистывания вниз --> Done -->
--> в появившемся окне Parameters for Sprite: Set X вписываю Mouse.X --> Done
Результат после этого выглядит так:
Теперь сделаем запуск шарика с помощью клика по нему же (позже можно перенастроить это на кнопки или иное). Если игрок нажимает на шарик, то его скорость становится 900, а угол поворота равен 120.
Запуск шарика, его скорость и угол: нажатие дважды по пустому пространству левой кнопкой мыши или один раз правой и выбрать Add event --> нажать на Mouse двойным щелчком левой кнопки мыши или нажать next --> выбрать On object clicked -->
--> в появившемся окошке Parameters for Mouse: On object clicked выбрать в Object clicked спрайт с шариком --> Done -->
--> окошко закрывается, напротив появившейся системы нажать Add action --> выбрать спрайт шарика --> найти set speed -->
--> назначить скорость 900 -->
--> Done --> вновь выбрать Add action --> выбрать спрайт шарика --> найти Set angle of motion -->
--> поставить угол 120 -->
--> Done
Результат этих действий:
Сейчас при запуске проекта у нас уже будет двигаться шарик при клике на него, отскакивать от стен и платформы, но он все еще не будет уничтожать блоки. Поэтому я прописываю в событиях, что, когда шарик касается блока, то блок разрушается.
Разрушение блока: нажатие дважды по пустому пространству левой кнопкой мыши или один раз правой и выбрать add event --> нажать на спрайт шарика двойным щелчком левой кнопки мыши или нажать next --> On collision with another object -->
--> в окошке Parameters for Sprite2: On collision with another object в Object указать спрайт блока, о который будет ударяться шарик и разрушать его --> Done --> окошко закрывается, напротив появившейся системы нажать Add action --> выбрать спрайт блока --> найти Destroy -->
--> Done
Результат:
Прописываю, что, если шарик касается красной полосы, то уровень перезапускается.
Проигрыш на уровне: нажатие дважды по пустому пространству левой кнопкой мыши или один раз правой и выбрать Add event --> нажать на спрайт шарика двойным щелчком левой кнопки мыши или нажать next --> On collision with another object --> в окошке Parameters for Sprite2: On collision with another object в Object указать красный спрайт, при касании которого уровень перезапустится --> Done --> окошко закрывается, напротив появившейся системы нажать Add action --> выбрать System --> найти Restart layout -->
--> Done
Результат:
Полностью механика выглядит так:
Проверка игры и сохранение проекта в exe
Для запуска игры я нажимаю на Run Layout, находящийся в самом вверху, рядом с сохранением отменой действий. И моя игра запускается.
Делитесь результатами в комментариях и подписывайтесь на канал. :)
