Rive 编辑器初识与第一个动画
热身:第一天,先浏览本阶段 8 天整体安排。
打开 rive.app 注册账号。
左侧工具栏、右侧属性、底部时间线、中间画布。
新建 512×512,矩形和椭圆各画一个。验收:两个独立图形
0 秒记录位置,2 秒拖到右侧。验收:圆从左到右移动
尝试不同缓动,导出 circle_move.riv。
✅ 达标:导出 circle_move.riv,能循环播放圆从左到右的移动。
7 阶段 · 61 天 · 数据保存在本机浏览器(导出 JSON 可备份)。
掌握 Rive 编辑器与动画能力
热身:第一天,先浏览本阶段 8 天整体安排。
打开 rive.app 注册账号。
左侧工具栏、右侧属性、底部时间线、中间画布。
新建 512×512,矩形和椭圆各画一个。验收:两个独立图形
0 秒记录位置,2 秒拖到右侧。验收:圆从左到右移动
尝试不同缓动,导出 circle_move.riv。
✅ 达标:导出 circle_move.riv,能循环播放圆从左到右的移动。
热身:打开 circle_move.riv,复述 Artboard 和关键帧的关系。
画 S 形曲线和三角形。
增删节点、调整贝塞尔手柄。验收:能自由编辑曲线
合并/相减/相交/异或。
画一个圆角按钮:渐变 + 描边 + 高光。验收:完整按钮图形
✅ 达标:熟练使用钢笔和节点编辑。
热身:打开昨天的按钮,说说布尔运算解决了什么问题?
位置、旋转、缩放。
先快后慢、先慢后快、回弹。验收:能区分 Ease In/Out
Loop / Ping-Pong / One-Shot。
触地挤压 + 弹起恢复。验收:bouncing_ball.riv
✅ 达标:bouncing_ball.riv 播放流畅。
热身:说说弹跳小球中 Squash & Stretch 的作用原理。
从肩膀→手肘→手腕。
Bind Bones 依次点击。验收:旋转骨骼图形跟着动
0.5 秒前臂向上,1 秒回位。验收:wave.riv
FK / IK 区别。
✅ 达标:wave.riv 挥手流畅。
热身:打开 wave.riv,骨骼绑定失败最可能的原因?
添加 Mesh Deform。
让矩形弯曲成弧形。验收:能弯成平滑弧线
Parent / Distance Constraint。
3×8 网格 + 边缘顶点关键帧。验收:flag_wave.riv
✅ 达标:flag_wave.riv 循环无跳帧。
热身:打开 flag_wave.riv,为什么不用更密的网格?
Vector Layer,画游戏图标。验收:图层类型为 Vector
图层 → 导入/导出 → 另存 SVG。验收:SVG 浏览器可打开
检查图层命名和分组。
旋转 + 缩放呼吸动画。验收:star_animated.riv
✅ 达标:star_animated.riv 循环播放呼吸动画。
热身:翻看本周 .riv 产出,哪一天最有成就感?
独立完成一个包含关键帧、缓动、骨骼的动画。验收:能独立完成
Artboard / Keyframe / Easing / Bone / Mesh。
做一个教程外的原创小动画。验收:原创动画
截图最佳产出,分享或存入作品集。
✅ 达标:完成自测,产出至少一个原创小动画。
检测任何一项卡住 = 回对应 Day 复习
用 3 分钟回顾本周:最大的收获是什么?卡在哪里?下周调整什么?
热身:说说 Rive 的「状态驱动」思维和以往做动画有什么不同?
编程关注「能不能实现」;游戏还要关注「好不好玩」。
定义规则、目标、反馈。
把设计意图翻译成代码。
写 200 字反思。验收:反思笔记
✅ 达标:完成反思笔记。
独立开发者需要同时具备两种思维
状态机 + ViewModel 做出动态 UI
热身:打开 star_animated.riv,关键帧动画和状态机动画的区别?
State / Transition / Input。
Idle + Active。
Boolean isActive 控制。验收:切换平滑
尝试 0 / 0.2 / 0.5 秒。
✅ 达标:能独立创建两状态切换的状态机。
热身:Trigger 和 Boolean 的典型应用场景?
4 个变体。
Hover 和 Pressed 加微缩放。
isHovered / isPressed / isEnabled。验收:切换都正确
0.15s / 0.05s。
✅ 达标:button.riv 四种状态切换流畅。
Rive 最重要的基础练习
热身:打开 button.riv,Hover 和 Pressed 的过渡时长为什么不一样?
数据容器。
Number / Boolean / Color 属性。
进度条宽度绑定 progress。验收:实时响应
themeColor。
✅ 达标:能独立创建 ViewModel 并完成绑定。
热身:ViewModel 和状态机各自的职责?
背景 + 填充 + 边框。
0–100 映射到填充宽度。验收:拖动平滑变化
三状态:Healthy/Warning/Critical。
Critical 闪烁 + Trigger 抖动。验收:health-bar.riv
✅ 达标:health-bar.riv 响应 health 变化。
血条是游戏 UI 最常见组件
热身:打开 health-bar.riv,状态机如何响应 health 变化?
Enum playerState。
playLevelUp。
头像 + 血条 + 蓝条 + 状态图标。验收:character-panel.riv
确保无冲突。
✅ 达标:character-panel.riv 交互路径正常。
整合到一个 ViewModel 是专业做法
用 3 分钟回顾本周:最大的收获是什么?卡在哪里?下周调整什么?
热身:翻看本阶段 .riv,哪个组件你最有信心独立复刻?
State / Transition / Input 协作流程。
数字跳动 + 金币闪光 + 飘出「+10」。验收:coin_collect.riv
游戏 UI 组件。
整理 .riv 文件,截图分享。
✅ 达标:完成金币收集动画 = 通过第二阶段。
能独立完成挑战任务 = 通过
热身:回顾本阶段 UI 组件,哪些你希望在自己的游戏中实现?
挑战 / 体验 / 天性。
操作性 vs 策略性。
难度略高于当前能力。验收:难度曲线草图
✅ 达标:能说出你游戏的乐趣来源。
用一句话描述你游戏的核心乐趣
核心概念 + Lua + Rive 集成
热身:从 Rive 切换到引擎,各自负责什么?
defold.com。
Assets / 场景编辑器 / Outline / Console。
New Project → Empty,按 F5。验收:项目正常运行
game.project / main.collection / input。
✅ 达标:Defold 空项目正常运行。
热身:Assets / Outline / Console 三个面板作用?
游戏实体,空容器。
Sprite / Script / Collision Object。验收:能说出 3 种组件
多个 GameObject 的容器。
msg.post() 发送消息。验收:Console 看到消息
✅ 达标:能解释四大核心概念的关系。
热身:Message Passing 解决了什么问题?
number / string / boolean / table。
if / for / while。
计算伤害的函数。
init / update / on_message。验收:init 先执行
✅ 达标:能独立写 Lua 脚本。
热身:init / update / on_message 分别在什么时候调用?
game.project → Input。
左右移动,速度用 speed * dt。验收:按键平滑移动
vy 变量 + 重力模拟。
Collision Object。验收:可移动跳跃的角色
✅ 达标:角色能移动、跳跃、落地。
热身:为什么移动速度要用 dt 相乘?
PNG 拖入 Assets。
多张小图打包成大图。验收:无溢出
选择帧,调整 Pivot。
Generate Flipbook。验收:行走动画循环
✅ 达标:Krita 素材正确显示,Flipbook 循环。
用 3 分钟回顾本周:最大的收获是什么?卡在哪里?下周调整什么?
热身:Atlas 的作用是什么?为什么能减少 Draw Call?
独立节点树。
Text + Box + Krita UI。
Anchor 决定对齐。验收:改变窗口位置合理
标题 + 按钮。验收:菜单界面
✅ 达标:能创建 GUI 场景,用 Anchor 实现自适应布局。
热身:打开昨天 GUI 菜单,Anchor 的作用?
game.project → Dependencies。
Add Component → Rive Model。验收:动画正常显示
rive.set_input()。验收:状态切换正确
Coordinate System 设 Fullscreen。
鼠标悬停 + 点击。
✅ 达标:Rive 按钮在 Defold 中响应鼠标。
热身:rive.set_input() 参数顺序是什么?
rive.get_view_model()。验收:血条同步变化
角色 health 绑定血条。
on_message 接收。
受伤 → 血条变化 → 低血量警告。验收:完整 Demo
✅ 达标:游戏数据实时驱动 Rive UI。
这个 Demo 将用于综合项目
热身:Defold 四大核心概念能用自己的话讲清楚了吗?
Game Object / Component / Collection / Message Passing。
Krita 素材 + Rive UI。验收:coin_collect_demo
脚本拆分 + 截图分享。
✅ 达标:独立完成「点击收集金币」Demo。
从「学教程」到「做项目」的第一步
热身:回顾 Day 23-24 集成 Rive 时遇到的报错?
第一行说「什么错」,最后一行说「在哪错」。
在怀疑处前后加 print。验收:能说出 print 调试流程
复制报错 + 引擎名 + 语言。
四要素:想实现/做了什么/报错/已尝试。验收:写一个提问草稿
✅ 达标:能独立看懂报错。
核心机制、GDD、存档、手感、音效
热身:做 Demo 时有没有想过「为什么玩家要一直点?」
玩家重复的主要行为序列。
写出核心循环。
动作 → 反馈 → 奖励 → 新动作。验收:流程图 + 一句话
✅ 达标:能用一句话说清核心循环。
你的核心循环够「爽」吗?
热身:说说你游戏的核心循环。玩家会腻吗?
反应速度 / 肌肉记忆 / 信息处理。
知识 / 计算 / 博弈。
平缓 → 上升 → 小高峰 → 回落。验收:难度曲线草图
检查太难/太简单的区间。
✅ 达标:完成难度曲线草图。
网易游戏设计课程
用 3 分钟回顾本周:最大的收获是什么?卡在哪里?下周调整什么?
热身:前 5 分钟应该给玩家什么体验?
序列化游戏状态。
JSON:version / player / progress。验收:画出 JSON 结构
检测 version → 逐版本升级。
保存哪些数据?格式?触发时机?验收:存档方案文档
✅ 达标:设计出完整存档方案。
Defold 文件系统 · sys.save / sys.load
热身:version 字段为什么重要?
输入与反馈之间的延迟和质感。
屏幕震动 + 音效 + 粒子。验收:跳跃时屏幕震动
Screenshake / Hitstop / 数字跳动。
运行游戏感受手感。
✅ 达标:Demo 中至少应用 2 个手感调味料。
手感调优是迭代过程
热身:回顾本阶段四个主题,哪个是之前没想过的?
核心循环一句话?GDD 要素?版本迁移?
加入核心循环、难度曲线、存档方案。验收:完整 GDD
分享给朋友。
加一个反馈效果。
✅ 达标:能清晰描述游戏的设计方案 = 通过第四阶段。
通过第四阶段
热身:打开 Defold 项目,脚本有多少行了?
所有逻辑写在一个脚本里。
player / ui / game_manager。验收:说出 3 个脚本职责
utils.lua 定义函数。
至少拆出一个模块。验收:重构后项目
✅ 达标:能说出脚本拆分原则。
Defold Lua Modules
热身:回顾 Day 30 的「手感调味料」清单,音效占了几项?
freesound.org / Kenney.nl。验收:收藏 3 个资源站
裁剪、调音量、导出 WAV/OGG。验收:导出 3 个音效
sound.play()。验收:3 个音效触发
音频组 Master / SFX / Music。验收:音量独立
好的音效设计原则。
✅ 达标:Demo 中至少 3 个动作配音效。
Defold Sound 手册
绘画基础 + 游戏素材 + 导出规范
热身:列出你的游戏需要哪些美术素材?
krita.org。
工具箱、图层、笔刷预设、颜色。
512×512、72 DPI。验收:PNG 正常显示
空格旋转、Ctrl+Z、B、E。
✅ 达标:完成 .kra 和 PNG 导出。
Krita 官方手册
热身:「图层」和「工具」面板在哪里?
铅笔 / 墨水笔 / 水彩 / 喷枪。
三层绘制立体球体。验收:球体有立体感
自由变换。
画一只蝴蝶。
✅ 达标:能用三层绘制有立体感的球体。
Krita 笔刷文档
用 3 分钟回顾本周:最大的收获是什么?卡在哪里?下周调整什么?
热身:三层分别用了什么颜色?
128×128 或 256×256。
设置(齿轮)。验收:清晰可辨
背包 / 角色 / 商店 / 关闭。验收:5 个图标
导入 Atlas。
✅ 达标:5 个风格统一的图标。
5 个游戏图标
热身:为什么 128×128 图标缩小后会变模糊?
32×32,关抗锯齿。
药水或剑。
32×32:头/身体/腿/手臂。验收:像素道具 + 角色
Filter Mode 设 Nearest。
✅ 达标:像素素材显示锐利。
Lospec 调色板
热身:为什么像素画要关闭抗锯齿?
左右边缘颜色匹配。
64×64,绿色基调。验收:接缝不可见
64×64,砖块错位。
导入 Defold 创建 Tilemap。验收:3 张无缝纹理
✅ 达标:平铺后接缝不可见。
Krita 环绕模式
热身:「环绕模式」如何帮你发现接缝?
开启洋葱皮。
4–8 帧。验收:循环流畅
PNG 序列。
Generate Flipbook。验收:行走动画正常
✅ 达标:行走动画流畅循环。
Krita 动画
热身:翻看本周产出,哪个最满意?
矢量层 vs 栅格层?序列帧导出注意?
5 UI + 1 立绘 + 1 序列帧 + 3 纹理。验收:完整素材包
导入 Atlas。
✅ 达标:完成素材包并成功导入 Defold。
通过第五阶段
热身:做素材时最花时间的是哪一步?
像素风 / 手绘风 / 矢量风。
确定开发分辨率。Fit 或 Fill。
同场景同 Atlas。验收:Atlas 无溢出
写下选择理由。
✅ 达标:确定美术风格和分辨率策略。
Defold Atlas
引擎对比、性能优化、游戏 AI 入门
热身:你最后确定的美术风格?
godotengine.org。
Node2D / Sprite2D / CharacterBody2D。
地面 + 角色。验收:角色能移动
GameObject ≈ Node。
✅ 达标:Godot 中角色能移动。
Godot 第一个 2D 游戏
用 3 分钟回顾本周:最大的收获是什么?卡在哪里?下周调整什么?
热身:「节点组合」和「GameObject + Component」的相似和不同?
变量 / 函数 / 信号。
kibble-cabal/godot-rive。
RiveControl + 状态机。验收:按键切换状态
Defold 官方 vs Godot 社区。
✅ 达标:Rive 动画在 Godot 中响应输入。
godot-rive
热身:GDScript 的 _ready / _process 和 Defold 的 init / update 异同?
Creator 3.8.x。
Node 容器 + Component 功能。
Krita 图标 + Button 点击。验收:按钮可点击
Lua / GDScript / TypeScript。
✅ 达标:Cocos 中能搭建 UI。
Cocos 官方文档
热身:Node 和 Component 的关系?
Cocos Store 搜索 Rive Animation Loader。
节点 + Rive 组件。验收:Web 预览正常
Rive 支持 / 脚本语言 / 项目体积。
再次确认 Rive + Defold。
✅ 达标:完成三引擎对比表。
Cocos 原生平台需自部署 C++ 运行时
热身:三引擎的核心差异是什么?
CPU 向 GPU 发送的绘制请求。
Profiler(F2)。验收:定位到 Profiler
同场景素材合并。
截图记录前后。
✅ 达标:Draw Call 明显下降。
Defold Atlas
热身:你做了什么让 Draw Call 下降?
原生渲染优于序列帧。
同屏幕 Rive 元素合并。验收:说出优缺点
msg.post("#", "unload")。
Profiler 查看内存。
✅ 达标:能说出 Rive 性能优化至少 3 个方法。
优化是权衡
热身:Rive 组件合并 Artboard 和按需加载各自解决什么问题?
每帧:输入 → 更新 → 渲染。
dt = 帧间时间。验收:帧率无关移动
物理模拟固定 60 次/秒。
Profiler 查看 FPS。
✅ 达标:能写出帧率无关移动代码。
《Fix Your Timestep!》
热身:Delta Time 为什么重要?
预创建对象,需要时取出。
Factory + 空闲列表。验收:100 发无卡顿
Collection Proxy 按需加载。
检查频繁创建/销毁的对象。
✅ 达标:能实现简单对象池。
Defold Factory
用 3 分钟回顾本周:最大的收获是什么?卡在哪里?下周调整什么?
热身:回顾本阶段优化知识,哪个之前没意识到?
三引擎核心特点?Draw Call?Delta Time?
应用至少 3 个优化技巧。验收:优化报告
给 Demo 做「性能改造」。
✅ 达标:完成优化报告 = 通过第六阶段。
通过第六阶段
热身:「动画状态机」和「游戏 AI 状态机」的相似之处?
Patrol → Alert → Chase → Attack → Return。
enemy.script 用 Enum 管理。验收:敌人能巡逻 + 追击
A* 概念。
根据玩家表现调整 AI。验收:说出 2 种策略
✅ 达标:能实现简单敌人 AI。
Defold A* 寻路
热身:回顾这 52 天,你跟着教程做了多少东西?
脱离教程就不知道从哪开始。
「商店系统」拆成 4 个小步骤。验收:说出拆解方法
先做能跑的最简单版本。
状态机 / 对象池 / 存档。验收:3 个可复用片段
✅ 达标:能说出四个关键步骤。
从学习者到创作者
完整 Demo、测试 QA、发布到平台
热身:你打算用什么方法拆解综合项目?
点击收集 / 躲避 / 平台跳跃 / 打地鼠。
名称 + 一句话 + 核心循环。验收:完整 GDD
Krita 素材 / Rive 组件 / Defold 功能。
assets / scripts / scenes / ui。
✅ 达标:设计文档完整,项目骨架创建完成。
设计文档 + 素材清单
热身:哪些是必需的?哪些可以先用占位图形?
立绘或逐帧动画。验收:角色清晰
尺寸匹配游戏分辨率。
分数图标 / 生命图标 / 按钮。
按用途分文件夹。验收:完整素材包
✅ 达标:完成全部必需素材。
「做完」比「做好」更重要
热身:哪个素材你最有信心?
Idle / Hover / Pressed。
ViewModel Number score + Trigger。验收:score 实时更新
绑定 health 属性。
导出到 rive/ 目录。验收:全套 Rive 组件
✅ 达标:全套 Rive 组件在 Defold 中能加载。
Rive 组件是游戏 UI 的核心
热身:每个组件的输入属性是什么?
创建 Atlas。
背景 + 角色 + 地面。验收:角色和背景可见
输入处理 + speed * dt + 碰撞检测。验收:角色移动动画正确
GUI 场景 + Rive 组件。
✅ 达标:角色能移动,Rive UI 正确显示。
综合项目最关键的一天
用 3 分钟回顾本周:最大的收获是什么?卡在哪里?下周调整什么?
热身:角色控制脚本中 dt 在哪里用到?
rive.set_input 驱动按钮。
菜单 → 游戏中 → 暂停 → 结束 → 重开。验收:完整循环
sys.save / sys.load 保存最高分。
屏幕震动 + 粒子 + 音效。验收:完整可运行 Demo
✅ 达标:游戏能从菜单进入,完整游玩,结束后重开。
60 天学习的集大成之作
热身:完整玩一遍游戏,记录三个「感觉不太对」的地方。
Profiler:Draw Call < 30、内存、FPS。
Atlas 合并 + 对象池 + 按需加载。验收:Draw Call 下降
Rive 状态切换时长。
1280×720 / 1920×1080 / 移动端。验收:稳定版本
✅ 达标:Draw Call 下降,FPS 稳定。
优化是迭代
热身:最不确定的地方是哪里?
列出所有功能点逐一测试。验收:所有功能点通过
血量归零、分数上限、快速连点。验收:至少测 5 个
长时间运行、低端设备、大量对象。
找朋友试玩观察卡住的地方。验收:3 条用户反馈
编号 / 描述 / 复现步骤 / 严重程度。验收:Bug 清单
✅ 达标:完成四类测试,产出 Bug 清单。
Defold 调试文档
热身:游戏达到「可发布」标准了吗?
演示视频 + 截图 + README + 可执行文件。验收:可执行文件
Create New Project。验收:发布到 itch.io
Defold 导出 HTML5。验收:游戏可通过 URL 访问
Steam $100 / Google Play $25 / App Store $99。
收集玩家反馈做小版本更新。验收:下一步迭代计划
✅ 达标:游戏至少发布到一个平台。
itch.io · Defold 发布文档
热身:60 天前你可能连 Artboard 都不知道。给自己掌声。
Rive / Defold / Krita / 设计 / 优化 / 音效 / AI / 测试 / 发布。验收:全部「能」= 目标达成
知识体系图 + 三色标记。验收:知识体系图
Rive Discord / Defold Forum / itch.io。
骨骼动画 / 着色器 / 多人联机。验收:下一阶段计划
✅ 达标:完成 60 天总结。你已经是一个游戏开发者了 🎉
awesome-rive · Defold 官方示例