JS LCD 切换示例分享

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

1. importPackage (java.lang);
   8 y; Y- |) T0 B5 u/ |$ P0 {
2. importPackage (java.awt);
   
3. 
   3 c% r& B: o/ A, g: ^* n
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   + r; [6 Y) u+ Z6 i6 L
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   2 A! p# s4 W* t4 h5 ]9 y
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    " r9 R6 |- B- i  [
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    1 p8 w- E/ V2 z3 _5 x8 t5 F
14. da = (g) => {//底图绘制
    7 g2 S7 V8 x; G+ f8 C: G- O8 T
15.     g.setColor(Color.BLACK);
    , N3 r3 V7 x8 w! d- e
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    - X0 X% I3 d  J! g) R! E* C
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    1 t4 R$ n" D1 Q' {
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    4 ~7 s- q, F/ u4 h5 I+ o: d
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    % a* V9 V/ \; v* n" c
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    ( ?' k7 B5 g8 U
28. }
    ) o3 W8 J4 q/ g6 ?9 |0 v# `; W
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    9 ?+ {1 ^7 Z: X4 E3 y0 ]" [; n
32. 
    : H& @  `8 w1 a5 ^. z" a) Y
33. function create(ctx, state, entity) {
    
34.     let info = {
    6 U3 r6 a. Q1 |6 M5 H& D/ E
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    : D: v! q* y9 e( L- C6 D5 ?" v
38.         texture: [400, 400],
    
39.         model: {
    ' @' Z+ R1 K# e( O- }7 [6 C
40.             renderType: "light",
    
41.             size: [1, 1],
    . B4 T0 ?/ f# ]) `/ V! ]( O
42.             uvSize: [1, 1]
    8 m* x" r+ d2 U% \
43.         }
    
44.     }
    $ N9 z+ W- }3 y6 M* S$ ~7 ]; S
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    : @3 Y5 \( \# }" J  L
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    . ?0 c. e& e  I% j9 b& i' c2 q
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    0 g3 ?9 [1 ~2 G8 O) S( }, Q/ h' s
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    7 K5 p  D1 x5 E/ ?& \" o$ {  {
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    . e9 \" W7 ]+ L
65.         while (state.running) {
    
66.             try {
    1 a: j% i( b1 s3 W, `% `9 y/ e
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    % C- a+ t  Z7 `. w7 X, `! i
68.                 ti = Date.now();
      B- s% ?; C1 I, u6 x6 M2 T
69.                 if (k > 1.5) {
    
70.                     k = 0;
    6 O6 U+ \  Y. i
71.                 }
    ( s+ Q: h- U8 U( Z- E9 j( B
72.                 setComp(g, 1);
      M+ |, P1 v& l6 l! N
73.                 da(g);
    1 i% f& q0 i2 O! M
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    0 ]. I: e4 Y+ k( h& p& @
76.                 db(g);
    ; q4 X" z+ A  V' H* l
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    $ O3 F3 t1 I" t) O* ^' w8 ?
79.                 ctx.setDebugInfo("k", k);
    . Q; {3 k4 q8 `
80.                 ctx.setDebugInfo("sm", kk);
    ) J0 O8 Q% z* X0 R% F% d1 z
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    + m7 Q- `9 l! d% {; i% }4 E( {2 L) R
84.             } catch (e) {
    : `$ t, K1 t) e+ f  }+ ^
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    ( Y) D+ g  `+ q" U& S" W0 D/ f
88.         print("Thread end:" + id);
    % \# F3 j4 P7 i# P1 `$ D$ S
89.     }
      y6 s# d8 I: e+ {7 ^
90.     let th = new Thread(run, "qiehuan");
    ! F0 M( ?- G5 d' R/ [" u% j+ D
91.     th.start();
    
92. }
    0 x* v$ A, u! B7 p; C
93. 
    & Q3 U% \% O' |: _# I
94. function render(ctx, state, entity) {
    " ^. `1 s' @  E5 A
95.     state.f.tick();
    + a% R( U7 l, ~/ |8 N# b* i; U
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    % o. n+ i8 U6 w* P4 U4 {
99.     print("Dispose");
    3 V# `  A' R8 j+ G$ m8 _1 k
100.     state.running = false;
     
101.     state.f.close();
     # T9 a. H. l9 \) q- _
102. }
     0 k  \, b4 G1 c
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     / p! R- V/ A' J. c6 b! W% r
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
0 K5 R5 S0 a- ]2 ?+ {6 a, u
$ ^2 j5 f4 C2 {9 `! b
" V3 B( {. H7 T, @; R0 }顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

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

( t" P& d* c+ x3 @甚至双引号里面的自动加粗