Navigation

    CreatiCode Scratch

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. info-creaticode
    • Profile
    • Following 0
    • Followers 0
    • Topics 275
    • Posts 282
    • Best 1
    • Groups 3

    CreatiCode

    @info-creaticode

    0
    Reputation
    22
    Profile views
    282
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Website creaticode.com/

    info-creaticode Unfollow Follow
    premium-teachers Global Moderator administrators

    Best posts made by info-creaticode

    • 3D - A Spinning Earth (Difficulty: 1)

       

      Key Topics Covered

      • Initializing 3D scenes
      • Using spheres
      • Updating textures
      • Setting object speeds
      • Highlighting objects

       
       

      Introduction

      In this tutorial, you will learn to create a spinning Earth:

       
       

      Step 1 - Initialize An Empty Scene

      First, create a new project, and load an empty scene using the “initialize 3D scene” block.

      By default, it will create an empty scene with nothing but a blue background:

       
       

      Step 2 - Set the Background Starfield

      Next, use the “set sky” block to create a better-looking backdrop:

      You should get a starfield with the Sun on the right.

       
       

      Step 3 - Add a Big Sphere

      Next, add a sphere with a large diameter of 10000 to the scene. Don’t worry about its color yet.

      The sphere would look brighter on the side that faces the Sun.

       
       

      Step 4 - Add Earth Texture

      Now we need to update the sphere’s texture with the Earth. Add the “update texture” block, click the “Please select” input box, then search for “Earth” in the library window.

       
       

      Step 5 - Flip the Earth Texture

      You might have noticed an issue with the texture: the continents are upside-down. We need to flip the texture vertically to correct this issue. This can be done by changing the vertical repeat count from 1 to -1.

       
       

      Step 6 - Make the Earth Spin

      To make the Earth object spin, we can use the “set speed” block. Note that the Earth needs to be spinning from “left” to "right, so the “Z-rotation” speed needs to be negative.

      Now your Earth object should be spinning slowly.

       
       

      Step 7 - Highlight Around the Earth

      Lastly, to make the Earth object glow in blue lights, we can create a new highlight layer, then add the sphere to that layer.

      Now your Earth object should carry a blue light around it.

       

      Next Steps

      You can try to use a similar method to build other projects. Here are some example ideas:

      • A Different Planet: You can change Earth to other planets like Mars;
      • A Spinning Trophy: You can try to make a trophy object spin and shine.
      posted in Tutorials
      info-creaticode
      CreatiCode

    Latest posts made by info-creaticode

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

      介绍

      通常,我们只在 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 三维积木
      info-creaticode
      CreatiCode
    • 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
      info-creaticode
      CreatiCode
    • 转动物体指向某个目标点

      介绍

      将一个新的物体(例如飞机)被添加到 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 三维积木
      info-creaticode
      CreatiCode
    • 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
      info-creaticode
      CreatiCode
    • 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
      info-creaticode
      CreatiCode
    • 游戏排行榜

      介绍

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

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

       
       

      记录玩家分数

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

      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 二维积木
      info-creaticode
      CreatiCode
    • 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
      info-creaticode
      CreatiCode
    • 第一人称视角的摄像头

       

      预备知识

      • 追踪摄像头

       

      介绍

      许多 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 三维积木
      info-creaticode
      CreatiCode
    • 3D - A Jumping Game (Difficulty: 5)

      Introduction

      In this tutorial, you will build an exciting jumping game:

      m1.gif

       

      The player will jump through the platforms to reach the goal area, and a leaderboard of the fastest players will be displayed at the end.

       
       

      Step 1 - A Grass Land Scene

      To get started, please create a new project on the CreatiCode playground, remove the Sprite1 with the dog, and rename the “Empty1” sprite as “Player”.

      In the Player sprite, add the following blocks. They will create a 3D scene with a grassland and show the 3D axes.

      cba437ea-4183-4530-8f7d-c41ca4a4c762-image.png

       
      This is what you should get:

       
       

      Step 2 - Add 3 Empty Sprites

      The Player sprite will contain all the code for controlling the running player. There are 3 other key components of this game:

      • Platform: All the jumping boards
      • Goal: The goal area
      • Controller: The game control logic

      Therefore, please add 3 empty sprites, and name them “Platform”, “Goal” and “Controller”.

      6d7a30d1-daa0-473c-b69b-7df53ed11852-image.png

       
       

      Step 3 - Broadcast 3 Messages

      Before we add code to create the player avatar, let’s first set up the game in the other 3 sprites. We can do that by sending out 3 messages and waiting until they are all handled completely.

      081ce22a-98af-4db6-b902-afcfa8f3ac2e-image.png

       
       

      Step 4 - Add the First Board

      Now let’s add the first board in the “Platform” sprite. It will be a large square box that is 400 by 400, with a thickness of 10. You can pick any texture for it, such as “Wood 07”.

      c78fe8ba-bd29-42a8-93b2-1782a001008d-image.png

       
      It should look like this:

      g4.gif

       
       

      Step 5 - The “Z Start” Variable

      The boards will be floating in the air, so if the player avatar drops off the boards, it will lose the game. However, at this point, we are not sure yet how high these boards should be. Therefore, we can use a new variable called “Z Start”, and use this variable to set the z position of our boards. We will set this variable to 100 for now, which makes testing easier, and we can change this variable to a larger number later.

      a3768b3e-3447-48f4-ac42-e9fc4069b7e6-image.png

       
      Now the board is floating at Z of 100:

      g5.gif

       
       

      Step 6 - Copy to a Second Board

      To add the second board, instead of adding a new box, we will make a copy of the first board. This will not only be faster, but also save some storage space.

      After copying the second board, we can still change its shape using the “update size” block. For example, we can make it 200 wide in the X direction and 800 long in the Y direction.

      5980a479-0a59-4c87-886c-2dc9ab9b2f6f-image.png

       
      Now the new board will overlap mostly with the first board:

      g6.gif

       
       

      Step 7 - Move the Second Board

      Now let’s decide where to move the second board. If you are not sure what’s its new coordinates, you can use the position tool to drag the board first. In the example below, we drag the second board forward, then add the "move to“ block, which will have the position values filled in automatically. We can still change the numbers, such as rounding up the Y position to 800. To keep it at the same level as the first board, we will still use “Z Start” for its Z position.

      g7.gif

       
       

      Step 8 - The “Add Board” Block

      Whenever we add a new board, we use the same set of blocks: copy, update size and move. Therefore, it will make our program much shorter if we define a new block for these steps. We can still use a few input parameters to allow us to customize the size and position of each board.

      Please make a new block named “add board” with 5 inputs like this:

      377d79fe-fe31-40c8-b08e-91a525406db4-image.png

       
      Then move the 3 blocks into the new block’s definition stack, and plug in the 5 input blocks.

      g1.gif

       
      Now we can reproduce the second board using this new block:

      5bd1b069-4db0-4977-88bf-94ac7732449d-image.png

       
       

      Step 9 - Add 4 More Boards

      Now you can freely add a few more boards using the new block “add board”. Here are some examples. Note that you can set the Z position above or below the starting board by adding a positive or negative number to “Z Start”.

      9f358011-97d6-4dd7-a310-0c83a4db36b3-image.png

       
      They will look like this:

      g4.gif

       
       

      Step 10 - Add the Player’s Avatar

      Now the platform is ready, we can switch back to work on the “Player” sprite.

      First, let’s add a new avatar. You can pick any avatar provided by the system. Add 3 animations to it: “Jump in Air”, “Run” and “Victory”. Move it to Z position of 200, which is above the first board.

      Also, let’s add a follow-camera to track the avatar. Its “z offset” should be 50, which is half the height of the avatar. This makes sure the camera will target at the waist of the avatar instead of its feet.

      ecdbeee8-38a5-4cd0-a86c-048aa1548783-image.png

       
      The avatar will look like this now:

      g5.gif

       
       

      Step 11 - Gravity and Collision

      To make the avatar fall down, we need to assign gravity to it. We can start with a value of 800. If you use a larger number, the avatar will fall faster.

      To make the avatar stand on the jumping boards (instead of falling through them), we need to turn on the “collision” between the avatar and all the other sprites, which includes the platform and the goal. Note that for avatars and models, we need to set the “z offset” to half of the object’s height.

      f218679f-a3e8-4e6f-8d63-fc279fa4b6b1-image.png

       
      Now the avatar will fall onto the board and stay there:

      g6.gif

       
       

      Step 12 - Main Loop for Player Control

      Now we are ready to add the main forever loop for controlling the player avatar using keyboard events (in the Player sprite). Since the avatar may be running on the board or jumping in the air, it is easier if we define 2 separate blocks to handle these 2 scenarios: “in air” and “landed”.

      To tell whether the avatar is touching the jumping board. we can use the “sprite object blocked below” block, which will report a value of 1 if the avatar is blocked by any obstacle below it.

      209d04f2-cd1f-4d13-9b59-dabf36232231-image.png

       
       

      Step 13 - Create the “set direction” Block

      In the “landed” block’s definition (still in the Player sprite), we will first need to set the direction of the avatar, then set its speed. We can make a new block “set direction” that’s dedicated to setting the direction, which will make our program easier to read and change.

      bd1d5ab7-9459-46c6-96d6-5ecdfa6fe750-image.png

       
       

      Step 14 - Set the Forward Direction When “w” Is Pressed

      Now let’s define the “set direction” block. When the “w” key is pressed down, we would want the avatar to face the same direction as the camera. This way, the player can rotate the camera to control which way the avatar will move forward.

      We can read out the direction of the camera using its “H-Angle” property (horizontal angle), and then make the avatar point in that direction.

      0d18fecb-22f2-42a5-84d0-d99564b931b9-image.png

       
      Now if we run the project again, we can drag the left mouse button to rotate the camera, then press “w” to point the avatar in the same direction. In fact, if we keep pressing down the “w” key, the avatar will stay in the same direction as the camera when we rotate the camera.

      g9b.gif

       
       

      Step 15 - Handle the Other 3 Directions

      The logic for the other 3 directions is very similar. “s” key will make the avatar face the camera, which is the opposite of the camera’s direction. “a” and “d” keys will make the avatar face the left or right sideways.

      43d2cc63-654d-4adc-8014-b02f2f2f3122-image.png

       
      Now the avatar can turn in these 4 directions based on the current camera direction:

      g10b.gif

       
       

      Step 16 - Handle the 4 Diagonal Directions

      To give the player more control over the avatar, let’s add the 4 diagonal directions. For example, when the player presses down both “w” and “a” at the same time, we can turn the avatar towards the left forward direction, which will be the camera’s direction plus 315 degrees.

      Note that we need to check for these 2-key combinations before checking single key presses. For example, we should check if “w” and “a” are both pressed, and only when that’s not true, then we can check if only “w” is pressed. If we check for “w” by itself first, then we would turn the avatar forward, and fail to handle the “w+a” combination.

      d1.gif

       
      Here is the result when we press 2 keys together:

      d2b.gif

       
       

      Step 17 - Set the Player’s Speed

      Now we can control the avatar’s direction, we should make it move whenever any of the 4 keys are pressed. If none of them are pressed, we should make the avatar stop.

      Note that the “forward speed” will make the avatar move in the direction it is currently facing.

      06af4473-73e6-493f-b84f-cab6067679f0-image.png

       
      Now our avatar can move around when we press the keys:

      d5.gif

       
       

      Step 18 - Add Running Animation

      When the player is running, we should also set its animation to “Run”. And when no key is pressed, we should switch back to the “Idle” animation.

      1638dbc0-1c53-4e08-8b03-46c8bf064760-image.png

       
      Now we get a running avatar:

      d6.gif

       
       

      Step 18 - Make the Avatar Jump

      When the SPACE key is pressed, we will make the avatar jump up. We can set the “rising speed” for this purpose.

      5780e926-e14e-4990-a273-773e40edcb9b-image.png
       
      Recall that in step 11, we have already set the avatar’s “gravity”. Here is how gravity and rising speed work together:

      1. When we press SPACE, the rising speed becomes 300, which will make the avatar go up.
      2. Over time, gravity will reduce the rising speed gradually, so the rising speed will become smaller and smaller. As a result, we will see that the avatar will still be rising, but it is slowing down.
      3. When the avatar’s rising speed becomes 0, it has reached the highest point for this jump, and it will begin to fall.
      4. The gravity will continue to reduce the rising speed, which makes the avatar fall faster and faster.
      5. When the avatar reaches an obstacle or the Z position of 0, it will stop falling, and its rising speed is reset to 0.

       
      Here is what the jump looks like:

      d7.gif

       
       

      Step 19 - Jumping Animation

      When the avatar is in the air, we need to change its animation to “Jump in Air”. We can do it in the “in air” block’s definition:

      906c5d89-2b90-46bd-8c07-96c3871f7218-image.png

       
      Now the jumping animation is displayed. However, you will notice a small issue: the avatar’s body is shifted to the right a little bit when it jumps.

      d8.gif

       
      This is most likely caused by an error in the avatar’s animation data. To fix it, we can add an offset of -7 in the x direction, which will shift the avatar to the left by 7 units:

      ff5bff45-718d-4e17-b5a7-9d234cb6d7bf-image.png

       
      Here is the corrected jump animation:

      d9.gif

       
       

      Step 19 - Change Direction in the Air

      When the avatar is in the air, should we allow the player to change its facing direction? If we want to keep the game close to reality, then we should not allow it, since no one can change the body’s moving direction halfway through the jump. However, if we allow this, it will make the game much more fun to play, since the player will have more control on the avatar.

      In this game, let’s allow it. This can be simply done by reusing the “set direction” block:

      5ed29016-09ab-43dd-99ca-06e4465caff3-image.png

       

      Now after the avatar has jumped up, we can still change its flying direction using the w/s/a/d keys:

      d10.gif

       
       

      Step 20 - Enable Moving Mid-Air

      Now we need to answer a similar question: if the avatar jumps straight up (with a forward speed of 0), should we allow the player to add a forward speed to the avatar mid-air? Again, to make the game more fun, let’s enable this control. We can just duplicate these blocks from the “landed” block:

      f537e389-1ee8-466e-a2b2-ef15623343d2-image.png

       
      Note that we don’t need to change the animation, since the avatar will stay in the “Jump in Air” animation when it is in the air. Now we can press SPACE to make the avatar jump straight up, then press one of the w/s/a/d keys to make it move:

      d11.gif

       
       

      Step 21 - The “player speed” Variable

      Currently, the avatar always moves at a speed of 300 units per second. To make the game more fun, we can allow the player to run faster if the “w” key is pressed down continuously. It will feel like the avatar gains some “momentum” when it keeps running forward.

      To make the running speed changeable, we need to use a new variable “player speed” to represent it. This variable should be set to 300 initially, which will be the default speed of the avatar. It is a good idea to place all variable initialization code at the very beginning, so it is easy to find these blocks.

      9e7a0863-5a0a-49a8-9e1f-ec6f5c1e2590-image.png

       
      Next, we should use the “player speed” variable when we set the avatar’s forward speed and rising speed. If the player’s speed is larger, then the avatar will run faster and jump higher. We need to do it in both “landed” and “in air”.

      3b29df9b-4ffb-4487-a93d-b1dbb14e93f2-image.png

      41a5bd9e-f42b-4ab9-80e0-324a491a0083-image.png

       
       

      Step 22 - Speed Up the Avatar

      Now let’s speed up the avatar by changing the "player speed“ variable. We can simply check if the “w” key is pressed in the “landed” block’s definition.

      • If it is pressed, we increase the “player speed” variable by 5, unless it is already at 900 or higher.
      • If it is not pressed, we reset “player speed” to 300.

      a7a40f92-6085-4300-b4dd-f42efe853e7e-image.png

       
      Now we can clearly observe the speed up of the avatar. Note that if we press “w + a” or “w + d”, the “w” key is still pressed down, so the avatar will also speed up.

      d13.gif

       
       

      Step 23 - Animation Speed

      When the player is running faster, its animation still remains at the same speed. We can make the running animation run faster as well, which will make it easier for the player to observe the speed up.

      Please create a new variable named “animation speed”, and use it as the speed ratio for the “Run” animation. We can calculate its value using the “player speed”. For example, when the player’s speed is 300, the animation should play at 100% speed ratio. When the player’s speed is 900, the animation should play at 300% speed ratio. Therefore, the animation speed equals 100 times the ratio of player speed over 300.

      1bbcd6e0-10ea-4587-adc1-979c6fa4e34a-image.png

       
      You can now observe that the animation also speeds up when the avatar runs faster:

      d14.gif

       
       

      Step 24 - Add the Light Source for Shadows

      Now let’s make the avatar cast a shadow onto the jumping board. This will not only make the game look more realistic, but also give the player some hint on where the avatar will land when it jumps up in the air.

      To use shadows, we need to do 3 things: add a light source, make the avatar cast shadow, and make the jumping board receive the shadow.

      The light source should be added at the very beginning, before we add any new object. Since the “grass land” scene already contain some fairly bright lights, we need to remove them first.

      To cast the shadow, we should add a directional light to simulate the sunlight. We can call it “light1”. The direction of the light is x = -0.1, y = 0, z = -1: it will be from top to bottom, but slightly skewed to the left (negative x direction), so we can see some shadow even when the avatar is standing still.

      6c8783ad-3e96-4ebe-a7a5-685662f54dc3-image.png

       
      After adding these 2 blocks, the avatar becomes pretty dark:

      s5.gif

       
      To lighten it up, let’s add another ambient light source. Its intensity should be low, such as 50, otherwise, it will make the shadow hard to see later.

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

       
      Now the avatar looks pretty clear:

      s6.gif

       
       

      Step 25 - Cast and Receive Shadows

      To make the avatar cast shadows, we should do it right after we add the avatar:

      8af74d08-d3ba-47ca-8de6-d960aa54cf21-image.png

       
      To make the jumping board receive and display the shadow, we need to change each board right after it is added. This has to be done in 2 places in the Platform sprite:

      d854667e-9c85-49bd-b2bb-22707295afc5-image.png

       
      Now you should get a nice shadow like this:

      s7.gif

       
       

      Step 26 - Add the Goal Area

      Now we are ready with the avatar and the platform, the next step is to handle game completion. First, we need to add a goal area at the end of the platform.

      In the Goal sprite, when we receive the “Add Goal” message, we can add a cylinder with a rainbow texture behind the last jumping board. It should be given the name of “goal”, and it should receive and display shadows as well. Here are some example blocks:

      3b22d48c-eab3-48b3-a09c-4e89d044ce75-image.png

       
      This goal area will look like this:

      g21.gif

       
       

      Step 27 - The Main Loop

      Before we add more code, it’s time to clean up our code a little bit, since the main stack of blocks in the Player sprite is getting too long.

      Let’s define a new block named “main loop”, and move the forever loop there:

      main.gif

       
       

      Step 28 - Check for Victory

      To win the game, the avatar has to be standing on the goal. In the main loop, whenever the avatar has landed on some obstacle, we should check if that obstacle is the goal.

      If that obstacle’s name is “goal”, then we know the player has completed the challenge. We should broadcast a “Victory” message, and then exit the forever loop using a “break” block.

      6383562f-7ab1-4638-9738-45e0197b8358-image.png

       
      Note that these new blocks are all added under the condition that the avatar is blocked below. Also, after the “break” block, the forever loop will stop repeating, so the player will no longer be able to use the keyboard to control the avatar.

       
       

      Step 29 - Celebration Animation

      After the player has completed the challenge, we should show some celebration animations. We need to stop the avatar by setting its speed to 0, then start the “Victory” animation. We should also turn the avatar towards the camera so we can see the front face of the avatar. Lastly, we should zoom in the camera to show a close-up view of the avatar.

      ccbcb3a8-0e06-47a4-87cf-65ec7b2fcfe9-image.png

       
      Here is the celebration scene:

      v1.gif

       
       

      Step 30 - The Start Button

      Since the game is about who can complete the entire run in the shortest time, we need to use a timer to count how many seconds the player has used.

      We need to show a “Start” button at the beginning of the game, so the player can start the timer when he or she is ready.

      We should add this button in the “Controller” sprite, using a button widget. Note that you need to run the “add button” block first to add it to the stage, then when you add the 2 bocks below it, you will see the button in their dropdowns.

      bc7a54ac-2855-4023-88c6-9460bbe04641-image.png

       

      The button will look like this:

      a35cce77-f1de-4470-9cf8-069b0716e3b2-image.png

       
       

      Step 31 - 3 Game Stages

      Before the “Start” button is clicked, the player should not be able to control the avatar. After the player clicks the “Start” button, the player gains control of the avatar, and we should start the timer.

      To make sure we control the different stages of the game correctly, we can make a new variable “game stage”. It will be set to “waiting to start” at the very beginning. After the “Start” button is clicked, we change the game stage variable to “started”. Later, when the player arrives at the goal area, we would receive the “Victory” message, and that’s when we will move the game to the next stage, which is “finished”.

      719f6618-831a-4277-a36e-c077a7000486-image.png

       
       

      Step 32 - Limit Player Control Before the Game Starts

      Before the game starts, the player should not be able to control the avatar, since we have not started the timer yet. In the “Player” sprite, we will wait until the game stage is changed to “started” (triggered by the button click) before we enter the forever loop.

      ac67a1bb-5497-4857-998e-deccf7f49135-image.png

       
       

      Step 33 - Timer Display

      When the “Start” button is clicked, we should remove that button, and add a label at the bottom to show the timer value.

      ee8d9d0a-4f2c-4af0-b769-29ea16325b28-image.png

       
      It will look like this when we click the “Start” button:

      v2.gif

       
       

      Step 34 - Display the Current Game Time

      After we add the timer label, we can reset the timer to 0, and start showing the current time using the timer label. We can repeatedly update the timer every 0.1 seconds. We will keep doing this until the game stage changes to “finished”.

      8e280281-1dd8-45b5-8d6b-4603825201eb-image.png

       
      Here is a test run for the timer. You will see that the timer starts after the “Start” button is clicked, and stops when the avatar lands on the goal board.

      e2ddd.gif

       
       

      Step 35 - Record Game Time

      After a player finishes the game, we need to record the game time as his/her “score", which will be used to rank that player on the leaderboard.

      To do that, we can use the “record player score” block from the “Game” category, which is one of the extensions.

      After that, we should add another button to allow the player to look at the leaderboard.

      15b9bf43-cad1-4052-97ba-43668c56cd08-image.png

       
      Here is what the button would look like:

      3e7a40bb-9618-4815-88f5-42bdf268a1bd-image.png

       
       

      Step 36 - Display the Leaderboard

      When the new button is clicked, we should display the leaderboard. We would want to show the top players who have used the least amount of time to arrive at the goal area. Since each player’s “score” is just the game time, we should show the players with the “lowest” scores.

      Note that if a player runs the game multiple times, all game times will be recorded, but the leaderboard will only show the best record for each player.

      b2601a49-ef3e-4cf5-9685-054685422bc2-image.png

       
      The leaderboard will look like this, which shows the ranking, the player name, the best game time for that player, and the date when this record is created.

      81c5356a-1c16-4bbd-85bb-6e0f664c5184-image.png

       
      The player can close this leaderboard by clicking the “x” on the top right.

       
       

      Step 37 - Raise the Height

      Now our game is complete. For the last step, let’s move all platforms and the avatar higher to a z position of 5000. We can also hide the 3D axis now.

      Player Sprite:

      5380f041-35b7-41c7-bd3f-ff04fc478d74-image.png

       
      Platform Sprite:

      b3906ada-5fca-4f32-94e2-d1f906bfdba3-image.png

       
      Goal Sprite:
      5b6c6b33-acf6-4bd0-9a51-c7228ac0b9f6-image.png

       
      And here is the final demo of the game:

      m1.gif

       
       

      Creative Ideas

      You can extend this game in many ways. Here are some example ideas:

      • Platform Shape, Size and Position: You can add platforms in different shapes, such as cylinders and spheres. They can be in different sizes and they do not have to be center aligned.

      • Rotated Platforms: You can rotate the platforms so that the avatar will be running up-slope or down-slope.

      • Models: Instead of using simple shapes for the platforms, you can also use models, such as sofa beds or hamburgers.

      • Rewards: You can add additional objects on the platforms, so they will provide additional help to the player when the avatar reaches them. For example, one such type of reward item can be a bottle of power drink, which would double the avatar’s speed for 10 seconds.

      posted in Tutorials
      info-creaticode
      CreatiCode
    • 投射和接收阴影

      介绍

      我们周围的一切物体都会投射一些阴影(除非你是在一个完全漆黑的屋子里)。因此,添加阴影将使你的三维场景更加逼真。

      但是,计算和绘制阴影需要额外的电脑资源和时间。因此,在默认情况下,你添加的所有三维物体不会投射任何阴影。你必须使用代码积木来告诉三维引擎哪些物体会投射阴影。

      shad.gif

       

      如上所示,要生成阴影,你实际上需要告诉三维引擎 3 件事情:

      1. 光源:这将用于计算阴影的位置和形状
      2. 投射阴影的物体:如花盆或化身
      3. 接收阴影的物体:这是用于显示阴影的,例如桌子或地板。

       
       

      光源

      你只能使用 单点光或者单向光 作为产生阴影的光源。添加光源的时候,你最好给它起个名字,方便后面引用这个光源。

      请注意,在添加光源之前,你可能需要移除场景中所有已有的光源,否则阴影可能会看不见或者非常不明显。

      此外,光源的位置应在投影物体和受影物体的上方,否则它不会产生阴影。

      这是一个示例程序:

      147e311c-954b-4d41-b544-df59099d5a25-image.png

       
       

      使物体投射阴影

      要使物体投射阴影,你需要运行以下积木。它将使当前被选择的角色物体投射阴影。通常情况下,当你添加一个物体后,如果你希望这个物体投射阴影,那你应该紧接着就运行下面这个积木。

      8802b0e0-9a14-489a-8f3f-f61cc36e799f-image.png

       

      它接受 3 个输入:

      • 是/否:如果此输入为“是”,则当前的角色物体将开始投射阴影。如果此输入为“否”,则当前的角色物体将停止投射阴影。
      • 光源名称:光源的名称。如果它是空白的,那么将使用最后被添加的光源。
      • 模糊度:此数值控制阴影的模糊程度。一般来说,物体的阴影都有模糊的边缘。

       
       

      使物体接收阴影

      在添加光源和阴影投射物体后,我们还是看不到任何阴影。那是因为我们还没有指定阴影需要在哪里显示出来。

      要让一个物体接收和显示其他物体投射过来的阴影,你需要使用以下积木:

      cb56d95a-3e8a-4527-90f5-a83a752d2ea6-image.png

       
      如果输入为“是”,那么当前被选中的角色物体将会接受和显示其他物体投射的阴影;否则,角色物体将停止显示任何阴影。

       
       

      演示 1

      在这个程序中,我们作了 3 件事情:
      1.添加一个名为“光源1”的点光源
      2.添加一个会投射阴影的花盆
      3.添加一个将接收阴影的桌子

      1dbc3152-7599-42af-bfed-643b5e74df69-image.png

       
      你会看到如下结果:

      shad.gif

       
       

      演示 2

      在这个程序中,我们做了这 3 件事情:
      1.添加一个名为“光源1”的单向光源
      2.添加投射阴影的跳舞的化身
      3. 使用一个平面作为地板,用来接收阴影

      c4334296-e5e3-4c61-be40-e6b4acd150e5-image.png

       
      你会看到如下结果:

      s4.gif

      posted in 三维积木
      info-creaticode
      CreatiCode