GDevelop中文网站

Appearance

如何制作打砖块游戏 ​

危险

该教程正在进行重新制作/更新。一些信息可能已过时，可能存在问题👷

警告

在开始本教程之前，您应阅读入门指南 ，以获取有关GDevelop的概述和主要概念的理解。

通过这个教程，您将在创造一个有趣的游戏的同时学习GDevelop中的一些基本任务。就像经典的街机游戏打砖块一样，您将创建一系列可以被弹球击破的砖块阵列。玩家通过一个挡板控制球 - 一旦球掉下，游戏就结束。

提示

在本教程中制作的游戏可以在GDevelop 5中作为示例找到。

查看实际效果：

https://editor.gdevelop.io/?project=https://resources.gdevelop-app.com/examples/breakout/breakout.json

创建新游戏

点击起始页上的创建新项目。向下滚动并选择一个文件夹用于您的项目，然后选择空项目。

添加游戏资源

提示

当您使用GDevelop时，您会经常遇到术语“资源”。在计算机游戏开发语言中，_资源_是构成游戏内容的文件 - 诸如角色、平台、音频文件等。

对于打砖块游戏，您将需要以下资源：

  • 一个球的图像文件
  • 一个挡板的图像文件
  • 一个屏障的图像文件
  • 不同砖块的图像文件
  • 动力升级的图像（可选）

或者您可以下载教程中使用的资源，breakout assets.zip

添加一个新场景

_场景_是您的游戏的屏幕。例如，游戏的不同关卡通常被创建为不同的场景，就像开始菜单或暂停菜单一样。

场景包含显示在屏幕上的对象作为游戏内容。您在场景上放置的每个对象称为一个_实例_。您的打砖块游戏将在游戏级别的场景中有多个砖块对象的实例。场景还包含_事件_ - 在特定条件下发生的动作 - 用于动画场景。

要添加一个新场景：

  • 在左侧的项目面板上，点击**+**添加场景。

  • 添加到列表中一个新场景。点击NewScene以打开它。

创建挡板对象

首先将挡板添加到场景中。玩家可以左右移动这个挡板，以便弹跳球并防止它掉出游戏。

  • 在右侧的对象面板上，点击**+**添加一个对象。

将会弹出一个窗口显示不同类型的对象可供添加。每种类型的对象都有自己的一组功能。

  • 对于挡板，您需要选择精灵对象类型。点击精灵。

提示

_精灵_是用于许多常见游戏元素（玩家、平台、敌人、砖块等）的动画对象。

新对象将添加到您的场景中，并打开对象编辑对话框。

目前，您的精灵对象没有动画或相关图像。

  • 点击**+**添加一个动画。
  • 点击空白缩略图中的**+**添加一个图像到动画中。
  • 选择项目文件夹中名为“paddle.png”的图像，然后点击打开。图像将添加到对象中。

  • 在对象名称字段中，键入Paddle以重命名您的对象。
  • 点击应用以保存并关闭编辑器。

警告

对象名称是区分大小写的，其他元素也是如此，GDevelop中是如此。在命名时要保持一致，以避免易错的错误，例如当您意味着“挡板”时却输入“Paddle”。对于命名约定如“Run”或“run”等的动画名同样如此 - 无论使用何种命名约定，只要保持一致即可。

将挡板对象添加到场景中 ​

为了在游戏中显示挡板，您需要将其添加到场景中。因为只需要一个挡板，所以它被称为一个_唯一_实例。其他对象像砖块将在您的场景中有多个实例。

  • 要将挡板添加到场景中，从对象面板中将其拖动到场景中。将其放置在靠近底部的位置。

创建屏障对象

接下来，您将添加一个视觉屏障，看起来像是阻止球从屏幕上弹跳的物体。屏障将使用平铺精灵制作。_平铺精灵_是可重复、可缩放的对象，可用于创建平台、墙壁和其他非生物对象。

要创建屏障对象：

  • 在右侧的对象面板上，点击**+**添加一个对象。
  • 点击平铺精灵。
  • 在对象编辑器对话框中，点击**+**添加一个动画。
  • 点击空白缩略图中的**+**添加一个图像。
  • 选择项目文件夹中的“barrier.jpg”，然后点击打开。
  • 在对象名称字段中，将您的对象重命名为“Barrier”。
  • 点击应用保存并关闭对象编辑器。

将屏障对象添加到场景中 ​

您需要向场景中添加三个屏障对象实例 - 左、右和顶部屏障。默认游戏窗口大小为800 x 600像素，这是你场景视图中的灰色轮廓。稍微在这些边界内创建屏障。

提示

通过在单击对象实例时打开的属性面板来精确移动和调整对象的大小。* Drag and drop the first instance of the barrier onto the scene.

  • Click the barrier. Resize it to 15 x 585 with the Properties panel or by dragging the handle on the bottom right. Place it on the left side of the screen at (15, 15).
  • Create a matching barrier on the right side and position it at (770,15).
  • Add a final barrier at the top to connect the two. Resize it to 770 x 15, and position it at (15, 15).

Set the paddle movement ​

The player will control the paddle using the left and right arrows on the keyboard. You can create these controls using events (actions that occur if conditions are true).

Create an event where if the player presses the left arrow on the keyboard, the paddle moves left:

  • Click the NewScene (Events) tab to open the Events Editor.

  • Click Add a new empty event .

  • Click Add condition.

  • Click Keyboard > Key pressed.

  • In the Key field, type Left and click OK. This condition is true if the player presses the left arrow on the keyboard.

Now you need to add a corresponding action to the condition. The paddle should move left on a horizontal axis if the condition is met.

Tip

To move objects with an applied force, you will need to specify an angle. The picture below illustrates how GDevelop understands the angle of rotation.

On a horizontal axis, left is 180°, right is 0°.

  • Click Add action.

  • Click Common actions for all objects > Movement > Add a force (angle).

  • Select Paddle in the Object field.

  • In the Angle field, type 180.

  • In the Speed (in pixels per second) field, type 300.

  • Click Instant.

  • Click OK.

Tip

It is a good time to save your work. Get in the habit of frequent saving. You can hit Ctrl+S to save your game, or use your mouse and go to File>Save.

Use the preview feature to verify your work. Click the Launch a preview of the scene button.

Press your left arrow to move the paddle. You will find the paddle doesn't stop when it reaches the barrier - it just continues off screen. You can fix this by closing the preview window and adding another condition to the paddle movement.

To add another condition to stop the paddle:

  • In the same event, below your first condition, click Add condition.

  • Click Common conditions for all objects > Position > Compare X position of an object.

  • In the Object field, select Paddle.

  • In the Sign of the test field, select > (greater than).

  • In the X position field, type the X coordinate of the right side of the left barrier. In this example, it is 30.

  • Click OK.

Preview your game again. The paddle should stop upon hitting the left barrier.

You now need to create the same event for the right side. Try it yourself before reading the process below.

  • Click Add a new empty event.
  • Click Add condition.
  • Click Keyboard > Key pressed.
  • In the Key field, type Right.
  • Click OK.
  • Click Add action.
  • Click Common actions for all objects > Movement > Add a force (angle).
  • In the Object field, select Paddle.
  • In the Angle field, type 0.
  • In the Speed (in pixels per second) field, type 300.
  • Click OK.
  • Click Add condition.
  • Click Common conditions for all objects > Position > Compare X position of an object.
  • In the Object field, select Paddle.
  • In the Sign of the test field, select < (less than).
  • In the X position field, type the X coordinate of the left side of the right barrier. In this example, it is 770.
  • Click OK.

Preview your game to make sure it works.

Tip

Do you find your paddle is still passing the barrier on the right? That is because GDevelop uses the upper-leftmost point of an object when comparing X positions. An easy way to solve this problem is to subtract the width of the paddle from your barrier X coordinate. In our example, the paddle is 58 px wide, so the new X position to stop the paddle on the right side should be < 712 (770 - 58). Change it now.

Add comments to the Events Editor ​

As you work in your Events Editor, it is a good practice to add comments for each set of events. You will be able to quickly find and understand your events as your game grows if you catalogue them as you work.

  • To add a comment line, click Add a comment.

  • Enter your comment text and use the blue bar on the left of the comment to drag and drop your comment where you want it.

Move the ball - Part 1 ​

Next step will be to add the ball object to the scene. As you did with the paddle, add the ball object as a sprite using ball-1.png as the animation. Drag and drop the ball right above the paddle in the scene.

When you think about the game, the ball will need to do four things:

  • Move when the player starts the game
  • Bounce when it collides with the paddle or with the barrier
  • Break bricks and bounce when it collides with bricks
  • End the game when it falls off-screen below the paddle

让球运动起来 ​

当玩家按下空格键开始移动球时：

  • 从NewScene (Events)选项卡中，点击添加一个新的空事件。
  • 点击添加条件。
  • 点击Keyboard > Key pressed。
  • 在Key字段中，输入Space并点击确定。

  • 点击添加动作。
  • 点击Common actions for all objects > Movement > Add a force (angle)。
  • 在Object字段中，选择Ball。
  • 在Angle字段中，输入**-45+RandomInRange(-5, 5)**。这将以-45度角发射球，再加上5度的随机变化以增加玩家的挑战。
  • 在Speed (in pixels per second)字段中，输入300。根据需要调整此值；数字越大，对象移动得越快。
  • 点击Permanent，因为你希望球在整个游戏过程中持续移动。
  • 点击确定。

现在是添加评论、保存并预览游戏的好时机。当按下空格键时，球应该会移动。

使球与挡板和球拍弹跳 ​

为了获得良好的游戏体验，当球与障碍、球拍或砖块碰撞时，球需要进行逼真的反弹。GDevelop有一个可以应用于任何对象以模拟真实反弹的简单反弹行为。

添加反弹行为 ​

要向球对象添加反弹行为：

  • 从NewScene选项卡中，点击**“Ball”对象旁边的⋮，然后点击编辑对象**。
  • 点击Behaviors选项卡。
  • 点击**+**以向对象添加新的行为。
  • 反弹行为不是已安装的行为，因此您需要找到它。点击搜索新行为选项卡。
  • 从底部的列表中，选择Bounce，然后点击Install in project。
  • 现在，您可以将新行为添加到对象中。向下滚动，选择Bounce，然后点击应用。

您的球现在已准备好反弹！

添加碰撞事件 ​

接下来，添加事件使球与障碍和球拍发生碰撞时反弹。现在是使用的一种条件的时候：_碰撞_条件。

要在球和障碍之间创建碰撞条件：

  • 从NewScene (Events)选项卡中，点击添加一个新的空事件。
  • 点击添加条件。
  • 点击Common conditions for all objects > Collision > Collision。
  • 在第一个Object字段中，选择Ball。在第二个Object字段中，选择Barrier。
  • 点击确定。

要添加球碰撞障碍时导致球反弹的动作：

  • 点击添加动作。
  • 点击Bounce > Bounce > Bounce off another object。
  • 在Object字段中，选择Ball。
  • 在Objects to bounce on字段中，选择Barrier。
  • 点击确定。

您现在需要做同样的事情，使球在与球拍碰撞时反弹。创建一个新事件，设置碰撞条件，然后添加使球反弹的动作。

提示

您可以右键点击并复制先前的条件或动作，然后右键点击粘贴到新事件中。这是一种节省时间和精力的简单方式，特别是在处理类似事件时！

保存并预览您的游戏。游戏开始变得有趣了...

添加砖块 ​

你的球必须打破一些东西！下一步是向场景中添加砖块。要了解有关外部布局的信息，本教程将在不同的布局中显示砖块。

要添加砖块：

  • 点击NewScene选项卡以打开场景编辑器。
  • 在Object面板中，点击**+**来添加一个新对象。
  • 将此对象命名为Brick。使用来自项目文件夹的brick-green.png、brick-red.png和brick-yellow.png文件分别给它命名三个单独的动画。相应地命名动画。
  • 点击应用。

创建外部布局 ​

您可以使用外部布局创建一些不同级别，其中包含不同的砖块组合。_外部布局_是在场景之外创建的一个对象层，但可以在任何时候动态插入。

要创建外部布局：

  • 点击左上角的Project manager按钮。
  • 点External layouts然后点击**+**以添加一个外部布局。
  • 点击你的新布局旁边的**⋮，然后将其重命名为Layout1**。

  • 点击Layout1。系统会要求您选择要包含它的场景。选择NewScene - 这是发生所有游戏活动的场景。将打开一个看起来像现有NewScene的新选项卡。
  • 在其中添加您选择的任何配置的砖块。在这部分中玩得开心 - 要有创意！

提示

要加快速度，点击或选择对象，然后按住Ctrl键，点击并拖动以在屏幕上复制实例。按住Ctrl+Shift使新实例保持在同一X或Y轴。

  • 创建两个或更多新布局，并将它们命名为Layout1，Layout2等。

警告

遵循布局1，布局2等命名约定。它将与一个变量关联。

让随机砖块布局出现 ​

要在每个场景开始时显示随机布局，请首先添加您的条件：

  • 点击**NewScene (Events)**选项卡以返回到您的事件编辑器。
  • 点击添加一个新的空事件按钮。
  • 点击添加条件。
  • 点击场景 > 在场景开头时。

而不是将动作附加到该条件，您现在将创建在场景开始时发生的子事件。

首先，创建一个名为Random_layout的新场景变量：

  • 点击您刚刚创建的事件中的空白空间，然后点击向选定的事件添加子事件按钮。
  • 在新的子事件中，点击添加动作。
  • 点击变量 > 场景变量的值。
  • 在变量字段中，输入Random_layout以创建一个新的场景变量。
  • 在修改符号字段中，选择** =（设置为）**。
  • 在值字段中，输入Random(2)+1。
  • 点击确定。

现在，您将把变量数字与外部布局名称Layout串联起来。此名称将确定屏幕上显示哪个布局。（这就是在之前命名它们时保持一致性的重要性所在！）

要在场景开始时添加随机砖块布局：

  • 为场景开始的另一个新子事件添加，然后单击添加动作。
  • 点击外部布局 > 从外部布局创建对象。
  • 在外部布局的名称字段中输入**"Layout" + ToString(Variable(Random_layout))**。这将随机添加一个外部布局到场景中。
  • 点击确定。

您可以通过在每场景开始时选择随机砖块颜色来增加趣味性。

要选择随机砖块颜色：

  • 为场景开始的另一个新子事件添加，然后单击添加动作。

  • 点击变量 > 场景变量的值。

  • 在变量字段中，输入Brick_colour。

  • 在修改符号字段中，选择** =（设置为）**。

  • 在值字段中，输入Random(2)。

  • 点击确定。

  • 为场景开始的最后一个新子事件添加，然后单击添加动作。

  • 点击Sprite > 动画和图像 > 更改动画。

  • 在对象字段中，选择Brick。

  • 在修改符号字段中，选择** =（设置为）**。

  • 在值字段中，输入Variable(Brick_colour)。

  • 点击确定。

保存并预览您的游戏。玩家现在在开始游戏时将看到随机选择的带有随机颜色的外部布局的砖块。

移动球-第2部分 ​

将球反弹到砖块上 ​

现在您在场景中有了砖块，当球击中它们时，希望球从砖块上反弹。与球拍和障碍物一样，您需要：

  • 创建一个新事件。
  • 在球和砖块之间添加碰撞条件。
  • 将球从砖块上反弹开。

提示

不要忘记可以从现有事件中剪切和粘贴条件和动作！

销毁砖块 ​

当球从砖块上反弹时，应该将它们销毁。在GDevelop中销毁对象很容易。

  • 在相同的碰撞事件中，单击添加动作。
  • 点击所有对象的共同动作 > 对象 > 删除对象。
  • 在对象字段中，选择Brick。
  • 点击确定。

保存并预览您的游戏。您应该能够让球从球拍上反弹并销毁砖块。现在是检查您的速度的好时机 - 您是否希望球或球拍更快或更慢？如果是这样，请尝试调整速度值，直到您对游戏体验感到满意。

赢了或输了游戏 ​

如果玩家清除所有砖块，则游戏应该祝贺玩家并提供再次玩的选项。如果玩家未能用球拍接住球，则应该告诉玩家他们输了，并提供再次玩的选项。

创建祝贺消息 ​

您希望祝贺消息在游戏结束时隐藏，只有在所有砖块消失时才显示。

要向场景添加文本对象：

  • 点击NewScene选项卡。
  • 在对象面板中，单击**+添加新对象，并选择文本**。
  • 在对象名称字段中，键入Congratulations。
  • 在文本字段中，输入祝贺的消息（例如祝贺！您清除了所有的砖块！）。还包括一行告诉玩家“按Enter键重新开始游戏”。
  • 点击应用。

将您的Congratulations对象拖放到场景中央。

要在场景开始时隐藏您的文本对象：

  • 点击NewScene (Events)。
  • 转到包含条件“在场景开头时”的现有事件，并点击添加动作。
  • 点击所有对象的共同动作 > 可见性 > 隐藏。
  • 在对象字段中，选择Congratulations。
  • 点击确定。

要在所有砖块被销毁时使您的文本对象出现：

  • 点击添加新的空事件按钮。
  • 点击添加条件。
  • 点击所有对象的常见条件 > 对象 > 对象数量。
  • 在对象字段中，选择砖块。
  • 在测试的符号字段中，选择** =（等于）**。
  • 在值字段中，输入0。
  • 点击确定。

如果没有砖块了，应该删除球并使祝贺对象可见。这两个动作对所有对象都是通用动作。现在添加它们。

您还希望为玩家提供开始新游戏的选项：

  • 为刚刚创建的砖块对象数 =0的事件创建一个新的子事件！。
  • 点击添加条件。
  • 点击键盘 > 按键被按下。
  • 在键字段中，键入Enter（请记住，祝贺消息告诉玩家按Enter重新开始）。
  • 点击确定。

添加动作以返回到第一个场景：

  • 点击添加动作。
  • 点击场景 > 更改场景。
  • 在新场景的名称字段中，输入**"NewScene"**。不要忘记引号！
  • 点击确定。

现在，当玩家清除所有砖块时，他们将收到祝贺消息，并有重新开始的选项！

创建游戏结束消息 ​

如果玩家错过球，游戏结束。就像玩家赢得比赛一样，这将涉及在适当的时机使消息可见，并给玩家一个再次玩的选项。

首先，在场景中添加一个文字对象，除非玩家错过球，否则将保持隐藏。

按照创建屏幕上祝贺对象的相同步骤，但将消息更改为“游戏结束”。包括关于重新开始的部分。将此文本对象命名为GameOver。

将您的GameOver对象拖放到场景中间。如果它在祝贺对象的上方，也没问题。

接下来，通过事件编辑器隐藏游戏结束对象，在场景开始时。

按照为祝贺对象隐藏游戏结束对象的相同步骤。将其添加为事件的第二个动作。

下一步是，如果玩家错过球，使消息重新出现。为此，您需要一个条件，检查球的Y位置是否在游戏窗口之外。

添加条件以检查玩家是否错过了球：

  • 点击添加新的空事件按钮。
  • 点击添加条件。
  • 点击所有对象的常见条件 > 位置 > 比较对象的Y位置。
  • 在对象字段中，选择球。
  • 在测试的符号字段中，选择**

（大于）**。

  • 在值字段中，输入600（600是默认游戏窗口高度，这意味着球在屏幕外）。
  • 点击确定。

添加相应动作使GameOver对象可见。您还应添加一个子事件，如果玩家按Enter键，则会删除球并重新启动游戏。现在添加它们。

保存并预览您的游戏。

就是这样！您已经完成了您的第一个基本打砖块游戏。 ​

既然您已经掌握了基础知识，试着改变速度、砖块布局等，使游戏更具挑战性。您可能想添加一个得分系统，每销毁一个砖块得分会增加，或者使球在每个场景中速度增加。因为弹跳行为根据施加的角度和速度反弹，您也可以尝试改变挡板的形状，添加更具挑战性的屏障等。

在场景开始时添加说明并在游戏开始时消失也是一个很好的练习（参见本教程中的第一幅图像）。

更多教程即将推出，但在此期间，请尝试实验和玩！