jBB

Was ist jBB?

jBB ist ein JavaScript Framework welches die komplexe HTML(5) Funktionalität in einfache, Basic ähnliche, Funktionen kapselt und es so ermöglicht schnell und einfach Spiele für das HTML5 Element <canvas> zu programmieren. jBB kapselt hierbei nicht nur HTML5, sondern erlaubt es auch komplizierte Vorgänge wie das Laden eines Fonts, eines Bildes, eines Sounds oder einer anderen JavaScript Datei mit einfachen Funktionen durchzuführen. Will man das Canvas direkt programmieren muss man bspw. für das Zeichnen eines Ovals um die 20 Zeilen JavaScript schreiben. jBB erledigt das in einem einfachen Funktionsaufruf. So einfach wie Blitzbasic ist jBB dann trotzdem nicht, da der geneigte jBB User sich ein wenig mit JavaScript auseinander setzen muss. Wer dem nicht abgeneigt ist muss zuerst wissen: ein jBB Programm besteht aus drei Teilen:

Shoutbox

Schreibe etwas

1 Globales

Ein jBB Game besteht aus zwei Funktionen, damit diese gewisse Variablen und Objekte kennen müssen diese im globalen Bereich deklariert werden.

2 Initialisierung

jBB wird mit einer Funktion initialisiert deren Namen man frei wählen kann. Mittels "<body onload..." oder entsprechendem JavaScript wird diese Funktion aufgerufen. In dieser Funktion wird das Canvas initialisiert, Resourcen geladen und globale Einstellungen vorgenommen.

3 Game Loop

Dies ist die Funktion in der das eigentliche Spiel abläuft. Sie muss den Namen "main" tragen (nicht "Main", "mAiN" oder "MAIN") und wird permanent vom Framework aufgerufen um die darin enthaltene Funktionalität auszuführen.

Einfach

jBB verwendet einfache Funktionen um komplexe Vorgänge zu kapseln. Ärgere Dich nicht mit der Kleinteiligkeit des HTML5 Canvas herum, benutze es einfach um coole Games zu kreieren.

Kurz

Für viele Dinge die man sonst mit CSS und HTML erledigt stellt jBB Funktionen bereit. Beispielsweise zum einbinden weiterer Quelltext-Dateien, zum laden von Sounds und Bildern etc.

Klar

Die an die Sprache Blitzbasic angelehnten Funktionen sind einfach und klar zu lesen. Sie fassen komplexe Strukturen zusammen und sind ausführlich dokumentiert.

Was ist anders?

FPS

Maximale Bilder pro Sekunde spielen in einem Browser-Spiel keine übergeordnete Rolle. Im Gegenteil: Du musst Dich entscheiden wie oft die Funktion main() pro Sekunde aufgerufen werden soll. Das ist auch im Sinne des Spielers, denn: Ein HTML5 Spiel welches das Canvas verwendet kann nie die Performance eines nativen Spiels erreichen und viele Spieler verwenden noch ältere Maschinen für dieses Vergnügen.
Allerdings sollte Dir das keine Sorgen bereiten. Die meisten User haben Systeme auf denen ein jBB Spiel mit 30 FPS locker laufen sollte und das entspricht auch der Voreinstellung in jBB. Wenn Dir das dennoch nicht genügt darfst Du die Funktion SetUpdateRate() verwenden um höhere FPS Zahlen einzustellen.

Funktionen

Einige Funktionen in jBB geben andere Werte zurück als ihr Blitzbasic-Pedant oder erwarten andere Parameter. So gibt die Funktion GetColor() bspw. direkt ein JSON Objekt mit den Werten r, g und b zurück. Du kannst natürlich auch wie gewohnt die Funktionen ColorRed(), ColorGreen() und ColorBlue() verwenden. Desweiteren ist es nun (wenn man Viewports verwendet) notwendig am Anfang des Game Loops die Funktion SaveBuffer() und am Ende die Funktion RestoreBuffer() auszuführen. Beim Thema "Viewports" ist noch anzumerken dass man nun angeben muss ab wann man einen Viewport verwendet und wann man ihn nicht mehr benötigt. Was sonst noch alles anders ist erfährst Du in der bald startenden Dokumentation.

Externe Daten

Im Gegensatz zu einem Flash-Spiel wird dem User das Game nicht als monolitischer Block geschickt, sondern als Website welche die Game-Resourcen in Form von Bilder- und Sound-Tags mitbringt. Es geht sogar soweit dass die Website noch garnicht weiß was sie genau laden soll bevor sie nicht beim User angekommen ist. Das kommt daher daß Dein Spiel erst auf dem Rechner des Users gestartet wird und jBB dann Deine LoadImage(), LoadSound() etc. nach HTML übersetzt, in die Seite einfügt und den Browser veranlasst diese Resourcen aus dem Internet zu holen. Wie man nun regelt dass das Spiel alle Resourcen zur Verfügung hat wenn sie benötigt werden und wie das alles exakt funktioniert erfährst Du in der bald verfügbaren Dokumentation.

Images

Die Blitzbasic Funktion LoadAnimImage() wurde nicht portiert. In jBB wird jedes Bild als potentielles AnimImage behandelt. Desweiteren sind die Funktionen zum rotieren und skalieren von Images weggefallen, diese werden durch globale Skalierungs- und Rotationsfunktionen ersetzt.
Beachte: Im Gegensatz zu Blitzbasic ist ein Bild in jBB nach dem Laden nicht sofort verfügbar, abhängig von der Internetverbindung und der Dateigröße. Darum gibt es jetzt die Funktion ImageLoaded() mit welcher sich überprüfen lässt ob ein Bild fertig geladen ist und gezeichnet werden kann.

Grabbed Images

GrabImage() erzeugt derzeit immer nur ein Bild, ohne Frames wie das in Blitzbasic üblich ist. Außerdem wird es nicht exakt so behandelt wie "echte" Images. Dieser Umstand ist der Tatsache geschuldet dass man keine "echten" Images mit HTML/JavaScript erzeugen und bemalen kann. GrabImage() gibt zwar auch ein jBBImage Objekt zurück, dieses basiert aber auf einem Pixel-Array mit den Farbdaten. Ich forsche wie dieser Umstand transparent verborgen bleiben kann.

Rotieren, skalieren und Alpha

Im Gegensatz zu BlitzPlus (ein BlitzBasic Derivat) werden Bilder nicht direkt skaliert oder rotiert. Stattdessen wird global mit SetScale() und SetRotation() angegeben wie sich nachfolgende Zeichenbefehle zu verhalten haben. Derzeit funktioniert diese Technik noch nicht, sie ist aber vorbereitet. Selbiges betrifft den Alpha-Kanal. Während Blitzbasic den Alpha-Kanal von Bildern nur stiefmütterlich behandelt, bietet jBB die Funktion SetAlpha() um die Transparenz aller nachfolgenden Zeichenbefehle zu definieren.