Rendering Crisp Pixelart in Phaser (2017)

I had this problem while building my pixelart game in Phaser. My Pixelart was blurry. It didn’t looked nice. I was searching the web for an answer but i didn’t found one. Many of the tutorials were outdated so i decided to write my solution here.

You can find the working example here: http://www.noob-programmer.com/pixelart_example/

Example above works for Chrome and Mozilla Firefox.

Solution includes editing CSS and one line in phaser script.

Here is the CSS which you need to apply to your html element:

body {
  filter: none;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

Used it on body element.

The other line is the Phaser script:
var game = new Phaser.Game(200, 150, Phaser.AUTO, 'gameContainer', {
      preload: preload,
      create: create,
      update: update
    }, null, false, false);

The last parameter (“false”) is for antialiasing. It needs to be set to false.

What about other browsers? What do i need to change in order to get crispy Pixelart? Check this solution:

body {
  -ms-interpolation-mode: nearest-neighbor; // IE 7+ (non-standard property)
  image-rendering: -webkit-optimize-contrast; // Safari 6, UC Browser 9.9
  image-rendering: -webkit-crisp-edges; // Safari 7+
  image-rendering: -moz-crisp-edges; // Firefox 3.6+
  image-rendering: -o-crisp-edges; // Opera 12
  image-rendering: pixelated; // Chrome 41+ and Opera 26+
}

Source: https://builtvisible.com/image-scaling-in-css/

Source: https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look

Budowanie projektu i pierwszy prototyp.

Programując już od jakiegoś czasu, zdałem sobie sprawę, że nie wszystkie rzeczy będą takie na jakie wyglądają. Szczególnie jeżeli chodzi o naprawę bugów i błędów.

Znacie to, gdy zaczynacie coś programować i się okazuje, że napotykacie na problemy, które na pierwszy rzut oka nie wydają się takie trudne, ale gdy tylko trochę nad danym problemem spędzicie czasu, to się okazuje, że jest ciężej niż moglibyście się tego spodziewać.

Długo nie pisząc, możecie obejrzeć sobie pierwszy prototyp na GitHubie: https://github.com/petercrowed/PianoGame/tree/master

A “zagrać” możecie tutaj: http://www.noob-programmer.com/piano/piano.html

Błędy, które wciąż występują to:

  • Dźwięk kliknięcia podczas przyciśnięcia klawisza
  • Możliwość “surfowania” po klawiaturze (choć to nie jest błąd, ale lepszy UX (User Experience))
  • Opóźnienie przy naciśnięciu klawisza
  • Przy dłuższym naciśnięciu “dublowanie” się dźwięku

Najwięcej kłopotów miałem z CSSem i HTMLem. Z takich głupot początkującego programisty… Na przykład użyłem znaku # (sharp) w nazwie klasy. Jak się okazuje jest to błąd. Co prawda ten błąd nie wyświetli się wam w logach, ale po prostu klasa w CSSie nie zostanie wywołana.

Obejście problemu, gdy ma się 25 klas ze znakiem “#”? W końcu dźwięki taki znak posiadają. Choćby: “A#, C#, D#, F#, G#”.

Zamienić nazwy na końcówkę “is”, a następnie w kodzie przetłumaczyć, przy pomocy “String replace”.

var blackKeyName = ".black." + notes[e.keyCode];
substring = "#";
var newBlack = blackKeyName.replace("#", "is");

W ten sposób CSS nam nie wariuje, a mimo to dalej html przekazuje dany dźwięk do wywołania.

Co zostało do zrobienia to na początek naprawa błędów, a potem można się zabrać za rozbudowywanie programu o nowe funkcje.

Z technologii które póki co użyłem to jQuery i Tone.js. Co prawda ten jQuery słabo mi pasuje i pewnie go zastąpię… jeżeli tylko znajdę inne, lepsze rozwiązanie.

I trochę dodatkowej dawki humoru na koniec.

Ulubiona tonacja gitarzysty programisty?

C#

Poradnik do frameworka CreateJS #1

Jako że nie ma żadnych materiałów do tej technologi w języku polskim to postanowiłem kilka rzeczy potłumaczyć, a kilka sam napisać. A przy okazji utrwalić już zdobytą przeze mnie wiedzę.

Zacznę może od EaselJS, który wchodzi w skład pakietu CreateJS.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script>
        function init() {
            // twój kod.
        }
    </script>
</head>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="500">
        // dodatkowa zawartość 
    </canvas>
</body>
</html>

Read More

Dzień 1. Projekt.

Każdy mój projekt zaczynam od tego, że sprawdzam czy już ktoś nie wpadł na podobny pomysł. Sprawdzam jakich technologii użyli, podglądam czego również mógłbym użyć w swoim projekcie. W końcu nie ma sensu wynajdować koła na nowo.

Jak to ostatecznie będzie wyglądać, sam nie mam dokładnego planu. Póki co z technologii, które planuje użyć to:

Three.js oraz Create.js do wyświetlania grafiki.

Three odpowiedzialny jest za wyświetlanie 3D, a Create 2D.

Jeszcze dokładnie nie wiem jak uda mi się to ze sobą sprawnie połączyć, ale będzie to nie lada wyzwanie.

Ewentualnie pójdę na łatwiznę i po prostu użyję tylko jednej technologii.

Do dźwięku zamierzam użyć Tone.js oraz Audiolib.js Read More