工具包

Sprig 是一个用于构建基于 tile 的游戏的微型工具包。 这些游戏是用 JavaScript 编写的。 它由 Hack Club 制作，这是一个由青少年程序员组成的全球社区，他们相信人们通过制作自己关心的东西并与他人分享来学习得最好。 你可以观看此视频以了解 Sprig 网站的介绍。

点击“Run”按钮或按“Shift+Enter”来运行游戏。

获取帮助

如果这是你第一次使用 Sprig，请尝试完成教程。 从那里，我们建议修改任何当前游戏或从头开始。

如果你需要帮助、有想法或想结识其他游戏制作者，请加入 Hack Club Slack 上的 #sprig 频道。 你可以在此处访问本指南。

关卡设计

Sprig 游戏由方形 tile 的网格组成。

setLegend(bitmaps)

告诉 Sprig 你的游戏中有哪些类型的 sprites 可用。 Bitmap 键必须是单个字符。 我们建议将字符键存储在变量中。

const player = "p"
const wall = "w"
setLegend(
  [player, bitmap`...`],
  [wall, bitmap`...`],
)

要创建新的 bitmap，请输入

bitmap`.`

注意使用反引号！ 点击高亮的 “bitmap” 按钮来编辑你的绘图。

图例中 sprite 类型的顺序也决定了绘制它们的 z-order。 先出现的 sprite 类型绘制在顶部。

setBackground(bitmapKey)

将 bitmap 平铺为游戏的背景：

setBackground(spriteKey)

这只会更改游戏的视觉效果。

setMap(level)

设计关卡就像绘制 bitmap：

map`...`

地图中的字符来自你的 bitmap 图例的顺序。 关卡不必在图例中被跟踪，你应该自己将它们存储在一个变量中。 你可以调用 setMap 来清除游戏并加载新关卡：

const level = map`...`
setMap(level)

你可能想使用数组来跟踪多个关卡，以便在游戏中切换它们：

const levels = [
  map`...`,
  map`...`,
  // 等等.
]
setMap(levels[0])
// 稍后:
setMap(levels[1])

setSolids(bitmapKey)

Solid sprites 不能相互重叠。 这对于创建像墙壁之类的东西很有用：

const player = "p"
const wall = "w"
setSolids([player, wall])

setPushables(pushMap)

使用 setPushables 使 sprite 推动其他 sprite。 左侧的 sprite 将能够推动右侧列出的所有 sprite。

const player = "p"
const block = "b"
setPushables({
  [player]: [block, player]
})

注意！ 确保你传递给 setPushables 的所有内容也被标记为 solid，否则它们不会被推动。

width()

获取当前地图的宽度。

height()

获取当前地图的高度。

用户输入

Sprig 有八个输入 w、a、s、d、i、j、k、l。

通常，w、a、s、d 用作方向控件。

onInput(type, callback)

当玩家按下控件时执行某些操作：

onInput("d", () => {
  // 将玩家向右移动一个 tile
  getFirst(player).x += 1
})

afterInput(callback)

在每个输入事件处理完毕后运行。 对于检查获胜状态等任务很有用：

afterInput(() => {
  if (getAll(block).length > 0) {
    console.log("你赢了")
  }
})

Sprites 和 Tiles

每个 tile 可以包含任意数量的堆叠在其顶部的 sprite。

Sprites 包含：

{
  type
  x
  y
}

你可以通过设置 x 和 y 来移动 sprite。

也可以更改 bitmapKey 以更新渲染的图形和 sprite 将遵循的碰撞规则。

sprite.y += 1
sprite.type = "p"

你可以使用 sprite.remove() 删除 sprite。

getTile(x, y)

返回指定 tile 中 sprite 的列表。

tilesWith(type, …)

返回包含 type 的 tile 列表。

tilesWith(block)

tilesWith 接受多种 sprite 类型。

tilesWith(block, player, ...)

addSprite(x, y, spriteType)

创建给定类型的新 sprite。

clearTile(x, y)

从指定的 tile 中删除所有 sprite。

getAll(type)

返回给定类型的所有 sprite。 如果未指定 bitmap 键，则返回游戏中的所有 sprite。

getFirst(type)

返回给定类型的第一个 sprite。 如果你知道只有一个 sprite，例如玩家角色，则很有用。

getAll(type)[0] 的快捷方式。

文本

addText(string, options = { x, y, color })

你可以添加带有可选 x、y 和 color 的文本。

在 Sprig 中，每种颜色都由一个字符表示。 与 bitmap 和 map 一样，你可以使用 color 关键字为文本选择颜色。 你选择的颜色的预览也将显示在字符旁边。

例如：

addText("hello", {
  x: 10,
  y: 4,
  color: color`3`
})

clearText()

清除屏幕上的所有文本。

音乐和音效

Sprig 捆绑了一个内置的声音引擎和音序器！ 你可以使用它来编写背景音乐，或者使用高 BPM 来制作音效。

你可以使用 tune 关键字创建一个曲调。 像往常一样，点击按钮打开一个编辑器窗口。

// 创建一个曲调:
const melody = tune`...`
// 播放它:
playTune(melody)
// 播放 5 次:
playTune(melody, 5)
// 播放直到宇宙热寂:
const playback = playTune(melody, Infinity)
// 或者让它提前闭嘴:
playback.end()

无限循环检测

Sprig 编辑器将自动在你的 for、while 和或 do-while 循环中插入启发式方法来检测潜在的无限循环。 看起来像这样的代码

while (condition) {
  // 执行操作
}

将变成

startTime = performance.now()
while (condition) {
  if (++_loopIt > 2000 && performance.now() - startTime > 1500) throw new RangeError("Potential infinite loop")
  // 执行操作
}

请注意，你的代码中的所有原始行号都将被保留。

会话冲突!

似乎你打开了另一个具有更改的会话。 你想覆盖来自另一个会话的更改还是重新加载以将这些更改检索到此选项卡？

取消 覆盖 重新加载

更改按键绑定

要重新映射，请选择输入字段并按下你选择的键。

Key w: Key a: Key s: Key d: Key i: Key j: Key k: Key l: 保存更改 取消