G-Kamera 是什么
Gandi Kamera 是 Gandi IDE 提供的相机引擎。 它是通过在 Renderer 中直接调整投影而实现的绘制。 目前可以使用它实现各种非线性移动相机和角色。v0.2 版本中已经增加了角色不跟随相机运动,以及摄像机自动跟踪角色的功能。
它让设计一个开放世界游戏,RPG 游戏,枪战游戏 和横纵版闯关游戏变得更容易。
为什么使用 G-Kamera
1. 十分易用
过去想要实现大地图效果是建立一个 camera 的角色,然后通过这个角色反向计算所有舞台中的角色位置进行绘制的。 大地图游戏通常都是高级别 Scratcher 才能掌握的技术,现在可以直接运用 G-Kamera 来快速实现。
2. 性能高于 SC 中实现的引擎
在 Scratch 中实现的相机引擎会通过相机角色反向计算所有的角色位置,在绘制上十分影响性能。而 G-Kamera 是通过在渲染器中直接调整投影矩阵 (projection matrix) 的方式成像,所有的角色不需要重新渲染。
3. 灵活多变
通过提供的辅助函数,可以实现各种运镜效果。 可以十分轻松地实现各种非线性的移动和运镜效果。
如何使用
G-Kamera 分为 5 个部分的模块,分别为:
模块 | 功能 |
位置控制 | 控制相机的 x, y 坐标位置 |
方向控制 | 旋转相机 |
缩放控制 | 调整相机的景深,也可以理解为放大缩小 |
运动控制 | 在规定时间里,完成相机的运镜,支持非线性移动 |
角色运动控制 | 一个辅助小功能,快速地实现角色的非线性/线性移动 |
文件夹工具 | 批量处理文件夹下的所有角色 |
位置控制
控制相机的位置。注意,因为相机是和舞台区中的角色运动是一个相对运动。 因此,当让相机的中心点 x 移动 10 的时候,所有舞台区中的角色看起来会像左移动 10(感官上,是所有的角色都被移动了 -10)。
控制相机的 x 方向运动
控制相机的 y 方向运动
控制相机的综合运动
向前移动相机 * 步,会根据相机的当前旋转方向自动计算需要移动的 x 和 y。
或者你也可以直接设置相机的 x y 坐标:
得到相机的坐标
方向控制
设置相机的旋转角度,正数是顺时针,负数是逆时针。
也可以获得当前摄像机的方向:
缩放控制
分别可以直接设置缩放数值,或者增加一个数值,也可以获得当前的缩放:
运动控制
运动控制是交给插件完成一系列的镜头控制,主要是对相机的位置和景深进行调整。
注意这个方法是异步的,也就是说,执行后,会继续向下执行下面的积木,而不用等待动画结束。因此,如果你的动画时间太长了,你想随时停止相机的动画。可以调用停止相机运动的代码:
其中比较重要的是,你可以选择用不同的移动曲线来完成相机的控制。(参考后文的非线性移动曲线)
当然,你也可以让摄像机自动跟踪到一个角色的位置。并且摄像机的自动跟踪功能可以选择紧紧跟随的硬跟踪,或者带有非线性滞后感的非线性跟踪。
角色运动控制
角色运动控制是提供给肝酱的一个助手方法。使用它可以轻松地让角色也实现非线性移动。注意:这个方法和相机的其他方面不一样,它是会真实地改变角色的坐标和尺寸的。
使用时请注意:
- 此方法是同步方法,也就是说,执行完动画后才会继续执行下面的代码;
- 选择角色的部分是支持传入角色 id 的,例如,对克隆体进行运动控制,结合 Dolly 可以这样:
使用案例 1: 克隆一个角色,当角色被克隆时,让克隆体执行非线性移动,而不是本体:
使用案例 2: 克隆角色,并且为克隆体设置 key-value,在其他地方的程序查找这个对应的 key-value 克隆体,并且执行动画:
文件夹工具
文件夹工具提供了一系列批量处理角色的功能。 你可以让一组角色不受随摄像机移动而影响位置(例如游戏UI),也可以对一组角色改变同事改变坐标、改变特效、显示或者隐藏。
如何建立文件夹
目前 Gandi IDE 的当前版本在显示层面还未完成文件夹的功能。 但我们计划中会沿用 TW 的方案:通过角色名来设置。 规则为: 文件夹名//角色名
例如,你的作品中有三个角色分别叫做 启动按钮 和 暂停按钮,你希望把他们两个按钮放入文件夹。 只需要修改他们的角色名,像这样:
于是,在文件夹工具中即可找到 UI 这个文件夹:
控制文件夹下的角色
把角色分配到文件夹中有很多好处,其中最大的两个好处是:
- 可以设置整个 UI 文件夹不跟随摄像机移动
- 可以整体对一个文件夹的角色批量加特效(例如使用虚像效果来实现 UI 的淡入淡出)
详细的工具如下:
设置让整个文件夹跟随或者不跟随摄像机移动:
或者对整个文件夹改变坐标:
也可以显示或隐藏文件夹:
以及三个和角色特效相关的功能:
重要的备注:非线性移动曲线
非线性曲线主要分为三类,分别是进、出、进出。 以二次为例,曲线分别是这样的:
二次、三次、四次、五次、正弦、指数、圆形 可以理解为不同的非线性曲率。曲线分别为:
最后一类是和弹性有关的曲线,分别有 弹性、回弹、弹跳三种,曲线分别为:
最后,就是线性移动了,也就是随着时间变化,数值是匀速变化的,曲线为:
如果你有更多的反馈和意见,欢迎在下面的评论区中留言。
实践案例
案例一:大图点哪看哪
核心代码:
效果预览:
<iframe
width="100%"
height="400px"
src="https://www.ccw.site/embed?id=644b367e75c648059576e282&type=player"
title="G-Kamera 案例:大图预览 - 肖恩老师的马甲 - 共创世界(ccw.site) - Scratch、游戏、动画、漫画、小说、编程创作社区"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
scrolling="no"
></iframe>
案例二:角色非线性移动
核心代码:
效果预览:
<iframe
width="600px"
height="400px"
src="https://www.ccw.site/embed?id=644b41867482ba3f39a702d2&type=player"
title="G-Kamera 案例 2:角色非线性移动 - 肖恩老师的马甲 - 共创世界(ccw.site) - Scratch、游戏、动画、漫画、小说、编程创作社区"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
scrolling="no"
></iframe>
案例三:摄像机自动跟踪,并且 UI 不跟随摄像机移动
核心代码:
效果预览:
<iframe
width="600px"
height="400px"
src="https://www.ccw.site/embed?id=64537ef704ab6556b5b45ced&type=player"
title="G-Kamera 示例3: 固定 UI 和相机自动跟踪 - 肖恩老师的马甲 - 共创世界(ccw.site) - Scratch、游戏、动画、漫画、小说、编程创作社区"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
scrolling="no"
></iframe>
致谢
感谢来自西班牙的肝酱 _Civero_#8670 提出创作需求,以及 DT 提供的初始方案,启发了我们完成这个插件。
此插件和文档由 Shawn 创建和维护
讨论
<iframe
width="100%"
height="800px"
scrolling="no"
src="https://www.ccw.site/embed?id=dev-extensions-kamera&type=comment"
title="Gandi Kamera 评论区"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
scrolling="0"
></iframe>