Partner teachers

介绍

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

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

 
 

添加多个摄像头

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

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

 
 

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

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

 

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

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

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

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

 
 

示例 1 - 画中画

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

 
结果如下：

 
 

示例 2 - 左右分屏

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

 
结果如下：

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:

 
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.

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

 

 
 

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:

 

• 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.

 
And here is the result:

 
 

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.

 
Here is the result:

介绍

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

 

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

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

 
 

示例

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

 
注意，目标位置只影响相对于物体位置的旋转方向。在上面这个例子中，如果我们使用 (10, 10, 2) 作为目标位置，我们会得到相同的旋转结果，因为物体位于 (0, 0, 0) 的位置。

 
 

使用父节点 + 指向位置（高级）

当我们使用“指向位置”积木时，有的时候可能得不到想要的结果，因为旋转物体的方法有很多种。

例如，当我们旋转飞机指向 (100, 100, 100) 的位置时，飞机的机身会围绕自身“侧滚”，因此左翼会比右翼倾斜得更高：

 
为了更好地控制物体的旋转方式，我们可以使用父节点辅助完成部分甚至全部旋转。

例如，你可以使用一个转换器物体“t”作为飞机的父节点。然后使用“指向位置”积木让飞机慢慢抬头，并让父节点 t 绕 Z 轴向右旋转。这样 2 个机翼将处于相对水平位置。你还可以把第一个动画设置为“可继续的”，以便让两个动画同时运行：

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:

 
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.

 
Note that the target position only affects the rotation direction relative to the position of the object. In this case, if we used (10, 10, 2), we would get the same result, since the object is at the position of (0, 0, 0).

 
 

Parenting + Point to Position (Advanced)

Sometimes when you may not get the desired result when you use the “point to position” block, since there can be many ways to rotate the object.

For example, when we rotate the airplane to point at the position of (100, 100, 100), the airplane’s body would “roll” around itself, so the left wing will tilt higher than the right wing:

 
To have more control over how the object’s body is rotated, you can use a parent object to do some or all of the rotation.

For example, you can use a transformer object “t” as the parent of the airplane. Then you use the “point to position” block to rotate the airplane to point upwards, and rotate the parent object around the Z-axis to the right. This way the 2 wings will be at the same level. You can make the first animation non-blocking so the 2 animations run at the same time:

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:

 

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:

 
 

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:

 
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.

 
 

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:

 
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:

 
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:

 

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:

介绍

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

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

 
 

记录玩家分数

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

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

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

 
 

显示排行榜

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

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

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

 
 

隐藏排行榜

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

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:

 
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:

 
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: