jBB

Einführung

Yet Another JavaScript Framework
Bei jBB handelt es sich um ein Framework welches einen vereinfachten Zugriff auf das Canvas-Element von HTML5 anbietet. Das API ist an die beliebte Programmiersprache Blitzbasic angelehnt.

Beispiel

$(document).ready(function()
{
	Graphics("myCoolGame", Game, 60);
	
	ClsColor(90, 128, 200);
	SetColor(255, 0, 0);
});

Bevor man jBB Funktionen nutzen kann muss man sicher stellen dass das DOM fertig geladen wurde. Noch sicherer ist es wenn man prüft ob das DOM mitsamt Inhalten geladen wurde, weswegen ich in diesem Beispiel jQuery verwende um das sicher zu stellen. Selbstverständlich kann man die Initialisierungsfunktion auch mit <body onLoad="initGame();"> aufrufen, dann muss man aber zur Laufzeit mit ImageLoaded() sicher stellen dass das Bild geladen wurde und mit DrawImage() gezeichnet werden kann.
Graphics() initialisiert das Framework. Es erwartet als Parameter die ID des Canvas, die Hauptfunktion des Spiels und die Bilder pro Sekunde mit denen das Spiel laufen soll. Danach wird noch die Löschfarbe und die aktuelle Zeichenfarbe festgelegt.
Damit dies alles geschehen kann muss irgendwo im HTML Body der Seite folgendes stehen:

<canvas id="myCoolGame" width="800" height="600">

Dein Browser ist ja mal sowas von letztes Jahrhundert, 
aber sowas von ....

</canvas>

Außerdem natürlich auch die Hauptfunktion die wir bei Graphics() angemeldet haben:

function Game()
{
	Cls();
	
	// Hier kommt die Action rein
	
	Flip();
}

Bitte beachte dass der Browser nur "versucht" diese Funktion mit den bei Graphics() angegebenen Bildern pro Sekunde anzusteuern. Man kann natürlich nicht erwarten dass ein 100€ Smartphone dies schafft.

Zum Abschluss der Einführung nun noch den kompletten Quelltext des Beispiels:

<!DOCTYPE html>
<html>
<head>
<title>jBB Sample</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jBB.js"></script>

<script type="text/javascript">
	$(document).ready(function()
	{
		Graphics("myCoolGame", Game, 60);
		
		ClsColor(90, 128, 200);
		SetColor(255, 0, 0);
	});
	
	function Game()
	{
		Cls();
		
		// Hier kommt die Action rein
		
		Flip();
	}
</script>
</head>
<body>
<canvas id="myCoolGame" width="800" height="600">

Dein Browser ist ja mal sowas von letztes Jahrhundert, 
aber sowas von ....

</canvas>
</body>
</html>

bob	Der mit CreateBob() erzeugte Bob.
rangeName	ein Name für die Animationssequenz. Bspw. "Walk"
firstFrame	Nummer des ersten Bildes der Animation
lastFrame	Nummer des letzten Bildes der Animation
frameSpeed	Geschwindigkeit der Animationssequenz in Bildern pro Sekunde

bob	Der mit CreateBob() erzeugte Bob.
speed	Wartezeit zwischen zwei Frames der Animation in Millisekunden

r	Rotanteil der Farbe
g	Grünanteil der Farbe
b	Blauanteil der Farbe

image	ein per LoadAnimImage() geladenes Bild
firstFrame	Startframe der Animation
lastFrame	Endframe der Animation
speed	Zeit in Millisekunden zwischen zwei Frames
looped	True wenn die Animation im Loop abgespielt werden soll

bob	Der Bob aus dem eine Animationssequenz entfernt werden soll.
rangeName	Der Name der zu löschenden Animationssequenz

bob	Der zu zeichnende Bob
x	X-Position an der der Bob ins Canvas gemalt werden soll
y	Y-Position an der der Bob ins Canvas gemalt werden soll

image	Das Handle auf das zu zeichnende Image
x	X-Position an der das Bild ins Canvas gemalt werden soll
y	Y-Position an der das Bild ins Canvas gemalt werden soll
frame	Wurde das Bild mit LoadAnimImage() geladen, definiert dieser Parameter die Nummer des Tiles das man malen möchte.

x1, y1	Startkoordinate der Linie
x2, y2	Zielkoordinate der Linie

x, y	Koordinate der linken, oberen Ecke des Rechtecks
width, height	Breite und Höhe des Rechtecks
radius	Radius der Ecken wenn diese abgerundet werden sollen
solid	Ist "solid" = True wird das Rechteck ausgefüllt gezeichnet

x, y	Koordinate der linken, oberen Ecke des Ovals
width, height	Breite und Höhe des Ovals
filled	Ist "filled" = True wird das Oval ausgefüllt gezeichnet

width	Breite in Pixeln
height	Höhe in Pixeln

rect1x, rect1y	linke, obere Ecke des ersten Rechtecks
rect1width, rect1height	Größe des ersten Rechtecks
rect2x, rect2y	linke, obere Ecke des zweiten Rechtecks
rect2width, rect2height	Größe des zweiten Rechtecks

cols	Anzahl der Spalten im Array
rows	Anzahl der Zeilen im Array

text	Der String der ins Canvas gezeichnet werden soll
x, y	Die Koordinate an der der Text gezeichnet werden soll

canvasID	Die ID mit der das Canvas deklariert wurde
mainLoop	Der Name der Hauptfunktion	Default = main
fps	die Bilder pro Sekunde mit der der Browser versuchen soll die Hauptfunktion anzufahren	Default = 30

image	Das Bild das auf Kollision getestet werden soll
x, y	Die Koordinate an der das Bild gerade gezeichnet wird
rectX, rectY	die linke, obere Ecke des Rechtecks
rectWidth, rectHeight	die Größe des Rechtecks

list	die mit CreateList() erzeugte Liste
val	Der Wert der an den Anfang der Liste gehangen werden soll

list	die mit CreateList() erzeugte Liste
val	Der Wert der an das Ende der Liste gehangen werden soll

imageFile	Pfad und Dateiname des zu ladenden Bildes
cellWidth	Breite der Tiles in Pixel
cellHeight	Höhe der Tiles in Pixel
maxFrame	Anzahl der Tiles im Image

family	Der Name des Font
source	Pfad zur Schriftdatei
isBold	True wenn der Font fett gezeichnet werden soll
isItalic	True wenn der Font schräggestellt gezeichnet werden soll.

soundFile	Pfad und Dateiname des zu ladenden Sounds
loop	True wenn der Sound in einer Schleife gespielt werden soll, ansonsten False

map	das Handle der Map aus der ein Wert gelesen werden soll
key	Der Name des Schlüssels dessen Wert geholt werden soll

map	das Handle der Map der ein Wert hinzugefügt werden soll
key	Der Name des Wertes mit dem der Wert assoziiert werden soll
value	der Wert dieses Eintrags

Einführung

Beispiel

Alpha(color)

Backbuffer()

Blue(color)

BobRange(bob, rangeName, firstFrame, lastFrame, frameSpeed)

BobSpeed(bob, speed)

ClearList(list)

ClearMap(map)

Cls()

ClsColor(r, g, b)

CreateBob(image, firstFrame, lastFrame, speed, looped)

CreateImage(width, height)

CreateList()

CreateMap()

DeleteBobRange(bob, rangeName)

DebugLog(logtext)

Desktop()

DesktopHeight()

DesktopWidth()

DrawBob(bob, x, y)

DrawImage(image, x, y, frame)

DrawLine(x1, y1, x2, y2)

DrawRect(x, y, width, height, radius, solid)

DrawOval(x, y, width, height, filled)

DrawText(text, x, y)

Flip()

Cos(value)

Sin(value)

ACos(value)

ASin(value)

Abs(value)

Tan(value)

ATan(value)

Ceil(value)

Sqr(value)

Exp(value)

Log(value)

Floor(value)

FlushBuffer(buffer)

GetScaleX()

GetScaleY()

Graphics(canvasID, mainLoop, fps)

GraphicsHeight()

GraphicsWidth()

Green(color)

HidePointer()

ImageHeight(image)

ImageLoaded(image)

ImageRectOverlap(image, x, y, rectX, rectY, rectWidth, rectHeight)

RectsOverlap(rect1x, rect1y, rect1width, rect1height, rect2x, rect2y, rect2width, rect2height)

ImageWidth(image)

Include(source)

Dim2D(cols, rows)

KeyDown(key)

KeyHit(key)

ListAddFirst(list, val)

ListAddLast(list, val)

ListFlip(list)

LoadAnimImage(imageFile, cellWidth, cellHeight, maxFrame)

LoadFont(family, source, isBold, isItalic)

LoadImage(imageFile)

CanPlayMP3()

CanPlayOGG()

LoadSound(soundFile, loop)

MapGetValue(map, key)

MapInsert(map, key, value)

MapNextItem(map)

MapRemoveItem(map, key)

ResetMap(map)

MilliSecs()

MouseDown(key)

MouseHit(key)

MouseX()

MouseY()

MouseWheel()

NextItem(list)

Notify(msg)

OnImageLoaded(img, func)

map	das Handle der Map aus der ein Schlüssel gelöscht werden soll
key	Der Name des Schlüssels

img	Das Bild dessen Ladezustand überwacht werden soll.
func	Funktion die ausgeführt werden soll wenn das Bild komplett geladen wurde.

image	Bild für das definiert werden soll ob es zentriert gezeichnet werden soll
value	True wenn das Bild zentriert gezeichnet werden soll, ansonsten False

buffer	Buffer der gelesen werden soll
x, y	Position an der gelesen werden soll

list	die mit Handle der Liste aus der der Wert entfernt werden soll
val	Wert der aus der Liste entfernt werden soll

canvasID	ID des Canvas dessen Größe geändert werden soll
width	Neue Breite des Canvas
height	Neue Höhe des Canvas

bob	Der Bob für den die aktuelle Animationssequenz geändert werden soll.
rangeName	Name der Animationssequenz

r, g, b	Rot-, Grün-, und Blauanteil der Farbe
alpha	Transparenz der Farbe (0 - 255)

offX, offY	Versatz des Schattens in X und Y Richtung
blur	Gibt an um wieviele Pixel der Schatten weichgezeichnet werden soll

fontName	Der Name des Fonts (Achtung! CSS-Style)
height	Die Höhe des Fonts (Metrics müssen angegeben werden (px, pt, em etc.))
isBold	True = Der Font wird fett gezeichnet
isItalic	True = Der Font wird schräggestellt gezeichnet