Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • CreatiCode
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

CreatiCode Scratch Forum

  1. CreatiCode Forum
  2. 知识库
  3. 小教程
  4. 三维 - 桥上跑步(难度:4级)

三维 - 桥上跑步(难度:4级)

Scheduled Pinned Locked Moved 小教程
1 Posts 1 Posters 968 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    C Offline
    creaticodeteacher2-mail
    wrote on last edited by admin
    #1

     

    用到的相关知识

    • 化身动画
    • 矩阵复制
    • 更新颜色
    • 按钮控件
    • 场景中添加雾气

     
     

    介绍

    在这篇教程中,大家将制作一个动画,一个人物在一座长桥上奔跑。可作为很多有趣游戏的模板。

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/13c4f7ad-0742-4421-ac27-0fd601036215.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第1步 - 新建一个项目,3个角色

    在创益编程游乐场新建一个项目。删除“角色1”,把角色“空的1”改名为“主角”。

    再添加2个新角色“桥”和“跑步者”。

    Animation1.gif

     
     

    第2步 - “蓝天”场景

    现在我们创建一个蓝天三维场景。此外,为了便于判断x/y/z方向,在开发代码期间可以显示三维坐标轴。

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/b7d6fc81-3f68-46da-ad0e-f1824448a47e.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">
     

    在“主角”角色中添加如下积木:

    1.png

     
     

    第3步 - 广播2条消息

    接下来,我们要广播2条消息告诉另外2个角色:“添加桥”、“添加跑步者”。我们不能用积木“广播”,而是要用“广播并等待”,这样的话,我们等到那两个角色都完成创建后再继续。

    2.png

     
     

    第4步 - 添加桥

    在“桥”角色中,当收到消息“添加桥”,就在场景中添加模型“铁桥1”,高度为910。

    3.png

     
    注意,桥模型的原点不在其底部,而是在桥的甲板上方。这样的话,当我们在场景中添加人物和物体,将会出现在甲板上,而不是在桥下。

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/0a0e45da-95c5-49e2-b8f6-74d7bf3dc869.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第5步 - 更改颜色

    大家可以把桥改为自己喜欢的颜色。桥模型的“主要”区域指的是红色的桥塔,“第二”区域指的是连接桥塔和甲板的缆绳。例如,把桥塔改成蓝色、缆绳改成绿色,如下所示:

    4.png

     
    现在桥如下所示:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/158ddde1-28c4-4e65-b126-6706a0844c7e.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第6步 - 把桥复制30次

    显然,对于跑步者来说桥太短了。我们要复制多个桥的副本并排成一条路。有个很方便的方法来复制桥并放到特定位置:“矩阵复制”。你只需要指定复制多少行、多少列、多少层,以及副本之间的距离。

    在这个程序中,我们要沿y轴复制30个桥,两两之间的距离为2400。因此,我们要这样使用积木“矩阵复制”:

    5.png

     

    立即就出现了30座桥。这些桥的几何形状和材质都一样,所以这一步很快,外观都是一样的。

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/903aa877-1e5c-41da-952c-e7d2770f0d3d.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第7步 - 添加一条路

    因为我们要让人物在桥上奔跑,所以要在甲板上的轨道上铺一条路。路就用一条很长的灰色平面,遮挡住下面的轨道。添加路平面后如下所示:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/a711279a-4042-4610-9937-7938fdc1ece9.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
    新增积木:

    6.png

     
     

    第8步 - 添加一些雾

    建设桥的最后一步,我们添加雾气。远处的物体被雾笼罩,这种环境能激励玩家探索场景。

    在本项目中,我们将使用“线性”雾,这让玩家能看到离摄像机近的物体,又能完全隐藏远处的物体。大家还可随意为雾加一点颜色,比如天空蓝:

    7.png

     
    添加雾之后的效果如下:

    fog3.gif

     
     

    第9步 - 添加跑步人物化身

    现在我们切换至“跑步者”角色,开始做跑步人物。首先,当该角色收到消息“添加跑步者”,就向场景添加一个人物。大家可随意挑选一个喜欢的人物,命名为“跑步者”,以便之后引用该人物。

    8.png

     

    这个人物站在桥上,面向前方:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/8f6d7e8d-3736-4708-8b0d-d453434cf353.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第10步 - 添加动画

    初学者一个常见错误就是忘记添加动画。建议大家添加人物化身后立即添加动画。请添加这5个常用动画:“胜利”“打败”“跳在空中”“滑下”和“跑”。

    9.png

     
     

    第11步 - 添加重力加速度

    和动画一样,一开始就要设置重力加速度,因为重力加速度在整个游戏中一般不变。

    10.png

     
     

    第12步 - 添加跟踪摄像机

    因为跑步者一直向前跑,我们要用追踪摄像头跟随跑步者。为了看得更远,我们把“z位移”设为100(与人物高度相同),这样摄像机就能看到人物的头,而不是人物的脚。并且,我们要把摄像机的“主方向”设为“目标”(即人物),那么,如果人物转向,摄像机也跟着转向。

    11.png

     
    摄像机新视野如下:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/2fc7063d-256d-4d46-a92b-cfd9175a9d92.png" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第13步 - 按钮“开始”

    尽管我们可以让跑步者立即开始跑,但最好是让玩家准备好以后玩家自己启动开关。做法为,回到“主角”角色,添加“控件”扩展,然后在两个广播消息后面添加一个按钮“开始”。可随意自定义按钮的大小和颜色。

    告诉大家一个小窍门,应当先运行积木“添加按钮”,以便于先在舞台上添加按钮,然后添加另外两个积木来更改字体和背景。这样的话,这两个积木默认选中的是这个按钮。

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/86d72c21-1127-4af8-a7ce-054084a6693a.gif" width="1100" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第14步 - 消息“开始”

    当点击按钮“开始”之后,我们应当隐藏按钮,然后向其他所有角色广播消息“开始”。

    12.png

     
     

    第15步 - 开始跑

    现在切换到“跑步者”角色。当跑步者收到消息“开始”,就要通过设置人物的“前进速度”使其向前跑。还要把人物化身的“跑步”动画设置为循环模式。

    13.png

     
    现在桥上就有了一个真正的跑步者!

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/808d6a7b-71eb-4e3c-ba9c-6b8200ea4a28.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第16步 - 向右前方跑

    我们要让玩家能够使跑步者左右转向。当按下向右按键,我们让跑步者面向右前方(60度),跑步者就将向这个方向跑:

    15.png

     

    当我们按下向右按键,如下所示:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/a45f705d-0db7-4e93-8001-b1517faf600e.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第17步 - 向左前方跑

    如果向右按键没有被按下,我们可以检查是否按下向左按键。如果按下向左按键,就让人物向左前方跑;否则就恢复向前跑。

    16.png

     
    现在可以用左右箭头控制人物向全部3个方向跑。

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/49665d69-6cb3-49ce-a9d7-41474d7e8cb8.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第18步 - 跳动

    当用户按下向上按键,我们把跑步者的“上升速度”设置为250,使其向上跳。同时,我们开始动画“跳在空中”。

    17.png

     
    效果如下所示:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/15db11f7-e0fa-4d7d-873e-de058bc97058.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第19步 - 恢复跑步动画

    当人物落地,应当切换回动画“跑”。我们可以等到人物的z坐标非常小时切换。

    18.png

     
    现在动画就修改好了:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/bc318893-a66e-4956-be10-2175231ed714.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第20步 - 动画“滑下”

    当按下向下按键,我们让人物在甲板上滑倒。这个动画只需播放一次,所以我们要把“循环”设置为“否”。并且,我们要设置为“需等待的”,以便于动画能运行完。这个动画结束后,我们就返回动画“跑”。

    19.png

     
    滑倒动画如下:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/47a641ae-d3c8-412e-96fc-50b0f6298a84.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第21步 - 摄像机新目标

    还有一个问题我们要解决。目前,当人物转向或跳动,摄像机会随之移动,这样看起来好像桥在动。这会让玩家晕头转向。更好的办法就是让摄像机向正前方移动,而跑步者可以四处跑动。

    为了实现这一点,我们首先要为摄像机添加一个新的目标物体,那么摄像机就无需再跟踪跑步者。我们可使用一个转换器结点,命名为“目标”:

    20.png

     
     

    第22步 - 让新目标“跑”

    当跑步者开始跑,我们要让物体“目标”以同样的速度前进,使其与人物始终保持相同距离。之后,我们再选择跑步者并使其跑动。

    21.png

     
    现在,如果跑步者跳起来,而物体“目标”不跳,那么摄像机就不跳动。

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/9e2c3250-aeaf-4f89-9b63-3eb6f00b25b5.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    第23步 - 当转向时跑得更快

    当跑步者斜着跑,就会比摄像头要慢,所以会从摄像头视野中消失:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/96ee4850-7a35-408f-b031-2109d542029f.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
    为了解决这个问题,我们要让人物斜着跑的时候速度更快。事实证明,如果我们使跑步者的斜向前进速度为400,在y轴上的速度依然是200。如果跑步者恢复沿y轴跑,那么我们就要把速度重置为200。

    22.png

     
    跑步者的最终演示效果如下:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/13c4f7ad-0742-4421-ac27-0fd601036215.gif" width="480" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    创意扩展

    现在大家学会了如何制作基本的跑步动画,有很多方法可以进行个性化和改进。一些创意思路如下:

    • 把跑步者限制在甲板范围内:大家可以为主球和目标球设置不同的坐标位置。

    • 添加声效:当跑步者跳起或滑倒,大家可以添加一些有趣的声效。

    • 其他动画:大家可尝试让跑步者做更多事情,如飞行、跑更快。

    1 Reply Last reply
    0

    Hello! It looks like you're interested in this conversation, but you don't have an account yet.

    Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

    With your input, this post could be even better 💗

    Register Login
    Reply
    • Reply as topic
    Log in to reply
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes


    • Login

    • Don't have an account? Register

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode