使用 Tiniest2D 制作 2D 游戏
精灵与动画
Lesson 3 of 11 • 10 XP
Keep your place in this quest
Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.
创建资产
资产是游戏使用的组成部分:图像、场景、声音和对象。在 Tiniest2D 中,您可以通过在脚本中编写一个变量来创建大多数资产。编辑器会注意到像 Sprite() 这样的构造函数,并允许您可视化地编辑资产。

精灵
精灵是像素艺术图像。它们用于角色、墙壁、硬币、按钮、子弹、背景以及任何需要绘制的东西。精灵可以是单个图像或由多个帧组成的小动画。
要创建一个精灵,请使用 Sprite() 构造函数声明一个变量:
var playerSprite = Sprite(16, 16)
var coin = Sprite(8, 8)
var wall = Sprite(32, 32)
这些数字表示宽度和高度(以像素为单位)。保存后,您会看到变量名称被包裹在 深色框 中——这表示它是一个精灵资产。
编辑精灵的步骤:
- Ctrl+Click 精灵变量名称
- 将打开精灵编辑器
精灵编辑器控制

精灵编辑器是您逐像素绘制图像的地方。如果您是像素艺术的新手,建议从小开始:8x8 或 16x16 的精灵更易阅读、编辑和动画。
| 控制 | 动作 |
|---|---|
| 左键单击 | 用当前颜色绘制像素 |
| 右键单击 | 擦除像素(透明) |
| 鼠标中键拖动 | 平移视图 |
| 鼠标滚轮 | 放大/缩小 |
| 调色板 | 单击选择颜色 |
| 宽度/高度 +/- | 调整精灵大小 |
| 碰撞器切换 | 启用/禁用碰撞边界 |
| 碰撞器偏移 | 调整上下左右碰撞边界 |
| 显示碰撞器 | 预览碰撞边界 |
| 空格 | 切换动画预览 |
| 左/右箭头 | 在帧之间导航 |
| Esc | 返回脚本编辑器 |
动画面板
动画是通过快速依次显示多个精灵帧来制作的。例如,一个行走的角色可能有一个帧是左脚向前,另一个帧是右脚向前。

动画面板(在左侧边栏)让您管理精灵帧:
| 控制 | 动作 |
|---|---|
| FPS +/- | 调整动画速度(帧每秒) |
| 添加帧 | 在末尾添加一个新的空白帧 |
| 复制帧 | 复制当前帧(在当前帧后插入) |
| 删除帧 | 删除当前帧(仅当超过 1 帧时) |
| 帧条 | 单击底部缩略图以选择帧 |
当一个精灵具有多个帧时,使用它的对象将在运行时自动动画。每个对象独立跟踪其自身的动画状态。