@ debuffjp/ 分数

游戏回路,固定步时钟,场景,相机,斯匹克和打入的创意参数. 渲染为 丝状,一个带有自动 Canvas 2D倒置的分批WebGL2 渲染器,在此再导出 Draw, (中文(简体) ), BitmapFont 和朋友从 @debuffjp/core 和以前一样 一个依赖(spryte),没有其他依赖.

npm install @debuffjp/core

import { Game } from "@debuffjp/core";

const game = new Game({ canvas, width: 320, height: 180, scale: "integer", pixelArt: true });

const tuning = game.params.define("player", {
  speed: { type: "number", default: 140, min: 0, max: 600, units: "px/s" },
});

game
  .add({
    id: "play",
    update(dt) {
      /* simulation at a fixed step */
    },
    render(draw, alpha) {
      /* draw in logical units */
    },
    inspect: () => ({
      /* JSON snapshot for tools and tests */
    }),
  })
  .go("play");
game.start();

API 密码

找到接近的东西

检查每一个敌人对每一枪,是好的几十个。 成百上千,把它们放进去 SpatialHash 每一步只询问一个点周围的细胞。 增加于0.26:

import { SpatialHash } from "@debuffjp/core";

const grid = new SpatialHash<Enemy>(24); // cell size: about the radius you query most

// in update, after things moved:
grid.rebuild(enemies);
for (const shot of shots)
  grid.near(shot.x, shot.y, 12, (e) => {
    hit(e, shot);
    return true; // stop at the first
  });
const target = grid.nearest(player.x, player.y, 200, (e) => !e.dead);

near 访问中心位于半径以内并有平方距离的每个物品; nearest 返回最近的一个 accept 允许。 物品是点,所以对于有半径的大型查询加上其大小. 结果以固定顺序出现,所以重播时要保持决定性,在第一步之后,它不会分配任何东西. 不允许查询运行时重建; 在另一个查询的回调中进行查询是好的 。 在人群隔离的工作量(每个敌人在自己周围查询16个px)上,它测得的速度大约是每对检查的4到15倍,共500到2000个敌人.

步间平滑运动

模拟运行在固定的60赫兹,以及 render(draw, alpha) 获得后一步与后一步相距多远(0比1). 在他们的位置上画出,移动的物体跳出显示速度快于60赫兹. 相机已经混合了 alpha· ; smoothMotion 用于您的对象, 在0. 26 中添加:

import { smoothMotion } from "@debuffjp/core";

const smooth = smoothMotion(game, () => [player, enemies, shots]); // objects, or arrays of them

// in render:
draw.sprite(heroImg, smooth.x(player), smooth.y(player));
for (const e of enemies) draw.sprite(enemyImg, smooth.x(e), smooth.y(e));

// after moving something instantly (respawn, warp), so it doesn't streak for a step:
smooth.snap(player);

它在每一个步骤之前都会保存每个对象的位置,因此新对象不需要注册,去掉的物体不需要清理. 有些东西它还没有保存(只是创建,或者之后) snap)被绘制在它的位置. 它只读位置, 所以回放和测试 没有影响,只有 x 财务报告和审定财务报表 y 混合起来.

虽然游戏被冻结(game.freeze()因此从0.26起 render 和使钩得到 alpha 1和相机画的地方。 在0.26之前,他们得到了剩下的时间, 所以相机和任何东西混合 alpha 摇摆在每帧一站.

像素字体

draw.text 用途 松饼 除非你通过一个 font,所以文本是简洁的像素艺术出框. 在 0.6 之前,默认是浏览器的 8px monospace; 通过 font: "8px monospace" 保持这个表情。 其来源和用于其他引擎的PNG工作表都在 字体/ 调值。使用自己的:

在 Aseprite( 或任何编辑器) 的网格上绘制格, 每个字符一个单元格 BitmapFont.ASCII 顺序( 空格到 ~,将工作表保存为 assets/[email protected] 用你的细胞大小。 从单元格的左边缘绘制出每个格;从最不透明的柱来测量前进.

const font = new BitmapFont({ frames: assets.frames("font"), chars: BitmapFont.ASCII });
draw.text("coins 3", 4, 4, { font, color: "#fbbf24" });

与 aseprite() CLI 插件, 您可以保留源代码为 assets/[email protected] 并跳过导出; @debuffjp/cli是因为 aseprite/new-font.lua 创建空白工作表并设置网格。 见 CLI 读取。 。 。 .

缩放模式

• fit (默认):填入容器,保持宽度比.
• integer: 用于快活像素艺术的完整设备-像素平面.
• expand喜欢 fit,但逻辑大小沿备用轴而增长,而不是收发信箱.
• pixel: 每个逻辑单位是 pixelSize CSS像素(默认3,被整个设备像素折断),逻辑大小随容器而增长,因此一个更大的窗口或显示器显示更多的游戏而不是更大的像素. width编号 :height 是最小的:一个较小的容器平面由整个设备像素向下,一个设备像素低于一个单位的分数以适应,比如: fit在0.29.3之前,它停留在单位一个装置像素上,帆布溢出容器.
• none: CSS 像素中的逻辑大小.

与 expand 财务报告和审定财务报表 pixel, (中文(简体) ), game.width 财务报告和审定财务报表 game.height 调整大小时的变动( e)game.hooks.resize故你应当从他们的每个框架出来.

游戏代码总是使用逻辑单元. 后卫店紧随其后 devicePixelRatio。 。 。 .

启动喷出

生产建设采用"用去巴克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克 它持续了1.6秒,任何密钥都会跳过. 点击或踢踏也会跳过它(在0.5之前,点击会打开debuff.jp,卡片会显示它的URL). 它没有链接或URL,因此游戏停留在出入口规则之内(Poki,CrazyGames等禁止链接出游戏). 出版关于波基? Poki要求游戏完全没有喷出屏幕,所以关闭它与 splash: false。它从不显示在 dev, 或时间被驱动 step() (情节和代理人). 要删除它:

new Game({ canvas, width, height, splash: false });

您也可以将其长度设定为 splash: { duration: 1 },或从代码中结束 game.skipSplash()。 。 。 .

跳过喷出物的密钥或水龙头在游戏中并不同时算作媒体: @debuffjp/input 喷出时滴出压力 game.hooks.splashEnd 火,所以同样的水龙头不能跳过标题屏幕。 钥匙仍然被扣留 在0.31.1之前,这一水龙头被视为第一步所压.