有没有办法在一个关卡中合并多个图块 - Kaboom JS答案

【问题标题】：Is there a way to merge multiple tiles in a level - Kaboom JS有没有办法在一个关卡中合并多个图块 - Kaboom JS
【发布时间】：2021-11-14 01:45:19
【问题描述】：

当在 kaboomJS 中制作一个带有大图块地图碰撞的关卡时，事情开始变得缓慢......所以我想知道是否有一种简单的方法可以合并多个图块，比如可能一整行块可以被视为一个块大块？

【问题讨论】：

或者，只渲染当前可见的图块。
有简单的方法吗？（或复杂的方式）
这里有两件事。一个是渲染，另一个是物理。渲染很简单。检查图块是否在视图区域内，如果是则仅绘制它。这主要是检查瓦片是否在视图区域内。物理的有点难。您需要一种快速的方法来判断事物是否彼此靠近，不一定是碰撞，但足够接近以至于需要进一步计算。这两者的常见解决方案是四叉树。这不是完整的解决方案，因为您需要根据您的具体情况计算出额外的计算。

标签： javascript kaboom

【解决方案1】：

1。瓷砖不必适合网格

如果您想一次减少场景中游戏对象的数量，您可以在关卡定义中使用单个符号来表示跨越多个网格图块的游戏对象。因此，如果您想要很多 3 个方格宽的平台，每个平台不需要 3 个对象，您可以只使用单个字符来表示 3x1 矩形：

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()，该实现从位图而不是一堆字符串加载，然后将关卡数据组织成一个quadtree 这样我就可以快速找到与可见区域重叠的块，并根据它们的可见性加载和卸载游戏对象。此处包含的技术和代码有点复杂，所以我将链接到 the Repl 和相关源代码：level-loader.ts 和 lib-quad-tree.ts 和 usage in level-one.js。

【讨论】：