Niska jakość grafiki w HTML5

[nowy_user]

Cześć, mam spory problem z GM. Używam GMStudio 1.4 z eksportem web, i niestety, pomimo, że GM to program przygotowany z myślą o projektach 2d, to  nie jest w stanie wyświetlać ich prawidłowo. Obraz jest rozmazany i gorszej jakości niż w przypadku wersji na Windowsa, a gdy dochodzi do tego skalowanie, i korzystanie z urządzeń z mniejszymi wyświetlaczami to mamy już do czynienia z prawdziwą tragedią: czcionki są kompletnie nieczytelne, a grafiki, choć w wysokiej rozdzielczości też sporo tracą na tym skalowaniu. 

Używam kodu, który został podany w tym artykule: https://www.yoyogames.com/blog/66/the-basics-of-scaling-the-game-view  i kod rzeczywiście fajnie działa, aby dopasować okno gry (przy zachowaniu proporcji)  do ekranów różnych wielkości - tu nie mam zarzutu, Czasen trzeba liczyć się z tym że będą wyświetlać się czarne paski po bokach ekranu, jeśli urządzenie jest niestandardowych rozmiarów, ale to nie jest dla mnie problem. Najgorsza jest jest jakość grafik i czcionek po skalowaniu, tu jest istny dramat. 

 

Stąd moje pytanie:
* Jaką wielkość roomu powinienem zastosować aby spadek jakości był jak najmniejszy? Domyślam się, że najlepiej, aby rozmiar roomu był taki jak rozdzielczość docelowego urządzenia. Problem w tym, że chcę, aby moja gra była używana zarówno na tabletach, smartfonach i komputerach. Teraz wybrałem wielkość room 960 x 540, ale po eksporcie, i na telefonie jakość jest słaba. Na PC i tablecie trochę lepiej 
* Co, oprócz wielkości roomu mogę jeszcze zrobić, aby jakość grafik przy skalowaniu nie obniżała się tak bardzo? 

 

I jeszcze jedno, wszedłem na stronę True Valhalla ( https://www.truevalhalla.com/), gość robiy gry webowe w GMS i nie wiem jak on to zrobił, ale w jego grach jakość i ostrość grafik jest naprawdę super, niezależnie od tego, czy włączam grę na laptopie, tablecie czy smartphonie. Gość sprzedaje też swój 'Mobility Engine' ale to koszt  ok 250 zł,  i sorry, ale płacąc za GMa, który samozwańczo określa się najlepszym silnikiem do 2d, to raczej oczekiwałbym, że normalne wyświetlanie grafik 2d powinno być zapewnione.

[gnysek]

1) używaj web gl i włącz interpolację

2) z tego co widzę, on nigdy nie skaluje gier w górę, tylko w dół

[nowy_user]

Ok dzięki, rzeczywiście, może trochę pomogło. Przede wszystkim room na 960 x 540 oraz stosuje napisy pisane wyłącznie Capslockiem  i jakoś to wygląda. Może nie tak dobrze, jak u True Valhalli, ale ujdzie.

 

Mam niestety inny problem. Używam metody skalowania okna rekomendowaną przez YaYogames: https://www.yoyogames.com/blog/67/the-basics-of-scaling-html5     i w tej metodzie zabrania się ustawiania ' Center the window on the browser' - po prostu gdy się to zaznacza to wtedy okno gry wariuje. Nie jest to problemem, bo dzięki temu kodowi wszystko fajnie działa i  okno dopasowuje się do przeglądarki - zawsze jest scentrowane. Jest tylko jeden problem : screen z paskiem ładowania. Tutaj ten screen się nie skaluje, przez co pasek często wychodzi poza ekran i wygląda nieprofesjonalnie : ( Jak sprawić, aby ekran ładowania się też dopasowywał do ekranu urządzenia? 

 

[gnysek]

Można własne paski robić, gdzieś mają tutorial. Sprawdź też, jaki jest rozmiar canvasa na starcie - może trzeba ręcznie edytować plik .html ?

[nowy_user]

Hej, dzięki poradziłem sobie z tym. Dodałem kod  w pliku JS:

      top: (window.innerHeight/2) + "px"
      left: (window.innerWidth/2) + "px" 

i zadziałało

 

Mam niestety inny problem, który jest mega frustrujący i nie daję sobie z nim rady jestem już u kresu wytrzymałości i może ktoś z Was będzie mi w stanie pomóc. Chodzi o skalowanie okna do rozmiaru przeglądarki / ekranu , tak aby nie było żadnych czarnych pasków, ani rozciągniętego ekranu. 

Kod, który stosuje wygląda następująco:

 

Create:

base_width = room_width*2;
base_height = room_height*2;
width = base_width;
height = base_height;

Step:

if (browser_width != width || browser_height != height)
    {
    width = min(base_width, browser_width);
    height = min(base_height, browser_height);
    scale_canvas(base_width, base_height, width, height, true);
    }  

Skrypt Scale Canvas:

var _bw = argument0;
var _bh = argument1;
var _cw = argument2;
var _ch = argument3;
var _center = argument4;
var _aspect = (_bw / _bh);

if ((_cw / _aspect) > _ch)
    {
    window_set_size((_ch *_aspect), _ch);
    }
else
    {
    window_set_size(_cw, (_cw / _aspect));
    }
if (_center)
    {
    window_center();
    }

surface_resize(application_surface, min(window_get_width(), _bw), min(window_get_height(), _bh));

 

Jako że natywne aspect ratio ( definiowane przez szerokość i wysokość rooma ) ustawiłem pod swój monitor tj. 16:9 to wszystko działa dobrze, gdy gra jest włączona w tybie fullscreen. Niestety, gdy fulscreen jest wyłączony, proporcje przeglądarki nie wynoszą dokładnie 16:9 ponieważ pojawia się pasek adresu, zakładki itd. Stąd też pojawiają się irytujące czarne paski z prawej i lewej strony okna.

 

 

Próbowałem wielu rzeczy, zamieniałem w base width z room_width na browser_width itd, ale jedyne co udało mi się najlepszego zdziałać, to rozciągnięty room ze wszystkimi grafikami, tak ,  że proporcje uległy totalnemu zniekształceniu. Mam nadzieję, że ktoś o dobrym sercu mi pomoże   Podsyłam screena, który obrazuje o jaki efekt mi chodzi:

 

[Threef]

10 godzin temu, nowy_user napisał:

Próbowałem wielu rzeczy

To co dzieje się w twoim przykładzie 1 to rozszerzenie okna z zachowaniem aspect ratio.

Przykład trzeci to rozciągnięcie bez zachowania aspect ratio

To co ty chcesz zrobić z przykładem drugim to zmiana aspect ratio gry i potem rozszerzenie go do okna.

 

Przeczytaj to pogrubione na głos. Jeszcze raz, bo gdy ostatnio ci tłumaczyłem na Discordzie to zapomniałeś.

1. Pobierz wymiary okna
2. Wylicz aspect ratio okna
3. Pomyśl sobie którą krawędź gry możesz zmieniać i przemnóż ją (room_wiidth/height albo camera zależy co używasz) przez aspect ratio okna
4. Rozszerz rozmiar gry do okna z zachowaniem nowego aspect ratio
5. Nie wykonuj poniższego checku bo wykonuje się zawsze. Jest chyba wbudowany event związany ze zmianami okna. Spróbuj go. Jak nie działa i chcesz zrobić mądrze to zapisuj nowe rozmiary okna po każdej zmianie i porównuj z tym

   if (browser_width != width || browser_height != height)
   

[nowy_user]

Niestety, póki co nie udało mi się tego zaimplementować, ale przy okazji chyba wpadłem na dobry trop jeśli chodzi o jakość grafiki w grach HTML5  zrobionych w GMS na urządzeniach mobilnych. Jeśli zaznaczę w przeglądarcę  [  ] wersja na komputer , to nagle gra nabiera ostrości, czcionki nie wyglądają już jak g***o , i  sama jakość grafik jest naprawdę ok. Co zrobić, aby taka rozdzielczość była domyślna ? Przecież nie każdy użytkownik będzie klikał opcję wersja  na komputer w przeglądarce. Czy ktoś ma jakiś pomysł?

 

Podsyłam screeny dla porównania:Smartfon Xiaomi  (Google Chrome) -

 

Standardowy tryb:

https://ibb.co/GFYkCZF

 

Włączona opcja w przeglądarce (wersja na komputer):

https://ibb.co/HqZ6GrL

 

 

 

Akurat na tych screenach mam włączony rozszerzenie Edge scaling  solution, ale nie ma to żadnego znacznie. Innym razem zrobiłem też najprostszą gierkę aplikacji, z prostym  systemem skalowania od YaYogames:  https://www.yoyogames.com/blog/66/the-basics-of-scaling-the-game-view   i efekt jest ten sam czyli:  Jak włączę wersję na komputer to wszystko jest cacy, jak to wyłącze to jakość wygląda jak słowo na literę g.  Jest jakiś prosty sposób na to? Przecież nie będę prosił każdego użytkownika, aby włączył w swoim smartfonie opcję 'wersja na komputer' ,  no bez jaj...

[Konrad-GM]

A jakiś link do tego projektu znajdę?

[gnysek]

Sprawdź wartości display_get_width i window_get_width. Może być tak, że przegądarka przy wersji mobilnej ze względu na "retinę", zwraca, że okno jest 3-4 razy mniejsze i musisz powiększyć grę nie do window_get_width, a display_get_width. Takie rozmazanie sugeruje właśnie, że "wyjście" kamery/surface (bo nie wiem czy masz application surface) jest ustawione na 3-4x mniejsze, niż faktyczne okno.

[nowy_user]

Dzięki @Threef i @gnysek za wskazówki, ja myślę, że w między czasie znalazłem właściwy trop! Po wielu  godzinach zainwestowanych w rozwiązanie problemu, okazało się, że rozwiązanie jest chya prostsze niż się wydawało! Wygląda na to, że problem można rozwiązać za pomocą zmian w dwóch linijkach kodu.

 

Pierwsza sprawa, w kodzie od YoYo zmienić z :

 

base_width = room_width;
base_height = room_height;

na 

base_width = room_width*2;
base_height = room_height*2;

 

a następnie w pliku index z:

<meta name ="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

na

<meta name ="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0" />

 

Nie mam pojecia jak to działa... ale wygląda na to, że działa! Podrzucam Wam efekt, tylko sprawdzajcie na telefonach, bo na PC nie ma sensu:

 

Wersja domyślna, gdzie użyłem kodu od YoYo:

http://apptest.pl/scaltest2/

 

Wersja z moimi modyfikacjami:

http://apptest.pl/scaltest1/

 

Proszę, dajcie znać czy na telefonie widzicie znacznie lepszą jakość w wersji z modyfikacjami. Jeśli tak to znaczy, że udało się rozwiązać jeden z największy bugów eksportu HTML5 w historii GMS, nad którym tysiące użytkowników spędziło setki godzin! Niewiarygodne! 

 

Pozdrawiam,

nowy_user

 

 

[Konrad-GM]

Tak jak zasugerował to już @gnysek, jest to poprawne zachowanie przeglądarki na mobilkach. Używasz <meta> viewport które jest tutaj "problemem" tak jak sam zauważyłeś. Zaproponowane przez Ciebie na sztywno wstawienie skalowania działa u mnie (prawie) ok, ale ostatecznie nie działa to idealnie. Jakbyś miał czas i chęci to usprawnić, to myślę, że użycie window.devicePixelRatio byłoby lepszym rozwiązaniem - w ten sposób obsłużysz każdy ekran tak naprawdę.



Podgląd w devtoolsach, na mobile mam devicePixelRatio = 3, a na desktopie mam 1. Szerokość ekranu mobile u mnie to 1080px a ww. canvas to 360px. Jakby pomnożyć szerokość 360px * devicePixelRatio (czyli 3) to na mobile zwróci poprawny rozmiar 1080px. Na Twoim drugim poprawionym przykładzie liczy mi 720px więc to jest *prawie* ok, idealnie u mnie działałoby to przy scale = 0.3333 (1.0 / devicePixelRatio).

[nowy_user]

Hej, wielkie dzięki @Konrad-GM za tak rozbudowaną odpowiedź. Pewnie, że chciałbym to udoskonalić - aby już ten problem załatwić raz na zawsze i nigdy nie musieć o tym myśleć. Na YoYoGames wiele ludzi narzeka na to skalowanie słusznie argumentując, że domyślnie grafika jest tak fatalna, że eksport Html5 nie ma tak naprawdę sensu... gdyby tylko wiedzieli, że naprawa tego nie jest taka trudna...jeśli jeszcze tylko udałoby się usprawnić to rozwiązanie, które zaproponowałem, to wiele rozczarowanych ludzi mogłoby na nowo zacząć korzystać z tego eksportu - to jak zacząć nowe życie

 

Próbowałem też solucji Gnyska, i zmieniłem z :

surface_resize(application_surface, min(window_get_width(), _bw), min(window_get_height(), _bh));

na 

surface_resize(application_surface, min(device_get_width(), _bw), min(device_get_height(), _bh));

oraz w stepie z:

if (browser_width != width || browser_height != height)
    {
    width = min(base_width, browser_width);
    height = min(base_height, browser_height);
    scale_canvas(base_width, base_height, width, height, true);
    }

na

    if (display_get_width() != width || display_get_height() != height)
    {
    width = min(base_width, display_get_width());
    height = min(base_height, display_get_height());
    scale_canvas(base_width, base_height, width, height, true);
    }

 

i niestety aplikacja skaluje się dziwnie....  Podsyłam link: http://apptest.pl/scaltest3/   . Chyba to jednak nie ten trop, ale dzięki Gnysek za pomysł. GM w eksporcie html5 zachowuje się nieco nieprzewidywanie , więc trzeba próbować czasem na 'chybił - trafił'  

 

Słuchajcie, jakbyście mieli ochotę się tym pobawić, to udostępniam plik do edycji (gms1.4) - jest to wersja bazowa, bez poprawek :  http://apptest.pl/pliki/Scale_test.gmz  Moźe dzięki temu uda się jeszcze bardziej to zoptymalizować -  dzięki temu wielu twórców GMSa, którzy cierpią katusze z powodu dziesiątek godzin spędzonych na optymalizacji grafiki w HTML5, w końcu będą mogli odetchnąć z ulgą (uwierzcie mi, jest ich wielu, bo szukając rozwiązania tego problemu, w internecie natknąłem się na masę postów od sfrustrowanych osób, zarówno na GMC jak i redditowym forum GMa). Kto wie, może za to osiągnięcie dostaniemy nawet GameMakerowego nobla  

 

@Konrad-GM - dzięki też za podesłanie informacji o window.devicePixelRatio . Co prawda nie jestem ekspertem od JS, ale zobaczę, może uda mi się coś zaimplementować.

 

EDIT:

Niestety, mam kiepskie wieści, chyba moja ekscytacja była za wczesna. Opisałem mój problem na gmc, wraz z opisem mojej solucji, i odpowiedź, którą otrzymałem nie jest zbyt pozytywna:

 

Cytuj

This is a bad fix for the problem. It relies on the fact that the device you are testing the game on has a pixel density of 2, setting the scale therefore seems to fix this, but it probably leaves everyone with a different pixel density with the same problem (if not worse). Essentially, this is solving the problem for you, creating it for others.

YellowAfterLife has the right explanation and solution to this. It's not really a problem with game maker itself, and while I don't necessarily expect GM to do that for me, one of the many updates in the past years should definitely have included AT LEAST a native way to get the devicePixelRatio (it's a single line of code in JS). Why that didn't happen yet is a mistery to me, nobody would want to publish an HTML5 game without addressing this.

 

Wspomniane rozwązanie YellowAfterfLife (https://yal.cc/gamemaker-html5-hdpi-support/)  dotyczy jednak GMS2 a nie GMS1.4 więc niestety będę musiał prawdopodobnie znaleźć swój sposób na to... niemniej jednak YellowAfterLife wspomina o devicePixelRatio  co pokrywa się  z tym, o czym pisałeś Konrad-GM , może jesteśmy zatem na dobrym tropie.

 

[Konrad-GM]

Napisałem mega prosty skrypt, spróbuj dodać go do shella index.html przed zamknięciem taga </body>:

<script>
    (function (window, DOM) {
        'use strict'

        var vp = getMetaViewport()

        window.addEventListener('resize', updateMetaViewport)
        updateMetaViewport()

        function getMetaViewport() {
            var meta = DOM.querySelector('meta[name="viewport"]')

            if (!meta) {
                meta = DOM.createElement('meta')
                meta.name = 'viewport'
                DOM.head.appendChild(meta)
            }

            return meta
        }

        function updateMetaViewport() {
            var width = window.innerWidth * window.devicePixelRatio
            vp.content = 'width=' + width + ', initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'
        }
    })(window, document);
</script>

 

[nowy_user]

@Konrad-GM wielkie dzięki, ja w międzyczasie zacząłem intensywnie adaptować skrypt od YAL z GMS2 do GMS1 i chyba mi się to udaje... jak tylko skończę to podzielę się z Wami efektami   Jakby coś to wypróbuję też kod Jeszcze raz dzięki!

 

EDIT:

 

Chyba mi się udało, i to przy okazji z rozciągnięciem okna na całą przeglądarkę (bez rozciągania surface)... spójrzcie na to, ostrość jest ok, chyba to działa tak jak powinno?:

 

http://apptest.pl/scaltest12/

 

Jedyne, czego tylko nie kontroluje to wielkości rooma, na wszystkich urządzeniach jest to ok1920 x 1020 a ja w ogóle takiej wielkości nie ustawiałem ( w ustawieniach rooma jest to 960 x 540 ). Niemniej jednak jesteśmy Panowie na dobrym tropie, GameMaker'owski nobel chyba w tym roku powędruję do GMClanu ;D

[Konrad-GM]

Teraz działa u mnie ok, zrobiłem test na mobile (devicePixelRatio = 3) jak i desktopie ale w trybie mobile (devicePixelRatio = 2)


Desktop w trybie mobile (720px i devicePixelRatio = 2)


Mobile (1080px i devicePixelRatio = 3)

[gnysek]

Akurat przypadkiem YAL, jeden z najbardziej kumatych twórców GMa (to ten od GMLIVE) napisał posta na ten temat:

 

https://yal.cc/gamemaker-html5-hdpi-support/

[nowy_user]

1 minutę temu, gnysek napisał:

Akurat przypadkiem YAL, jeden z najbardziej kumatych twórców GMa (to ten od GMLIVE) napisał posta na ten temat:

 

https://yal.cc/gamemaker-html5-hdpi-support/

Dokładnie, ja właśnie skorzystałem z jego artykułu (tzn on jest  przygotowany pod GMS2 , ale tak naprawdę wystarczy pozmieniać kilka rzeczy i działa na GMS1.4 ). Jest jeszcze kilka rzeczy, których tam nie kumam, ale na szczęście kodu jest na tyle mało, że mogę się w to lepiej wgryźć i rozkminić co i jak.  YAL to rzeczywiście jeden z najlepszych użytkowników gmcommunity, jego GMLive wymiata, ale GMEdit inne rozszerzenia też są super. YoYo już dawno powinno go zatrudnić i zapłacić mu dobrą wypłatę.

 

Przy okazji, Konrad, co to za ciekawe narzędzie do sprawdzania , jak aplikacja wyświetla się na różnych urządzeniach? Też chciałbym tak potestować

[Konrad-GM]

25 minut temu, nowy_user napisał:

Przy okazji, Konrad, co to za ciekawe narzędzie do sprawdzania , jak aplikacja wyświetla się na różnych urządzeniach? Też chciałbym tak potestować

Zwykły Chrome, a DevTools można znaleźć pod F12 lub Ctrl+Shift+I albo z menu > Więcej narzędzi > Narzędzia developera. Do pracy głównie używam Chrome dlatego na nim ogarniam toolsy (dla remote debug), a firefox z tego co wiem też ma podobne DevToolsy.