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).
最近更新 1yr ago