@ debuffjp/ ui (英语)
游戏周围的屏幕:在区域之间逐渐淡出,标题和暂停菜单,被框面板. 没有依赖关系,每个出口都可以自行使用. 一切都在继续 update(dt)因此,重播和情景 保持决定性.
import { Menu, Transition } from "@debuffjp/ui";
const fade = new Transition({ duration: 0.35, color: "#1a1020" });
let volume = 10;
const pause = new Menu(
[
{ label: "resume", onSelect: () => (paused = false) },
{ label: "volume", value: () => `${volume}`, change: (d) => (volume = Math.max(0, Math.min(10, volume + d))) },
{ label: "restart", onSelect: () => fade.run(reset) },
],
{ actions: { up: "up", down: "down", confirm: "jump", back: "pause", left: "left", right: "right" } },
);
// every step
fade.update(dt);
if (fade.blocking) return;
if (paused) pause.update(input);
// render, after the world
if (paused) pause.drawPanel(draw, game.width / 2, game.height / 2, { title: "paused" });
fade.draw(draw, 0, 0, game.width, game.height);
版式
文本用 draw.measure,所以任何事物都无法通过猜测来定位:
- 光标有自己的一栏 。 标签在焦点移动时不会转移.
- 数值(
value: () => string)在自己的一栏中对齐. drawPanel将框架放在点上,镜像光标一栏,这样标签和标题就共享一个中心,并在四面均匀地铺平.- 每个位置都会向整像素显示,所以像素字体保持简洁.
API 密码
Transition数字 :run(swap?)盖上屏幕,打电话swap被完全覆盖,然后发现.update(dt), (中文(简体) ),draw(draw, x, y, w, h), (中文(简体) ),stop(), (中文(简体) ),active, (中文(简体) ),blocking, (中文(简体) ),cover, (中文(简体) ),inspect()Menu数字 :new Menu(items, { actions, onBack, wrap }), (中文(简体) ),update(input)(与input.pointer,一个水龙头选择其下行;在一行数值上,左半下行和右半起行,tap(x, y), (中文(简体) ),move(delta), (中文(简体) ),select(), (中文(简体) ),measure(draw, style), (中文(简体) ),draw(draw, x, y, style), (中文(简体) ),drawPanel(draw, cx, cy, style), (中文(简体) ),focused, (中文(简体) ),inspect()- 项目:
{ label, onSelect?, disabled?, value?, change? } - 样式 :
font, (中文(简体) ),color, (中文(简体) ),focusColor, (中文(简体) ),disabledColor, (中文(简体) ),gap(3),align(单位:千美元)left编号 :center, (中文(简体) ),cursor(单位:千美元)>, (中文(简体) ),cursorGap(4), (中文(简体) ),valueGap(12个),highlight(有重点的一行后面的一粒果冻丸;用德布夫的外观,false关闭); 面板添加title, (中文(简体) ),titleFont, (中文(简体) ),titleColor, (中文(简体) ),titleGap(6), (中文(简体) ),borders, (中文(简体) ),fill, (中文(简体) ),padding, (中文(简体) ),radius
- 项目:
panel(draw, x, y, w, h, borders, fill?, chamfer?, radius?): 1px环,最外接先接后填;radius每个角落,chamfer用这么多像素把它剪掉panelAround(draw, cx, cy, w, h, { borders, fill, padding, radius, chamfer, shadow, shadowOffset }): 安装在内容周围、 以像素为中心并按像素粘接的面板; 返回内容的左上角bar(draw, x, y, w, h, value, { segments, gap, fill, empty }):分量计;value(0-1) 仅亮出整个单元格, 全部相同宽度; 返回所用的宽度
框外、面板、菜单和条 neutral:平地灰色,一个白色的焦点,4px角和一薄的边框,所以他们坐在你的游戏艺术下而不会带来自己的风格. 自己决定 borders 或者说 fill,或者你自己的 color,你得到 准确的设置.
外观是您所传播的样式对象 :
| 听着 | 这是什么 | 栏 |
|---|---|---|
neutral | 默认: 深灰色, 白色焦点 | neutralBar |
neutralLight | 轻取游戏相同: 白色面板, 暗文本 | neutralLightBar |
squish | debuff的外观:一个圆形的暗寡形面板,没有外观轮廓,有石灰聚焦,以及焦点移动时被压扁的亮点 | squishBar |
import { squish, squishBar } from "@debuffjp/ui";
pause.drawPanel(draw, game.width / 2, game.height / 2, { ...squish, title: "paused" });
bar(draw, 8, 8, 60, 4, hp / maxHp, squishBar);
在0.19年之前
高达0.18分,面板和菜单使用德布夫自己外观("squish")出盒:一个柔软而圆角的暗面面板,没有外观轮廓,有光标,有石灰焦并有果冻突出,在焦点移动时会粉碎. 栏杆默认为暗橄榄上的石灰细胞. 摆出自己的风格 borders 或者说 fill 保持原样. debuffFrame 那看起来是一种风格的物体, 扩散到任何事物:
import { debuffFrame } from "@debuffjp/ui";
pause.drawPanel(draw, game.width / 2, game.height / 2, { ...debuffFrame, title: "paused" });
从0.19起,扩散 squish (和通过) squishBar 改为 bar在那里,你依赖的默认. debuffFrame 仍然工作,被腐烂, 成为squish的框单 没有它的菜单颜色.