Day24 ( 高级 ) 骇客任务背景特效

骇客任务背景特效

教学原文参考:骇客任务背景特效

这篇文章会介绍,如何在 Scratch 3 里使用角色绘制、变换造型、函式、盖章、重复无限次、分身...等积木,实作骇客任务的背景特效。

相关文章参考:函式分身重复角色绘制盖章变换造型

背景设定

因为骇客任务的背景底色是黑色,所以使用一个全黑的长方形当作背景。

Scratch 3 教学 - 骇客任务背景特效

角色设定

在角色编辑区,删除猫咪角色,使用绘画,绘制「数字」新角色 ( 参考:造型与绘图 )。

切换到「造型」页签,使用「文字」工具输入数字 1,定位在画布正中心,再使用「选取」工具选取文字,将文字的外框调整为绿色,粗细调整为 6。

Scratch 3 教学 - 骇客任务背景特效

使用选取工具,复制绿色边框数字,再次贴上,清除复制贴上的文字边框後,就会出现黑色文字,将黑色文字移动到正中心,就会看见「有绿色外框的黑色文字」造型 ( 如果觉得边框太细,可以自行调整粗细宽度 )。

Scratch 3 教学 - 骇客任务背景特效

使用同样的做法,建立数字 2~8 的造型。

Scratch 3 教学 - 骇客任务背景特效

完成後,再度使用绘画建立另外一个新角色,使用「方形」工具,绘制「黑底」新角色 ( 黑色色块占满整个舞台 )。

Scratch 3 教学 - 骇客任务背景特效

建立完成後,在角色区域就能看见「数字」和「黑底」两个角色。

Scratch 3 教学 - 骇客任务背景特效

积木程序原理 ( 数字 )

点击「数字」角色,加入「扩充功能」的画笔,设定点击绿旗时的动作:

  • 清除舞台所有笔迹 ( 因为会使用盖章功能 )。
  • 定位到舞台左上角 ( -235, 180 )。
  • 将图层移动到最上层,图像效果「亮度」设定为 0 ( 因为会调整亮度 )。

Scratch 3 教学 - 骇客任务背景特效

从左侧积木清单,新增一个名为「产生分身」的函式,勾选「执行完毕再更新画面」。

Scratch 3 教学 - 骇客任务背景特效

编辑点击绿旗的程序,加入隐藏积木,隐藏本尊,接着执行「产生分身」函式,产生分身的函式内容如下:

  • 加入重复 40 次积木,产生 40 个分身
  • 使用 x 改变 12 积木,让每个分身往右边移动 12 点

完成後,放入「当分身产生」积木,当分身产生时,显示分身。

Scratch 3 教学 - 骇客任务背景特效

完成後,点击绿旗,舞台上方就会出现 40 个绿色外框数字。

Scratch 3 教学 - 骇客任务背景特效

从左侧积木清单,新增一个名为「move」的函式,加入「速度」、「亮度」和「尺寸」三个参数 ( 注意,「不要勾选」执行完毕再更新画面 )。

Scratch 3 教学 - 骇客任务背景特效

编辑「move」函式内容:

  • 使用函式参数,设定尺寸和图形亮度。
  • 使用「重复...直到」积木,不断重复直到 y 座标小於 -180 ( 碰到舞台下方 )。
  • 每次重复将造型变换成下一个,并将 y 减少 10 ( 不断往下移动 )。
  • 每次重复依据速度参数进行等待
  • 重复结束後,将 y 座标设定为 180 ( 舞台上方 )。

Scratch 3 教学 - 骇客任务背景特效

修改分身产生的程序,加入「等待」积木,使用随机数作为等待时间,让分身在不同时间出现,接着使用「重复无限次」积木,不断重复执行 move 函式,使用随机数作为函式参数

Scratch 3 教学 - 骇客任务背景特效

完成後,点击绿旗,就会看见数字不断变化的往下掉落。

Scratch 3 教学 - 骇客任务背景特效

修改「move」函式内容:

  • 在重复直到积木里,加入图像效果「亮度」积木,每次重复开始时,降低亮度。
  • 降低亮度後,盖章,停笔。
  • 将亮度改回原本的亮度 ( 如此一来画面上就会显示原本的亮度,但盖章的图案却是比较暗的数字 )。

Scratch 3 教学 - 骇客任务背景特效

先将「黑底」角色勾选「不显示」。

Scratch 3 教学 - 骇客任务背景特效

点击绿旗,舞台上应该就会出现往下掉落的数字,掉落过程中会不断盖章,出现一连串的数字。

Scratch 3 教学 - 骇客任务背景特效

积木程序原理 ( 黑底 )

点击「黑底」角色,编辑点击绿旗的动作:

  • 定位到舞台中心 (0, 0)。
  • 显示黑底,设定图像效果「幻影」为 95 ( 接近透明 )。
  • 使用重复无限次积木,每次重复时盖章,并等待 0.05 秒,再次进行重复。

当「黑底」角色不断重复的盖章,会不断覆盖「数字」角色的盖章,产生慢慢消失的效果

Scratch 3 教学 - 骇客任务背景特效

加入 THE MATRIX 标题

前往角色面板,使用「绘画」工具,加入一个名为「标题」的角色,使用和数字角色同样的做法,做出一个「白底绿色外框」的 THE MATRIX 文字

Scratch 3 教学 - 骇客任务背景特效

设定点击绿旗时,定位在舞台中心 (0, 0)。

Scratch 3 教学 - 骇客任务背景特效

完成效果

完成後,点击绿旗,就能看到骇客任务 THE MATRIX 的背景效果。

Scratch 3 教学 - 骇客任务背景特效

范例解答

范例解答:骇客任务背景特效

关於我

大家好,我是 OXXO,是个即将迈入中年的斜杠青年,如果对我有点兴趣(笑,可以与我联系,一起来做点有玩又有创意的东西吧!


<<:  Day 19 资料宝石:RDS是什麽?RDS vs EC2 (+db) 方案比较

>>:  Day12不可以坏坏!vue.js判断是否session

[Day21] Flutter - Presentation AutoRouter(part5)

前言 Hi, 我是鱼板伯爵今天要在我们的专案里面加入场景的路由,这样可以方便管理我们每个场景,教学内...

前端工程学习日记第22天

跟字型相关的CSS设定 font-family 指定使用的字体,可以设定多个,让浏览器依照排序使用 ...

【Day7】人算不如天算的运算式

这个部分算是JavaScript比较难缠的部分,不是难以理解,而是因为比较冗杂,稍稍心浮气躁,就没...

Day3-自制网站卷轴(上)_CSS就能做得到

这次要介绍如何「自制假卷轴」 前言// 大学期间有一次网页程序课程的作业需要仿制一个网站 该网站的左...

[ 卡卡 DAY 15 ] - React Native 页面导览 Navigation (下)

接下来要在页面上按下按钮跳页 以及按了左边 header icon 回上一页 正所谓有去有回才不会...