Pixi.js: Как Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ высокого FPS ΠΏΡ€ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅ большого количСства тСкста ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Π΅Π³ΠΎ полоТСния?

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 25 сСнт. 2020  Β·  10ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: pixijs/pixi.js

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, я сСйчас ΠΈΠ·ΡƒΡ‡Π°ΡŽ PixiJS для Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, ΠΈ ΠΏΠΎΠΊΠ° ΠΎΠ½ ΠΌΠ½Π΅ ΠΎΡ‡Π΅Π½ΡŒ нравится! Π•ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ трСбования ΠΊ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ прилоТСния. По-настоящСму слоТная Ρ‡Π°ΡΡ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ мноТСство тСкстовых ΠΌΠ΅Ρ‚ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ постоянно ΠΎΠ±Π½ΠΎΠ²Π»ΡΡŽΡ‚ΡΡ. Π― Π½Π΅ смог Π½Π°ΠΉΡ‚ΠΈ способ Π΅Ρ‰Π΅ большС ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, ΠΈ моя послСдняя Π½Π°Π΄Π΅ΠΆΠ΄Π° - Π½Π°ΠΉΡ‚ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΡŒ Π² этом сообщСствС.

ЦСль

1500 тСкстовых ΠΌΠ΅Ρ‚ΠΎΠΊ
60 ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² сСкунду
60 ΠΊΠ°Π΄Ρ€ΠΎΠ² Π² сСкунду

Π˜Π³Ρ€ΠΎΠ²Π°Ρ ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠ° Pixi

Π― ΡƒΠΆΠ΅ создал ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с использованиСм BitMapText, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Π΅Ρ‚ ~ 28 FPS Π½Π° MacBook Pro.
https://www.pixiplayground.com/#/edit/rLbAN_xrw7yUU_cg_c8Xv

Π•ΡΡ‚ΡŒ Π»ΠΈ Ρƒ вас идСя ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ это? Π—Π°Ρ€Π°Π½Π΅Π΅ большоС спасибо!

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Бпасибо, ΠΊΠ°ΠΊ-Ρ‚ΠΎ сработало созданиС тСкстуры ΠΈΠ· тСкста ΠΈ использованиС Π΅Π΅ Π² спрайтС. Но я ΠΏΠΎΠΊΠ° Π½Π΅ понимаю, ΠΏΠΎΡ‡Π΅ΠΌΡƒ, ΠΈ Π½Π΅ ΠΌΠΎΠ³Ρƒ воспроизвСсти это Π½Π° дСтской ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠ΅. πŸ˜„

Однако Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ обновляСт всС 1500 ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ этикСток ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠ°Π΄Ρ€ со ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ 60 ΠΊΠ°Π΄Ρ€ΠΎΠ² Π² сСкунду. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΆΠ΄ΡƒΡŽ сСкунду тСкстовоС содСрТимоС обновляСтся. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΌΡƒ зависанию ΠΊΠ°ΠΆΠ΄ΡƒΡŽ сСкунду. Π˜Ρ‚Π°ΠΊ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ шагом Π±ΡƒΠ΄Π΅Ρ‚ асинхронная ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° этих тСкстовых ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π²Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€Π΅. Π’ настоящСС врСмя я Ρ‡ΠΈΡ‚Π°ΡŽ ΠΎΠ± ImageBitmap ΠΈ OffscreenCanvas. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсно Π΄Ρ€ΡƒΠ³ΠΈΠΌ, поэтому я подСлюсь своим прогрСссом.

ВсС 10 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Ρ‹ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ 1500 Π½Π° экранС _всС_ Ρ€Π°Π·? Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ Π·Π°ΠΊΠ°Π΄Ρ€ΠΎΠ²Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠΊ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ с ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ. Pixi Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ удалСния ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ, Π½ΠΎ Π΅ΡΡ‚ΡŒ нСсколько ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² сообщСства (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, @pixi-essentials/cull ΠΎΡ‚ @SukantPal), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ здСсь ΠΏΠΎΠΌΠΎΡ‡ΡŒ.

ВсС Π»ΠΈ 1500 этикСток ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹? Если Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡƒΠ±Π»ΠΈΠΊΠ°Ρ‚ΠΎΠ², Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Sprite с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ RenderTexture ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ссылками Π·Π° счСт большСго объСма памяти.

@ChristophWalter ΠŸΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π²Π°ΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΈΠ³Ρ€Π°Ρ‚ΡŒ ΠΎΡ‚ ΠΎΡ‚Π±Ρ€Π°ΠΊΠΎΠ²ΠΊΠΈ, ΠΊΠ°ΠΊ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π» @bigtimebuddy . 1500 этикСток ΠΏΠΎ 112 символов Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ - это ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ. Π•ΡΡ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ваш ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для прСдлоТСния ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, тСкст Π² основном пСрСкрываСтся. Π― Π½Π΅ Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ бСспорядочный тСкст, Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ»ΠΎΡ‚Π½Ρ‹ΠΉ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ смоТСт Π΅Π³ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ.

Установка MESH.BATCHABLE_SIZE Π½Π° большСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 200, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ. Π― Π½Π΅ тСстировал это ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ обСспСчиваСт 45 FPS послС 6-ΠΊΡ€Π°Ρ‚Π½ΠΎΠ³ΠΎ замСдлСния процСссора Π½Π° ΠΌΠΎΠ΅ΠΌ iMac.

Π― Π½Π΅ особо Ρ€Π°Π·Π±ΠΈΡ€Π°Π» этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Однако, Ссли Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π½Π°Π΄ коммСрчСским ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, ΠΈ это оказываСтся ΡƒΠ·ΠΊΠΈΠΌ мСстом Π½Π° сторонС графичСского процСссора, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π±ΡƒΠΊΠ²Ρ‹ (всС Π±ΡƒΠΊΠ²Ρ‹ As, Π·Π°Ρ‚Π΅ΠΌ всС B, всС C ΠΈ Ρ‚. Π”.) ВмСстС. для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π»ΠΎΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ тСкстуры, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ° Ρ‚Π°ΠΉΠ»ΠΎΠ² ΠΈ / ΠΈΠ»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄ΠΈΡ„Ρ„Π΅Ρ€Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ, которая Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ‡Π°ΡΡ‚ΡŒ экрана, которая _ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π°_ (Ρ‚.Π΅. Π½Π° основС 60 ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ ΠΈΠ· 1500 ΠΌΠ΅Ρ‚ΠΎΠΊ). Π­Ρ‚ΠΎ всСго лишь ΠΈΠ΄Π΅ΠΈ, ΠΈ ΠΈΡ… слСдуСт Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠ²Ρ‹Π΅.

Бпасибо Π·Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ!

На самом Π΄Π΅Π»Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π±Ρ€Π°ΠΊΠΎΠ²ΠΊΡƒ, ΠΈ ΠΎΡ‡Π΅Π½ΡŒ маловСроятно, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ярлыков ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. Но ΠΏΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ тСстирования Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠΎΠ½ΠΊΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π½Π΅ Π²Π΅Π±-прилоТСниями. ΠœΡ‹ ΡƒΠΆΠ΅ ставили ΠΏΠΎΠ΄ сомнСниС эти трСбования, Π½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Ссли Π±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ webgl ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΈ с этим.

Π­Ρ‚ΠΈΠΊΠ΅Ρ‚ΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ. Но ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ Ρ‚Π°ΠΊ часто ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ мСняСт тСкстовоС содСрТимоС. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π» для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ. Π― Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ», Ρ‡Ρ‚ΠΎ FPS остаСтся ΠΏΡ€Π΅ΠΆΠ½ΠΈΠΌ, Π΄Π°ΠΆΠ΅ Ссли я Π½Π΅ обновляю ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ( игровая ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠ° ). Π•ΡΡ‚ΡŒ Π»ΠΈ способ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Ρ‹Π²Π°Ρ‚ΡŒ тСксты Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ?

Установка MESH.BATCHABLE_SIZE Π½ΠΈΡ‡Π΅Π³ΠΎ с ΠΌΠΎΠ΅ΠΉ стороны Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π°. Π― Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€ΡŽ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ваши ΠΈΠ΄Π΅ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΊΡƒΠΏΠΈΡ‚ΡŒ iMac Π― Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ люблю Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ эти ΠΈΠ΄Π΅ΠΈ ΠΌΠ½Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚!

Ах, Ссли Π²Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ этот ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‚ΠΎΠ³Π΄Π° Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ сказал @bigtimebuddy , с ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ - ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Mesh ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ эту сСтку Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ (вмСсто использования 1500 спрайтов).

Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π΄Π²Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… прСимущСства:

  • Π­Ρ‚ΠΎ устранит Π½Π°ΠΊΠ»Π°Π΄Π½Ρ‹Π΅ расходы Π½Π° Ρ„Π°Π·Ρƒ Π±ΡƒΡ„Π΅Ρ€ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠ°ΠΊΠ΅Ρ‚Π½ΠΎΠ³ΠΎ отрисовщика.
  • ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π²Π΅Ρ€ΡˆΠΈΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΎ Π² 112 Ρ€Π°Π· (4 / тСкст вмСсто 4 / символ). Π­Ρ‚ΠΎ сниТаСт количСство Π²Π΅Ρ€ΡˆΠΈΠ½ Π΄ΠΎ 6К.
  • Волько ΠΎΠ΄ΠΈΠ½ DisplayObject Π² сцСнС.

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, процСсс Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

  1. Π Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ BitmapText Π² RenderTexture
  2. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ сСтку с Π²Π΅Ρ€ΡˆΠΈΠ½Π°ΠΌΠΈ 1500 * 4.
  3. НСпосрСдствСнно Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠΉΡ‚Π΅ Π²Π΅Ρ€ΡˆΠΈΠ½Ρ‹. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ остороТны, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ экзСмпляр приходится Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π²Π΅Ρ€ΡˆΠΈΠ½Ρ‹ (Ρ‚.Π΅. ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ). Π˜Ρ‚Π°ΠΊ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ для ΠΏΠ΅Ρ€Π²ΠΎΠΉ Π²Π΅Ρ€ΡˆΠΈΠ½Ρ‹. Π’ΠΎΠ³Π΄Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Ρ€ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ (x + ΡˆΠΈΡ€ΠΈΠ½Π°, высота), (x + ΡˆΠΈΡ€ΠΈΠ½Π°, y + высота), (x, y + высота).

Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ простой процСсс. РасскаТитС, поТалуйста, ΠΊΠ°ΠΊ это происходит!

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, я попытался Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π²ΠΎΠ΅ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ BitmapText Π² тСкстуру, ΠΏΠΎΡ…ΠΎΠΆΠ΅, сработало. Но Π² настоящСС врСмя я застрял, ΠΏΡ‹Ρ‚Π°ΡΡΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ тСкстуру Π² сСткС. Π― ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ PIXI.Mesh ΠΈ PIXI.SimpleMesh. НуТно Π»ΠΈ ΠΌΠ½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнный ΡˆΠ΅ΠΉΠ΄Π΅Ρ€ ΠΈΠ»ΠΈ я ΠΌΠΎΠ³Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ PIXI.MeshMaterial?

const bitmapFontText = new PIXI.BitmapText(
    'Lorem ipsum dolor\nsit amet consetetur\nsadipscing elitr sed', 
    { font: '55px Desyrel', align: 'left' }
);

const texture =  PIXI.RenderTexture.create({ width: 800, height: 600 });
app.renderer.render(bitmapFontText, texture);

const vertices = [
    -0.5, -0.5,
    0.5, -0.5,
    0.5, 0.5,
    -0.5, 0.5
];
const uvs = [
    0, 0,
    1, 0,
    1, 1,
    0, 1,
];
const indices = [0, 1, 2, 0, 2, 3];
const geometry = new PIXI.MeshGeometry(vertices, uvs, indices);
const shader = new PIXI.MeshMaterial(texture);

const mesh = new PIXI.Mesh(geometry, shader);
app.stage.addChild(mesh);

https://www.pixiplayground.com/#/edit/7RHqFti0tdSzw -6iOtylk

-
_Edit_: Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΎ. Π’Π΅Ρ€ΡˆΠΈΠ½Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ пиксСлСй. _Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг_: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠΉ тСкстуры Π² сСткС.

const vertices = [
    0, 0,
    500, 0,
    500, 500,
    0, 500
];

-
_Edit 2_: Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ использовании ΠΎΠ΄Π½ΠΎΠΉ тСкстуры для всСх этикСток, Π²Π΅Ρ€Π½ΠΎ? Π― ΠΌΠΎΠ³ Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚ΡŒΡΡ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. ΠœΠ΅Ρ‚ΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ, Π½ΠΎ ΠΈΡ… содСрТимоС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΠ°Π΄Ρ€Π΅.

Π― Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ», Ρ‡Ρ‚ΠΎ FPS остаСтся ΠΏΡ€Π΅ΠΆΠ½ΠΈΠΌ, Π΄Π°ΠΆΠ΅ Ссли я Π½Π΅ обновляю ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ( игровая ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠ° ). Π•ΡΡ‚ΡŒ Π»ΠΈ способ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Ρ‹Π²Π°Ρ‚ΡŒ тСксты Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ?

ΠŸΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π»ΠΈ Π² этом PIXI.Mesh? Π—Π½Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ рСсурс, Π³Π΄Π΅ я ΠΌΠΎΠ³Ρƒ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎ процСссС Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° PixiJS?

@ChristophWalter Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ срСдство Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ (вмСсто использования прилоТСния), Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚ΠΈΠΊΠ΅Ρ€-Ρ†ΠΈΠΊΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Renderer.render _only_ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ вашСй сцСны.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ autoStart: false ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ прилоТСния, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ app.render() ΠΊΠΎΠ³Π΄Π° Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ измСнится. Π’Π° ΠΆΠ΅ Ρ€Π°Π·Π½ΠΈΡ†Π°.

Бпасибо, ΠΊΠ°ΠΊ-Ρ‚ΠΎ сработало созданиС тСкстуры ΠΈΠ· тСкста ΠΈ использованиС Π΅Π΅ Π² спрайтС. Но я ΠΏΠΎΠΊΠ° Π½Π΅ понимаю, ΠΏΠΎΡ‡Π΅ΠΌΡƒ, ΠΈ Π½Π΅ ΠΌΠΎΠ³Ρƒ воспроизвСсти это Π½Π° дСтской ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠ΅. πŸ˜„

Однако Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ обновляСт всС 1500 ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ этикСток ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠ°Π΄Ρ€ со ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ 60 ΠΊΠ°Π΄Ρ€ΠΎΠ² Π² сСкунду. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΆΠ΄ΡƒΡŽ сСкунду тСкстовоС содСрТимоС обновляСтся. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΌΡƒ зависанию ΠΊΠ°ΠΆΠ΄ΡƒΡŽ сСкунду. Π˜Ρ‚Π°ΠΊ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ шагом Π±ΡƒΠ΄Π΅Ρ‚ асинхронная ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° этих тСкстовых ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π²Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€Π΅. Π’ настоящСС врСмя я Ρ‡ΠΈΡ‚Π°ΡŽ ΠΎΠ± ImageBitmap ΠΈ OffscreenCanvas. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсно Π΄Ρ€ΡƒΠ³ΠΈΠΌ, поэтому я подСлюсь своим прогрСссом.

ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ я ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‚ΠΈΠ» расслСдованиС нСсколько нСдСль Π½Π°Π·Π°Π΄
Π― Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π» тСкст Π² Π²Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π° самом Π΄Π΅Π»Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π» довольно просто:

// render-text-worker.js
onmessage = function(event) {
    const textLines = event.data.text.split(/\n/);
    const index = event.data.index;
    const offscreen = new OffscreenCanvas(150,45);
    const ctx = offscreen.getContext("2d");
    ctx.font = "15px monospace";
    textLines.forEach((text, index) => {
        ctx.fillText(text, 0, 15 + index * 15)
    })
    const imageBitmap = offscreen.transferToImageBitmap();
    postMessage({imageBitmap, index});
};
// index.js
const worker = new Worker("render-text-worker.js");
const callbacks ={}
function getLabelTexture(index, text, callback) {
  callbacks[index] = callback
  worker.postMessage({ index, text });
}
worker.onmessage = function({ data }) {
  const callback = callbacks[data.index]
  callback(PIXI.Texture.from(data.imageBitmap));
}

К соТалСнию, для ΠΌΠΎΠ΅Π³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° использования ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠΉ Π½Π΅Ρ‚. Π Π°ΠΌΠΊΠΈ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΏΠ°Π΄Π°ΡŽΡ‚ ΠΏΡ€ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅ тСкста ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, ΠΈΠ·-Π·Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎ пСрСносу растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ· Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ.

Для нашСго ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ случая использования ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π΄Π»ΠΈΠ½Ρƒ тСкста ΠΊΠ°ΠΆΠ΄ΠΎΠΉ этикСтки для достиТСния Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΊ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ