有没有一种方法可以将多个瓷砖合并到一个级别- Kaboom JS中？

Question

当在kaboomJS中使用一个大的平铺地图碰撞时，事情开始变慢.所以，我想知道是否有一种简单的方法可以合并多个块，比如一整行块是否可以作为一个大块来处理？

Answer 1

1.瓷砖不一定要装在格子里

如果您想一次减少场景中的游戏对象的数量，您可以在您的级别定义中有一个符号来表示一个跨越多个网格块的游戏对象。因此，如果您想要有3个网格方格宽的许多平台，则每个平台不需要3个对象，只需使用一个字符来表示3x1rect：

import kaboom from "kaboom"

// initialize context
kaboom()

// load assets
loadSprite("bean", "sprites/bean.png")

addLevel(
  // Note: the hyphens here hare just place holders to remind us that the
  // game objects created by ➁ and ➂ are actually taking up 2 and 3 grid
  // squares respectively.
  [
    "    ⚥                           ",
    "                                ",
    "            ➂--                 ",
    "                                ",
    "       ➁-                       ",
    "                                ",
    "                                ",
    "################################",
  ],
  {
    width: 32,
    height: 32,
    "⚥": () => [
        sprite("bean"),
        area(),
      body(),
      "player"
    ],
    "#": () => [
      rect(32, 32),
      outline(2),
      area(),
      solid(),
    ],
    "➁": () => [
      rect(32 * 2, 32),
      outline(2),
      area(),
      solid(),
    ],
    "➂": () => [
      rect(32 * 3, 32),
      outline(2),
      area(),
      solid(),
    ],
  }
);

const player = get("player")[0];

player.onUpdate(() => {
  const left = isKeyDown('left') || isKeyDown('a');
  const right = isKeyDown('right') || isKeyDown('d');
  if (left && !right) {
    player.move(-500, 0);
  } else if (right && !left) {
    player.move(500, 0);
  }
  camPos(player.pos);
});

onKeyPress("space", () => {
  if (player.isGrounded()) {
    player.jump();
  }
});

显然，如果您有许多不同的形状和大小，这将是相当繁重的。

2.高级:四叉树和装卸区

实际上，在最近的一个Kaboom项目中，我自己也遇到了这个问题，我决定用我自己的实现来彻底修改addLevel()中的构建，这个实现是从位图中加载的，而不是一串字符串，然后将级别数据组织到一个四叉树中，这样我就可以快速找到与可见区域重叠的块，并根据它们的可见性来加载和卸载游戏对象。这里的技术和代码有点复杂，所以我只链接到爬行和相关的源代码：level-loader.ts和lib-quad-tree.ts以及在level-one.js e.js中的用法。