JS LCD 切换示例分享

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

1. importPackage (java.lang);
   : T! S. O  e  H8 t
2. importPackage (java.awt);
   
3. 
   3 L/ d1 `. Z3 V& M. c# n
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   . j4 ]; [- A# s0 k% l; a
5. 
   9 K, i0 n4 |6 h2 H7 P2 o
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    6 Y- B! Q9 v" z- ~4 e' L4 m
14. da = (g) => {//底图绘制
    5 H9 ?$ b3 h" [& b
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    # C, V5 T1 s% N* b9 K: h- |0 S
20.     g.setColor(Color.WHITE);
    9 W- E0 P, N9 P  o+ J( T9 o
21.     g.fillRect(0, 0, 400, 400);
    . \9 e! C6 [2 J+ a0 A0 F
22.     g.setColor(Color.RED);
    ( W- |. O) c4 a9 [$ o
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    + J5 V' o4 e1 A- A- Q
27.     g.drawString(str, ww / 2 - w / 2, 200);
    & l9 ^8 p: z$ X3 S2 ]- [
28. }
    
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    ) ?7 H8 g2 c5 l  j" H' ]  Z
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    2 ]& S! h0 D$ S- z" S; y, D
37.         matrices: [mat],
    # i7 `# A) c& O6 p( U
38.         texture: [400, 400],
    
39.         model: {
      Z4 v8 ?# R6 D0 h  D, E6 h
40.             renderType: "light",
    
41.             size: [1, 1],
    % U' D+ Y- U  ?& G
42.             uvSize: [1, 1]
    7 g7 H- G' u, H+ t; N2 Y3 I! e
43.         }
    
44.     }
    ) o: n: d* _% x$ b
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    ; L) J0 u( f% z; p3 I2 k
48.     let t = f.texture;
    
49.     let g = t.graphics;
    % j; v7 S$ D" T+ Q: x& D# J" z1 V
50.     state.running = true;
    0 G2 A5 }( Z  N
51.     let fps = 24;
    ( I( V, G0 t1 h6 O/ W$ Q
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    - g+ i2 \0 Q2 M4 L- ^9 l9 ?3 _2 G0 m# _
55.     let ti = Date.now();
    % o# `4 ]: s6 s* m- D
56.     let rt = 0;
    ' ?$ ^7 N1 _& o* @4 X! b
57.     smooth = (k, v) => {// 平滑变化
    ; a' y5 z/ l5 t+ {. b9 B
58.         if (v > k) return k;
    $ M# S: n3 J6 I! ^, n/ O
59.         if (k < 0) return 0;
    2 S) a" M9 N5 A) F1 ^' h3 H: `
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    + I* S' V) A$ h& {! O
62.     run = () => {// 新线程
    0 [$ g; M7 o5 W4 s: Y; p
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;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    # a0 l6 Z/ v5 D! k  _
70.                     k = 0;
    
71.                 }
    " N+ V: g- x; r; \4 ?1 N9 ?1 I
72.                 setComp(g, 1);
    
73.                 da(g);
    + L0 @4 r7 B3 I. I1 i
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    ! ^2 }2 L8 a% Z( W
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
      l2 V9 g7 G( S6 O+ L+ v
79.                 ctx.setDebugInfo("k", k);
    % T4 Z: [& Q- ]0 W$ l* J7 D
80.                 ctx.setDebugInfo("sm", kk);
    - V) f; t5 @% g6 u
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    7 o4 F% l2 y2 W5 P
85.                 ctx.setDebugInfo("error", e);
    0 O/ S) }4 n# X: R; y3 W- k
86.             }
    & c3 V2 S( \* \; \) o6 b
87.         }
    
88.         print("Thread end:" + id);
    ) U6 b, d% v" \" O0 \
89.     }
    $ i2 c# L/ ]4 f2 X
90.     let th = new Thread(run, "qiehuan");
    2 x/ ~4 x% x8 h* @( A6 p- |( T4 T1 r
91.     th.start();
    - t7 [/ ?3 `% t4 L' g& v0 Q
92. }
    : e6 x/ D3 |$ a* B& I9 v
93. 
    ' k9 J) W/ _1 ^5 y9 c; {$ y
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    6 [) }8 t7 ]2 f  V8 ]. b1 E
96. }
    + F2 G! a! ~. P: R* y4 J+ o. z
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    4 V* t  l! T  T1 p9 J5 U* E
100.     state.running = false;
     - w/ v2 w8 T' `4 d% y2 o
101.     state.f.close();
     
102. }
     
103. 
     9 j, @+ m# E9 Q! ~2 K% g2 O9 b
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
       y' r# ]0 n! B, m2 z" P
106. }

复制代码

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

6 [8 W/ j& y) K3 \3 o0 }# r! g! P, ^
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

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

* q/ `$ [- ~" {& v' S甚至双引号里面的自动加粗