您的位置是:少儿编程网>Scratch编程教程Scratch编程教程

跟我学Scratch第八十九讲 :俯视3D-教程

少儿编程网2020-11-18 22:07:49Scratch编程教程 人已围观 来源:少儿编程 -用户投稿

简介原理与上一讲一样,都是用剖面图经过克隆堆叠得到立体效果。所不同的是这次的是水平方向的剖面图,然后堆叠而成的俯视3D效果。所以对应的角色旋转功能也就是俯视方向的旋转效果。而上次讲座用的3D效果是通过纵向剖面图形成的水平视角效果图,所以旋转功能对应的就是翻转的效果。这一部分听起来有点绕,但是大家慢慢思考,想通了就能得心应手的来做这种类型的3D效果了。

     上一讲专门讲了2D变3D的效果,视角是水平方向,同时用了旋转功能,因为是水平视角,角色旋转会呈现出一个翻转的效果,比如上一讲的翻车效果。今天CC哥给大家讲俯视效果,同时也看看俯视视角下的旋转是什么效果。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学<a href=http://www.pxcodes.com target=_blank class=infotextkey><a href=http://www.pxcodes.com/ScratchJr/ target=_blank class=infotextkey>Scratch</a></a>第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这就是一个CC哥做的一个简单俯视3D的一个例子。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

(CC哥在想做什么的时候,脑子里不知为什么总是跳出小时候看的大闹天空里的孙悟空跟二郎神斗法时变的小庙,就忍不住跟着这个思路做了一个)RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
原理与上一讲一样,都是用剖面图经过克隆堆叠得到立体效果。所不同的是这次的是水平方向的剖面图,然后堆叠而成的俯视3D效果。所以对应的角色旋转功能也就是俯视方向的旋转效果。而上次讲座用的3D效果是通过纵向剖面图形成的水平视角效果图,所以旋转功能对应的就是翻转的效果。这一部分听起来有点绕,但是大家慢慢思考,想通了就能得心应手的来做这种类型的3D效果了。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟上一个示例稍微有区别的地方,从俯视图的角度看,侧面的图形是不连贯的(不是从上到下彻底连起来的),比如这个房子的正面的门和窗户。所以我们在生成3D造型的时候,需要切换造型。让我们看看代码,大家就理解了。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

首先构建这个3D房子的造型从下到上分为4个。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

**下面这个大家注意红线代表正面的红墙,而短的绿线代表了房子的门。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

而第二个造型,这个增加的白色,代表白色的窗户。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

所以说当纵向的图形发生变化时,那么就需要在刨面图上做出调整,然后我们按照顺序克隆就能得到你要的3D图形。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

我们看看代码的部分:RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

逻辑很简单,就是把每一个造型依次克隆10次,每次克隆的时候Y轴增加2,但是**后一次克隆的时候为了体现一个中国古代尖房顶的效果,先讲造型的尺寸设为了120,比房子大一圈,这样就有了房檐,然后Y轴每增加一层,就把大小缩小10个点,就形成了房顶的效果。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

大家掌握了这个技巧之后,CC哥再为大家展示一个例子,这个例子虽然不是CC哥做的,CC哥在讲的过程顺便帮原作者修正了一下代码。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

示例 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

3D小火车RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这个示例做的很棒,关键是这些造型的设计。作者做这些造型花了很多功夫,我不知道是作者自己制作的还是抄来的素材,如果是自己做的,那真是很牛B,CC哥一直认为scratch编程**重要的不是代码,而是素材的制作,看看人家的例子和CC哥上面做的例子就知道差距有多大了。所以STEAM教育里面的A是ART,艺术与科技一直都是要完美的结合才能做出**好的产品。这一点就是CC哥在观察国内Scratch的编程爱好者和国外的爱好者之间**大的差距,他们在美工和造型上花的功夫,远远多于国内的爱好者。希望小朋友们在学Scratch的时候,不要光把经历耗在算法和技巧上,也要多在ART上花功夫,这对小朋友的综合能力提升才真正有帮助。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这个火车由一个车头和三节车厢组成。程序分两个部分,第一个部分就是火车的生成。火车是四节车厢依次通过CC哥刚讲的模式生成,但是却复杂很多。光火车头一共就有31个造型,每节车厢至少也要25个造型以上。第二部分就是火车生成好之后就开始在铁轨上转圈。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

车头造型RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 

大家注意这些造型就是一个火车头的RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

一层一层的纵向刨面图。CC哥截取了RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

部分给大家展示一下。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

大家注意这些造型就是一个火车头的RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
 

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这是火车头的代码,左边是生成火车头,右边是当检测到开关是开的时候,就开始移动。(边移动,边旋转,角度每次移动旋转5度,正好造成沿着铁轨移动的效果)RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

请注意火车头的生成时每个造型克隆两次,所以一个火车头是由62层剖面图重叠构成。而火车头的侧面的造型边框变化是由剖面图的边框构成,而上方的立体效果是由于每层的剖面图都是透明背景,所以层叠起来就会显示出立体效果。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

第二节车厢的代码RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

第二节车厢的代码跟第一节没什么太大区别,画线的部分大家注意,第二节车厢画的时候,不是直接在第二节车厢的位置上开始画,而是从第一节车厢的起始位置移动到第二节车厢的位置才开始画,而且移动的过程也是分了8次,每次10步,并配合旋转。这么做的目的有两个:RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1:简便,确保每节车厢精确在一个圆形轨道上,并保持精确的距离。(否则还得自己计算第二节车厢的位置。)RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

2:每节车厢的生成次序。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这一点至关重要,大家注意到没有,在火车移动的过程中,是前后有遮挡的。位于下方的车厢会在**上面,这样才符合视角的需要。但是这个遮挡过程随着位置的不同会发生变化,比如车头在舞台下面时,会遮挡住第二节车厢,而车头在上面时,反而会被第二节车厢遮挡到。那么这是怎么做到的呢?RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 
 
 
 
 
 

3D物体之间的前后关系RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 

大家通过这个例子,可以好好了解一下角色之间的位置前后关系如何在3D效果中表现。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

Scratch描述前后关系很简单,就是在前面还是在后面,或者具体到哪一层。也就是一条命令。通常我们做2D游戏的时候,因为前后关系并不复杂,所以很好判断,也很好处理。但是3D就不同了,一个3D物体就是几十个造型堆叠而成,比如这四节车厢实际上是将近120多个刨面克隆体组成,那么角色造型的前后顺序就很关键。而在这个程序示例里面就出现了比较怪异的情况,因为所有的车厢都是在转圈,演示的效果是,**靠近下方的车厢在**前面,会挡住其他的车厢一部分,那随着转圈,不同的车厢会转到**下方,而挡到其他的车厢,那么这种交替遮挡的效果如何控制和实现呢?RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

其实角色的层次关系永远是个问题,哪个在前面哪个在后面,如果没有在程序运行过程中用命令来控制,那么你每次运行程序时,层次关系都有可能发生变化。而示例中用了大量克隆体,不大可能在程序中用命令去控制层次关系,如何实现稳定的层次关系呢?这里就有了个技巧:RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

给每一个角色用这个命令,就可以保证,所有的克隆体的层叠关系都会以生成的时间顺序来排列。**后生成的克隆体会在**上面,即使是不同角色的克隆体也都会遵循这个规则。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

看到没有,这就是如果没有使用刚才那条命令,你就会发现层叠关系出现了问题。

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

那问题来了,既然是完全按照克隆体的生成顺序来决定层叠关系,那么为什么一会车头挡住车厢,一会车厢挡住车头呢?这又是用什么来控制呢?其实这是一个视角带来的错误感觉,在车厢生成的过程中,每个刨面都是在Y轴上增加了一层,所以当车厢和车头重叠的时候,都是车顶挡住了车底的部分,在一边是A车的车顶挡住了B车的车底,在另一边是B车的车顶挡住了A车的车底。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十九讲 :俯视3D-教程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

所以在生成克隆体的时候,每个车厢都是交错生成的,大家注意上面提到的车厢的生成过程,都是从车头起始位置先通过一步一步移动到目标位置才开始克隆的,这样操作就形成了每个车厢生成的顺序。同时每个车厢在生成的时候也需要一个一个去克隆,那么就形成了交错关系。这样巧妙地设计,就形成了完美的视觉效果。(我想作者也不知道这个技巧,在作者的原始代码中,可能是希望用角度关系来判断车厢的位置,然后决定是该放前面,还是该放后面,所以放了一些没有意义的代码,都被CC哥无情地删掉了,怕误导广大学员)。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

总结RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这一讲内容不少,尤其是在层叠关系上有一定的逻辑难度,大家可以自己多试试各种情况,CC哥也是反复多次摸索才搞清楚了这个技巧和规律。RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
来源  CC哥教你编程RrK少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

跟我学Scratch第八十九讲 :俯视3D-教程

      匿名评论
    • 评论
    人参与,条评论
    少儿编程网

微信公众号

免费视频教程

先知道