KaBoom-rawdraw
首先初始化并且引入目录和图片,并使用
loadSprite("car", "img/car.png", {sliceX: 3,});
进行切割核心代码是包裹在一个
render
之中的,代表循环在这里的的draw似乎不需要如processing里面还需要手动擦除
展示了
drawSprite(“”,{})
绘制动画图集 drawRect()
drawLine
drawText(,)
scene("main", () => {
render(() => {
drawSprite("car", {
pos: vec2(50),
scale: 3,
rot: time(),
frame: ~~time() % 3,
origin: "center",
});
drawRect(vec2(50), 20, 50);
drawLine(vec2(0), mousePos(), {
width: 2,
color: rgba(0, 0, 1, 1),
z: 0.5,
});
drawText("hi", {
pos: mousePos(),
size: 64,
});
});
});
loadSprite(name, src, [conf])
加载序列帧并且手动添加动画的方式loadSprite("froggy", "froggy.png");
loadSprite("froggy", "https://replit.com/public/images/mark.png");
// slice a spritesheet and add anims manually
loadSprite("froggy", "froggy.png", {
sliceX: 4,
sliceY: 1,
anims: {
run: [0, 2],
jump: [3],
},
});
// loadAseprite
// use spritesheet json exported from aseprite
loadAseprite("froggy", "froggy.png", "froggy.json")
render(tag,cb)
calls every frame for a certain tag (after update) 会进行每帧的调用 with plain action() and render() you can opt out of the component / obj system and use you own loop 通过action() 和 render() 的方法可以跳出原先的component / obj 的系统来构建自己的循环render("weirdo", (b) => {
drawSprite(...);
drawRect(...);
drawText(...);
});
// plain render() just runs every frame
render(() => {
drawSprite(...);
});
time()
标识的是 current game timedt()
是 delta time since last framemousePos()
current mouse position~~
这个运算法代表着取整:That ~~
is a double NOT bitwise operator. It is used as a faster substitute for Math.floor()
for positive numbers. It does not return the same result as Math.floor()
for negative numbers, as it just chops off the part after the decimal (see other answers for examples of this).
最近更新 1yr ago