首页 › 随便聊聊 › JS LCD 切换示例分享

Harlotte 发表于 2024-11-15 22:23:22

JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
importPackage (java.lang);
importPackage (java.awt);

include(Resources.id("mtrsteamloco:library/code/face.js"));

const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);

function getW(str, font) {
    let frc = Resources.getFontRenderContext();
    bounds = font.getStringBounds(str, frc);
    return Math.ceil(bounds.getWidth());
}

da = (g) => {//底图绘制
    g.setColor(Color.BLACK);
    g.fillRect(0, 0, 400, 400);
}

db = (g) => {//上层绘制
    g.setColor(Color.WHITE);
    g.fillRect(0, 0, 400, 400);
    g.setColor(Color.RED);
    g.setFont(font0);
    let str = "晴纱是男娘";
    let ww = 400;
    let w = getW(str, font0);
    g.drawString(str, ww / 2 - w / 2, 200);
}

const mat = new Matrices();
mat.translate(0, 0.5, 0);

function create(ctx, state, entity) {
    let info = {
      ctx: ctx,
      isTrain: false,
      matrices: ,
      texture: ,
      model: {
            renderType: "light",
            size: ,
            uvSize:
      }
    }
    let f = new Face(info);
    state.f = f;

    let t = f.texture;
    let g = t.graphics;
    state.running = true;
    let fps = 24;
    da(g);//绘制底图
    t.upload();
    let k = 0;
    let ti = Date.now();
    let rt = 0;
    smooth = (k, v) => {// 平滑变化
      if (v > k) return k;
      if (k < 0) return 0;
      return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    }
    run = () => {// 新线程
      let id = Thread.currentThread().getId();
      print("Thread start:" + id);
      while (state.running) {
            try {
                k += (Date.now() - ti) / 1000 * 0.2;
                ti = Date.now();
                if (k > 1.5) {
                  k = 0;
                }
                setComp(g, 1);
                da(g);
                let kk = smooth(1, k);//平滑切换透明度
                setComp(g, kk);
                db(g);
                t.upload();
                ctx.setDebugInfo("rt" ,Date.now() - ti);
                ctx.setDebugInfo("k", k);
                ctx.setDebugInfo("sm", kk);
                rt = Date.now() - ti;
                Thread.sleep(ck(rt - 1000 / fps));
                ctx.setDebugInfo("error", 0)
            } catch (e) {
                ctx.setDebugInfo("error", e);
            }
      }
      print("Thread end:" + id);
    }
    let th = new Thread(run, "qiehuan");
    th.start();
}

function render(ctx, state, entity) {
    state.f.tick();
}

function dispose(ctx, state, entity) {
    print("Dispose");
    state.running = false;
    state.f.close();
}

function setComp(g, value) {
    g.setComposite(AlphaComposite.SrcOver.derive(value));
}
写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

CrystalEggs 发表于 2024-11-16 10:57:25

看不懂，但我大受震撼

Hobbytimeblank 发表于 2024-11-16 20:38:11

全场最瞩目：晴纱是男娘[狗头保命]

596wjr 发表于 2024-11-17 09:29:17

Hobbytimeblank 发表于 2024-11-16 20:38
全场最瞩目：晴纱是男娘[狗头保命]

甚至双引号里面的自动加粗

查看完整版本: JS LCD 切换示例分享