Montag, 19. Juni 2017

DIY: Emulator: Anpassungen 1: Bildschirmgrösse

Hier poste ich Code, welcher nachträglich zum Tutorial eingebaut wurde und deshalb nicht im originalen Tutorial Release vorhanden ist.

Bildschirmgrösse & Repositionierung

Nach Teil 2.1_2 haben wir einen Emulator-Bildschirm welcher einfach auf dem Original-Screen zentriert wird. Es wird dabei jedoch noch nicht darauf geachtet, wie gross der Bildschirm ist.

Auch wird er ganz wenig falsch positioniert, da der Rahmen noch nicht einberechnet wird.

Wir brauchen erst mal eine globale Variable, welche den aktuellen Resize-Parameter speichert.

In der Klasse EmuGraphicsAdapter:

        var g_resizeParameter = 0;
        this.getResizeParameter = function() {return g_resizeParameter;}


Dann müssen wir in der initialize-Funktion der EmuGraphicsAdapter-Klasse den Pivot der beiden Container anpassen und die reposition-Funktion durch die resize-Funktion ersetzen.:

In der initialize-Funktion der EmuGraphicsAdapter-Klasse:

   // .... alter Code
container1.addChild(bordersprite1);
container2.addChild(bordersprite2);

// NEU, HIER einfügen:
container1.pivot.x = -emuBorderWidth;
container1.pivot.y = -emuBorderWidth;
container2.pivot.x = -emuBorderWidth;
container2.pivot.y = -emuBorderWidth;
// ENDE NEU

// ...hier gehts weiter...
EmuGraphicsAdapter.containers = [];
EmuGraphicsAdapter.containers.push(container1);

  // ...

  this.reposition();
  this.resize();


Somit ist der 0,0-Punkt des Containers wieder an der äusseren oberen linken Ecke des Rahmens. Vorher war er an der äussersten Ecke des Emulator-Screens, also an der INNEREN oberen linken Ecke des Rahmens. Sorry dafür. Das habe ich schlichtweg übersehen. Die resize-Funktion passt den Emulatorbildschirm an die Grösse des Pixibildschirms an (ohne Verzerrung) und folgt nun:

resize-Funktion:


Mit der folgenden Funktion kann man die Bildschirmgrösse des Emulators anpassen. Sie wird der EmuGraphicsAdapter-Klasse hinzugefügt.

Der Parameter der Funktion bestimmt, wie der Emulatorbildschirm skaliert werden soll.

Alle Werte grösser als 0 multiplizieren die Originalgrösse mit dem jeweiligen Wert. Alle Werte kleiner oder gleich 0 multiplizieren die angepasste Grösse (wobei 0 hier auch als 1 genommen werden kann.) -2 ist ein Spezialfall wie unten beschrieben.

  • 2: Doppelte Grösse
  • 1: Originalgrösse
  • 0.5: Halbe Originalgrösse
  • 0 oder 'auto' oder -1 oder kein Parameter: Angepasst an Bildschirm
  • -0.5: Hälfte der angepassten Grösse
  • -1.5: Das anderthalbfache der 'auto'-Grösse.
  • -2 (Spezialfall) oder 'noborder': Wie 'auto', jedoch ohne den Rahmen mit einzubeziehen. "Randloser Fullscreen"
  • -2.1 ... Mehr als das doppelte der 'auto'-Grösse.

this.resize=function(resizeParameter)
{
// nothing = 0 = -1 = fit to screen.
if(!resizeParameter)
resizeParameter = -1;

// fit to original size
var resizeMultiplier = Math.abs(resizeParameter);
var withBorder=1;

// fit to screen
if(resizeParameter==0 || resizeParameter=='auto' || resizeParameter==-1)
{
resizeParameter = -1;
resizeMultiplier = 1;
}

// fit to screen without borders.
if(resizeParameter == 'noborder' || resizeParameter==-2)
{
resizeMultiplier=1;
resizeParameter = -2;
withBorder=0;
}

// set the new resize parameter.
g_resizeParameter=resizeParameter;

// fit to screen
if(resizeParameter < 0)
{
// get the screen size to fit to screen.
var realScreenWidth = RUNPIXI.getScreenSize().w;
var realScreenHeight = RUNPIXI.getScreenSize().h;

// include the borders.
var emuWidth = emuDrawWidth + withBorder*(emuBorderWidth *2);
var emuHeight = emuDrawHeight + withBorder*(emuBorderWidth *2);

var mul = 1;
// get the multipliers. We need the DRAW width and height.
// first try with x multiplication.
if(emuWidth>0 && realScreenWidth>0)
mul = realScreenWidth/emuWidth;

// it does not fit in height, try it with y multiplication.
if(emuHeight * mul > realScreenHeight && emuHeight > 0 && realScreenHeight > 0)
mul = realScreenHeight/emuHeight;

// fitted to screen, now multiply with desired resolution.
resizeMultiplier = resizeMultiplier * mul;
}else{
// screen is double the size of original so take the half of the value.
resizeMultiplier = resizeMultiplier * 0.5;
}

// apply the multiplier
for(var i=0;i<EmuGraphicsAdapter.containers.length;i++)
{
var container = EmuGraphicsAdapter.containers[i];
container.scale.x = resizeMultiplier;
container.scale.y = resizeMultiplier;
}

// finally center the screen again.
this.reposition();
}


Erst wird der resizeParameter angepasst und der resizeMultiplier gesetzt. g_resizeParameter wird auch gesetzt. Dann wird überprüft, ob der resizeParameter kleiner als 0 ist. Wenn ja, wird der Multiplikator mul berechnet und schliesslich mit dem resizeMultiplier multipliziert. Am Ende wird der resizeMultiplier auf die Container angewandt und schliesslich noch die Position neu gesetzt.

index.html

Damit der Bildschirm auch jedes mal angepasst wird, wenn sich die Browsergrösse ändert, werden wir den resize-Handler von RUNPIXI benutzen. Ganz am Anfang der $(document).ready()-Funktion schreiben wir folgendes rein:


$(document).ready(function()
{
// Resize the emulator screen if the window resizes.
RUNPIXI.instance.setResizeFunction(function()
{
if(emuGraphics!=null)
emuGraphics.resize(emuGraphics.getResizeParameter());
});

// ...
}


Nun sollte der Emulator-Bildschirm immer schön angepasst an den Pixi-Bildschirm skaliert werden. Hier brauchen wir den resizeParameter, welcher ganz am Anfang erstellt wurde.

Hier ist der Source Code zu diesem Artikel und dem Artikel Demo 1: Plasma:
https://github.com/ben0bi/EmulatroniX/releases/tag/Blog_Series_Demo_1_Plasma

Viel Spass damit.

Keine Kommentare:

Kommentar veröffentlichen