游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

分享用Construct 2制作连线消除游戏的教程(1)

发布时间:2013-06-08 15:06:25 Tags:,,,

作者:David Silverman

教程概况

难度:初学者

使用平台:Construct 2

完成时间:45分钟

本文是以Construct 2制作连线消除游戏系列文章的第一篇,我们将在此奠定游戏的基础,令屏幕呈现基本的谜题网格。(请点击此处阅读本系列第23、4篇

关于连线消除游戏

连线消除游戏是一种基于区块的谜题游戏,你得在游戏区域中移动分块,将三个或更多相同的分块(例如颜色或形状相同)匹配在一起进行消除。在多数连线消除游戏中,玩家如果一次匹配了三个以上的分块,就可以获得更多奖励。

多数连线消除游戏游戏都极具竞争性,玩家的目标就是在限定的时间内或者达到其他损失条件时获得最高分数。典型的连线消除游戏包括《Pokemon Puzzle League》、《宝石迷阵》以及《Candy Crush Saga》。

开始制作游戏

我决定制作一款基于《Pokemon Puzzle League》(以下简称PPL)的连线消除游戏。

如果你曾玩过这款游戏,就会知道PPL是一款相当简单的连线消除游戏,其分块是从游戏屏幕底部升起,玩家得匹配分块消除它们,以免分块堆满整个屏幕。如果分块堆叠到屏幕顶端,玩家就输了,就得重新开始。

在本文我们将专注于奠定游戏基础,包括设置项目以及为玩家生成随机分块。

准备工作

在我们开始本篇教程之前,请先确认你已经安装了最新版Construct 2(C2)。我创建这款游戏最初版本时使用的是Release 122,只要你使用的是比这个更新的版本就行了。除此之外,如果你从来没有用过C2,那就要查询一些网上教程,掌握其基本用法以及制作对象类型的方法。

你还要下载我为本篇教程所创造的图像包,本教程中的所有物品都来源于我准备的图像资源。如果你想使用其他图像,那就需要考虑这些图像的大小问题。

设置项目

在我们创造所有玩法之前,需要先对项目进行设置。载入C2并遵循以下步骤:

1.开始一个新项目。

2.在项目属性中,将窗口大小设置为600*600。

3.填写“名称”和“作者”。

4.到图层面板中添加两个新图层。

5.将最底下的图层命名为“背景”,中间图层为“方块”,顶端图层为“游戏区域”。

6.进入“布局1”并插入一个“贴图背景”对象。

1)对于“贴图背景”对象,使用图像包中的BG Images/StandardBGTile.bmp文件。

2)将对象属性重命名为GameBG。

3)将对象图层设为“背景”。

4)将对象大小设为650,650。

5)调整对象位置,令其填满整个可视区域,看起来如下图:

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

7.现在创建另一个“贴图背景”对象。

1)使用图片Game Field Images/GameFieldBorder.bmp。

2)将对象命名为GameFieldBorder。

3)将位置设为9,-12。

4)将大小设为16,732。

5)将图层设为Game Field。

8.创建GameFieldBorder的复制对象。

1)将复制对象位置设为368,-12。

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

9.然后创建一个“精灵”对象。

1)使用图片Game Field Images/GameFieldBottom.png。

2)将其命名为GameFieldBottom。

3)将位置设为197,625。

4)将大小设为344,150。

5)设图层设为Game Field。

10.制作GameFieldBottom的复制对象。

1)将位置设为196,-30。

2)将角度设为180。

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

最后我们要制作一个方块呈现区域的背景。

1.创造一个新的“精灵”对象。

1)到颜色选择器中将红、绿、蓝设置为0,并将Alpha设为200。

2)使用漆桶用这种颜色填充整个图像。

3)关闭动画编辑器。

4)将大小设为359,570。

5)将位置设为195,294。

6)将图层设为“背景”。

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

游戏区域已经完成了,但我们还得制作一个能够用于“方块”的“精灵”。

1.制作一个新的精灵对象。

1)打开动画编辑器,右击动画帧窗口,选择“输入帧”。

2)选中图像包中“方块”文件夹内所有的图片,并全部输入。

3)删除0帧,令灰色方块图变成0帧,这样就不存在空白帧了。

4)确认你的帧排列顺序无误,如下图所示:

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

这里我要解释一下方块图片的区别。灰色方块代表“不活跃”广场,这一点会在新手教程中说明。其余图片则均可三个合成一组:第一帧是方块何时不被使用,第二帧是玩家何时操纵方块,第三帧是方块如何匹配成组。

最后,将我们所制作的方块放到布局中的某个地方,以免玩家在真正的游戏中看到它。并将方块大小设为40,40。

现在我们已经备齐了本文所需的一切图像,可以真正开始制作游戏了。

产生随机方块网格

在游戏的最终版本中,方块会不断冒出,新方块会从底下涌现。现在,我们要让基本机制运行,所以我们只需要生成一个8*8网格的方块。

去Event Sheet 1并添加这些全局变量,以确定方块的最初生成位置:

Global Variable: SPAWNX
Value = 49
Constant = True
Global Variable: SPAWNY
Value = 526
Constant = True

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

在制作第一个事件之前,我们还有其他事情要做:我们得为方块创造一个告知其颜色的实体变量。

为方块对象创造一个新实体变量,将其命名为“颜色”,不要更改任何设置。

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

现在我们要开始制作首个事件。这个事件的目标是创建一个静态的方块网格以便测试所用:

Event :
Condition: System>On start of layout
Condition: System>For
Name: “Y”
Start index = 0
End index = 7
Sun-Event: System>For
Name: “X”
Start index = 0
End index = 7
Action: System>Create Object
Object: Block
X = (SPAWNX + (loopIndex(“X”))*Block.Width + 2)
Y = (SPAWNY – (loopIndex(“Y”))*Block.Width + 2)

这两个公式基本上用于同一件事。首行,我们为方块宽度增加2,以便每个方块之间都有2px的缓冲区,以避免使用碰撞检测时发生误报。然后,我们将这一数字与当前循环索引相乘,将其添加到开始的X或Y位置。我们还要扣除Y值,因为在C2中的Y轴0点是位于游戏屏幕顶端,所以减少Y位置的数值,可以令对象位置更接近屏幕顶端。

这意味着X和Y循环迭代时,X和Y值都会增加,每个方块的位置会发生变化,这最终会形成一个方格网:

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

如果你想在此时运行游戏,就得有一网格的方块,但此时它们并非不同颜色的方块,只是连续循环每个方块图像。

为了弥补这一问题我们应该做两件事情。

首先,我们要使用之前制作的实体变量为每个方块赋予一个颜色值。为此,要添加另一个“动作”:

Action: Block>Set value
Color = floor(Random(1,7))

这将为方块随机分配1至6的颜色值。

现在你将看到如下函数:

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

我们还得添加一个基于数值改变方块图像的系统。为此,先对方块对象添加一个新实体变量:

Instance Variable for Block
Name: “IsMatched”
Type: Boolean
initial value = false

Match-3_Construct_2_tutorial_p1(from gamedev)

Match-3_Construct_2_tutorial_p1(from gamedev)

现在,添加一个新事件:

Event: System>Every Tick
Action: Block>Set Frame
Value = (Block.Color-1)*3 + 1

这个公式先从方块的颜色值中减去1,令其数值以1而不是0为起点。之后该数值除以3令每个方块得到3帧动画。最后,为该值增加1,因为方块的标准图像是该系列图像中的第一张图。

这里我们以某个颜色值为4的方块为例,看看它将使用哪个动画帧。首先,它扣除了1个颜色值,令其降为3。之后将其乘以3,使其变成9。最后增加1个颜色值,令其成为10。这意味着颜色值为4的方块将使用第10帧作为默认动画帧,并将成为紫色/方形方块。

如果你在此时运行游戏,就会看到每个方块都是不同颜色,但我们仍然还没有植入鼠标移至方块上方以及它们进行匹配时的动画。这一点我们将在下一个教程中提到。

以下是游戏此时的演示样本:

Match-3_end_of_part_1(from gamedev)11

Match-3_end_of_part_1(from gamedev)

如果你想继续制作,就可以先更改方块的动画帧(游戏邦注:根据“鼠标>指标移到对象”事件)。你也可以开始使用“拖放”行为操纵方块,并考虑如何决定玩家与方块进行哪些互动,他们何时开始拖拽,何时放手。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

Make a Match-3 Game in Construct 2: The Basics

David Silverman

Tutorial Details

Download Source Files

Demo View It Online

This entry is part 1 of 3 in the series Make a Match-3 Game in Construct 2

Make a Match-3 Game in Construct 2: The Basics

Make a Match-3 Game in Construct 2: Animations and Block Swapping

Make a Match-3 Puzzle Game in Construct 2: Match Detection

Welcome to a new series of tutorials in which I will show you how to build a Match-3 puzzle game, from scratch, in Construct 2. In this first part we are going to lay the groundwork for the game and get the basic puzzle grid on screen.

Introduction

A Match-3 game is a block-based puzzle where you move blocks around in the game area to create groups of three or more that share a common attribute (such as a color or a shape). In most match-3 games the player is also given bonuses for matching more than three blocks at once.

Most match-3 puzzle games are competitive in nature, and the player’s goal is generally just to get the highest score they can before their time runs out, or some other loss condition is met. Some examples of match-3 games include Pokemon Puzzle League, Bejeweled, and the recent hit Candy Crush Saga.

The Game We Will Be Making

I decided to base the match-3 game we will be making on Pokemon Puzzle League:

Click and drag adjacent blocks to swap them. Try to match three in a row or column. Don’t let the blocks reach the top!

If you’ve never played it before, PPL is a fairly simple match-3 where blocks rise from the bottom of the game screen and the player has to create matches to prevent the game screen from filling up. If the blocks reach the top, the player loses and is forced to start all over again.

Here is a demo of the game we will be working towards throughout the series:

In this first article we are going to focus on laying the groundwork for our game. This article will focus specifically on setting up the project and spawning a grid of random blocks for the player.

Before We Begin

Before getting started with this tutorial you should make sure to install the newest version of Construct 2 (C2). When I built the original version of the game I was using Release 122, so as long as you have a newer version than that, you should be fine. On top of that, if you’ve never used C2 before you should check out this guide which details the basics of using C2 and how to make most object types.

You should also download the graphics package I created for this tutorial. While of course you can use whatever graphics you want, I will be giving specific positioning for many items in these tutorials, and those positions are based on the images I used. If you do use other graphics you will need to account for any size differences in those graphics when following these tutorials.

Once you have everything set up and have a good understanding of C2, read on!

Setting Up the Project

Before we actually build all of the gameplay, we need to set up the project itself. Load C2 and follow these steps:

Start a new project.

In the Project Properties, set the Window Size to 600×600.

Fill in the Name and Author fields.

Go to the Layers panel and add two new layers.

Rename the lowest layer to Background, the middle layer to Blocks, and the top layer to Game Field.

Go into Layout 1 and insert a Tiled Background object.

For the Tiled Background object, use BG Images/StandardBGTile.bmp from the graphics pack.

Go to the object’s properties and rename it GameBG.

Set the object’s Layer to Background.

Set the object’s Size to be 650, 650.

Position the object so it fills the entire visible area of the layout and looks similar to this:

Now, create another Tiled Background object.

Use the image Game Field Images/GameFieldBorder.bmp.

Name the object GameFieldBorder.

Set the Position to 9, -12.

Set the Size to 16, 732.

Set the Layer to Game Field.

Create a copy of the  GameFieldBorder object.

Set the Position of the copy to  368, -12 .

Next, create a Sprite object.

Use the image Game Field Images/GameFieldBottom.png.

Name it GameFieldBottom.

Set the Position to 197, 625.

Set the Size to 344, 150.

Set the Layer to Game Field.

Make a copy of the GameFieldBottom object.

Set the Position to 196, -30.

Set the Angle to 180.

The final thing we need to do is make a background for the actual area the blocks will appear in.

Create a new Sprite object.

Go to the Color Picker and set the Red, Green, and Blue to 0, and the Alpha to 200.

Use the Paint Bucket to fill the entire image with this color.

Close the animation editor.

Set the Size to 359, 570.

Set the Position to 195,294.

Set the Layer to Background

The game field is now complete, but we still have to make a Sprite which can be used for the Blocks.

Make a new Sprite object.

With the animation editor open, right-click in the Animation Frames window and choose “Import frames…“.

Select every image in the Blocks folder from the graphics pack, and import them all.

Delete Frame 0, so that the gray block image is Frame 0 and there is no blank frame.

Check to make sure your frames are in the same order as my blocks in the image below:

Before we move forward, I’d like to explain the block images. The gray block is there to represent an “inactive” block, which will be implemented in an upcoming tutorial. The remaining images are grouped into sets of three for each block: the first frame is for when the block is not being used, the second is for when the player is manipulating the block, and the third is for when the block is matched into a group.

Finally, take the block we’ve made and place it somewhere in the layout that will prevent the player from seeing it during an actual game. Also, set the Block’s size to 40, 40.

We have now brought in all the images we need for this article and can move on to actually making the game work.

Spawning a Random Block Grid

In the final version of the game the blocks will be moving up at all times, and new blocks will be pushing onto the screen from the bottom. For now, though, we need to get the basic mechanics working, so we are just going to spawn an 8×8 grid of blocks and leave it at that.

Go to Event Sheet 1 and add these global variables to define the initial spawning position of the Blocks:

Global Variable: SPAWNX
Value = 49
Constant = True
Global Variable: SPAWNY
Value = 526
Constant = True

We also need to do one other thing before we make the first event: we need to create an instance variable for the Block that tells the block what color it is.

Create a new instance variable for the Block object, name it Color and don’t change any other settings.

Now we will make our first event. The goal of this event is to create a static grid of blocks for testing purposes:

Event :
Condition: System>On start of layout
Condition: System>For
Name: “Y”
Start index = 0
End index = 7
Sun-Event: System>For
Name: “X”
Start index = 0
End index = 7
Action: System>Create Object
Object: Block
X = (SPAWNX + (loopIndex(“X”))*Block.Width + 2)
Y = (SPAWNY – (loopIndex(“Y”))*Block.Width + 2)

Both of these formulas say basically the same thing. First, we add 2 to the block width so that each block has a 2px buffer between it and its neighbors to prevent false positives when using collision detection. Then, we multiply that number by the current index in the for loop, and add that to the starting X or Y position. Also, we are subtracting from the Y value because in C2 the 0 point on the Y axis is at the top of the game screen, so by decreasing the Y position’s value we are putting an object closer to the top of the screen.

So what does this accomplish? This means that as the X and Y loops iterate, and the values of X and Y increase, the position it puts each block in will change which will eventually result in a square grid:

If you run the game at this point, you will have a grid of blocks – but, rather than being different colors, they will all just cycle through every block image in succession.

To fix this we need to do two things.

First, we need to assign each block a color value using the instance variable we made earlier. To do this, add another Action:

Action: Block>Set value
Color = floor(Random(1,7))

This will assign the block a random color value from 1 to 6. (The reason it’s not from 1 to 7 is explained in the explanation of the Random function.)

Your function should now look like this:
Construct 2 Match-3 game tutorial

We also need to add a system which changes the image of a block based on its value. To do this, start by adding a new Instance Variable to the Block object:

Instance Variable for Block
Name: “IsMatched”
Type: Boolean
initial value = false

Now, add a new event:

Event: System>Every Tick
Action: Block>Set Frame
Value = (Block.Color-1)*3 + 1

This formula first subtracts 1 from the block’s color value to account for the fact that the values start at 1 rather than 0. Then, it multiplies that number by 3 to account for the fact that each block has 3 frames of animation. Finally, it adds 1 to that value since the standard image of a block is the first image in the set of images.

Let’s look at a quick example with a Block that has a color value of 4, to see what animation frame it will be using. First it subtracts 1 from the color value to get 3. Next it multiplies that number by 3 to make 9. Finally it adds 1 to that value to make 10. This means that a Block with a color value of 4 will use frame 10 as its default animation frame, and will be a purple/square Block.

If you run your game now you will see that every block is a different color, but we still haven’t implemented animations for when your mouse is hovering over the block or for when it is matched. This will be covered in the next tutorial, along with how to swap two neighboring Blocks.

Here is a small demo of what the game should look like at this point (grab the source here):

Construct 2 Match-3 game tutorial

Click to load the demo.

If you want to continue working on your own, start looking at changing the Block’s animation frame based on a “Mouse > Cursor is over object” event. You could also start looking at using the “Drag & Drop” behavior to manipulate the Block, and considering how to determine what the player is trying to do with the Block when they start dragging it or when they drop it.(source:gamedev


上一篇:

下一篇: