Logo
    打开 Gandi IDE
    Gandi IDE 🧑‍💻 开发者中心 @ 共创世界

    Designed by 2ndR with love @ Chengdu

    Tencent QQGitHub
    G-Kamera
    G-Kamera

    G-Kamera

    📚 返回主页面
    ‣
    更多链接

    其他扩展文档

    如何使用 Gandi 多莉实现检测到底碰到了哪个克隆体
    Simple MMO
    媒体助手 Media Utils 文档
    Archive Code
    Arkos Code Snippets
    Regex VI
    4D Pocket
    Data Utils
    Pure Math
    A* 奥德赛
    社区连接 Kontakt
    Featured
    Sugar
    Canvas
    Physics Engine
    Animate Text 艺术字 2.0
    Terminal
    🎮
    移动端配置按键
    G-Kamera
    AI Hub
    Quake 雷神
    Fermi

    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, y 和尺寸。

    位置控制

    控制相机的位置。注意,因为相机是和舞台区中的角色运动是一个相对运动。 因此,当让相机的中心点 x 移动 10 的时候,所有舞台区中的角色看起来会像左移动 10(感官上,是所有的角色都被移动了 -10)。

    控制相机的 x 方向运动

    image
    image

    控制相机的 y 方向运动

    image
    image

    控制相机的综合运动

    向前移动相机 * 步,会根据相机的当前旋转方向自动计算需要移动的 x 和 y。

    image

    或者你也可以直接设置相机的 x y 坐标:

    image

    得到相机的坐标

    image
    image

    方向控制

    设置相机的旋转角度,正数是顺时针,负数是逆时针。

    image
    image

    也可以获得当前摄像机的方向:

    image

    缩放控制

    分别可以直接设置缩放数值,或者增加一个数值,也可以获得当前的缩放:

    image
    image
    image

    运动控制

    运动控制是交给插件完成一系列的镜头控制,主要是对相机的位置和景深进行调整。

    image

    注意这个方法是异步的,也就是说,执行后,会继续向下执行下面的积木,而不用等待动画结束。因此,如果你的动画时间太长了,你想随时停止相机的动画。可以调用停止相机运动的代码:

    image

    其中比较重要的是,你可以选择用不同的移动曲线来完成相机的控制。(参考后文的非线性移动曲线)

    当然,你也可以让摄像机自动跟踪到一个角色的位置。并且摄像机的自动跟踪功能可以选择紧紧跟随的硬跟踪,或者带有非线性滞后感的非线性跟踪。

    image

    角色运动控制

    角色运动控制是提供给肝酱的一个助手方法。使用它可以轻松地让角色也实现非线性移动。注意:这个方法和相机的其他方面不一样,它是会真实地改变角色的坐标和尺寸的。

    image

    使用时请注意:

    1. 此方法是同步方法,也就是说,执行完动画后才会继续执行下面的代码;
    2. 选择角色的部分是支持传入角色 id 的,例如,对克隆体进行运动控制,结合 Dolly 可以这样:

    使用案例 1: 克隆一个角色,当角色被克隆时,让克隆体执行非线性移动,而不是本体:

    image
    image

    使用案例 2: 克隆角色,并且为克隆体设置 key-value,在其他地方的程序查找这个对应的 key-value 克隆体,并且执行动画:

    image
    image

    文件夹工具

    文件夹工具提供了一系列批量处理角色的功能。 你可以让一组角色不受随摄像机移动而影响位置(例如游戏UI),也可以对一组角色改变同事改变坐标、改变特效、显示或者隐藏。

    如何建立文件夹

    目前 Gandi IDE 的当前版本在显示层面还未完成文件夹的功能。 但我们计划中会沿用 TW 的方案:通过角色名来设置。 规则为: 文件夹名//角色名

    例如,你的作品中有三个角色分别叫做 启动按钮 和 暂停按钮,你希望把他们两个按钮放入文件夹。 只需要修改他们的角色名,像这样:

    image

    于是,在文件夹工具中即可找到 UI 这个文件夹:

    image

    控制文件夹下的角色

    把角色分配到文件夹中有很多好处,其中最大的两个好处是:

    1. 可以设置整个 UI 文件夹不跟随摄像机移动
    2. 可以整体对一个文件夹的角色批量加特效(例如使用虚像效果来实现 UI 的淡入淡出)

    详细的工具如下:

    设置让整个文件夹跟随或者不跟随摄像机移动:

    image

    或者对整个文件夹改变坐标:

    image

    也可以显示或隐藏文件夹:

    image

    以及三个和角色特效相关的功能:

    image
    image
    image

    重要的备注:非线性移动曲线

    非线性曲线主要分为三类,分别是进、出、进出。 以二次为例,曲线分别是这样的:

    注:横轴代表时间,纵轴代表数值。
    注:横轴代表时间,纵轴代表数值。

    二次、三次、四次、五次、正弦、指数、圆形 可以理解为不同的非线性曲率。曲线分别为:

    image

    最后一类是和弹性有关的曲线,分别有 弹性、回弹、弹跳三种,曲线分别为:

    image

    最后,就是线性移动了,也就是随着时间变化,数值是匀速变化的,曲线为:

    image

    如果你有更多的反馈和意见,欢迎在下面的评论区中留言。

    实践案例

    案例一:大图点哪看哪

    核心代码:

    image

    效果预览:

    案例二:角色非线性移动

    核心代码:

    image

    效果预览:

    案例三:摄像机自动跟踪,并且 UI 不跟随摄像机移动

    核心代码:

    image

    效果预览:

    致谢

    感谢来自西班牙的肝酱 _Civero_#8670 提出创作需求,以及 DT 提供的初始方案,启发了我们完成这个插件。

    此插件和文档由 Shawn 创建和维护

    icon
    Shawn XIAO

    西瓜创客,共创世界创始人。在 Gandi IDE 团队参与到产品设计、渲染器管线开发及拓展开发。

    ✉️ shawn@ccw.site | 飞书链接

    讨论

    <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>

    本页索引

    • G-Kamera 是什么
    • 为什么使用 G-Kamera
    • 1. 十分易用
    • 2. 性能高于 SC 中实现的引擎
    • 3. 灵活多变
    • 如何使用
    • 位置控制
    • 方向控制
    • 缩放控制
    • 运动控制
    • 角色运动控制
    • 文件夹工具
    • 如何建立文件夹
    • 控制文件夹下的角色
    • 重要的备注:非线性移动曲线
    • 实践案例
    • 案例一:大图点哪看哪
    • 案例二:角色非线性移动
    • 案例三:摄像机自动跟踪,并且 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>
    <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>