JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   : O# m, Z2 \- b( ^/ {
2. importPackage (java.awt);
   : ?' N* C6 q, N# X; \
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   % ?6 e( o( R, W
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ( d$ c5 W& d: v! b4 {) W: t; n
7. 
   
8. function getW(str, font) {
   % Z/ h$ g' ^6 T/ a
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    1 U. U* z3 T( X) n9 I( y: H
13. 
    
14. da = (g) => {//底图绘制
    + T6 D0 V. ~" r$ S  E6 Y0 P, |) V
15.     g.setColor(Color.BLACK);
    ) D( y6 }& X. p8 b; R  B$ B
16.     g.fillRect(0, 0, 400, 400);
    ' P( D- x( o8 D
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    $ S  p7 V/ n- B( @2 k* }" T" ^
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    6 z% A/ V9 S: {- X3 i, P; Q
25.     let ww = 400;
    7 S% ]5 E( A! ]: o
26.     let w = getW(str, font0);
    ) I, \; a; B  F9 R
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    ( N8 I1 \% Z* P. X, Z: K: Q1 t8 G; r
29. 
    - G- D- R; g4 o, J
30. const mat = new Matrices();
    ; N# C: ~5 k: `) r. m! V
31. mat.translate(0, 0.5, 0);
    7 L' I5 s0 H/ ^& T! d
32. 
    7 i/ s8 ]' @* C* U- H* V4 [  `, x
33. function create(ctx, state, entity) {
    
34.     let info = {
    ) D1 S0 A' M; r% `
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    ; O; l/ U1 O" W4 D& L4 F) |% `1 x" W
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    3 {1 F! z* e9 V* [, t! x$ q9 a
41.             size: [1, 1],
    ' a, F/ F# G) V% Y
42.             uvSize: [1, 1]
    * R+ f3 b6 f4 A2 V
43.         }
    
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    . g' c' C" c" a3 X  ~: f# F
48.     let t = f.texture;
    : y& G5 g( [& E
49.     let g = t.graphics;
    . E$ _; S" p1 S) ]6 Z  m. Y
50.     state.running = true;
    
51.     let fps = 24;
    ( L$ P5 J- S1 C+ R( p8 |. q" Z
52.     da(g);//绘制底图
    # u, U% i8 e, |% D1 a, N" b% K* ~
53.     t.upload();
    
54.     let k = 0;
    - Y/ R6 ^' G/ N4 n6 l/ b- G3 |' n
55.     let ti = Date.now();
    " S- |9 J! O) s9 t7 j
56.     let rt = 0;
    " D2 e- h0 m2 m/ i& x4 J! y# N
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    6 P4 z; N1 Y, r! ~: T) b
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    ( z$ c5 W4 ~- _! R3 q. Y3 C1 b; k
61.     }
    7 a; m  m" m& y' V3 O
62.     run = () => {// 新线程
    , \0 o& u7 N" F3 r- A4 f
63.         let id = Thread.currentThread().getId();
    0 b6 E8 `$ z% o( I. M  B2 \  d
64.         print("Thread start:" + id);
    * Q% ?) k7 V3 a- z3 J
65.         while (state.running) {
    
66.             try {
    - a$ S, A8 t. i& J! s
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ( p  f6 X# O) q5 C, Q" C5 R7 \* [
68.                 ti = Date.now();
    " s/ z2 t& C) f/ }
69.                 if (k > 1.5) {
    
70.                     k = 0;
    9 m0 f" U  \1 m! h3 u  t$ @/ K
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    7 Q/ l: T; A6 D+ O; R3 t$ X
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    : d$ l$ j' ~4 t
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    ( ]; o* m6 I2 n: a( z! `
84.             } catch (e) {
    ) x- |6 F+ W4 S1 J1 k1 S4 U
85.                 ctx.setDebugInfo("error", e);
    0 a% v4 ^' q7 |! [3 ?5 m
86.             }
    5 t( ?4 i9 q; V* Z2 Z
87.         }
    % R$ e) g+ z/ z& f' t$ S5 m$ H
88.         print("Thread end:" + id);
    
89.     }
    8 T0 Y1 B6 T: l2 s4 l* J
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    ' k0 L) n+ b- b& ?
92. }
    : A- M4 U. S5 d7 |7 p
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    2 F3 ]# O4 h6 H, ?  ~6 y& I8 g) Q
96. }
    
97. 
    4 a4 q" ]% R/ n
98. function dispose(ctx, state, entity) {
      N5 K5 ^& w3 q1 q. p; Z8 f* q
99.     print("Dispose");
    
100.     state.running = false;
     . c2 t9 _# B! x- R" a9 |; N# @
101.     state.f.close();
     1 W' m& o. z3 B# R% P
102. }
     / K* M9 d9 U8 @
103. 
     3 @2 f% O) p5 e' L" [$ g
104. function setComp(g, value) {
     4 P5 d# L8 \% z
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     + J$ @* y+ l6 x# c1 O, n" ~
106. }

复制代码

6 Y4 Z! t( ]1 W' q9 y7 x3 H/ l写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。


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

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
2 a( h6 s: p( G) G+ _* y/ h( A& e

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

- w/ n# N; E: S" t0 x甚至双引号里面的自动加粗