如何在Kaboom.js中创建背景？技术问题求助

架构老林

2026-8-20

Kaboom.js 背景创建实用方案

下面是几种常见场景的背景实现方法，直接贴代码就能用：

1. 静态全屏图片背景

适合单张图片作为背景，自动适配画布大小：

// 初始化Kaboom
kaboom();

// 加载背景图（替换成你的图片路径）
loadSprite("bg", "assets/background.png");

// 添加背景实体，设置层级确保在最底层
add([
  sprite("bg"),
  pos(0, 0),
  // 自动缩放适配画布
  scale(width() / sprite("bg").width, height() / sprite("bg").height),
  layer("bg")
]);

// 提前定义层级顺序（确保bg在最下面）
layers(["bg", "game", "ui"]);

2. 平铺重复背景

如果用小 tile 图做重复背景，循环生成即可：

kaboom();

loadSprite("tile", "assets/tile.png");
const tileSize = 64; // 你的tile尺寸

// 横向纵向循环生成tile
for (let x = 0; x < width() / tileSize + 1; x++) {
  for (let y = 0; y < height() / tileSize + 1; y++) {
    add([
      sprite("tile"),
      pos(x * tileSize, y * tileSize),
      layer("bg")
    ]);
  }
}

3. 循环滚动背景（横向/纵向）

适合跑酷、射击类游戏的滚动背景，实现无缝循环：

kaboom();

loadSprite("bg", "assets/scroll-bg.png");
const bgSpeed = 80;

// 添加两个背景实体拼接，实现无缝滚动
const bg1 = add([
  sprite("bg"),
  pos(0, 0),
  layer("bg"),
  scale(2),
  { width: sprite("bg").width * 2 }
]);

const bg2 = add([
  sprite("bg"),
  pos(bg1.width, 0),
  layer("bg"),
  scale(2),
  { width: sprite("bg").width * 2 }
]);

// 每帧更新位置，滚动后重置
bg1.onUpdate(() => {
  bg1.pos.x -= bgSpeed * dt();
  if (bg1.pos.x <= -bg1.width) {
    bg1.pos.x = bg2.pos.x + bg2.width;
  }
});

bg2.onUpdate(() => {
  bg2.pos.x -= bgSpeed * dt();
  if (bg2.pos.x <= -bg2.width) {
    bg2.pos.x = bg1.pos.x + bg1.width;
  }
});