Wir brauchen für unser Grundgerüst verschiedene JavaScript-Bibliotheken.
- jQuery -> Vereinfacht viele Dinge.
- PixiJS -> Die Grafikbibliothek.
- RUNPIXI -> Diese Bibliothek habe ich geschrieben, um PixiJS ganz einfach zu initialisieren.
Ich werde diese Bibliotheken nicht herunterladen, sondern einen direkten Link dazu angeben. Somit hat man erstens immer die aktuelle Version und zweitens wird Zeit gespart, wenn andere (fremde) Webseiten denselben Link benutzen. Der Browser hat die Datei dann schon im Cache gespeichert.
Ordnerstruktur
Generieren wir erst mal die generelle Ordnerstruktur und die ersten Dateien:- ./ --> Das ist das root/Basis-Verzeichnis.
- js/ --> enthält alle JavaScript-Dateien.
- css/ --> enthält alle CSS-Dateien.
[weitere werden folgen]
Ich benutze immer diese Ordnerstruktur für meine Web-Projekte, du kannst natürlich auch eine andere Struktur anlegen.
- ./index.html
- ./css/base.css
css/base.css
Die Datei css/base.css enthält die grundlegenden Layout-Einstellungen:
html, body
{
width: 100%;
max-width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
div, html, body
{
padding: 0;
margin: 0;
}
#wrapper
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#pixiscreen
{
position: relative;
margin: 0 auto;
max-height: 100%;
min-height: 100%;
}
{
width: 100%;
max-width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
div, html, body
{
padding: 0;
margin: 0;
}
#wrapper
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#pixiscreen
{
position: relative;
margin: 0 auto;
max-height: 100%;
min-height: 100%;
}
Der BODY und HTML Bereich wird auf die Fenstergrösse angepasst. Mit
overflow-x: hidden wird alles versteckt, was breiter als das Fenster ist. Dasselbe wird mit der Höhe gemacht. Irgendwie ist das Div beim Chrome immer 0.2 Pixel grösser als das Fenster oder so, was zur Folge hatte, dass Scrollbalken auftauchten, welche dann sowieso noch ein bisschen mehr vom Fenster verdeckt haben. Overflow bräuchte es nicht, wenn das div zum Beispiel 99% Grösse hätte, doch ich will einen randlosen Bildschirm.Das Padding- und Margin-Attribut wird auf 0 gesetzt, damit kein Rand übrig bleibt. Der #wrapper muss eine absolute Position haben, damit der #pixiscreen mit Margin horizontal zentriert werden kann. Dies hier nur zur Sicherheit, da der Pixi-Screen sowieso das ganze Fenster ausfüllt.
index.html
In die index.html kommt erstmal das HTML-Grundgerüst:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>EmulatroniX</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<div id="wrapper">
<div id="pixiscreen"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://pixijs.download/v4.5.2/pixi.min.js"></script>
<script src="http://cdn.rawgit.com/ben0bi/RUNPIXI.js/v0.6.4/RUNPIXI/RUNPIXI.js"></script>
<script>
function mainLoop() {}
$(document).ready(function()
{
RUNPIXI.initialize('pixiscreen', mainLoop);
console.log("Ready.");
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<title>EmulatroniX</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<div id="wrapper">
<div id="pixiscreen"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://pixijs.download/v4.5.2/pixi.min.js"></script>
<script src="http://cdn.rawgit.com/ben0bi/RUNPIXI.js/v0.6.4/RUNPIXI/RUNPIXI.js"></script>
<script>
function mainLoop() {}
$(document).ready(function()
{
RUNPIXI.initialize('pixiscreen', mainLoop);
console.log("Ready.");
});
</script>
</body>
</html>
Mit dem
DOCTYPE-Tag wird dem Browser mitgeteilt, dass wir HTML 5 benutzen.Das
Meta-Tag stellt das Characterset auf UTF-8. Somit ist immer klar das gleiche Characterset definiert. Die CSS-Dateien werden im Header eingebunden, da sie vom Browser gebraucht werden, um das Layout aufzubauen. Die JavaScript-Dateien werden jedoch am Ende des Bodys hereingeladen, so dass das Layout im Aufbau nicht blockiert wird.Das
#pixiscreen-div ist im #wrapper-div, damit man es horizontal zentrieren kann.jQuery ist eine Bibliothek, um viele Sachen in JS zu vereinfachen.
Den jQuery-Link bekommt man hier in dieser Form.
PixiJS ist eine JavaScript 2D-Graphikbibliothek, welche auf Geschwindigkeit ausgelegt ist.
Sie benutzt wenn möglich WebGL, ansonsten wird die DOM-Struktur benutzt.
Hierin werden wir die Textur erstellen, auf welcher dann der Bildschirm des Emulators gerendert wird (sogenannte RTT-Technik: Render-To-Texture - wobei hier nicht wirklich eine Szene auf die Textur gerendert wird, sondern nur die Pixel der Textur "direkt" ausgetauscht/verändert werden).
Den Link zu Pixi habe ich selbst aus den Releases von PixiJS herausgesucht.
Schliesslich ist RUNPIXI.js eine kleine Bibliothek, welche ich geschrieben habe, um den Initialisierungsprozess von PixiJS zu vereinfachen. Man braucht nun nur noch ein Kommando auszuführen, nämlich
RUNPIXI.initialize(DOMContainerID, loopFunction), alles Andere macht RUNPIXI.Wenn die Fenstergrösse geändert wird, merkt RUNPIXI das und passt automatisch den Pixi-Renderer an.
Schliesslich wird der Pixi-Bildschirm in dem kleinen Script am Ende initialisiert. Dazu muss es eine
mainLoop-Funktion haben, welche nach jedem Frame aufgerufen wird. Diese benutzen wir gerade noch nicht. Man beachte, dass beim Namen des pixiscreens in der Initialisierungsfunktion kein # davor steht: RUNPIXI verzichtet auf jQuery.Du kannst dem Pixiscreen deine eigene Hingergrundfarbe geben oder ihn sogar transparent machen, indem du die Farbe in der Initialisierungsfunktion als Parameter angibst. Die Farbe kann hexadezimal so angegeben werden: 0xRRGGBB wobei R für Rot, G für Grün und B für Blau steht.
RUNPIXI.initialize('pixiscreen', mainLoop, 0x111133); <-- Schönes dunkles Blau.RUNPIXI.initialize('pixiscreen', mainLoop, 'transparent'); <-- Transparent. Man sieht nur, was du auch zeichnest.Fertig!
Wenn du nun die Index.hmtl-Datei im Browser öffnest, sollte dein gesamter Browserbildschirm türkisblau sein (ausser du hast eine andere Farbe angegeben). Damit haben wir die Basis-(Graphik-)Engine initialisiert - das war ja noch ganz einfach. :)Ich werde für jeden Part/Artikel auf GitHub ein Release vom jeweils aktuellen Master machen.
Das ist das Release für diesen Artikel:
https://github.com/ben0bi/EmulatroniX/releases/tag/Blog_Series_Part_2
Weiter gehts mit [Bitte warten, komplett neuer Aufbau] .
