Borek

https://flat.social
2023-05-28 18:07
2003-02-03 17:23
541 wizyt

Wpisy Borek na mikroblogu

Borek

2021-07-05 13:21
36 wyświetleń

Ten wpis to kontynuacja poprzedniego wpisu o potencjalnych wskazówkach dotyczących optymalizacji gier zbudowanych w PIXI.js.

*Nieoczywista głupota 2: * Maskowanie elementów to to drożyzna

Każdy element typu PIXI.Sprite i PIXI.Container może być zamaskowany w dowolnym kształcie. PIXI.js pozwala na maskowanie na dwa sposoby:

Używając PIXI.Graphics: prymitywnego kształtu typu kwadrat lub kółko. Oczywistym lecz nadal ciekawym odkryciem było to, że bardziej skomplikowane kształty powodują większe obciążenie GPU w trakcie maskowania. W moim raczej banalnym przypadku chciałem wstawić wideo w kółko - dużo do szczęścia nie było mi potrzeba. Okrągłe wideo, tylko tyle. Kółko, jako stworzenie geometrycznie ma nieskończoną liczbę punktów w tej samej odległości od środka. PIXI.Graphics przybliży nam tą nieskończoność w formę bardziej dyskretną, rysując wystarczająco dużo punktów lub kresek żeby wydawało nam się że patrzymy się na prawdziwe kółko.
Zamaskowanie kilku (120x120 pikseli) prostych filmików w moim przypadku okazało się operacją która ze szpiegowską dyskrecją męczyła komputery moich użytkowników do poziomu szumu wiatraczków. To mniej więcej tak, jakby ktoś przypomniał (wspomnianemu w poprzednim poście) Januszowi, żeby porządnie założył maskę bo pandemia i takie tam a Janusz z trudu zaczął by się pocić, rzęzić, zacinać i chodzić jakby dzień wcześniej zrobił zbyt dużo przysiadów. Żeby było weselej, każdy dodatkowy Janusz pogarszał by sytuację swoją i tych poprzednich.
Używając innego PIXI.Sprite: ten sposób pozwala także na tak zwany alpha masking, czyli jedną teksturę możemy zamaskować inną z dowolnym poziomem przezroczystości. Mimo, że PIXI świetnie radzi sobie z renderowaniem bitmap, maskowanie w tym przypadku to nadal droga operacja - wolniejsza nawet od używania PIXI.Graphics.

Więc jak przyspieszyć proces maskowania w PIXI.js?

Ze zbawieniem przychodzi nam kolejny projekt open source - pixi-heaven, w którym zaimplementowano zoptymalizowaną wersję maskowania używając PIXI.Sprite. W projekcie zawarte są też inne optymalizacje, które nie wylądowały w głównej bibliotece PIXI.js.

PixiJS

PixiJS - The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

http://www.pixijs.com/home

Zobacz całość

5 głosów Obserwuj Komentuj Udostępnij

Zobacz pozostałe 7 komentarzy

Borek

@YourFrog2: Co samej technologii - poszedłem najpierw w aplikację webową, żeby jak najwięcej potencjalnych użytkowników miało dostęp. PIXI.js w porównaniu do innych bibliotek daje sobie bardzo dobrze radę (https://benchmarks.slaylines.io/pixi.html). Jednak w przypadku większych grup zawsze zdarzy się ktoś ze słabszym laptopem i często, jeżeli w grupie jest nawet jedna osoba która ma problem to wszyscy przeniosą się razem na inną platformę. Miks audio + wideo + gra jest dosyć wymagający więc knucie jak zrobić, żeby działało nawet na kartoflu wciąga dosyć dużo mojego czasu.

2021-07-05 14:49
0 głosów
Odpowiedz

WeiXiao

@Borek: ładne

2021-07-05 14:51
1 głos
Odpowiedz

Borek

2021-07-04 09:45
48 wyświetleń

Ostatnimi czasy spędziłem dosyć dużo czasu z PIXI.js. Jest to rewelacyjna biblioteka do renderowania gier 2D. W połączeniu z silnikiem do fizyki Matter.js można zbudować świetnie rzeczy, bardzo szybko. Jednak nie będąc ekspertem w tematyce optymalizacji gier pod względem wydajności na słabych laptopach, można nadziać się nieszczęśnie i ryzykować podgrzanie komuś domu poprzez niepotrzebną utylizację GPU (gorący bug na Lipiec 2021).

Nieoczywista głupota 1 - zbyt częsta zmiana rozmiaru PIXI.Container:

PIXI.Container, we własnych słowach, to jakby tablica korkowa do której można wstawić tekstury, tekst, filtry etc. Jest to przydatny element, używany bardzo popularnie ale...

...problemem na który się nadziałem to zbyt częsta zmiana parametrów width i height. Robiłem to w każdej klatce gry (mea culpa). Z jedną operacją zmiany rozmiaru PIXI.Container, zmienimy rozmiar wszystkich elementów które on zawiera. W liniowej zależności od ilości elementów zawartych w PIXI.Container, jest to droga operacja, którą lepiej omijać jak Janusza z maską pod nosem.

PixiJS

PixiJS - The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

http://www.pixijs.com/home

7 głosów Obserwuj Komentuj Udostępnij

Poznaj

Szukaj pracy

Najlepsze oferty na rynku IT

Programista Systemów Automatyki - PCS7

ISCAS SP. Z O.O. Wrocław (10% pracy zdalnej)

8 000 - 12 000 zł

tia-portal
pcs7
scada

Data Scientist

Smart IT (100% pracy zdalnej)

llm
python
english

DevOps Engineer - migracja serwerów (Kubernetes,Docker,RoR)

Meeting Application Sp. z o.o. Wrocław (100% pracy zdalnej)

Junior Python Developer

Talixo Poland Lubicz 23, Kraków (80% pracy zdalnej)

6 000 - 9 000 zł

django
python
api

Więcej ofert pracy