JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
$ S& @3 i8 r' p& E8 ?

1. importPackage (java.lang);
   / g) B# n4 B1 ^
2. importPackage (java.awt);
   ! }2 v. L+ I3 o8 ^
3. 
   6 I# J' B' u( |) c9 C/ J" J
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   2 y# |4 d, P: `5 S6 f
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   . f% B' h6 [+ T% Z
7. 
   
8. function getW(str, font) {
   ) K* e* ~1 o, x/ F7 q" x" E6 {
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    " c  ^3 Y. E' B7 e( [1 Y
11.     return Math.ceil(bounds.getWidth());
    ' K4 ], u7 u! u  f: l8 J% c
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    " e+ R% ], ]3 N5 V
15.     g.setColor(Color.BLACK);
    % i7 w1 [1 A9 M
16.     g.fillRect(0, 0, 400, 400);
    5 v* R/ X  I1 a1 a4 k; n
17. }
    + y$ Y5 C( b/ k+ `' f1 A* y
18. 
    # p  v2 ^/ C1 |7 l
19. db = (g) => {//上层绘制
    - X) k. n; Z6 @8 e: a
20.     g.setColor(Color.WHITE);
    1 ]5 R& q  F4 p
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    ' M$ k" m  F+ I: O: x. C
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    6 X0 p$ e0 r9 @6 T
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    ' R! G5 ?% O, K+ L2 A2 z
28. }
    8 Z* {& b# i; p; X! O
29. 
    
30. const mat = new Matrices();
    5 z2 z0 N0 w# ~, {
31. mat.translate(0, 0.5, 0);
    5 r! H3 H3 R9 s
32. 
    7 P1 P/ h* |2 ~
33. function create(ctx, state, entity) {
    
34.     let info = {
      K1 [5 p+ f5 [( N( e+ N; G3 p) l
35.         ctx: ctx,
    ) L6 W" K+ z8 q4 D) }
36.         isTrain: false,
    0 N) }* F! ^$ S1 P
37.         matrices: [mat],
    
38.         texture: [400, 400],
    & {6 }# U1 m( N7 r6 f, R
39.         model: {
    : M9 }4 W2 {  d) {( C/ A
40.             renderType: "light",
    8 `( q4 t8 M3 U+ W$ a
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    4 Y' v0 v$ k6 z
44.     }
    
45.     let f = new Face(info);
    $ G) N! ~2 y2 o5 K5 x, F, O# r" Z
46.     state.f = f;
    0 `+ B% t; X& a4 n
47. 
    
48.     let t = f.texture;
    ' x! R! r1 N, r1 i* i
49.     let g = t.graphics;
    * w3 @6 z, p7 s1 \
50.     state.running = true;
    4 A- w" J' w: a7 _
51.     let fps = 24;
    + n# k1 W; [4 t0 ]( p5 |# g
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    7 G' Q% `) ?( t. U
55.     let ti = Date.now();
    $ x4 h$ i  e* `. g  L) }
56.     let rt = 0;
    , b$ o2 {7 i. c% X1 C- |' v0 F, ^" @
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    ; n/ a, d& A  ]
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    ! \4 \0 w$ y! {, r7 g/ \& h( B
61.     }
    + b, |1 L  k* I
62.     run = () => {// 新线程
    ! h6 w8 ^5 l4 \
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    6 E% H' E8 ]7 e* _$ O
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    2 i+ u- A! m9 D$ B- c4 l! }
69.                 if (k > 1.5) {
    , ]2 G' H2 b7 g7 V1 R
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    8 k4 H; K' _9 z9 P
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    ( [- o" V8 ~) V4 e& c' T' n, A
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    1 k' j+ ]* }* Y+ k9 u' n1 r2 w
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    / x5 s, G; `) M6 H% H4 N
84.             } catch (e) {
    6 u+ u9 u. N9 u: _6 b1 }3 V
85.                 ctx.setDebugInfo("error", e);
    , q: Q' C0 _2 t7 e/ u( e$ X
86.             }
    ' a# T2 Z" i/ r- I* h, X
87.         }
    # D, ?, O& I0 \# M5 b) H( Q0 s
88.         print("Thread end:" + id);
    # z& c0 v% {/ |3 o, J) Z
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    . f" m7 s% T, Q) f
91.     th.start();
    
92. }
    
93. 
    - r" k7 n& I5 t( F* S8 c
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    1 h# X# q8 e, t+ a3 E  ]
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    & {2 X/ {- j4 c' `1 X1 x* A( {
100.     state.running = false;
     3 ^* V7 x+ L+ L3 I9 G% R' x9 v# ^
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     ( a/ g' ^! o3 _9 Y7 r! i/ D
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     " a* p% g4 K- T1 G/ u! ]; |
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
+ P$ t3 f7 K  x" R( U& U  v$ a

+ H# L+ _, L9 ]9 X7 \顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
8 j" g5 k  F" Z+ q1 i/ D

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
. |3 N3 \3 X2 _, h全场最瞩目：晴纱是男娘[狗头保命]

; z  F7 R, P" v4 b甚至双引号里面的自动加粗