2-1 优化细节
上一课的工程文件
游戏待优化点
首先我们先来寻找一下上一节课有细节没处理好的地方~
- 我们可以发现彩豆碰到贪吃蛇之后是瞬间消失的 而没有一个将彩豆吸进嘴巴的动画
- 有的时候如果电脑卡顿就会导致贪吃蛇的身体断断续续
- 摄像机的跟随非常生硬不够丝滑
- 现在游戏内没有音乐~ 让我们来逐步添加！
好! 接下来我们将这三点问题逐一进行优化~
彩豆动画
第一步肯定是打开上一课的项目文件啦~
然后我们来创建一个新的角色用于制作吃东西的动画
创建一个新的角色 取名为“彩豆动画”
然后我们来到彩豆角色将这个造型拖进新的角色里面
然后我们前往彩豆动画角色
删除角色默认自带的造型
然后我们切换到彩豆的造型
我们把外面这个透明层删除一下~
就像这样！
删除之后让我们来编写一下创建动画的代码
我们先回到彩豆角色内
让我们从多莉中拖出一个新的积木~
然后将克隆目标改为 彩豆动画，那么这个时候怎么让这个动画知道我们想创建什么动画呢
这个时候我们就要来添加一个全新的扩展了！
没错！为了我们更好的创建动画的参数我们来添加一个处理json的扩展
让我们将设置json的积木拖出来
可以看到成功的创建了一个值出来
那么这时候就有的同学该问了 “酷可酷可！这个json是什么东西啊”
你先别着急，让我慢慢来跟你讲解~
Json小科普
JSON（JavaScript Object Notation）是一种优雅而简洁的数据交换格式。它以易读易写的文本形式表示数据，并且容易解析和生成。JSON常用于不同程序之间的数据传输和存储。JSON的结构非常简单，由键值对组成。键是字符串，值可以是字符串、数字、布尔值、数组、对象或null。键和值之间用冒号(:)分隔，键值对之间用逗号(,)分隔，整个JSON对象用花括号({})包围。
一个简单的JSON示例：
{
"playerName": "Alice",
"level": 5,
"isOnline": true,
"inventory": ["钻石剑", "护盾", "力量药水"],
"position": {
"x": 10,
"y": 20,
"z": 5
}
}
在这个示例中，我们有一个游戏玩家的JSON对象。它包括玩家的名称、等级、在线状态、物品清单和位置等属性。JSON的简洁和灵活性使得它非常适合用于游戏中的数据传输和存储。游戏服务器可以使用JSON来传输玩家的状态、道具信息和位置坐标等数据。客户端程序可以解析JSON数据以更新游戏界面并呈现相应的玩家信息。
通过使用JSON，游戏开发人员可以轻松地在不同的游戏组件之间传递数据，例如玩家信息、任务状态和游戏设置等。
总而言之，JSON在游戏开发中扮演着重要的角色，它是一种简单、灵活且易于解析的数据交换格式，用于在游戏系统中传输和存储数据。
好了! 介绍完json之后我们就该利用他去实现我们的动画了~
首先第一步 让我们先在json中创建一个ID 用来辨识动画是谁创建的
诶 我们会惊奇的发现为什么这样设置Json会报错呢？
原因其实很简单 因为Json不知道你要设置的这个值是什么，
Json：他是数字吗？显然不是，他是字符串吗 emm 但是他显然没有" "用来表示他是个字符串
那么这个时候原因就找到了 也就是我们没有 《 " 》 在两侧告诉Json他是一个字符串
让我们来手动添加一下
诶！这个ID就这么被创建出来了，
这里有一点需要注意 这个 " " 必须是英文的标点符号，中文的“”他是不认识~
如果你不方便打出英文的""那么你可以使用这个扩展自带的积木来自动将文字转为json字符串
然后我们直接拖进设置json里面就可以了
不过这种一般是适用于不固定参数来转换字符串的积木 平时我们还是直接写""会更简短一些
接下来让我们继续来编写参数~
我们将他组合起来
然后我们拖进克隆的参数里面
然后我们将key的名称改为data（数据）
就像这样！
然后我们来编写动画的代码
按照惯例 刚开始先隐藏
然后当然就是当克隆体启动时啦
首先我们从多莉里面拖出获取data参数的值
然后我们使用json扩展中的获取成员积木以及将json字符串转为scratch字符串（就是去掉""）获取ID
让我们来编写一个判断~
如果是彩豆的话 那么首先我们移动到传输的位置
移动完成之后肯定是要将颜色也设置为同样的颜色
就像这样！
显示角色肯定也不能忘
OK！我们将克隆体全部初始化完成之后我们就要来做吸入嘴里的动画了
这个嘛，上一课经过的非线性原来还记得不？，没错！我们这次又要来做非线性了
但是不是非线性旋转 而是非线性移动
非线性移动
首先 我们先创建一个自定义积木
名称就叫非线性移动~ 参数有 目标x 目标y 以及速度
创建完成后我们就来编写非线性的代码了
其实非常的简单
就像这样~ 没错！这样我们的非线性移动的模块就制作好了
接下来我们只需要让克隆体朝着玩家移动就可以了
非线性移动到 贪吃蛇的x&y 并且速度为5
当然我们仅移动一次肯定是不够的，所以我们来套一个循环
就像这样！，然后我们循环结束之后当然就可以将克隆体删除掉了
好了 大功告成！让我们看看效果
好！我们可以发现彩豆被吃的瞬间成功创建了动画代替了自己飞进了贪吃蛇的身体
但是发现了一个问题，就是这个彩豆他好像有点飞过头了，我们来调整一下让他不会那么飞过头
其实这个问题很简单 只需要将目标点靠前一点就可以了
但是我们怎么能得到到这个坐标面向贪吃蛇方向走xx步的xy坐标呢？
这个时候就要用到我们小学二年级（bushi）就学过的三角函数啦~
我们使用sin和cos 贪吃蛇的方向 就可以得到面朝这个方向所增加的坐标
想必现在有很多人的表情都是
不要慌张~，让我来介绍一下这其中的原理
三角函数
三角函数是数学中常用的函数之一，它们与三角形的角度和边长之间存在着密切的关系。其中，正弦函数（sin）和余弦函数（cos）是最常见的三角函数之一。
正弦函数（sin）用于计算一个角度对应的三角形的斜边与其中一个直角边的比值。对于一个给定的角度，sin函数的值可以帮助我们确定在该角度方向上的垂直分量。
余弦函数（cos）用于计算一个角度对应的三角形的邻边与其中一个直角边的比值。对于一个给定的角度，cos函数的值可以帮助我们确定在该角度方向上的水平分量。
通过使用sin和cos函数，我们可以计算出在某个角度方向上的水平和垂直分量的大小。以二维平面为例，如果我们想要向某个方向（例如，角度为θ）移动一个单位距离，我们可以使用sin(θ)作为垂直分量，cos(θ)作为水平分量。
举个例子，假设我们要向北方移动，即角度为90度。根据三角函数的定义，sin(90°)等于1，cos(90°)等于0。
因此，向北方移动一个单位距离时，垂直分量（即Y轴方向）增加1，而水平分量（即X轴方向）不变。 总之，通过使用三角函数的sin和cos，我们可以计算出在给定角度方向上移动时，X和Y轴的增量。
这种方法在计算机图形学、物理模拟和导航等领域中被广泛应用。
了解完三角函数之后我们就大致可以明白原理了~
让我们继续来开始制作
我们分别将X&Y加一个sin con（贪吃蛇方向）然后再乘以一个50 那么这个50就相当于是scratch中的移动50步~
然后我们再来看一下效果
好！可以看到彩豆非常完美的飞到了贪吃蛇的嘴附近，然后我们将彩豆动画的图层移动到下面就搞定了
就像这样！
十分甚至九分的丝滑啊（）
如果你觉得吸取范围太大或者太小你都可以直接调整彩豆造型的隐藏层大小~
越大吸取范围越大 反之就是越小
很好！这样我们的彩豆动画就差不多大功告成了，不过在优化下一个细节之前我们先来修复一个小问题~
我们可以发现其实我们就刚开始克隆了1k个彩豆，但是我们吃掉彩豆之后并没有让他重新出现
所以现在其实彩豆的数量会越来越小
我们先创建一个自定义积木 方便我们后期维护代码
然后我们将克隆体初始化的代码放到自定义积木中
然后我们在克隆体启动时直接调用这个积木
我们在彩豆被吃掉之后也放一个初始化的自定义积木
这也就相当于让这个彩豆重获新生！（有点中二）
然后我们直接将删除克隆体的代码删掉就可以了
好！现在我们的彩豆就会一直稳定保持初始的数量不会减少了~
然后让我们来解决下后面两个小问题~
解决贪吃蛇身体分离问题
首先我们来分析一下
如果是卡顿导致的克隆不及时，那么我们是不是只需要在卡顿的时候减小克隆间隔的时间那是不是就可以了？
诶！你真猜对了
那么如何检测运行是否卡顿呢？这个时候就要用到FPS这个概念了
有的同学会问了 "FPS" 是什么？
FPS小科普
FPS（Frames Per Second）是计算机图像处理中用来衡量图像帧率的单位。它表示每秒显示的图像帧数，是衡量图像流畅度和动画效果的重要指标。在计算机图像处理中，每一帧都是静止图像的连续变化，通过快速连续地显示一系列图像帧，我们感知到的是动态的运动效果。FPS描述了每秒显示的图像帧数，也就是屏幕上连续显示的静止图像的数量。
较高的FPS值通常表示图像变化更加平滑、流畅。例如，电影通常以每秒24帧（24 FPS）的速度播放，给人一种连贯的运动感。而在电子游戏中，常见的目标是达到60帧（60 FPS）或更高的帧率，以提供更快的响应和更真实的游戏体验。
不过在Scratch中，帧数限制通常都是 30 帧~
FPS受到许多因素的影响，包括图形处理器（GPU）的性能、计算机的处理能力、图像分辨率和复杂度等。较高的图像分辨率和复杂度会增加计算机处理图像的负担，可能导致较低的帧率。因此，为了获得更高的FPS，通常需要更强大的硬件配置或者优化图像处理算法。
对于游戏玩家和电影制作人员来说，FPS是一个重要的概念。游戏玩家通常追求更高的FPS以获得更流畅、逼真的游戏体验。而电影制作人员在制作动画和特效时，也需要考虑帧率的选择，以达到他们想要的视觉效果。
总结，FPS作为衡量图像处理流畅度的指标，在计算机图像领域具有重要意义，它影响着我们对图像流动性和视觉感知的体验。
hhh 是不是感觉学习编程顺带的了解到了非常多的新知识~
诶 不过我们这次并不需要用到Fps这个知识点，诶虚晃一枪（doge）
我们先回到贪吃蛇角色
这个时候我们干什么呢？
其实我们只需要将等待时间改为 0秒 就可以了，诶为什么这么神奇呢
因为在原版Scratch等待积木其实是不太稳定的 等待时长有的时候会有浮动，但是我们输入0秒的时候
Scratch就会强制等待一帧，这个一帧是非常稳定的
那么我们现在来看看效果~
丝滑 实在是太丝滑了
那么我们就来制作下一个~
摄像机跟随僵硬
这个同样很好解决
还记得我们之前说过的非线性吗？没错！我们这次还要用到~
我们先来到摄像机角色
我们将 X Y 增加积木拖出来，然后我们按照之前的非线性逻辑也在摄像机上面实现一下
就像这样！
然后让我们来看看效果~
暂时无法在飞书文档外展示此内容
这不一下就丝滑起来了
不过我们会发现一个小问题，就是头其实在移动的时候会有轻微的抖动
这个是为什么呢？，这个其实是在原版Scratch造型在舞台上显示的坐标总是会四舍五入 就导致的精度不够
那么这个应该怎么来解决呢？这个时候就又要请出我们大名鼎鼎的费米扩展了~
我们需要用到的是费米扩展中的启用高清渲染积木
不过这个高清渲染究竟是什么呢？这个其实就相当于是TurboWarp中的高清画笔功能
那么让我们来看一眼这个功能的介绍
可以看得到 这个功能可以避免Scratch中的坐标精度丢失问题
那不就是正好符合我们的要求
高清渲染，启动！
让我们看看对比效果
启用前
启用后
丝滑无比！
音乐&音效
这里的音乐和音效各位都可以自由发挥~
或者是直接使用本节课素材包内的音效！
我们从云背包或者本地上传一个音乐到背景内
然后我们当开始游戏时我们就重复播放背景音乐并且等待播放完毕就可以了
同样的 我们到贪吃蛇角色中上传一个贪吃蛇趋势音效
然后我们在检测碰到地图边缘的判断中将播放音效拖进去。
让我们来欣赏一下~
这小味挠一下就上来了！
<iframe
width="100%"
height="800px"
scrolling="no"
src="https://www.ccw.site/embed?id=snake/mckuke/Lec2/01&type=comment"
title="贪吃蛇中级教程-第二课第一节"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
scrolling="0"
></iframe>