Group Details Private

administrators

  • 多摄像头展示:设置摄像头显示区域

    介绍

    通常,我们只在 3D 场景中使用一台摄像头,并在舞台窗口中显示该摄像头的输出。但是,有时我们可能需要显示 2 个或更多摄像头的内容。例如,我们可以使用“画中画”布局在小窗口中显示第二个摄像头的内容,如下所示:

    5df74b70-6a0a-48ef-90a4-117faa905c58-image.png

     
    为了达到这个效果,我们需要做两件事情:
    1.在场景中添加多个摄像头
    2. 设置舞台窗口内每个摄像机的显示区域。

     
     

    添加多个摄像头

    每个场景都有一个主要的摄像机,但你也可以添加新摄像机作为辅助。例如,在下面这个程序中,我们添加了 2 个摄像头,分别命名为“1”和“2”。相机 1 距离较近。当添加摄像头 2 时,它被设置为非主要摄像头,因此它不会取代摄像头 1的输出。

    b56230bd-4eb0-4c19-b3e5-490f45c833db-image.png

     
    此外,由于我们尚未定义显示区域,舞台将仅显示摄像头 1 的输出:

    76fdf0a2-3f50-4c47-ba7a-13529a03cea2-image.png

     
     

    给每个摄像头设置显示区域

    要在舞台窗口中显示多个摄像头的输出,我们需要在舞台窗口中指定一个名为“显示区域”的矩形区域,使用以下积木:

    4a89e157-dddb-4723-ac65-63ee6612c291-image.png

     

    • 摄像头名称:此输入控制将在当前区域显示哪个摄像头的输出。添加摄像头时,你需要为摄像头指定一个名称,然后在此积木中使用该名称。

    • 底部 % 和 左边 %:这2个参数控制矩形区域左下角的位置。 “底部%”是相对于舞台窗口的高度。例如,如果舞台窗口的高度为 360 个单位,而“底部%”为 50%,则左下角与舞台窗口底部边缘之间的距离将为 180。同样,“左边 %”是相对于舞台窗口的宽度。例如,如果舞台窗口的宽度为 480 个单位,并且“left %" 为 25%,则左下角距离舞台窗口的左边缘 120。

    • 宽度 %和高度 %:这2个参数控制显示区域的宽度和高度,相对于舞台窗口的宽度和高度。例如,如果“宽度 %”为 50%,舞台窗口的宽度为 480,则显示区域的宽度为 240。

    • 边框宽度和颜色:这 2 个参数控制显示区域周围边框的粗细和颜色。这个边框会让我们更容易找到显示区域的边界。

     
     

    示例 1 - 画中画

    在此示例中,我们在整个舞台中显示摄像头 1 的输出,然后在底部中心的小窗口中显示摄像头 2 的输出。覆盖窗口相对于舞台窗口的宽度和高度为 40%。

    670148b0-e055-4319-8163-a37917e2af62-image.png

     
    结果如下:

    789d4484-46c8-4af2-a406-24c40c2e492e-image.png

     
     

    示例 2 - 左右分屏

    在这个例子中,我们将舞台窗口分成左右两个显示区域。每个区域的宽度是舞台窗口宽度的 50%。

    cf9cfed0-36b8-4a0d-9007-87615522d524-image.png

     
    结果如下:
    82e75357-7ebe-498b-abdb-1c5d130ec38a-image.png

    posted in 三维积木
  • Set Camera Dislay Region for Multi-Camera View

    Introduction

    Usually, we only use one camera in a 3D scene, and we display that camera’s output in the stage window. However, sometimes we may need to show the content of 2 or more cameras. For example, we may use a “Picture-in-Picture” layout to show the content of a second camera in a small overlay window like this:

    5df74b70-6a0a-48ef-90a4-117faa905c58-image.png

     
    To achieve this result, we need to carry out 2 steps:

    1. Use more than one camera in the scene
    2. Set the display region for each camera within the stage window.

     
     

    Add Multiple Cameras

    Each scene has one active camera, but you can add new cameras that are not active. For example, in this program below, we add 2 cameras named “1” and “2”. Camera 1 is at a shorter distance. When camera 2 is added, it is set to be not active, so it will not replace camera 1.

    2667fcd7-e7ea-46d0-9209-079e9d1ad34b-image.png

     
    Also, since no display region has been defined yet, the stage will only show the output of camera 1:

    76fdf0a2-3f50-4c47-ba7a-13529a03cea2-image.png

     

     
     

    Set the Display Region for Each Camera

    To display the output of more than one camera in the stage window, we need to specify a rectangle area in the stage window called “display region”, using the following block:

    dcf79e06-70b5-4733-b22b-3ea0ecbf3b90-image.png

     

    • Bottom % and Left %: These 2 parameters control the position of the bottom left corner of the rectangle region. The “bottom %” is relative to the stage window’s height. For example, if the stage window is 360 units tall, and the “bottom %” is 50%, then the distance between the bottom left corner and the bottom edge of the stage window will be 180. Similarly, the “left %” is relative to the stage window’s width. For example, if the stage window is 480 units wide, and “left % is 25%”, then the bottom left corner is 120 away from the left edge of the stage window.

    • Width % and Height %: These 2 parameters control the width and height of the display region relative to the width and height of the stage window. For example, if “width %” is 50%, and the stage window’s width is 480, then the display region’s width is 240.

    • Border Width and Color: These 2 parameters control the thickness and color of the border around the display region. This border will make it easier for us to find the boundary of the display region.

    • Camera Name: Lastly, this input controls which camera’s output will be displayed in this region. You would need to assign a name to the camera when you add the camera, then use that name in this block.

     
     

    Example 1 - Picture in Picture

    In this example, we display camera 1’s output in the entire stage, then display camera 2’s output in a small overlay window at the bottom center. The overlay window is 40% in width and height relative to the stage window.

    e5cc0c6f-a00f-4cb1-8ba3-2217a9dea4d9-image.png

     
    And here is the result:

    789d4484-46c8-4af2-a406-24c40c2e492e-image.png

     
     

    Example 2 - Left and Right

    In this example, we split the stage window into 2 display regions left and right. Each region is 50% the width of the stage window, with the same height as the stage window.

    9131cffa-2e3d-4792-96e3-212bdecc9d8a-image.png

     
    Here is the result:
    82e75357-7ebe-498b-abdb-1c5d130ec38a-image.png

    posted in 3D Blocks
  • 转动物体指向某个目标点

    介绍

    将一个新的物体(例如飞机)被添加到 3D 场景时,其默认面向方向是正 Y 方向。你可以通过以下积木指定目标点,让物体指向那个目标点的方向:

    cd05d06e-deef-4e09-9d3b-1f88e2ba33f9-image.png

     

    这个积木有 5 个输入参数:

    • X/Y/Z 位置:这是目标点的位置。
    • 用时:这是物体转到新方向所需的时间。如果为0,则物体会立即转动过去;否则,它将在这段时间内逐渐向新方向旋转。
    • 是否等待:当“用时”不为0秒时,这个参数控制该积木是否阻塞下一个积木的执行。如果为“需等待的”,那么程序将不会继续,直到物体完成旋转;否则程序将继续执行下一个积木,同时保持物体继续进行旋转。

     
     

    示例

    在这个示例程序中,我们先添加一个飞机模型,然后通过一段时长为 2 秒的动画使其指向目标点 x = 100,y = 100,z = 20。

    不.gif

    posted in 三维积木
  • Point Object Towards a Position

    Introduction

    When you add a new object (such as an airplane) to a 3D scene, its default facing direction is the positive Y direction. You can make it point in a different direction by specifying a target point with the following block:

    b09ff26a-6136-4610-a933-9be357ddc5ae-image.png

     
    This block takes 5 input parameters:

    • X/Y/Z Positions: These are the positions of the target point.
    • Period: This is how long it will take the object to rotate in that new direction. If it is 0, then the object will turn immediately; otherwise, it will rotate gradually toward the new direction through animation.
    • Blocking: When the “Period” is not 0 seconds, this parameter controls whether this block will block execution of the current block stack. If “Blocking”, then the program will not continue until the object finishes the rotation; If “Non-Blocking”, then the program will continue to the next block while keeping the object running its rotation animation.

     
     

    Example

    In this example program, we add an airplane model first, then make it point to the target point at x = 100, y = 100, z = 20, through an animation of 2 seconds long.

    d3.gif

    posted in 3D Blocks
  • Use Viewport for Larger Maps

    Description

    When you create a new project on the CreatiCode platform, the default size of the stage is 480 by 360. However, if you want to make the sprite navigates a larger map, the stage size is often too small to show all parts of the map. You can solve that problem using a “viewport”.

    Using a viewport is like watching a soccer game through a TV camera. Though the soccer stadium is very large, the camera only captures and displays a small portion of it. As the camera turns, we see different parts of the stadium.

     
     

    Canvas Size and Viewport Size

    On the CreatiCode platform, you can draw a much larger map (the canvas), then only show a small portion of it through a window (the viewport).

    In the code editor, under the “Edit” menu, you can find 4 inputs for you to specify the canvas size and viewport size. For example, we can set the canvas to 1000 by 1000, and the viewport to 500 by 500:

    viewport.gif

     

    After making this change, switch to the costume editor, you will notice some changes:

     

    • The canvas size is much bigger now, which is a square that is 1000 by 1000. This allows you to add more objects/sprites to the world map of your game.
    • There is a smaller square made of dotted lines, which indicates the size and position of the viewport. It is 500 by 500, so it only shows the center portion of the canvas. You can change the viewport’s position using blocks, but not its size.
    • The stage window is also 500 by 500, so it looks like a square instead of a rectangle. The stage window will always have the same size as the viewport so that it will display the part of the canvas currently enclosed by the viewport.

     
     

    Cover the Entire Canvas

    If you have made the canvas larger, you need to make sure the entire canvas is covered. For example, you can select the stage, then select a backdrop design. You can switch to the “Vector” mode and scale up the backdrop image to cover the entire canvas:

    viewport.gif

     
     

    Block to Lock the Viewport on a Sprite

    Since the viewport is smaller than the map (the canvas), you need to move the viewport around to view different parts of the map. The easiest way to do so is to lock a sprite at the center of the viewport using this block:

    5c4c2edc-5106-4f37-94cb-209679dac177-image.png

     
    After locking the viewport to the selected sprite, as you move the sprite, the viewport will also move at the same time. It will appear that the sprite is not changing position, and the backdrop is moving. When the viewport is already at the edge of the canvas, it will no longer move, and you will see the sprite moving relatively to the viewport.

    viewport.gif

     
     

    Block to Move the Viewport Directly

    When the viewport is not locked at any sprite, you can change its position on the map directly using this block:

    b2b0fb02-fb8a-4bfb-bc1b-685331b80650-image.png

     
    The x and y inputs are the position of the center of the viewport. So if you set x and y to 0, the viewport’s center will be at the same position as the center of the map.

     
     

    Find the Current Position of the Viewport

    You can use the following 2 blocks to get the x and y positions of the center point of the viewport on the map:

    f377549f-2d2f-43a2-994b-3faaa46fb24e-image.png

     
    For example, when the viewport is at the center of the map, both blocks will report 0. However, after the viewport moves, these 2 blocks will also report different values.

     
     

    Attach to Viewport

    Suppose you have locked the viewport to a sprite A, and you need to always show another sprite B. That means when the sprite A moves, the viewport will move, and sprite B needs to move the same way as well. To do this, you can use the following 2 blocks to attach a sprite to the viewport, or detach it from the viewport:

    dd32199d-40ca-46b2-b1db-27c3cebef416-image.png

     

    When attaching to the viewport, you can specify the x and y positions of the sprite relative to the center of the viewport.

    For example, a balloon is attached to the viewport at x of 0 and y of 100. It will move together with the balloon, and will always appear at the position of x = 0 and y = 100:

    viewport.gif

    posted in 2D Blocks
  • 游戏排行榜

    介绍

    在很多单人游戏中,游戏目标是获得最高的分数(比如收集最多的宝石)或者在最短的时间内完成任务(比如跳过所有障碍物)。

    对于此类游戏,你可以显示一个排名榜,也就是玩儿的最棒的用户的列表。这将使游戏更有趣。

     
     

    记录玩家分数

    要存储玩家的分数,你可以使用“游戏”扩展中的这个积木:

    ac7203f2-d603-4188-adff-7ea440441c2a-image.png

     
    它只需要一个输入,即当前玩家的“分数”。这应该是一个数字,因为它将用来给玩家排名。例如,它可以是玩家完成挑战所用的秒数,或者玩家在游戏中获得的积分或硬币总数。

    这个数值将存储在创益编程的服务器上,所以即使该用户关闭浏览器页面或注销,这个分数也还是会被保留。一个用户可以多次尝试这个游戏,而每次的分数都会被记录。

     
     

    显示排行榜

    要显示所有玩家的排行榜,你可以使用下面这个积木:

    51e6a5c5-9fd6-414e-94ab-f193dafcf4dc-image.png

     
    这个积木有 4 个输入参数:

    • 排名方式:您可以指定显示那些分数最低(最小数字)或者最高的玩家。举个例子,如果游戏的目标是在最短的时间内完成某个任务,那么你应该把玩家按照分数从低到高进行排名。
    • 行数:你可以决定在排行榜中列出多少个玩家。如果一个游戏有很多人玩儿,那最好显示一个更长的列表,这将鼓励更多的玩家尝试“冲榜”。
    • 标题和背景颜色:你可以自定义排行榜的背景颜色。请注意,文字始终为白色,而当前用户的信息始终为绿色。以下是一个示例:

     
     

    隐藏排行榜

    要隐藏排行榜,用户可以单击排行榜窗口右上角的“x”按钮。但是,你也可以使用以下积木自动关闭排行榜:

    9bdf9036-3b38-4a5a-9a4f-fe452cbd62d2-image.png

    posted in 二维积木
  • Leaderboard for Games

    Description

    In many single-player games, the goal is to achieve a high score (such as collecting the most gems) or complete a task in the shortest time (such as jumping through some obstacles).

    For such games, you can show a leaderboard with the top-ranking players and their performances. That’ll make the game more interesting.

     
     

    Record a Player’s Score

    To store the score of a player, you can use the following block in the “Game” extension:

    cc706045-bcc9-44e4-9439-55c49924a2e6-image.png

     
    It takes one input, which is the “score” of the current player. This should be a number value since it will be used to rank between different players. For example, it can be the number of seconds the player used to complete the challenge, or the total number of points or coins the player has gained in the game.

    This value will be stored in the CreatiCode server, so it will be available even if that user closes the browser page or logs off. A user can play the game multiple times, and all the scores will be stored.

     
     

    Show the Leaderboard

    To show the leaderboard among all users who have recorded their scores, you can use the following block:

    6824b8d4-ca22-4c28-9143-62a29324ace5-image.png

     
    This block takes 4 input parameters:

    • Ranking Method: you can specify to show those players with the lowest scores (smallest numbers) or the highest. For example, if the game’s goal is to do something in the shortest amount of time, then you should show the players with the “lowest” scores.
    • Number of Rows: You can decide how many players to list in the leaderboard. If a game has a lot of players, then it makes sense to show a longer list, which will encourage more players to try to compete in the game.
    • Header and Background Color: you can customize the colors of the leaderboard. Note that the text is always in white, and the current user is always in green. Below is an example:

     
     

    Hide the Leaderboard

    To hide the leaderboard, the user can click the “x” button on the top right corner of the leaderboard. However, you can also close the leaderboard use the following block:

    cb82b722-dc20-4674-b808-7533a72b8cb6-image.png

    posted in 2D Blocks
  • 第一人称视角的摄像头

     

    预备知识

     

    介绍

    许多 3D 游戏让玩家采用“第一人称视角”,就好像自己在虚拟世界中漫游一样。玩家可以使用鼠标控制观看世界的方向和角度。你可以在创益编程平台中轻松创建这样的体验。

     
     

    使用追踪摄像头的新方法

    要创建“第一人称视角“,你其实只需要使用追踪摄像头,但是采用一个新的用法。

    回顾一下,在使用追踪摄像头的时候,我们首先需要有一个目标物体(如化身或者赛车),然后添加追踪摄像头来跟随该目标。这是一个常见的例子:

    d916178a-1483-4f28-8f87-19b94a1ceaaf-image.png

     
    当运行这个程序时,玩家可以用鼠标转动摄像头从不同的角度观看这个化身,所以玩家感觉自己不是那个化身,而是跟在化身后面的傍观者。

     
    要想从化身自己的视角看这个世界, 最直接的方法就是把摄像头移动到化身眼睛的地方。为此,我们需要将摄像头和化身之间的距离更改为 0 或者一个很小的数值。此外,如果化身的身高是 100 个单位,我们可以假设它的眼睛距离地面大约 86 个单位,因此我们将“z 位移”设置为 86,让它保持在视线水平。

    6e04d723-65a2-41cf-b7a3-ed0f484cd150-image.png

     
    现在,如果我们再运行这段程序,我们的摄像头就出现在化身的头里面了,所以我们正好看到化身的眼睛的背面:

     

    当然,这时候化身的头挡住我们的摄像头,所以我们看不到其他任何东西。要解决这个问题,我们只需要把化身隐藏起来:

    c239f768-c9c5-4a5a-b3c3-45896d1e2f8c-image.png

     

    现在我们得到了一个完美的第一人称视角。当我们用鼠标转动摄像头时,我们不再看到化身,而是看它周围的场景。

     
     

    使用转换器,而不是物体

    除了化身或汽车之类的物体,你还可以选择使用“转换器”物体作为摄像头的追踪目标。由于转换器是不可见的,你不再需要隐藏它,而且它的加载速度比化身快得多。但是,你需要先将转换器移动到合适的高度。

    3952da02-027e-484b-ab95-372d33c31ee0-image.png

     
    你将获得与前一种方法相同的第一人称视角的效果。

     
     

    将鼠标指针锁定

    在上面的程序中,要转动相机,我们必须按下鼠标按钮并在舞台上拖动指针。但是,很多时候玩家需要用鼠标按钮做别的交互动作,如选择或者射击,所以我们需要一个别的方式来控制摄像头的方向。

    因此,我们可以“锁定鼠标指针”,让摄像头随着鼠标指针转动,而且玩家无需按下任何鼠标按钮。

    你可以使用以下积木来锁定或解锁鼠标指针。选择“是”来锁定,选择“否”来解锁。

    ae4f28fe-e46d-42b3-8662-caae68036db7-image.png

     
    例如,让我们将它添加到上面的程序中:

    66ac8274-1b8a-4aa7-99ad-20f3a06b7085-image.png

     
    现在,如果你单击绿色旗帜按钮运行程序,鼠标将被锁定:指针将被隐藏,摄像头将随着你移动鼠标而转动。请注意,你可以随时按键盘左上角的“ESC”键来解锁鼠标指针。之后,如果你单击舞台上的任意位置,鼠标将再次被锁定。

    mouse.gif

     
     

    使用“开始”按钮来触发鼠标指针锁定

    通常情况下,使用按钮控件来触发鼠标指针锁定对玩家更加友好。玩家可以选择何时进入锁定模式,而且当进入锁定模式时,鼠标指针的起始位置就是玩家点击按钮的位置(一般是舞台中央)。

    这是一个示例程序。单击“开始”按钮时,我们首先隐藏该按钮,然后锁定指针:

    0a785a0f-c5c6-4731-ba03-ab1ed69e5b75-image.png

     
    这样的话,鼠标指针只有在玩家点击开始后才会被锁定:

    mouse.gif

    posted in 三维积木
  • 三维 - 跳板游戏(难度:5)

    介绍

    在这个小教程里,你会做一个有趣的跳板游戏:

    v4a.gif

     

    玩家需要通过奔跑和跳跃达到终点,而且最快到达的玩家会被显示在一个排行榜上。

     
     

    第 1 步 - 草地场景

    作为开始,请你在创益编程平台上创建一个新的项目,去掉用不到的小狗角色,然后把另外一个空白的角色命名为"玩家".

    在这个玩家角色里,添加下面这些积木。它们会创建一个草地三维场景,同时显示三维坐标系。

    46cb497c-249d-4bd7-a269-af03651d2e38-image.png

     
    程序的运行结果如下:

     
     

    第 2 步 - 添加 3 个新角色

    这个“玩家”角色将包含所有用来创建和控制玩家化身的程序。这个游戏还有另外3个组成部分:

    • 平台:所有的跳板
    • 目标:目标区域
    • 控制:游戏控制逻辑

    因此,请添加 3 个空白的角色,并将它们命名为“平台”、“目标”和“控制”。

    5da4765a-1cd7-49ba-b383-8cdf672a6952-image.png

     
     

    第 3 步 - 广播 3 条消息

    在添加玩家化身之前,让我们先在其他 3 个角色中把其它游戏元素搭建起来。我们可以先在“玩家”这个角色里发送 3 条消息,并等待它们全部处理完。

    6cfa3184-9d51-4413-b299-491753fceb03-image.png

     
     

    第 4 步 - 添加第一个跳板

    现在让我们切换到平台角色。当它受到了“添加平台”的消息时,它会添加第一块跳板。它将是一个 400 x 400 的方盒子,厚度为 10。你可以选择任何纹理,例如“木材07”。

    82c53778-81c2-4c4d-ac46-c23c11bf361e-image.png

     
    它应该是这样的:

    g4.gif

     
     

    第 5 步 - “Z 起点”变量

    所有的跳板都会漂浮在空中,这样如果玩家化身从跳板上掉下来就会输掉比赛。但是,此时,我们还不确定这些跳板应该在多高的位置。因此,我们可以使用一个名为“Z 起点”的新变量,并使用这个变量来设置我们板的 z 位置。我们暂时将此变量设置为 100,这样便于我们测试程序,而且以后我们可以很容易把这个变量的值变大。

    10a3703b-f864-4a15-a82b-49de32e706c5-image.png

     
    现在这个跳板会浮动在 100 的 Z位置:

    g5.gif

     
     

    第 6 步 - 复​​制到第二块跳板

    在添加第二块跳板的时候,虽然我们可以添加一个新的盒子,更好的方法是复制第一块跳板。这样不仅速度会更快,还能节省一些存储空间。

    复制第二块跳板后,我们可以使用“更新大小”积木来改变它的大小和形状。例如,我们可以让它在 X 方向上宽 200,在 Y 方向上长 800。

    af07d070-d613-4b28-8e18-e09b0f95637a-image.png

     
    现在新跳板将与第一块跳板重叠很大一部分:

    g6.gif

     
     

    第 7 步 - 移动第二块跳板

    现在让我们决定将第二块跳板移动到哪里。如果你不确定它的新坐标是什么,可以先使用“位置工具”拖动它到理想的位置。在下面的示例中,我们将第二个跳板沿着Y轴向前拖动,然后添加“移动到”积木,其中的参数将自动被设为当前物体的位置。我们仍然可以更改这些位置值,例如将 Y 位置四舍五入到 800。为了让它与第一块板处于同一水平高度,我们仍将使用“Z 起点”作为其 Z 位置。

    g8.gif

     
     

    第 8 步 - “添加跳板”积木

    每当我们添加新跳板时,我们都会使用相同的一组积木:复制、更新大小和移动。因此,如果我们为这一组步骤定义一个新的块,将使我们的程序更加简洁。我们仍然通过一些输入参数来定制每个跳板的大小和位置。

    请创建一个名为“添加跳板”的新积木,其中包含 5 个输入,如下所示:

    46d0f7ab-47bd-4a7b-b18b-8e1b9631a374-image.png

     
    然后将已有的 3 个积木移动到这个新积木的定义中,并应用 5 个输入积木。

    g2.gif

     
    现在我们可以使用这个新积木来添加第二块跳板:

    45abfa23-79aa-456f-bfd1-456e76f30d43-image.png

     
     

    第 9 步 - 再添加 4 个跳板

    现在你可以使用新的积木“添加跳板”来随意添加更多的跳板。这里有些例子。请注意,你可以将 Z 位置设置在第一块跳板的上方或下方,只需要在“Z 起点”上增加一个正数或负数。

    aaab8481-515e-4b14-a92e-f679cdb3ae16-image.png

     
    它们看起来像这样:

    g4.gif

     
     

    第 10 步 - 添加玩家化身

    现在平台已经准备就绪,我们可以切换回到“玩家”角色。

    首先,让我们添加一个新的化身。你可以选择系统提供的任何头像。给化身添加 3 个动画能力:“跳在空中”、“跑”和“胜利”。将它移动到第一个跳板上方( Z 位置 200)。

    另外,让我们添加一个追踪摄像头来跟随化身移动。它的“z 偏移”应该是 50,即化身高度的一半。这杨摄像头将瞄准化身的腰部而不是脚部。

    251cf12f-93e1-44d6-be21-1c1f35b4c733-image.png

     
    化身看起来像这样:

    g5.gif

     
     

    步骤 11 - 重力和碰撞

    为了让化身向下降落(而不是漂在空中),我们需要给它设定重力。比如说,我们可以把重力设置为 800 。如果你使用更大的数值,化身会下降得更快。

    为了让化身站在跳板上(而不是从跳板中穿过去),我们需要开启化身和其他所有角色(包括跳板和目标)之间的“碰撞”。注意,对于化身和模型,我们需要把“z 位移”设置为高度的一半。

    3e466e93-502d-49f7-8544-95434d5e5db7-image.png

     
    现在化身将落在跳板上并站在上面:

    g6.gif

     
     

    第 12 步 - 控制玩家化身的主循环

    现在我们添加玩家化身的重复循环,通过处理键盘事件来控制化身的运动。由于化身可能在跳板上或在空中,我们可以分别定义 2 个新的积木来处理这两种场景:“在空中”和“已着陆”。

    为了判断化身是否接触到跳板,我们可以使用“角色物体在下方被阻止”积木。如果化身被其下方的任何障碍物阻挡,这个积木将报告数值 1。

    cbc7470a-9dfa-4c75-b54a-171aca899122-image.png

     
     

    第 13 步 - 添加 “设置方向” 积木

    在“已着陆”积木的定义中(仍在玩家角色中),我们首先需要设置化身面向的方向,然后设置它的速度。我们可以创建一个新的积木“设置方向”,专门用于设置化身的方向,这样我们的程序会更容易阅读和修改。

    3b908b66-5cf4-4ddc-9b51-28496c2c0324-image.png

     
     

    第 14 步 - 设置按下“w”时的前进方向

    现在让我们在玩家角色中定义之前创建的“设置方向”积木。当“w”键被按下时,我们希望化身朝向与摄像头相同的方向。这样,玩家可以通过旋转摄像头来控制化身向前移动的方向。

    我们可以使用摄像头的“侧视角度”属性(也就是水平旋转角度)读出它当前的方向,然后让化身面向那个方向。

    7f451e78-8c2f-429a-a8bf-290f0d76025d-image.png

     
    现在如果我们再次运行这个项目,我们可以拖动鼠标左键来旋转摄像头,然后按“w”将化身转向我们观看的方向。事实上,当我们旋转摄像头时,如果我们一直按住“w”键,化身将一直保持与摄像头相同的方向。

    g9b.gif

     
     

    第 15 步 - 处理其他 3 个方向

    其他 3 个方向的逻辑非常相似。 “s”键将使化身朝向摄像头,与相机的方向相反。 “a”和“d”键将使化身面向左侧或右侧。

    489423e2-1605-44fe-bad2-568aaed2368d-image.png

     
    现在化身可以根据当前摄像头的方向转向这 4 个方向:

    g10b.gif

     
     

    第 16 步 - 处理 4 个对角线方向

    为了让玩家更好地控制化身,让我们再添加 4 个对角线方向的逻辑。例如,当玩家同时按下“w”和“a”时,我们可以将化身转向左前方,也就是摄像头的方向加上315度。

    请注意,我们需要在检查单个按键之前检查这些双键组合。比如说,我们应该检查“w”和“a”是否同时被按下,只有在排除这个情况之后,我们才可以检查是否只有“w”被按下。如果我们先检查“w”是否被按下,那么我们会将化身转向正前方,那就没法正确处理“w+a”的组合了。

    d4.gif

     
    这是我们同时按下 2 个键时的结果:

    d2b.gif

     
     

    第 17 步 - 设置玩家化身的速度

    现在我们可以控制化身的方向。如果 4 个键中的任何一个被按下,我们就应该让化身移动。如果他们都没有被按下,我们应该让化身停止。

    请注意,“前进速度”将使化身朝其当前面向的方向移动。

    2390657a-3b35-439f-8818-aa55601882f7-image.png

     
    现在化身可以在我们按键时四处移动了:

    d5.gif

     
     

    第 18 步 - 添加动画

    当化身在移动时,我们还应该将其动画设置为“跑”。当没有任何键被按下时,我们应该切换回“待命”动画。

    eb379a84-61d0-46f4-9f1f-f3b32cf43cec-image.png

     
    现在我们化身可以作出跑的动作了:

    d6.gif

     
     

    第 18 步 - 让化身跳起来

    当 SPACE 键被按下时,化身需要跳起来。为此,我们要设置化身的“上升速度”。

    99647278-96b4-4023-8f2b-8d885b590cf6-image.png
     
    你应该还记得,在第 11 步中,我们已经设置了化身的“重力”。重力和上升速度是这样协同工作的:

    1。当我们按下 SPACE 时,上升速度被设置为300,这使化身开始上升。
    2。随着时间的推移,重力会逐渐降低上升速度,让上升速度越来越小。这时我们会看到化身仍然在上升,但它在逐渐变慢。
    3。当化身的上升速度变为0时,它达到了这次跳跃的最高点,并开始下降。
    4。重力会继续让已经是负数的上升速度继续变小,这让化身的下降越来越快。
    5。如果化身落到任何障碍物上,或者它的Z位置变为0,它会停止下降,它的上升速度也会被重置为0。

     
    这是化身跳跃的样子:

    d7.gif

     
     

    第 19 步 - 跳跃动画

    当化身在半空中时,我们需要将其动画更改为“跳在空中”。我们可以把动画积木加入到“在空中”积木的定义中:

    f6ccdef9-a91f-4911-8f95-2b5ed4fbafd5-image.png

     
    现在跳跃动画可以显示出来了。但是,您会注意到一个小问题:化身在跳跃时身体会稍微向右偏移一些。

    d8.gif

     
    这很可能是由于化身的动画数据有错误。为了解决这个问题,我们可以在 x 方向上添加一个 -7 的偏移量,这将使化身向左平移 7 个单位:

    df620b94-136c-41b1-9033-e626b1970dd8-image.png

     
    这是更正后的跳跃动画:

    d9.gif

     
     

    第 19 步 - 在空中改变方向

    当化身在半空中时,我们是否应该允许玩家改变它的方向?如果我们想让游戏更贴近现实,那么我们就不应该允许这个操作,因为没有人可以在跳跃的中途改变身体的移动方向。然而,如果我们添加这个操作,它将使游戏玩起来更有趣,因为玩家将对化身会有更好的控制。

    在这个项目中,让我们允许这个操作。我们可以简单的复用“设置方向”积木:

    13fcfba1-9210-4fd9-b157-985965d28ec1-image.png

     

    现在化身跳起来后,我们还可以用w/s/a/d四个键改变它的飞行方向了:

    d10.gif

     
     

    第 20 步 - 允许在空中开始移动

    现在我们需要回答一个类似的问题:如果化身垂直向上跳跃(移动速度为0),我们是否应该允许化身在半空中开始向前移动?为了让游戏更有趣,我们还是会允许玩家这样操作。我们可以从“已着陆”积木中复制这些积木:

    4c98bc27-9b26-4df0-bc8d-6c3fe040ac4b-image.png

     
    请注意,我们不需要再更改动画,因为化身在空中时会保持“跳在空中”的动画。现在我们可以按 SPACE 让化身直接向上跳,然后按 w/s/a/d 键中的任一个让化身移动:

    d11.gif

     
     

    第 21 步 - “玩家速度”变量

    目前,化身始终以每秒 300 个单位的速度移动。为了让游戏更有趣,我们可以添加这样一个功能:如果玩家一直按下“w”键,那么化身就会越跑越快。这样化身在一直往前跑的时候会让人感觉它获得了一些“冲力”。

    为了让跑步速度可以变化,我们需要用一个新的变量“玩家速度”来代表它。这个变量最初应设置为 300,这将是化身的默认速度。我们最好将所有变量初始化代码放在最开始,这样以后会很容易找到这些积木。

    e9905cda-c171-4be7-a58a-c471293d00f4-image.png

     
    接下来,我们在设置化身的前进速度和上升速度时应该使用“玩家速度”变量。如果速度数值越大,那么化身就会跑得更快、跳得更高。我们需要在“已着陆”和“在空中”中都使用这个变量。

    ca32780b-a398-4dc6-809d-ce96ac9db0f4-image.png

    ce9423bb-d378-4cf3-9abf-17adc57e73c1-image.png

     
     

    第 22 步 - 加速化身

    现在让我们通过更改“玩家速度”变量来加速化身。在“已着陆”积木的定义中,我们可以简单地检测“w”键是否被按下。

    • 如果它是被按下,我们将“玩家速度”变量增加 5,除非它已经达到 900 或更高。
    • 如果它没有被按下,我们将“玩家速度”重置为 300。

    20e9a958-78d7-4255-bae4-75b34f81c0bf-image.png

     
    现在我们可以清楚地观察到化身的加速。请注意,如果我们按下“w + a”或“w + d”,“w”键仍然是被按下的,因此化身也同样会加速。

    d13.gif

     
     

    第 23 步 - 动画速度

    当化身跑得更快时,它的跑步动画仍然保持相同的速度。我们其实可以让跑步的动画播放得更快,这样玩家更容易观察到化身的加速。

    请创建一个名为“动画速度”的新变量,并将其用作“跑”动画的速度比例。我们可以使用“玩家速度”来计算动画的速度比例。例如,当玩家速度为 300 时,动画应以 100 速度比例播放。当玩家速度为 900 时,动画应以 300 的速度比例播放。因此,动画速度等于 100 乘以 玩家速度 与 300 的比率。

    55ec1bc0-5cad-46e7-9b5d-f60c07fcbc7b-image.png

     
    你现在可以观察到当化身跑得更快时,动画也会加快:

    d14.gif

     
     

    第 24 步 - 为阴影添加光源

    下面我们让化身在跳板上投下阴影。这不仅会让游戏看起来更逼真,还会给玩家一些提示,让玩家知道化身在空中跳跃时会降落在哪里。

    使用阴影,我们需要做三件事:添加光源,使化身投射阴影,并使跳板接收阴影。

    我们应该在程序一开始就添加光源,也就是在添加任何物体之前。由于“草地”场景已经包含了一些相当明亮的光源,我们需要先将它们删除掉。

    要投射阴影,我们应该添加一个单向光源来模拟阳光。我们可以称它为“光源1”。这个光的方向是 x = -0.1, y = 0, z = -1:它会从上到下照射,但稍微向左偏移(负 x 方向),这样即使化身静止不动,我们也能看到一些阴影。

    448b14cf-02dd-4d2a-ac83-60fc6c13afd8-image.png

     
    添加这 2 个积木后,化身变得很暗:

    s5.gif

     
    为了照亮它,让我们再添加一个环境光源。它的强度应该是比较低的,比如50,否则会使化身的影子很难看清。

    6b1ed8e8-a86b-4e1d-9ce9-f6f037d8aca1-image.png

     
    现在化身看起来就清晰多了:

    s6.gif

     
     

    第 25 步 - 投射和接收阴影

    要使化身投射阴影,我们应该在添加化身后立即改变它:

    43d63740-798d-4eb2-b1ca-7c0cc7989b96-image.png

     
    为了使跳板接收并显示阴影,我们需要在添加每个跳板后立即更改它。这必须在 平台 角色中的 两处 完成:

    f2afec31-70b8-4013-9429-0e5f68262546-image.png

     
    现在你应该看到这样一个漂亮的阴影了:

    s7.gif

     
     

    第 26 步 - 添加目标区域

    现在我们已经准备好化身和平台,下一步是处理结束游戏的部分。首先,我们需要在平台的末端添加一个目标区域。

    在“目标”角色中,当我们收到“添加目标”这个消息时,我们可以在最后一个跳板后面添加一个带有彩虹纹理的圆柱形平台。它的名字应该设置为“目标”,而且它需要接收和显示阴影:

    93ab1879-b0da-497a-b73d-6c9d3103ed10-image.png

     
    这个目标区域会像这个样子:

    g21.gif

     
     

    第 27 步 - 主循环

    在我们添加更多积木之前,是时候稍微清理一下我们现有的程序了,因为玩家角色中的主要积木堆已经变得太长了。

    让我们定义一个名为“主循环”的新积木,并将现在的重复循环移到那里:

    main2.gif

     
     

    第 28 步 - 检测玩家胜利

    要赢得比赛,化身必须站在目标平台上。在主循环中,每当化身落在某个障碍物上时,我们应该查看那个障碍物是否就是目标。

    如果那个障碍物的名字是“目标”,那么我们就知道玩家已经完成了挑战。我们应该广播“胜利”的消息,然后使用“终止”积木退出这个重复循环。

    3c29b1b7-0c22-462c-a0ec-7347736c41ba-image.png

     
    注意,这些新的积木都是加在化身站在障碍物的情况下的。此外,在“终止”积木运行之后,重复循环将停止,因此玩家将无法再使用键盘来控制化身了。

     
     

    第 29 步 - 庆祝动画

    玩家完成挑战后,我们应该展示一些庆祝动画。我们需要把化身的速度设置为 0,让它停下来,然后开始“胜利”的动画。我们还应该将化身转向摄像头,以便我们可以看到它的正面。最后,我们应该把摄像头拉近化身,给它一个特写镜头。

    d29e6897-331e-4e6e-bd54-72f7d0b4b695-image.png

     
    下面就是庆祝的样子:

    v1.gif

     
     

    第 30 步 - 开始按钮

    由于这个游戏是看谁能在最短的时间内跑到目标,我们需要用一个计时器来统计玩家用了多少秒。

    我们需要在游戏开始时显示一个“开始”按钮,这样玩家就可以在他或她准备好时启动计时器。

    在“控制”角色中,我们应该使用按钮控件来添加这个“开始”按钮。请注意,你需要先运行“添加按钮”积木以将其添加到舞台,然后当你再添加它下面 2 个积木时,这些积木的下拉列表中就能看到这个按钮的选项了。

    9c7e0bf3-ec6e-4dca-b2fb-9d3b71926f3e-image.png

     

    该按钮将如下所示:

    a9ec6621-930d-414f-9ac6-14df6b9a31f8-image.png

     
     

    第 31 步 - 3 个游戏阶段

    在点击“开始”按钮之前,玩家应该无法控制化身。在玩家点击“开始”按钮后,他才会获得化身的控制权,而我们也应该在那个时候开始计时。

    为了确保我们正确地控制游戏的不同阶段,我们可以创建一个新变量“游戏阶段”。它将首先被设置为“等待开始”。当玩家单击“开始”按钮后,我们将游戏阶段更改为“已开始”。稍后,当玩家到达目标区域时,我们会受到“胜利”的消息,而这个时候我们可以将游戏阶段更改为“已结束”。

    8e9cdc5f-a11d-4e7b-93ce-0f911f8884a0-image.png

     
     

    第 32 步 - 在游戏开始前限制玩家的控制

    在游戏开始之前,玩家应该无法用键盘控制化身,因为我们还没有启动计时器。在“玩家”角色中,我们可以使用“游戏阶段”变量来确保这一点。我们将在游戏阶段改变为“已开始”后才进入主要的控制循环。

    412521cf-ee3a-4289-a721-fc6f99ae22e7-image.png

     
     

    第 33 步 - 计时器显示

    单击“开始”按钮时,我们应该删除该按钮,并在底部添加一个标签,用来显示计时器当前的时间。

    78b5c63e-5439-48b3-8ab1-5a786f83ee74-image.png

     
    当我们点击“开始”按钮时,它看起来像这样:

    v3.gif

     
     

    第 34 步 - 显示当前游戏时间

    添加时间标签后,我们可以将计时器归零,并开始显示当前的游戏时间。我们可以每隔 0.1 秒就更新一次时间显示。我们需要重复的更新时间,直到游戏阶段变为“已结束”。

    83d8910a-6df4-42f1-9f68-10499c5c6d45-image.png

     
    让我们来测试一下游戏时间的显示。你可以看到计时器在单击“开始”按钮后才开始计时,并在化身落在目标跳板上时停止计时。

    e2dddx.gif

     
     

    第 35 步 - 记录游戏时间

    在玩家到达目标点后,我们需要将游戏时间作为他/她的“分数”记录下来。这个分数将用来给这个玩家在排行榜上的进行排名。为此,我们可以使用“游戏”扩展类别中的“记录玩家得分”积木。

    之后,我们应该添加另一个按钮,让玩家可以查看排行榜。

    93a64375-12c1-4f5d-a166-520236ed9691-image.png

     
    这是新按钮的样子:

    bd37849e-063c-4d77-8155-2e57bfb6eb0a-image.png

     
     

    第 36 步 - 显示排行榜

    当玩家单击新添加的按钮时,我们会显示当前的排行榜。我们需要显示使用最少时间到达目标区域的玩家。由于每个玩家的“分数”就是完成游戏花费了多少秒的时间,我们应该显示“最低”分数的玩家。

    注意,如果一个玩家多次运行游戏,所有的游戏时间都会被记录下来,但排行榜只会显示每个玩家的最佳记录。

    1d569e03-16a6-436b-b8d8-a0343f2fe0f1-image.png

     
    排行榜将如下所示,显示排名、玩家姓名、该玩家的最佳游戏时间以及创建该记录的日期。

    a739339a-9134-4cdf-a19b-d99ee155a0bb-image.png

     
    玩家可以通过单击右上角的“x”关闭此排行榜。

     
     

    第 37 步 - 提高高度

    现在我们的游戏已经完成了。在最后,让我们将所有的跳板和化身都移动到更高的 z 位置, 例如 5000。我们现在也可以隐藏 3D 轴了。

    玩家角色:

    fd63c2b0-4f47-467d-9f9a-0fdc225771be-image.png

     
    平台角色:

    3f7e52db-7d64-41dd-9158-13ae321c76e2-image.png

     
    目标角色:

    d1fa42ef-cf80-44e9-8e1e-75ec117b7295-image.png

     
    这是游戏最终版本的演示:

    v4a.gif

     
     

    创意

    你可以通过多种方式扩展这个游戏。以下是一些供你参考的方法:

    • 平台形状、大小和位置:你可以添加不同形状的平台,例如圆柱体和球体。它们可以有不同的大小,并且不必居中对齐。

    • 旋转平台:你可以旋转平台,以便让化身跑步上坡或下坡。

    • 模型:除了使用简单形状制作平台,你还可以使用有趣的模型,例如沙发床或汉堡包。

    • 奖励:你可以在平台上添加额外的物体,当化身喷到它们时,它们会为玩家提供额外的帮助。例如,这个奖励物品可以是一瓶能量饮料,它可以使化身的速度在后面10秒内加倍。

    posted in 小教程