JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
1 g: ^: i+ i8 A; |* A

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   . a4 A& j# Z# x8 B0 {" |' V
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   * |& ?6 L& ^6 U& S$ H, C9 B
7. 
   3 S. D: g0 I+ A2 n; b6 W  @. Z
8. function getW(str, font) {
   6 Q8 p3 U! F! J3 W2 i
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    ; A' x# w; s9 w' p0 h
12. }
    * b- f+ E6 Y  H6 s
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    % y$ H: I. o+ ?
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    ) s5 @" Y4 U# D$ j
23.     g.setFont(font0);
    & ]/ ?3 A! L$ }& ]
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    $ f3 }( S9 K+ k5 L) F& {+ J4 U% ?% \8 o
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    2 s1 }" k/ A8 U, H$ q( a4 [, {
30. const mat = new Matrices();
    ! p$ o3 J- _- w6 t
31. mat.translate(0, 0.5, 0);
    
32. 
    8 [0 M9 [5 L4 {. c# t9 a
33. function create(ctx, state, entity) {
    4 N0 ~- Q8 w- B, i2 u& E
34.     let info = {
    $ A" V1 @& {3 c/ E1 @! y; V6 U
35.         ctx: ctx,
    8 `- e9 {+ Y& c( O, D
36.         isTrain: false,
    ' u. P3 J) r/ p% {1 j
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
      b4 P0 C: L2 L
40.             renderType: "light",
    9 H* Q3 _. Y! m. V8 r" T
41.             size: [1, 1],
    5 ~1 E& t( o+ b$ j& l0 H; P( Z, w0 @
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    2 `% J; d0 N4 t: u. c9 ]
45.     let f = new Face(info);
    7 h. Q/ Q7 J6 V1 z: x
46.     state.f = f;
    . s: R, P% n3 K1 Q5 ]
47. 
    + t$ O" J7 o* z+ T; I
48.     let t = f.texture;
    & L' R2 \! N4 `6 v/ k5 r
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    ; X3 k2 n; b0 T! k& R' y& B; w7 [
53.     t.upload();
    / _& d6 i1 H' B- e' U& M2 s# D
54.     let k = 0;
    
55.     let ti = Date.now();
    ' n# T% b" r. A1 j: ?2 @, z
56.     let rt = 0;
    5 ~+ \/ l/ {  a2 D- t
57.     smooth = (k, v) => {// 平滑变化
    ) q' f. w3 P4 I% Z
58.         if (v > k) return k;
    , l$ E8 g& _" V7 L, B( g
59.         if (k < 0) return 0;
    7 f& j" P! N3 m: p& v7 A
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    % s  X6 O5 F3 k1 @
61.     }
      z: O  P8 z' s. ~9 T; {
62.     run = () => {// 新线程
    3 M, z( a* ^" B$ ]
63.         let id = Thread.currentThread().getId();
    / [1 M0 x7 g  q$ V9 O2 O6 t, i
64.         print("Thread start:" + id);
    / ^4 ~' I" ^3 w1 b7 K2 M
65.         while (state.running) {
    / k" R! q$ J0 V
66.             try {
    2 s* l+ s0 u5 |% v% X: g
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    . R3 r% h; W/ f
68.                 ti = Date.now();
    9 }1 g4 e% M6 i
69.                 if (k > 1.5) {
    
70.                     k = 0;
    $ }4 V# f9 n! j
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    3 p" Z0 q( e, S: @
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    3 ]: T, I0 m$ S' q
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    $ l/ R5 w) u  S
79.                 ctx.setDebugInfo("k", k);
    ( o0 R) @6 n' X& Q. p
80.                 ctx.setDebugInfo("sm", kk);
    " P- A" X$ i8 u' Y9 L- X: C
81.                 rt = Date.now() - ti;
    & z3 [; p; t; a, p+ V; T  s. g$ o
82.                 Thread.sleep(ck(rt - 1000 / fps));
    # p, M( {# P7 e" U2 X
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    , v6 a- ~: E1 t+ v
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    1 c9 ^- @2 X3 v7 j
87.         }
    & S; @8 G$ h8 Q1 f! M2 B
88.         print("Thread end:" + id);
    - I% K% O8 W) z4 D+ G8 ~
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    8 A5 v2 E0 `+ j" Y
91.     th.start();
    2 o7 @* Y5 I- I
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    : {3 E: ~9 c: _9 u+ s6 Y. ^' g
95.     state.f.tick();
    5 p1 X. R2 T2 F. {( o
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     & c% A8 t/ l: T
101.     state.f.close();
     
102. }
     
103. 
     : R# U9 e$ g) B3 O1 u
104. function setComp(g, value) {
     ; \+ H2 l% a9 d' \
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

  C, v3 k/ a% b顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
  U5 a' F; g) W# L( C

Hobbytimeblank 发表于 2024-11-16 20:38
1 |9 N& a& V9 I) I# e/ N/ J全场最瞩目：晴纱是男娘[狗头保命]

/ I; n. M4 `  R& n4 ?9 |( Z甚至双引号里面的自动加粗