Scratch第61讲:赛车2-CC哥版

admin 发表于 2019-09-14 13:31


想免费学编程,就请点击上面的蓝字:跟我学Scratch编程,关注CC哥。

今天是中秋节,祝所有关注CC哥的朋友们阖家欢乐,中秋团圆。https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png CC哥非常喜欢Scratch的原因就是大家可以忽略其他编程工具那么多编程的格式,和记住各种函数以及参数,而把注意力放在创造和思考,以及找出解决问题的方法上。即使CC哥,在用scratch编程的过程中,依然会有满满的快乐和成就感。

我们今天继续赛车这个小程序,主要包括几个方面的内容:

1:在赛道上加上其他车辆。

2:让背景草地一起动起来。

3:赛车道可以左右转向。

先让我们看一下视频的效果:

是不是比上一讲的赛车程序更生动了,让我们一个一个来看这三功能是怎么实现的。

背景滚动

之前我们有学过背景的滚动,但是这次不一样,我们分析细节:

1:我们需要背景符合3D视觉效果,也就是绿色的背景条由上到下,依次变粗,这样才符合视觉的深度效果。

2:赛车往前开,意味着绿色的背景条要向下滚动,而且还要符合第一条,越往下越粗。

如果单独实现其中一条很容易,但是如果两条都要同时实现该怎么做呢?

https://cdn.china-scratch.com/timg/190914/13312955R-1.jpg

一般出现在我们脑子里的通常是两种方法:

1:克隆体,在远处生成浅色绿条或深色绿条的克隆体,然后生成后往下移动,移动的过程中,可以通过切换造型来实现绿条由细变粗的过程。

2:第二种方法就是用画笔来画,就跟动画片一样,把每一帧画出来,也可以形成移动效果。

CC哥用的就是第二种方法,第一步就是先画一个静态的背景,然后再考虑怎么动起来。

https://cdn.china-scratch.com/timg/190914/133129BU-2.jpg

大家看一下这个慢动作就知道怎么画出来的吧https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png

https://cdn.china-scratch.com/timg/190914/1331303636-4.jpg

程序比较简单,就是一道一道从左到右来画,第一条只有1的宽度,第二条就换另一个颜色,同时增加宽度,再画一条。(这种颜色切换可以用奇偶数来判断)CC哥把每次宽度增加的值为3,那么判断每个绿条宽度的奇偶性就可以实现颜色切换。

但是画完之后如何让背景动起来呢?这是个技巧,大家是否记得我们过节的时候看彩灯秀的时候,会感觉彩灯在在不断的移动,其实不是彩灯真实在移动,而是通过彩灯的交替闪烁,让你有了彩灯移动的视觉效果,那我们也可以这样做。

https://cdn.china-scratch.com/timg/190914/1331302X3-5.jpg

这段程序就是不断地画背景的程序,每循环一次就是把整个背景重新画一次,(用自制积木,运行时不刷新屏幕)而每次画的时候确保与上一帧图画相比,把深浅绿条的颜色对调一下。

https://cdn.china-scratch.com/timg/190914/133130A14-6.jpg

这个判断条件就即实现了对每一帧里,每个绿条的颜色切换,同时也保证了下一帧里,每个绿条的颜色跟上一帧同样位置的绿条的颜色对调。这样就形成了背景的运动效果,是不是看上去很像绿条在往下移动?https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png

是不是有点绕,再好好想想。https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png

https://cdn.china-scratch.com/timg/190914/1331316205-9.jpg

这个是每帧图画的时间间隔,我们用了1/speed来计算这个时间间隔,也就是当速度越快时,每帧图画切换的越快,也就是深浅绿条颜色切换的越快,那么在视觉上就造成了速度越快,背景滚动越快的效果。

如果想免费获得CC哥的讲座中的程序代码以及游戏素材,可以通过扫描二维码关注《跟我学Scratch编程》,然后点击获取代码即可。

赛道的左右转效果

我们怎么体现赛道视觉左右转效果呢?

https://cdn.china-scratch.com/timg/190914/1331312W9-10.jpg

第一:下面不动,远端会出现偏移,向右偏代表右转,左偏代表左转。

第二:路的左右边要做出弧形效果。

做到了这两点,是不是就完美的实现了转向的视觉效果?https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png

因为要做弧形的变化,大家就不要想别的招了,就只能用画笔来做了。那怎么画出来呢?

从A点到B点画条直线很简单,画条弧线就不简单了。

上一讲CC哥讲了如何画路面,但是在上一讲里面路边的白线CC哥是单独画的就是直接在上下两端直接画斜线的方式。但是在这里因为白线就路边线,也要随着路面转向。那么就不能用上一讲的做法。而是在画路面的时候,每画一条水平路面,同时两边各自多画一段白色的横线来代表路边。

另外路的宽度在上一讲里我们是根据路的y坐标来计算,现在除了还是用y坐标来计算路的宽度,还要同时在计算出来路的左右两边的位置上加一个偏移值才能保证路的转向效果。而且这个偏移值不是线性的变化,而是当路在最下面时候偏移值为零,而在越往上,偏移值不是线性增加,而是成指数增加,最后达到最大的偏移值,这才能体现出弧线效果。

https://cdn.china-scratch.com/timg/190914/13313121S-12.jpg

路-x”这个变量就是算每个高度对应路的宽度(半边路的宽度)

“路偏移”是在最上端的路偏移中心线的距离。

“路偏移y”是指在不同的y坐标下,路偏移中心线的距离。

https://cdn.china-scratch.com/timg/190914/1331322491-13.jpg

这是个偏移系数,当y坐标等于-180的时候,没有偏移,当坐标等于80的时候,偏移系数为1,用偏移系数的平方,就形成了弧线的偏移效果

(这几个变量名,CC哥也没有特别花心思去定义,可能会让大家看不懂,所以特意解释了一下)

https://cdn.china-scratch.com/timg/190914/1331335N0-14.jpg

这一大段就是画画的过程,每一步都是中间花蓝色路面,两边花白色路边,路边的宽度根据y坐标的升高,不断变小。数学公式是CC哥自己推导的。技巧是只要当成小学数学应用题来解,你就能推导出你想要的公式。然后注意就是每一条线画的时候,都要在路-x这里加上一个“路偏移y”进行弧线修正。

https://cdn.china-scratch.com/timg/190914/1331332314-15.jpg

这一段是做转向效果,比如我们想从偏移40转到偏移-40,也就是从右转转向左转,肯定是一步步转的,而不是一步就转过来的。所以CC哥用了这段程序来进行转向操作,这才符合真实赛车转向的实际效果。

如果想免费获得CC哥的讲座中的程序代码以及游戏素材,可以通过扫描二维码关注《跟我学Scratch编程》,然后点击获取代码即可。

分道线的变化

既然转向效果需要路偏移,那么分道线也要跟着路一起偏移才对。

https://cdn.china-scratch.com/timg/190914/1331331256-16.jpg

CC哥把路偏移的值加入到了分道线的代码里,偏移值乘以偏移系数的平台就是分道线在每个高度应该偏移的距离。

让我们看看效果:

https://cdn.china-scratch.com/timg/190914/13313434X-17.jpg

哎呀,是不是怎么看怎么别扭,问题出哪了?既然路发生了偏移,那么分道线就不仅仅是位置的偏移,还应该有角度偏移才对。

https://cdn.china-scratch.com/timg/190914/1331345642-18.jpg

CC哥把这一句加上,每一个克隆体随着位置的变化,角度也应该随着路的偏移进行调整。这个公式大家自己好好理解一下。https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png

https://cdn.china-scratch.com/timg/190914/1331354555-20.jpg

这样感觉就好多了吧。 https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png

如果想免费获得CC哥的讲座中的程序代码以及游戏素材,可以通过扫描二维码关注《跟我学Scratch编程》,然后点击获取代码即可。

其他赛车引入

之所以上一讲没有讲其他赛车的程序,主要是因为上一讲里没有考虑赛道的转向效果。

https://cdn.china-scratch.com/timg/190914/1331353522-22.jpg

这段代码是表示每隔一个随机的时间都会从下面冲出一辆其他赛车。出现的位置也是随机的,车速也是有快有慢。

https://cdn.china-scratch.com/timg/190914/1331351Z5-23.jpg

这段代码比较复杂,不知道大家放大后看不看得清:

这里面有几个关键因素:

1:方向校准,主要是不论车辆从下部什么位置出现,都应该在上部消失在路的尽头。所以实际上车在向上移动的过程中,水平方向也会发生自然的位移。而一共移动的距离与265(路长)比值就是“方向校准”这个变量,起始位置离中心线的距离减去路偏移的距离。

https://cdn.china-scratch.com/timg/190914/13313AQ7-24.jpg

2:车辆路偏移y,这个变量是车辆所在路的某个位置上,路偏移偏移中心线的距离。

https://cdn.china-scratch.com/timg/190914/1331361046-25.jpg

车辆随着y轴的变化,一方面要进行x轴的修正,同时也要进行车辆大小的修正。(空的地方原来CC哥还放了车辆“漂移”的变量,不过为了简化就暂时拿掉了)

https://cdn.china-scratch.com/timg/190914/1331362112-26.jpg

这个很长的判断主要是一旦出现车辆要跑到赛道外部的时候,能被拉回来。(路边界的计算要把路偏移算进去)

https://cdn.china-scratch.com/timg/190914/13313IW1-27.jpg

另外如果出现撞车,那么就通知爆炸角色,执行撞车效果。撞车的爆炸效果我这里就不讲了,大家自己看代码就可以。

另外主赛车也可以考虑路偏移的情况。这里CC哥就不讲了。

这个程序看似不复杂,但是很多细节在我们编程的时候要处理,比如景深效果导致我们所有角色运动方式的变化,路的偏移对所有角色的影响等,都需要考虑如何用一些公式去计算。而这些公式的如何得出来,就需要我们自己去推导了,熟能生巧。

后记,小编朋友公司研发了一个游戏化的少儿编程在线课程(5-12岁),游戏化教学结合scratch(一款在线少儿编程工具,类似乐高的积木拼搭),我家娃娃学了几次课,非常喜欢(超预期),16次课才200多块钱,对锻炼孩子的思维能力和动手动力很有帮助。

感兴趣的朋友可以扫描二维码,关注一下,或微信搜索“大耳猴少儿编程”

https://www.china-scratch.com/Uploads/Editor/2018-04-22/5adca08bdc212.jpg