Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Complete Games

Делаем игру "Три в ряд" ("Match-3") в программе Construct 2: Основы

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Make a Match-3 Game in Construct 2.
Make a Match-3 Game in Construct 2: Animations and Block Swapping

Russian (Pусский) translation by Elena Butorina (you can also view the original English article)

Добро пожаловать в новую серию обучающих статей, в которой я покажу вам, как создать с нуля игру-головоломку "Три в ряд" в программе Construct 2. В этой первой части самоучителя мы подготовим фундамент для нашей игры и выведем на экран поле из блоков головоломки.

Введение

Игра "Три в ряд" - это головоломка с блоками, в которой нужно передвигать их в игровом поле так, чтобы получились группы по 3 и более блоков, имеющих одинаковые признаки (например, цвет или форму). В большинстве таких игр игроку также предоставляется бонус за группы, составленные из более, чем трех блоков.

Большая часть таких игр является соревновательной по природе и цель игрока в основном сводится к набору наивысшего возможного количества очков перед тем, как его время закончится или выполнится другое условие проигрыша. Примерами игр "Три в ряд" могут служить Pokemon Puzzle League, Bejeweled, и недавний хит Candy Crush Saga.

Игра, которую мы будем делать

Я решил базировать нашу игру "Три в ряд", которую мы будем делать, на игре Pokemon Puzzle League:


Нажимая левую кнопку мыши и перетаскивая, меняйте соседние блоки местами. Пытайтесь создать группу из трех блоков по горизонтали или вертикали. Не давайте блокам достигнуть верха игрового поля!

Если вы раньше никогда не играли в PPL, то это довольно простая игра серии "Три в ряд", в которой блоки поднимаются снизу игрового экрана и игроку нужно создавать группы из блоков, чтобы не дать игровому экрану заполниться ими. Если блоки достигают верха экрана, то игрок проигрывает и игра начинается заново.

Здесь дается демонстрация игры, над созданием которой мы будем работать в этих частях самоучителя:



В этой первой части мы сфокусируемся над созданием фундамента нашей игры. В частности, в ней мы подготовим наш проект и выведем для игрока на экран квадратное поле из случайных блоков.

Перед тем, как начать

Перед тем, как начать работать с этой частью самоучителя, вам нужно убедиться, что у вас установлена новейшая версия программы Construct 2 (C2). Когда я создавал оригинальную версию этой игры, я использовал версию 122, и если у вас установлена более новая версия программы, то все должно работать, как нужно. Также, если вы никогда еще не работали с программой C2, то вам нужно сначала обратиться к этому руководству в котором дается детальное описание основ пользования программой C2 и создания большинства различных типов объектов.

Вам также нужно загрузить графический пакет, созданный мной для данного самоучителя. И хотя, конечно, вы можете использовать любую графику, какую только пожелаете, я буду указывать определенное положение для многих объектов в этих статьях, и это положение базируется на изображениях, использованных мной. И если вы используете другую графику, то вам нужно принять во внимание любую имеющуюся разницу в размерах, когда вы следуете этому самоучителю.

Итак, после того, как вы все подготовили для работы и имеете хорошее понимание программы C2, будем двигаться дальше!

Подготовка проекта

Перед тем, как начать работу над механизмом игры, нам нужно подготовить сам проект. Запустите C2 и следуйте следующим шагам:

  1. Создайте новый проект.
  2. В Свойствах проекта (Project Properties) , установите размер окна (Window Size) 600x600.
  3. Заполните поля Имя (Name) иАвтор (Author).
  4. Перейдите в панель Слои (Layers) и добавьте два новых слоя.
  5. Переименуйте самый нижний слой в Фон (Background), средний слой в Блоки (Blocks), и верхний слой в Игровое поле (Game Field).
  6. Перейдите в Сцену 1 (Layout 1) и вставьте объект Плиточный фон (Tiled Background).
    1. Для объекта Плиточный фон (Tiled Background) , используйте файл BG Images/StandardBGTile.bmp из графического пакета.
    2. Перейдите в свойства этого объекта и переименуйте его в Фон игры (GameBG).
    3. Установите Слой (Layer) объекта Фон (Background).
    4. Установите Размер (Size) объекта 650, 650.
    5. Расположите объект так, чтобы он заполнил все видимое поле сцены и выглядел как здесь:
    6. Construct 2 Match-3 game tutorial
  7. Теперь создайте еще один объект Плиточный фон (Tiled Background).
    1. Используйте изображение Game Field Images/GameFieldBorder.bmp.
    2. Назовите объект GameFieldBorder.
    3. Установите Положение (Position) в 9, -12.
    4. Установите Размер (Size) 16, 732.
    5. Установите Слой (Layer) Game Field.
  8. Создайте копию объекта  Бордюр игрового поля (GameFieldBorder).
    1. Установите Положение (Position) копии  368, -12 .
    2. Construct 2 Match-3 game tutorial
  9. Далее, создайте объект Спрайт (Sprite).
    1. Используйте изображение Game Field Images/GameFieldBottom.png.
    2. Назовите его Низ игрового поля (GameFieldBottom).
    3. Установите Положение (Position) 197, 625.
    4. Установите Размер (Size) 344, 150.
    5. Установите Слой (Layer) Игровое поле (Game Field).
  10. Скопируйте объект Низ игрового поля (GameFieldBottom).
    1. Установите Положение (Position) 196, -30.
    2. Установите Угол (Angle) 180.
    3. Construct 2 Match-3 game tutorial

И в конце нам нужно создать фон для поля, где будут появляться блоки.

  1. Создайте новый объект Спрайт (Sprite).
    1. Перейдите в Выбор цвета (Color Picker) и установите значения Красный (Red), Зеленый (Green), и Синий (Blue) в 0, и Прозрачность (Alpha) в 200.
    2. С помощью Ведра краски (Paint Bucket) залейте все изображение этим цветом.
    3. Закройте редактор анимации.
    4. Установите Размер (Size) 359, 570.
    5. Установите Положение (Position) 195,294.
    6. Установите Слой (Layer) Фон (Background)
      Construct 2 Match-3 game tutorial

Игровое поле теперь готово, но нам еще нужно создать спрайт, который мы будем использовать для блоков. 

  1. Создайте новый объект Спрайт (Sprite).
    1. В открывшемся редакторе анимации щелкните правой кнопкой мыши в окне Кадры анимации (Animation Frames) и выберите "Импорт кадров... (Import frames...)".
    2. Выделите все изображения в папке Блоки (Blocks) из графического пакета и всех их импортируйте.
    3. Удалите кадр 0 (Frame 0) так, что теперь кадром 0 будет изображение серого блока и не будет пустого кадра.
    4. Убедитесь, что ваши кадры расположены в таком же порядке, как мои блоки на изображении внизу:
      Construct 2 Match-3 game tutorial

Перед тем, как двигаться дальше, я хотел бы объяснить изображения блоков. Серый блок будет представлять собой "неактивный" блок, который будет использован в следующих частях самоучителя. Остальные изображения собраны в группы из трех для каждого блока: первый кадр обозначает неиспользуемый блок, второй - когда игрок манипулирует блоком, и третий - когда блок становится частью группы.

Итак, возьмите блок, сделанный нами, и поместите его куда-нибудь на сцену так, чтобы его не было видно во время самой игры. Также, установите размер блока 40, 40.

Теперь у нас есть все необходимые изображения для этой статьи и мы можем переходить к разделу о том, как нам заставить игру работать.

Создание квадратного поля из блоков

В финальной версии игры блоки будут постоянно двигаться вверх, а снизу экрана будут выдвигаться новые блоки. Но пока нам нужно настроить базовую механику игры, поэтому мы просто создадим поле из блоков размером 8х8 и остановимся на этом.

Перейдите на Страницу событий 1 (Event Sheet 1) и добавьте следующие глобальные переменные, чтобы определить начальную позицию появления блоков:

Construct 2 Match-3 game tutorial

Также нам нужно сделать еще одну вещь перед созданием первого события: нам нужно создать переменную для объекта Блок (Block), которая указывает, какого он цвета

Создайте новую переменную для объекта Блок (Block), назовите ее Цвет (Color) и оставьте остальные настройки без изменений.

Construct 2 Match-3 game tutorial

Теперь мы создадим наше первое событие. Целью этого события является создание статичного поля из блоков в качестве теста:

Обе эти формулы в основном обозначают одно и то же. Сначала мы добавляем 2 к ширине блока (Block.Width), что создает буфер в 2 пикселя между соседними блоками для избежания ошибок во время определения столкновения. Затем мы умножаем это число на текущее значения индекса цикла "For" (loopIndex) и добавляем это значение к начальной позиции X (SPAWNX) или Y (SPAWNY). Также, мы отнимаем из значения Y, так как в C2 точка 0 на оси Y находится вверху игрового экрана, поэтому, уменьшая значение позиции Y, мы помещаем объект ближе к верху экрана.

Итак, что же выполняет это событие? Оно означает, что когда выполняется цикл по X и Y и значения их возрастают, изменяется позиция появления каждого из блоков, что в результате приводит к созданию квадратного поля из блоков:

Construct 2 Match-3 game tutorial

Если вы запустите игру на этом этапе, у вас на экране появится поле из блоков, но вместо того, чтобы быть разного цвета, они будут постоянно менять свое изображение по кругу.

Чтобы исправить это, нам нужно сделать две вещи.

Вначале каждому блоку нужно придать значение цвета, используя переменную объекта "цвет" ("color"), созданную нами ранее. Для этого добавьте следующее Действие (Action):

Это присвоит блоку случайное (Random) значение цвета (Color) в диапазоне от 1 до 6. (Почему не с 1 до 7 объясненов описании функцииRandom.)

Ваша функция должна выглядеть так:

Construct 2 Match-3 game tutorial

Нам также нужно добавить систему, меняющую изображение блока, базируясь на его значении. Для этого мы добавим новую переменную объекта Блок:

Construct 2 Match-3 game tutorial

Теперь добавим новое событие:

В этой формуле сначала мы отнимаем 1 от значения цвета блока, так как это значение начинается с 0, а не с 1. Затем умножаем эту цифру на 3, так как каждый блок имеет 3 кадра анимации. И, наконец, добавляем 1 к этому значению, так как стандартное изображение блока является первым изображением в группе.

Давайте рассмотрим небольшой пример, где блок будет иметь значение цвета равное 4, с целью определить, какой кадр анимации он будет использовать. Сначала отнимем 1 от значения его цвета и получим число 3. Затем умножим его на 3, получив 9. И, наконец, добавим к нему 1, получив число 10. Это значит, что блок со значением цвета, равным 4 будет использовать 10-й кадр в качестве кадра по умолчанию и будет блоком фиолетового цвета с квадратом на нем.

Теперь после запуска игры вы увидите, что каждый блок имеет различный цвет, но мы пока не использовали анимацию для блоков, когда курсор мыши находится над ними или когда блоки совпали. Это мы сделаем в следующей части самоучителя, а также научимся менять местами соседние блоки.

Вот небольшая демонстрация того, как наша игра должна выглядеть на текущий момент: (возьми исходник программы здесь):

Construct 2 Match-3 game tutorial
Щелкните мышкой для запуска демонстрации игры.

Если вы захотите самостоятельно продолжить работу над этой игрой, попробуйте поискать способ смены анимации блока, основываясь на событии "Мышь > Курсор мыши над объектом" ("Mouse > Cursor is over object"). Также вы можете попробовать использовать Поведение "Перетаскивание" ("Drag & Drop" behavior), чтобы манипулировать блоком, и попробуйте решить вопрос о том, что игрок пробует сделать с блоком, когда он начинает его перетаскивать или отпускает его.

Заключение

Спасибо за прочтение этой части самоучителя, где мы подготовили фундамент для нашей игры "Три в ряд". До встречи в следующей его части! Чтобы оставаться в курсе новостей используйте Facebook, Twitter, Google+, RSS или email.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.