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

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?

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

简介最近CC哥更的很慢,因为熟悉的游戏和技巧都做得差不多了,CC哥又不想给大家水课程,所以只有慢慢思考了,直到思考到比较有意思或者有趣的主题,CC哥才会提起劲来给大家来做课程,所以请大家原谅啦。3D这一块一直是Scratch的弱项,当然有些第三方的Scratch软件,增加了3D的模块进来,可以直接进行3D的游戏创作,但是CC哥认为这种伪教学,同学们学不到任何东西。我们就从3D的最基础来一起研究。

前言2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

**近CC哥更的很慢,因为熟悉的游戏和技巧都做得差不多了,CC哥又不想给大家水课程,所以只有慢慢思考了,直到思考到比较有意思或者有趣的主题,CC哥才会提起劲来给大家来做课程,所以请大家原谅啦。3D这一块一直是Scratch的弱项,当然有些第三方的Scratch软件,增加了3D的模块进来,可以直接进行3D的游戏创作,但是CC哥认为这种伪教学,同学们学不到任何东西。我们就从3D的**基础来一起研究。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

 
 

3D的形成2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 

其实3D就是一个视角的概念,如果只有x和y轴,就是2D的平面,如果我们再增加一个Z轴,那么就形成了3D的视角:2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

大家看到没,其实3D就是一个视角的概念,明明上图是3条射线,相互夹角120°,但是大家却能想象到一个三维空间。所以我们要做的其实就是在2维的平面上,通过构图,让大家在看的时候形成一个3维空间的想象。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

就像大家经常看到的很多3D绘画展一样,其实都是利用了光影和构图等绘画技巧,欺骗了观众,让大家误以为是个真实的3D空间。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

 
 

3D示例2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 

我们先从一个简单的正方体开始尝试,首先我们建立一个2维的正方形,并把它移动屏幕正中。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

然后我们再增加一个Z轴,来将它变成一个立方体。怎么做呢?这就是今天这一讲的关键技巧,**简单的方法实现2D变3D!2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

是不是变成了3D的造型?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

代码很简单,只要用克隆就好了,在每一次克隆的时候,都让图片在45度角方向进行移动。然后视觉效果就变成了一个立方体。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

注意2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

Z轴的图形实际上是2D图形轮廓的线条堆叠组成,所以轮廓的颜色就造成了Z轴方向上的图形颜色。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

因为正方形轮廓的颜色是深绿色,所以大家看到正方体侧面的颜色也变成了深绿色。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

下面有意思的事情来了,让我们看一下,这个3D图形的旋转效果:2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

为了保证这些克隆体同时开始旋转,所以CC哥在这里用了消息命令。等3D图形生成后,再用消息通知所有的克隆体一起转动,就形成了3D旋转的效果。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

有没有想通这个3D旋转的效果是如何产生的?其实这也是通过构图和视角来欺骗大脑的过程。当所有的克隆体开始旋转时,因为每一个克隆体都有一个错位,那么克隆体的4条边堆叠而成的侧面图形,就会分别出现在我们的视野里,让大脑想象成了一个3D的图形在旋转。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这个图就能让大家非常清楚的理解,CC哥把正方形的4条边换成了不同颜色的直线来代替,也就造成了不同的侧面颜色的不同。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

 
 

3D动画示例2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

 

大家理解了CC哥今天讲的**简单的3D效果生成了吧?那下面CC哥展示一个3D动画的示例给大家,这是CC哥用Scratch的自带的素材生成的。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

是不是挺有意思,让大家看看这几个汽车的造型:2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跑车:2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

卡车:2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

看到没,都是车子侧面的刨面图,然后CC哥用了上面的方法,把车子变成了3D样式的汽车。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

注意 2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

上面讲了,3D的侧面是由造型的轮廓决定的,所以CC哥在汽车的轮廓上做了改动,也就出现了汽车侧面的图形,大家可以自己体会一下。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

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

另外翻车的效果就是利用了刚才讲的旋转的效果,让翻车变得很真实,连车底都翻转过来给大家看到。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

让我们简单过一下代码:2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

 

分道线2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这个分道线就是用了克隆的技巧,中间造型切换的部分是为了让分道线能够完全移除和移入舞台。(如果不理解可以看CC哥之前的讲座)2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

跑车2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
 2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这部分代码是用来生成跑车的,用了自制积木是为了让跑车的生成瞬间完成。(将自制积木的不刷新屏幕选项选中)2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这部分代码是让跑车移动的,不同的跑车,车速不同。这里面所有的沟通都是用消息来完成的。所以在消息发布的时候,你要考虑是全部克隆体都执行消息还是部分克隆体执行。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

程序的逻辑是,当跑车撞到岩石,就会翻车,这里对岩石的碰撞我们没有用碰撞检测,而是用了对跑车位置的判断。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

至于广播翻车的消息,我们只希望本体发布一次消息就OK了,不需要每个克隆体都发布一次翻车的消息。所以在发布翻车消息的时候做了一个判断。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

对于翻车的效果,不同的跑车车速不同,所以翻车的时候效果也不同,车速慢的跑车翻车的动静小点,车速快的跑车翻车的动静就大。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

翻车的时候y轴的效果是个重力效果,所以在这里用了重力技巧。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

翻车完毕后发布消息让新的跑车出现。因为马上接了个删除克隆体的命令,所以真正执行的这条消息的就只有本体。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

 

卡车2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

卡车部分CC哥没有做翻车动画,就是简单的行进过程。但是因为卡车开得很慢,所以在进入舞台和离开舞台,CC哥都用了完全移出舞台的技巧。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

卡车有三种造型,CC哥在修改轮廓部分花的功夫**多。程序倒是很简单。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

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

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

今天的讲座,编程很简单,关键是思维的突破,让大家理解2D和3D之间的关系,3D视角是如何在2D上呈现出来的。今天讲的只是一个从水平方向看过去的视角,所以是用角色的侧面视图来构建3D效果。下一讲,我们讲通过俯视的视角来进行3D构图,然后通过移动来让大家看到俯视视角下,角色移动的效果。2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台
来源  CC哥教你编程2VX少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

跟我学Scratch第八十八讲 :2D 变 3D,能猜到如何实现吗?

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

微信公众号

免费视频教程

先知道