JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
0 X, H4 Z; U* `  d' ]

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   - x& j0 m2 |6 [' m! E
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   * H. i+ w* {% ^! d- r0 [
10.     bounds = font.getStringBounds(str, frc);
    ( r$ k3 O: E1 x% P% Q
11.     return Math.ceil(bounds.getWidth());
    
12. }
    3 i% ]& @2 D4 T
13. 
    * @' {) W; o, C7 v- ^" I0 A
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    - I/ i2 X9 I9 ]7 s3 W
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    + J0 @0 ~( Q1 S$ s4 g6 c
18. 
    
19. db = (g) => {//上层绘制
    5 r% o8 m+ @' E
20.     g.setColor(Color.WHITE);
    ) R: @: g( z8 b" R$ k7 d
21.     g.fillRect(0, 0, 400, 400);
    * j' _8 B+ v- i5 [$ i4 T- Q
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    5 M1 v% I  u* k
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    4 }2 d  ~# `: T
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    6 L# {- _6 |: b, ?+ U; o) c# d
32. 
    7 v3 P8 A5 n9 V0 H3 e. F
33. function create(ctx, state, entity) {
    ; a! S* M) r9 _* A( b. A
34.     let info = {
    ' o+ M% n6 d9 h( I- j0 C! c$ ?; v
35.         ctx: ctx,
    6 \# ?7 S0 d2 O. e; G, M* Z
36.         isTrain: false,
    / j; Y( |! m9 b" t  S. \, i
37.         matrices: [mat],
    
38.         texture: [400, 400],
    # @# V% b- N$ V+ @  T" z" `
39.         model: {
    , N: f8 j+ i6 \
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    6 z( V4 J- o5 u# K8 z/ \
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    3 m8 B; M" s8 w4 R  ?' e
48.     let t = f.texture;
    * N) d2 O: N! X' U; _; ]1 \5 @
49.     let g = t.graphics;
    & j$ t) D: S2 V6 M
50.     state.running = true;
    3 p+ k& }' Y) v8 U3 c$ k
51.     let fps = 24;
    
52.     da(g);//绘制底图
    ) d" y$ G" ?( r' p) W6 Q' M( L
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    * o+ Y6 L5 n$ X" a
56.     let rt = 0;
    8 ^2 _2 x  N* R$ I& J- i
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    , E, j: c7 @% T& B2 G: Y, R" [) T
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    7 I' A! A% @5 J! i5 a9 M
62.     run = () => {// 新线程
    / ]2 O) \2 t: S/ l( N
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    6 }& }: B" n1 b7 y* z( o
65.         while (state.running) {
    * C0 @8 o& a# M& k
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    * ^- c: R% b. W7 ^
68.                 ti = Date.now();
    7 @4 T0 C; \, E9 S+ k9 ^
69.                 if (k > 1.5) {
    3 }6 B4 a' U- Q
70.                     k = 0;
    2 g% t+ y$ [. z5 B# u
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    ; l: Q" b7 r0 l
74.                 let kk = smooth(1, k);//平滑切换透明度
    ( j8 }% `! R+ s( A
75.                 setComp(g, kk);
    * K/ R  T% h' I. O
76.                 db(g);
    
77.                 t.upload();
    # y1 E7 W, P3 L& b) Q
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    4 R2 _! e' @0 Y1 o# R( {
79.                 ctx.setDebugInfo("k", k);
      t" Y- n8 I  |2 W
80.                 ctx.setDebugInfo("sm", kk);
    6 l* R4 i* G# |" i# g- z
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    $ z6 q5 C' q4 {. d( o. a& w; G* Z
83.                 ctx.setDebugInfo("error", 0)
    / y8 o7 T% ?2 y
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    . v. }! S" ^5 H8 c7 p
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    " y7 R% x) k% A  l
90.     let th = new Thread(run, "qiehuan");
    : c1 `4 U5 L$ n% Z
91.     th.start();
    
92. }
    
93. 
    9 @9 \$ T% [* [( n0 P0 p1 S
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    ! T: Y$ G( D" V7 @% x
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    ) `# M" w9 d/ O/ ]) B' l$ i
99.     print("Dispose");
    " O8 D5 y# e1 O2 x
100.     state.running = false;
     
101.     state.f.close();
     1 L; I7 `. O5 A: f. j3 t1 d
102. }
     . _1 W+ U$ F* P/ v# g) H6 n
103. 
     8 U; f% {& N) C4 U9 c$ |3 E
104. function setComp(g, value) {
     1 I. |: v, a3 g0 T
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     . d" s! n1 d8 V8 M& A! A
106. }

复制代码

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

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
/ L# A) z: |( q2 G# U  m

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
7 ^3 D2 d8 f% g. r( s9 C

Hobbytimeblank 发表于 2024-11-16 20:38
9 `& A) c& I$ M- O1 H全场最瞩目：晴纱是男娘[狗头保命]

甚至双引号里面的自动加粗