KaBoom-rawdraw

范例来自 #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 time

dt() 是 delta time since last frame

mousePos() 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).