Phaser 026 – Fullscreen für alle …Bildschirme

Ab jetzt wird sich die Welt für immer verändern! Gemeint ist natürlich die Spielewelt. Bisher wurden die Spielfeldgrößen per Pixelangaben definiert. Ab jetzt wird alles im Fullscreen-Format erstrahlen! Alles andere wäre doch reine Platzverschwendung.

Achtung – Achtung – Achtung

Das hier aufgeführte Beispiel funktioniert nicht mehr in der aktuellen Version Phaser CC 2.8.7 von 2017. Die letzte Zeile muss neuerdings entfernt werden. Ansonsten bleibt alles beim Alten. Die folgenden zwei Codezeilen funktionieren.

Da der Download noch eine ältere phaser.min.js beinhaltet und dort reibungslos läuft, lasse ich die alte Schreibweise im Beispiel bestehen.

– Info endet hier –

Beispiel

Da die Beispiele nun auch im Fullscreen Format vorgestellt werden, lagere ich sie zukünftig in den meisten Fällen auf neue Tabs im Browser aus.

Zum Beispiel für dieses Kapitel – bitte hier klicken

Fullscreen und Bildqualität

Das Beispiel hat ursprünglich eine Größe von 320×480 Pixeln. Das entspricht eher Smarthphone-Displays. Durch die Befehle die ihr gleich kennenlernen werdet, wird das Beispiel aber angewiesen auf allen Bildschirmen, egal ob Monitor oder Smarthone, sich immer dem Display anzupassen.

Aus Gründen des Renderings (Darstellung) der Browser kann es allerdings zu Verlusten der Bildqualität kommen, da keine SVG-Dateien unterstützt werden.

Wie gesagt würden 320×480 Pixel eher für Smartphones optimiert sein. Auf einem grossen Monitor verpixelt das gleiche Game dann leicht im Fullscreen.

Entwicklertools für Tests

Zum Glück gibt es bei den Browsern die Entwicklertools, wo man die verschiedenen Displaygrößen simulieren kann. Dadurch ist es möglich das Layout auch schon im Anfangsstadium zu betrachten und evtl. Änderungen vorzunehmen. Bitte dazu diese Browser Entwicklertools-Tutorials Firefox und Google-Chrome beachten!

Download (Komplettpaket)

Alle Dateien (index.html, main.js, phaser.min.js) und Ordner zum Fullscreen-Beispiel, inklusive neuer Scriptzeilen können hier downloadet werden.

index.html

Folgende Zeilen füge ich der index.html hinzu und lasse die auch in Zukunft dort stehen, um den Bildschirm/Spielfeld randlos im Browser anzuzeigen.

Die maßgebliche Zeile ist hier die Zeile 6 die dafür sorgt, das im Browser der Rand (margin) = Null ist.

Der ganze Rest sollte bekannt sein und ist unsere Standard index.html.

main.js

Folgende Zeilen füge ich der main.js der function create () hinzu:

Diese 3 Zeilen sorgen dafür, das ein Game in einem Browserfenster angepasst angezeigt wird.

Diese Zeilen werden üblicherweise immer gleich als erstes in der funtion create () eingetragen!

Das könnte Dich auch interessieren …

Translate »