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

Добро пожаловать в новую серию обучающих статей, в которой я покажу вам, как создать с нуля игру-головоломку "Три в ряд" в программе 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. Расположите объект так, чтобы он заполнил все видимое поле сцены и выглядел как здесь:

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 .

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.

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

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)
      

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

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

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

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

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

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

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

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

  Глобальная переменная: позицияХ (Global Variable: SPAWNX)
		Значение = 49 (Value = 49)
		Константа = Истина (Constant = True)
	Глобальная переменная: позицияY (Global Variable: SPAWNY)
		Значение = 526 (Value = 526)
		Константа = Истина (Constant = True)

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

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

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

	Событие: (Event :)
		Условие: Система>При запуске сцены (Condition: System>On start of layout)
		Условие: Система>цикл For (Condition: System>For)
			Имя: "Y" (Name: "Y")
			Начальное значение = 0 (Start index = 0)
			Конечное значение = 7 (End index = 7)
		Вложенное событие: Система>Цикл For (Sub-Event: System>For)
			Имя: "X" (Name: "X")
			Начальное значение = 0(Start index = 0)
			Конечное значение = 7 (End index = 7)
			Действие: Система>Создать объект (Action: System>Create Object)
				Объект: Блок (Object: Block)
				X = (SPAWNX + (loopIndex("X"))*(Block.Width + 2))
				Y = (SPAWNY - (loopIndex("Y"))*(Block.Width + 2))

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

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

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

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

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

	Действие: Блок> Установить значение (Action: Block>Set value)
		Color = floor(Random(1,7))

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

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

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

	Переменная объекта Блок (Instance Variable for Block)
		Имя: "совпадение" (Name: "IsMatched")
		Тип: Булевая (Type: Boolean)
		Начальное значение: Ложь (initial value = false)

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

	Событие: Система> Каждый проход (Event: System>Every Tick)
		Действие: Блок>Установить кадр (Action: Block>Set Frame)
			Value = (Block.Color-1)*3 + 1

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

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

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

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

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

Заключение

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