JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
; r9 a2 L1 z$ z% O

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   ' `- A; q3 F8 D
3. 
   2 ^, N0 T2 b2 v* A4 P- Y* y0 k
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   ' e# O" c9 C1 r- d
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   / T3 X" c' a! N' g
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    5 V, q+ H& {  E
12. }
    ' r, @( I: x9 _: a/ t
13. 
    " X9 ^' A7 i) w, H5 D, J* Y0 ~% s
14. da = (g) => {//底图绘制
    9 _7 f* g& T% l) ?$ w
15.     g.setColor(Color.BLACK);
    1 N& v& u7 E4 X* V( N1 O( y
16.     g.fillRect(0, 0, 400, 400);
    3 G, k( C, n8 \/ G
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    9 g% d: J; y8 y- I' G* |5 T  ~  j6 g
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    3 W1 K8 k; r  j
26.     let w = getW(str, font0);
    ) r) t! V3 G! ]% \
27.     g.drawString(str, ww / 2 - w / 2, 200);
    ! U* k6 b6 `6 A
28. }
    & A1 Z* c+ h, v6 F
29. 
    5 }" b8 R" v% @6 B3 O% D
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    * ~! x3 _- \' T, M5 i/ b, }2 c
33. function create(ctx, state, entity) {
    
34.     let info = {
    + J8 S" Y' u7 u+ ~$ T! m; P1 i
35.         ctx: ctx,
      ^2 }/ ?* x" n" z) X3 R& K
36.         isTrain: false,
    - c* {) K* z4 [0 Z$ u( N& X
37.         matrices: [mat],
    
38.         texture: [400, 400],
    * A3 p. ~* q7 v6 l
39.         model: {
    3 J# r* [* C% o# ]% ?
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    9 X; \/ }2 y; i- i/ m; f, |( p- P$ j
43.         }
    $ V9 r$ I. n9 Z' x3 w/ D7 W$ a& z
44.     }
    7 G3 t8 \6 k* U( G- \6 `
45.     let f = new Face(info);
    
46.     state.f = f;
    1 R4 R8 x8 v) p, N/ W# }# u
47. 
    
48.     let t = f.texture;
    , O  p" ^, f( i# l+ n) U4 A
49.     let g = t.graphics;
    
50.     state.running = true;
    % B+ e0 Y' k2 P0 v' ~$ ~
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    ; T1 d  Y# A) C
55.     let ti = Date.now();
    / W4 r! D1 l6 f/ c% ~4 @' w: B- c
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    1 t' i9 ~' I0 Q1 A
58.         if (v > k) return k;
    ( }5 }" @4 i' x/ |+ k
59.         if (k < 0) return 0;
      y" |3 R' U3 Q
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    / X# q/ y. m0 X7 L4 S8 Y
61.     }
    
62.     run = () => {// 新线程
    ' I1 V# c2 X6 I
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    8 t; U+ e1 X, J! ~  ]+ b
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    - f2 ]0 F) O0 _5 s
70.                     k = 0;
    8 m# D( l( I* q" g9 {
71.                 }
    
72.                 setComp(g, 1);
    # \- e' P; ?& a; r) j9 ?; T$ K8 r% k
73.                 da(g);
    9 Q+ p8 o- V+ n0 ]+ s5 C
74.                 let kk = smooth(1, k);//平滑切换透明度
    0 f- F" U# a' y' D& _
75.                 setComp(g, kk);
    + C4 S* |( V5 |
76.                 db(g);
    
77.                 t.upload();
    - x% S* U- G& _! A9 E
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    8 Z4 e0 C6 c& H
80.                 ctx.setDebugInfo("sm", kk);
    3 _+ x" B( X7 N5 z% K$ b3 ^
81.                 rt = Date.now() - ti;
    " [5 R5 }( m# \  v1 e
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    - u1 j* v0 P. k+ j0 @2 S, X7 l7 G
86.             }
    * m1 n3 \/ D' D
87.         }
    ; F0 [# W- y- @! e4 U$ e# i
88.         print("Thread end:" + id);
    * E" M2 |$ D+ S4 u
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    & Z7 W( T  ?4 R1 p3 ?; g1 s
93. 
    5 J" }4 z# Q! `$ t0 z& D
94. function render(ctx, state, entity) {
    . ~4 l1 ]  z# {: a
95.     state.f.tick();
    
96. }
    
97. 
    # g2 D& r  l9 n" H& E- J* h( ~5 i4 W
98. function dispose(ctx, state, entity) {
    9 M* C" U1 B2 x/ d6 j
99.     print("Dispose");
    0 U! ?9 m$ ?/ F) i7 m3 }! ~
100.     state.running = false;
     
101.     state.f.close();
     " q+ n! o8 t' e9 R! b8 c- R
102. }
     2 r3 i  r" d7 d: d2 w
103. 
     
104. function setComp(g, value) {
     0 E7 S4 X  r2 y4 w$ d5 p5 L
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

$ u3 g. t8 \: E0 ~8 g# P写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
0 r5 q, c9 i# _: \! b$ q4 c" M2 O

% k& O+ u2 P2 o& w2 f/ w顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
4 E; p$ b6 }4 p& m

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

7 _( L, G# }6 @* V! C$ {甚至双引号里面的自动加粗