用Scratch制作烟花

2019-11-05 14:05

授权转载 | 千里马快乐编程 qianlima_biancheng

原文作者 | CG

原文标题 | 用Scratch制作烟花

标签:难度中级;动画;变量;随机数;克隆;轨迹;画笔;烟花;


今天我们来介绍一些烟花的知识,并用Scratch编程制作烟花动画。先来看看动画效果吧:

上面的烟花动画其实是由四种不同类型的烟花特效组成的。它们可是全部都是通过画笔实时计算出来的哟。

1.     知识点

本文介绍的烟花制作方法使用了下面的知识点:

1.1 重力加速度(抛物线)

烟花是是由火药和金属粉末组成的,五彩缤纷的颜色其实是燃烧时不同的金属离子(如镁、铝等)与氧分子发生化学反应而发出的独特颜色。所以烟花是有重量的。有重量的物体在大气中运动都会受到地球引力的作用,呈现出抛物线轨迹。所以要制作好烟花效果首先要知道如何通过编程描述抛物线。简单来说就是:

  • 垂直方向下落速度会越来越快(有一个面向地心的固定的加速度)

  • 水平方向速度不变

关于抛物线运动的更多知识可参考千里马的这篇文章:从"愤怒的小鸟"学习用编程展示物理规律

1.2 渐隐效果(彗星效果)

 

这是做烟花轨迹的一个窍门和重点。我们希望看到的烟花线条轨迹是头部较亮,尾部较暗,呈渐隐效果,如下图:

 https://cdn.china-scratch.com/timg/191107/14053T448-0.jpg

这种效果的实现方法是:

-       制作一个和屏幕一样大的全黑角色:

https://cdn.china-scratch.com/timg/191107/14053Rc9-1.jpg

-       把该角色的虚像效果设成90(就是说它的透明度变成10%)

-       然后不停地使用图章让它覆盖屏幕:

https://cdn.china-scratch.com/timg/191107/1405391502-2.jpg

这种实现方法的原理如下图所示:

https://cdn.china-scratch.com/timg/191107/1405395254-3.jpg

  • 画笔画出来的轨迹实际上是由一系列点组成的。如果画笔是从左向右运动的,则左边的点比右边的点先在舞台上出现。上图五个橙色方格代表了画笔的轨迹点,1最先出现,5最晚出现。

  • 上面程序里虚像效果90的黑色角色相当于上图中标记为A的黑色方块。两个A叠起来就形成B的效果(B比A稍微黑一点),三个A叠起来就形成C,四个A叠起来就形成全黑的D。这个叠起来的动作就相当于程序里的“图章”。

  • 把橙色方格和黑色方块叠起来就是最终效果。没有被黑色方块盖住的5号方格就是原来的颜色,4-3-2-1依次变暗,1或者更早之前出现的方格就完全看不到了。

动图效果如下: 

https://cdn.china-scratch.com/timg/191107/1405394317-4.jpg

1.3 3D效果

 

有立体感的3D烟花更加好看,制作3D效果需要了解一定的3D知识。基本的3D知识请参考千里马这一篇文章:用Scratch做一个3D引擎

当然3D制作有点小复杂,也并不是制作烟花必需的。

好,下面可以开始制作了。

2.     制作方法

 

2.0 辅助角色

 

在开始画烟花轨迹之前,我们需要先建立两个角色:一个是上面1.2章节讲过的用来实现渐隐效果的黑色角色;另一个是声音角色,用来集中控制声音的播放。这样在其它角色里只需要广播播放某种声音的消息,这个声音角色就可以播放相对应的声音。

https://cdn.china-scratch.com/timg/191107/1405395413-5.jpg

 

https://cdn.china-scratch.com/timg/191107/140539B45-6.jpg

声音效果可以极大地增强现实感,所以请务必给动画配上声音。

 

2.1 烟花发射

首先,我们做出烟花发射上升的效果,其实就是用画笔画一条有重力加速度的从下往上升的曲线,再配上音效。

https://cdn.china-scratch.com/timg/191107/1405406434-7.jpg

 

效果如下:

https://cdn.china-scratch.com/timg/191107/1405394317-4.jpg

2.2 爆炸散开

-       接着,我们让烟花在上升到最高点时爆炸散开(vy=0时升到最高点,之后速度向下而下降)。散开其实就是使用克隆来产生很多的子烟花轨迹。

https://cdn.china-scratch.com/timg/191107/1405405055-9.jpg

-       子烟花轨迹应该比上升时的轨迹要小。

-       为了使爆开后的各条烟花轨迹呈圆形,我们控制水平方向和垂直方向的速度,使得vx=2*cosA和vy=2*sinA(A是随机变化的角度值,代表速度的方向;2代表速度的值。这样使得每条子烟花的速度方向发生变化,但速度的值不变,形成圆形)。原理如下图所示:

https://cdn.china-scratch.com/timg/191107/1405402648-10.jpg

 克隆体的程序:

https://cdn.china-scratch.com/timg/191107/1405406017-11.jpg

第一种烟花效果做好了:

https://cdn.china-scratch.com/timg/191107/1405406210-12.jpg

2.3 闪闪的烟花

接下来我们做下面这种闪闪的烟花效果:

https://cdn.china-scratch.com/timg/191107/14054152b-13.jpg

-       首先是用克隆的方法画出很多条较细的烟花抛物线轨迹。同样一束烟花的出发点应该一样。通过改变它们的初始水平速度和垂直速度、以及线条颜色和大小,形成不同的烟花线条: 

https://cdn.china-scratch.com/timg/191107/1405414Y4-14.jpg

https://cdn.china-scratch.com/timg/191107/14054243I-15.jpg

效果: 

https://cdn.china-scratch.com/timg/191107/1405424H1-16.jpg

-       接下来做闪闪的亮点效果。首先是要改变角色的造型(变成一个纯色的圆形);然后在克隆体的程序中,在烟花线条消失之前,使用图章留下圆点。由于章节1.2中提到的渐隐作用,图章留下来的圆点会一闪而过消失在黑暗中。记得改变圆点的大小和颜色哦。

https://cdn.china-scratch.com/timg/191107/14054232H-17.jpg

https://cdn.china-scratch.com/timg/191107/1405433544-18.jpg

第二种烟花效果也做好了:

https://cdn.china-scratch.com/timg/191107/14054152b-13.jpg

2.4 烟花文字

接下来做烟花文字效果: 

https://cdn.china-scratch.com/timg/191107/1405435500-20.jpg

-       首先是用造型工具创建一个文字角色

https://cdn.china-scratch.com/timg/191107/14054414P-21.jpg

-       让文字先隐藏,先做出烟花发射上升效果

https://cdn.china-scratch.com/timg/191107/1405442E7-22.jpg

https://cdn.china-scratch.com/timg/191107/14054432c-23.jpg

-       当烟花上升到最高点时(vy=0)即爆炸,然后文字出现,并使用像素化让其模糊。

-       之后文字做重力加速下落。

-       在下落过程中不停使用图章留下轨迹,并配合章节1.2中提到的渐隐作用。

-       再使用虚像使得文字逐渐消失

https://cdn.china-scratch.com/timg/191107/14054435J-24.jpg

https://cdn.china-scratch.com/timg/191107/1405445420-25.jpg

-       最后用同样方法做出其它的文字烟花,改变颜色、位置及发射时间,效果如下:

https://cdn.china-scratch.com/timg/191107/1405435500-20.jpg

2.5 3D烟花

-       制作3D烟花效果需要了解3D特效的知识,请先参考此文《用Scratch做一个3D引擎》,设置好视点、投射面、旋转角度等:

-       3D烟花和2.1-2.2节介绍的2D烟花一样,也是包括发射上升-爆炸散开的过程。首先也是要先发射一条在y方向做重力加速运动的烟花

https://cdn.china-scratch.com/timg/191107/14054541D-27.jpg

https://cdn.china-scratch.com/timg/191107/1405451514-28.jpg

-       烟花上升到最高点后就爆炸散开:

https://cdn.china-scratch.com/timg/191107/14054641V-29.jpg

-       为了使爆开后的各条烟花轨迹呈一个球体,我们控制x,y,z方向的速度,使得vy=2*sinA, vx=2*cosA*cosB,vz=2*cosA*sinB(A、B是随机变化的角度值,它们控制速度的方向;2代表速度的值。这样使得每条子烟花的速度方向发生变化,但速度的值不变,形成球体)。原理如下图所示:

https://cdn.china-scratch.com/timg/191107/1405464N2-30.jpg

克隆体程序:

https://cdn.china-scratch.com/timg/191107/1405462952-31.jpg

3D烟花的效果:

https://cdn.china-scratch.com/timg/191107/14054K528-32.jpg

最后我们把各种不同的烟花组合在一起,就是这个效果:

原程序请参考:

https://scratch.mit.edu/projects/284146235/

3.     小结

除了上面提到的知识点,做好烟花效果的一个重要窍门是:多使用随机数来改变时间、大小、颜色、速度等各种变量,做出各种不同的效果。烟花之所以吸引人,正是因为它们没有固定的模式,变幻莫测。同学们请尽情发挥自己的想象力,用编程做出更多更炫的烟花效果。

--end--

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

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

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

声明:本文章由爬虫自动处理和转载作为教育分享用途,原作者可通过邮件及时和我们联系处理:freemanzk@qq.com