[Projekt] jBB / HTML5 JS Framework

[bruZard]

Bei jBB handelt es sich um JavaScript Framework zur einfachen Entwicklung von Webgames. Die Syntax ist hierbei an die beliebte Hobby-Programmiersprache Blitzbasic angelehnt und ermöglicht es so dem geneigten Programmierer sehr einfach und schnell eigene Spiele für das HTML5 Canvas zu erstellen.

jBB Website
jBB on Facebook
jBB on Twitter

Ein kleines Beispiel: (Mausrad zum Tile wechseln, Maustaste zum Tile setzen)
http://www.sedm.de/jbb/sample/tilemap.html



Auf der Website findet Ihr die Dokumentation, die Downloads und ein paar Tutorials.

[Chromanoid]

Ich habe mir mal erlaubt das Thema in den Vorstellungsbereich zu verschieben. Ich habe dem Titel auch noch ein Präfix angefügt, so dass es im Showroom das Bild zu sehen gibt.

[Aramis]

Hut ab vor der ausfuehrlichen Dokumentation und den Tutorials. Als Demo waere aber evtl. noch etwas aussagekraeftigeres wuenschenswert, z.b. ein kleines Game :-)

[bruZard]

Vielen Dank für die Blumen. Ein ausführliches, spielbares Example ist in Arbeit.

[bruZard]

Version 0.74 ist nun verfügbar, die Seite und die Dokumentation wurden entsprechend erweitert. Primär ist ein Fehler im Objekt tSound behoben worden. Desweiteren wurde die Liste der Sound-Funktionen um die Möglichkeit erweitert zu prüfen ob der Browser die Formate MP3 oder OGG unterstützt.
Das Tilemap Example spielt nun eine Musikdatei ab, dabei wird (je nach Ability) ein MP3 oder ein OGG geladen.

Viel Spaß!

[EDIT]

Mini-Update (0.75): CanPlayMP3() und CanPlayOGG() könnnen nun auch außerhalb der Initialisierungsfunktion aufgerufen werden, um sicher zu stellen dass die Sounds im Mainloop auch verfügbar sind.

das Changelog:

Code: Alles auswählen

added	: tColor.toString()
added	: tColor.getColorString()
changed : Die Funktionen CanPlayMP3() und CanPlayOGG() können nun auch außerhalb der Initialisierungsfunktion aufgerufen werden

Außerdem habe ich noch ein wenig die Performance verbessern können.

[/EDIT]

[Mr. Heat]

Das macht schon einen guten Eindruck. Aber wenn ihr jemanden dafür begeistern wollt, müsst ihr unbedingt viel mehr Beispiele präsentieren. Ganz viele kleine, die immer nur eine kleine Funktionsgruppe demonstrieren. Und einige mittelgroße, die man wirklich spielen kann.

[bruZard]

Das ist ein wichtiger Punkt Mr.Heat, abe wichtiger war erst einmal die Sache rund und "Feature Complete" zu bekommen. Dieser Punkt ist mit 0.76 erreicht und nun kann es verstärkt mit Bugfixing und dokumentieren weiter gehen.

Version 0.76 schickt jBB in die Beta.

Changelog:

Code: Alles auswählen

added	: tSound.getPosition()
added	: tSound.soundLoop(value)
added	: tSound.getLoopCount()
added	: GetSoundPosition()
added	: SoundLoop(sound, value)
added	: GetLoopCount(sound)
changed	: tSound.load() hat nun den Parameter "loop"
changed	: LoadSound() hat nun den Parameter "loop"

Das Tilemap-Example spielt zur Demonstration die Musik zweimal ab und stoppt dann die Wiedergabe.

Alle 3D Funktionen wurden aus jBB entfernt, diese werden in jB3D reimplementiert. Teile von jBB die von beiden Frameworks verwendet werden können, werden zukünftig als Plugin geladen (Input, Sound, Basetypes etc.).


Viel Spaß!

[bruZard]

0.77 mit 9 Bugfixes ist nun online.

[Alexander Krug]

Cooles Tool! Hast du da auch die Dokumentation auf EN?

[bruZard]

Wegen mangelnder Englischkenntnisse bin ich leider nicht in der Lage selbst eine englische Dokumentation anzufertigen. Die englischsprachigen Nutzer (ja, es gibt ein paar) lassen sich die Doku automatisch übersetzen und das scheint halbwegs zu funktionieren. Der User Jesus Perez hat jedenfalls schon Animationen und Parallaxmapping hinbekommen. Seine Demo findet Ihr unter: http://www.hexobot.com/my.html (Cursor-Tasten zum bewegen, X zum springen, Z zum angreifen). Dennoch suche ich natürlich noch nach einem Helfer der das Ganze ins Englische übertragen kann.

Back to Topic:

Version 0.78 ist online.

Mit dieser Version sind die Input-Funktionen aus dem Kern in externe Klassen ausgelagert. Dies wurde gemacht um einserseits später auf der Site ein jBB Paket zusammen bauen zu können (Ich brauche keinen Sound *klick*, ich brauche keine Tastatur *klick*, ich will aber WebSockets *klick* ... etc.), und andererseits um denjenigen mehr Kontrolle über die aktiven Eventhandler zu geben die jBB objektorientiert verwenden. Wir erinnern uns: Eventhandler sind ordentliche Bremsen in JavaScript.
Desweiteren wurden einige Fehler behoben die noch übrig geblieben sind als ich das JSON Objekt "jBB.color{}" auf die Klasse tColor umstellte.

Changelog:

Code: Alles auswählen

added	: tMouse
added	: tMouse.init(canvasID)
added	: tMouse.hidePointer()
added	: tMouse.showPointer()
added	: tMouse.mouseX()
added	: tMouse.mouseY()
added	: tMouse.mouseDown()
added	: tMouse.mouseHit()
added	: tMouse.wheel()
added	: tKeyboard
added	: tKeyboard.init()
added	: tKeyboard.keyDown()
added	: tKeyboard.keyHit()
added	: tColor.get()
changed	: Alle Maus-Funktionen sind aus jBB nach tMouse verlagert worden
changed : das prozeduale Interface greift nun auf das neue Objekt tMouse zu
changed	: Alle Keyboard-Funktionen sind aus jBB nach tKeyboard verlagert worden
changed : das prozeduale Interface greift nun auf das neue Objekt tKeyboard zu
changed	: jBB.readPixel() gibt nun ein Objekt vom Typ tColor zurück
changed : tColor.getRed() heißt nun tColor.red()
changed : tColor.getGreen() heißt nun tColor.green()
changed : tColor.getBlue() heißt nun tColor.blue()
changed : tColor.getAlpha() heißt nun tColor.alpha()
removed	: jBB.rRed(), jBB.rGreen(), jBB.rBlue(), jBB.rAlpha()
fixed	: jBB.writePixel() griff auf das falsche Objekt zu
fixed	: jBB.readPixel() gabe ein JSON und kein tColor zurück

[bruZard]

Der erste "Quicky" ist online. In den "Quickies" werden einzelne Themen sehr kurzgebunden abgehandelt, in diesem ersten geht es um die Maus. Es geht darum was man machen kann, wie es funktioniert und was nicht geht.

btw: Google Chrome 10/11 ist mittlerweile so rattenschnell dass das Tilemap Example hier auf einem Desktop mit mittlerer Ausstattung mit 116 Bildern pro Sekunde rennt. Ich habe das Sample auf 1920x1080 getestet und kam immer noch auf 64FPS.

Den "Quicky" und das Tilemap Example (auf der Site nur in 800x384) sind auf der Site zu finden die in meiner Sig verlinkt ist.

[TheBenji]

Ich glaube mit eurem "Das ist keine Einschränkung, das ist eine Herausforderung" verschreckt ihr viele potenzielle nutzer ;)
Es ist inzwischen ja auch nicht mehr wirklich so problematisch browser-übergreifend den rechtsklick abzufangen :P

Sieht aufjedenfall höchstintressant aus und wenn ich die Zeit dazu finde werde ich mir das sicher mal genauer anschauen und ggf. dann auch verwenden :)

[bruZard]

Du hast Recht ... deshalb habe ich Version 0.79 hochgeladen. Diese beinhaltet Änderungen für die Funktionen MouseDown() und MouseHit(). Man übergibt diesen nun als Parameter die Taste die man erfragen möchte:

Code: Alles auswählen

if(MouseDown(MOUSE_RIGHT)) /* mach was tolles... */

Um das Kontextmenü des Canvas abzuschalten muss das Canvas folgendermaßen erweitert werden:

Code: Alles auswählen

<canvas id="sampleCanvas" width="800" height="400" oncontextmenu="return false;">

Für die ID, Breite und Höhe müssen natürlich eigene Werte vergeben werden.

Den Quicky und die Dokumentation habe ich entsprechend angepasst, das Changelog zeigt was sonst noch verändert wurde. Neben dem jBB Teil wird derzeit noch am "jBB Builder" gearbeitet. Dies ist ein Tool um visuell Templates für jBB Webgames zu erzeugen. Ein erster Screen:

Was man hier sieht ist eine PreAlpha. Weder stehen die Menge an Einstellungsmöglichkeiten fest, noch die Art und Weise der Ausgabe noch das Design des Builders.

[EDIT]
20.02.2011 - Version 0.8 ist online. Dieses Update behebt einen Fehler in "LoadFont()" und einen Fehler mit den Mauskoordinaten wenn "CenterCanvas()" verwendet wurde.
[/EDIT]

[j.klugmann]

Sieht cool aus! Sieht man in dem Screenshot alle Funktionen von dem Builder oder wird das noch ausgebaut?
HTML5 Frameworks scheinen ja momentan aus dem Boden zu sprießen, ich arbeite selbst an einem. :)

[TheBenji]

HTML5 wird ja auch so langsam anwendungstauglich...klar das da frameworks ohne ende gebastelt werden.
Wie immer wird die Zeit zeigen welche sich langfristig durchsetzen ;)
Das hier sieht ja für Games schon durchaus nett aus.
Wenn hier genug durchhaltevermögen besteht - warum nicht?^^

[bruZard]

@j.klugmann
Der "Builder" erstellt keine kompletten HTML5 Spiele, sondern nur ein Template in welches man dann seinen JavaScript Code einbindet.

@TheBenji
jBB wird nun schon eine ganze Weile aktiv entwickelt und hat bereits einige Betatester die derzeit an Spielen oder einfachen Demos schrauben. Das Feedback dieser Leute bringt jBB jedesmal ein ordentliches Stück voran.

Im Moment geht es darum Bugs zu fixen und Browser-Inkompatiblitäten zu beseitigen.

[j.klugmann]

Das war mir schon klar.

[bruZard]

Neben einem kleinen Update auf 0.81 habe ich nun die Site etwas aufgeräumt und das Example "Starfield" von DerHase hinzugefügt.

Es wurde ein Bug behoben der verhinderte dass man den Zufallsgenerator "Rand()" auch vor der Initialisierung anwenden konnte. Desweiteren wurde der Fehler ausgebügelt dass MouseX() und MouseY() falsche Koordinaten lieferten wenn das Canvas mittels CSS positioniert wurde.

[bruZard]

Alles was passiert kann auf http://www.sedm.de/jmax nachgelesen werden. Dort gibt es nun einen Link zum jBB Forum in welchem Ihr Fragen stellen, Tutorials lesen, jBB Zeugs vorstellen oder einfach nur gucken könnt.

http://www.sedm.de/jmax/community

[bruZard]

Dies ist ein Nebenprojekt von jBB. Es soll die jBB Programmierung erleichtern.

Da viele JavaScript meiden weil es kompliziert erscheint oder als "hässlich" eingestuft wird, habe ich angefangen einen Konverter zu schreiben. Dieser kann leider nicht BMax oder BB Code konvertieren, auch wenn "Q" recht ähnlich aussieht. "Q" ist eine Mischung aus BB und BlitzMax und das einzige Programm dass der Konverter derzeit umsetzen kann sieht so aus:

Code: Alles auswählen

Global myImage = LoadImage("media/pointer.png")

' "As INIT" definiert diese Funktion als Initialisierungsfunktion
Function myInit() As INIT
	Graphics 800, 600, 30
	SetColor 255, 255, 255
	ClsColor 90, 120, 200
	HidePointer
End Function

' "As MAIN" definiert diese Funktion als Hauptfunktion
Function myGame() As MAIN
	Cls
	
	Local mx = MouseX()
	Local my = MouseY()
	
	DrawImage myImage, mx, my
	
End Function

rem
	Diese Funktion ist frei und wird von der Hauptfunktion, 
	oder einer Funktion welche die Hauptfunktion aufruft, 
	aufgerufen
end rem
Function Test(x:Int, y:Int, val:String = "Hallo:Welt")

End Function

... daraus macht der Konverter folgendes:

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
	<title>Hallo Welt</title>
	<script type='text/javascript' src='js/jbb.js'></script>
	<script type='text/javascript'>
		var myImage  =  LoadImage("media/pointer.png");

		function myInit(){
			Graphics('jBBGame', myGame, 30);
			SetColor(255, 255, 255);
			ClsColor(90, 120, 200);
			HidePointer();
		};

		function myGame(){
			Cls();
			var mx = MouseX();
			var my = MouseY();
			DrawImage(myImage, mx, my);
		};

		function Test(x, y, val){
		};
	</script>
</head>
<body onLoad='myInit();'>
	<canvas id='jBBGame' width='800' height='600'>
		Sorry, your browser doesn't support Canvas.
	</canvas>
</body>
</html>

Dieses Beispiel kann man sich hier live anschauen.

Das Tool wird über die Konsole (Terminal) gestartet und erwartet zumindest den Parameter "file=meinFetterQCode"
Alles in Allem sind derzeit folgende Parameter für den Konverter definiert:

• file - definiert die Datei die konvertiert werden soll (muss angegeben werden!)
• output - wie heißt die Datei die erzeugt werden soll (".html" wird automatisch angefügt)
• strict - bewirkt derzeit noch nichts, in Zukunft werden bei strict = 1 alle Parameter eines Funktionsaufrufs auf ihren korrekten Typ hin überprüft.
• sitetitle - definiert den Titel der HTML Seite die erzeugt wird
• tabsize - gibt an mit wievielen Tabs eingerückt wird, voreingestellt ist 1 Tab
• waitforres - wird diesem Parameter 1 übergeben wartet das JS Programm in LoadImage() und LoadSound() solange bis die entsprechende Resource geladen wurde. Ich empfehle das sein zu lassen
• jbbsource - definiert von wo das Programm jBB einbinden soll. Default ist "js/jbb.js"
• nocanvas - definiert die Meldung die ausgegeben werden soll wenn der Browser das HTML5 Canvas nicht unterstützt.

Alle diese Daten haben Default-Werte, einzig "file" muss angegeben werden damit der Konverter weiß was er laden und konvertieren soll.

Beispiel:

Code: Alles auswählen

jbbconv file=test.jbb output=index.html sitetitle="Mein fettes HTML5 Game"

Wer StarTrek:TNG kennt wird wissen warum ich die "Sprache" (eigentlich ist es ja keine, der Source wird extrem naiv umgewandelt) "Q" genannt habe ;)

Hier der BMax Source des Konverters:

Code: Alles auswählen

SuperStrict

Framework brl.filesystem
Import brl.retro
Import brl.linkedlist

Const FUNC_TYPE_CUSTOM:Int	= 0
Const FUNC_TYPE_INIT:Int	= 1
Const FUNC_TYPE_MAIN:Int	= 2

Type tParameter
	Field parName:String
	Field parType:String
	Field parDefault: String
	
	Method setName(pName:String)
		Self.parName = pName
	End Method
	
	Method setType(pType:String)
		Self.parType = pType
	End Method
	
	Method setDefault(pDefault:String)
		Self.parDefault = pDefault
	End Method
End Type


Type tFunction
	Global _list:TList
	
	Field funcName:String
	Field funcType:Int
	Field parameters:TList
	Field source:TList
	
	Method New()
		If Self._list = Null Then Self._list = New TList
		Self._list.AddLast(Self)
		
		Self.parameters = New TList
		Self.source = New TList
		Self.funcType = FUNC_TYPE_CUSTOM
	End Method
	
	Method setName(fName:String)
		Self.funcName = fName
	End Method
	
	Method setType(fType:Int)
		Self.funcType = fType
	End Method
	
	Method addParameter(par:String, pType:String = "", pDefault:String = "")
		Local p:tParameter = New tParameter
		p.setName(par)
		p.setType(pType)
		p.setDefault(pDefault)
		Self.parameters.AddLast(p)
	End Method
	
	Method addSourceLine(sourceLine:String)
		Self.source.AddLast(sourceLine)
	End Method
End Type
Global functions:tFunction

Type tGlobal
	Global _list:TList
	Field v:String
	Field val:String
	
	Function addGlobal(variable:String, value:String)
		Local g:tGlobal = New tGlobal
		If g._list = Null Then g._list = New TList
		
		g.v = variable
		g.val = value
		g._list.AddLast(g)
	End Function
End Type


' pruefen ob eine Datei uebergeben wurde
If AppArgs.length <= 1 Then QuitMessage("Nichts zum uebersetzen...")

Global strictMode:Byte			= False
Global siteTitle:String			= "jBB"
Global tabSize:Int				= 1
Global tab:String				= ""
Global inFile:String			= ""
Global outFile:String			= "output.html"
Global waitForRes:Byte			= False
Global jBBSource:String			= "js/jbb.js"
Global jBBWidth:Int				= 800
Global jBBHeight:Int			= 600
Global jBBSpeed:Int				= 30
Global jBBCanvasID:String		= "jBBGame"
Global jBBInitFunc:String		= ""
Global jBBMainFunc:String		= ""
Global noCanvasMessage:String	= "Sorry, your browser doesn't support Canvas."

' weitere Argumente iterieren
For Local i:Int = 1 To AppArgs.length - 1
	Local args:String[] = AppArgs[i].split("=")
	Select args[0].toLower()
		Case "file"			; inFile = args[1].Trim();
		Case "output"		; outFile = args[1].Trim()
		Case "strict"		; If args[1].Trim() = "1" Then strictMode = True;
		Case "sitetitle"	; siteTitle = args[1].Trim()
		Case "tabsize"		; tabSize = Int(args[1])
		Case "waitforres"	; If args[1].Trim() = "1" Then waitForRes = True;
		Case "jbbsource"	; jBBSource = args[1].Trim()
		Case "width"		; jBBWidth = Int(args[1].Trim())
		Case "height"		; jBBHeight = Int(args[1].Trim())
		Case "fps"			; jBBSpeed = Int(args[1].Trim())
		Case "canvasid"		; jBBCanvasID = args[1].Trim()
		Case "nocanvas"		; noCanvasMessage = args[1].Trim()
	End Select
Next

' TabSize setzen
For Local t:Int = 1 To tabSize
	tab:+ Chr(9)
Next

If Not Instr(inFile, "/") Or Not Instr(inFile, "\") Then inFile = CurrentDir() + "/" + inFile
If FileType(inFile) <> 1 Then quitMessage("Die Eingabedatei kann nicht gelesen werden.")

' Ausgabedatei
If ExtractExt(outFile) <> "html" Then outFile:+ ".html"
Local ostream:TStream 	= WriteFile(outFile)
Local rest:String		= ""
Local pos:Int			= 0
Local fName:String		= ""
Local pars:String		= ""

If(ostream)
	' Datei einlesen
	Local stream:TStream = ReadFile(inFile)
	If stream
		While Not stream.Eof()
			Local in:String = stream.ReadLine().Trim()
			
			' einzeiliger Kommentar
			If Left(in, 1) = "'" Then in = ""
			
			' Kommentar am Ende der Zeile
			Local comment:Int = Instr(in, "'")
			If comment Then in = Left(in, comment - 1)
			
			' mehrzeiliger Kommentar
			If Left(in, 3).toLower() = "rem"
				Repeat
					in = stream.ReadLine().Trim()
				Until Left(in, 6) = "endrem" Or Left(in, 7) = "end rem"
				in = ""
			EndIf
			
			If in.length > 0
				' globale Variable
				If Left(in, 6).toLower() = "global"
					Local rest:String = Right(in, in.length - 6).Trim()
					Local parts:String[] = rest.split("=")
					Local v:String = parts[0]
					Local func:String = ""
					
					If Left(parts[1].toLower().Trim(), 9) = "loadimage" Then func = parts[1] + ";"
					If func = "" Then func = parts[1] + ";"
					
					tGlobal.addGlobal(v, func)
				EndIf
				
				' Funktion hinzufügen
				If Left(in, 8).toLower() = "function"
					functions = New tFunction
					
					' Funktionsnamen lesen
					rest	= Right(in, in.length - 8).Trim()
					pos		= Instr(rest, "(")
					functions.setName(Left(rest, pos - 1).Trim())
					
					' Parameterliste lesen					
					rest	= Right(rest, rest.length - pos).Trim()
					pos 	= Instr(rest, ")")
					pars	= Left(rest, pos - 1).Trim()
					
					Local par:String[] = pars.split(",")
					For Local a:String = EachIn par
						Local pName:String	= ""
						Local pTyp:String	= ""
						Local pDef:String	= ""
						
						' auf Typisierung pruefen
						If Instr(a, ":")
							Local pt:String[] = a.split(":")
							pName	= pt[0].Trim()
							pos = Instr(pt[1], "=")
							If pos
								pTyp = Left(pt[1], pos - 1).Trim()
							Else
								pTyp	= pt[1].Trim()
							EndIf
						Else
							pName	= a.Trim()
						EndIf
						
						' auf Default pruefen
						If Instr(a, "=")
							Local pd:String[] = a.split("=")
							pDef	= pd[1].Trim()
						EndIf
						
						functions.addParameter(pName, pTyp, pDef)
					Next
					
					' evtl. Postdefs lesen
					rest	= Right(rest, rest.length - pos).Trim()
					
					If Left(rest, 2).toLower() = "as"
						rest = Right(rest, rest.length - 2).Trim()
						Select rest.toLower()
							Case "init"; functions.setType(FUNC_TYPE_INIT); jBBInitFunc = functions.funcName
							Case "main"; functions.setType(FUNC_TYPE_MAIN); jBBMainFunc = functions.funcName
						End Select
					EndIf
					
					' Rumpf lesen
					Repeat
						in = stream.ReadLine().Trim()
						If in.toLower().Trim() <> "end function" And in.toLower().Trim() <> "endfunction"
							functions.addSourceLine(in)
						EndIf
					Until in.toLower().Trim() = "end function" Or in.toLower().Trim() = "endfunction"
				End If
			EndIf
		Wend
		stream.Close()
		
		'Header schreiben
		ostream.WriteLine("<!DOCTYPE html>")
		ostream.WriteLine("<html>")
		ostream.WriteLine("<head>")
		ostream.WriteLine(tab + "<title>" + siteTitle + "</title>")
		ostream.WriteLine(tab + "<script type='text/javascript' src='" + jBBSource + "'></script>")
		ostream.WriteLine(tab + "<script type='text/javascript'>")
		
		For Local g:tGlobal = EachIn tGlobal._list
			ostream.WriteLine(tab + tab + "var " + g.v + " = " + g.val)
		Next
		
		ostream.WriteLine("")
		
		For Local f:tFunction = EachIn tFunction._list
			' Funktionskopf
			Local l:String = "function " + f.funcName + "("
			For Local p:tParameter = EachIn f.parameters
				l:+ p.parName + ", "
			Next
			l = Left(l, l.length - 2)
			l:+ "){"
			ostream.WriteLine(tab + tab + l)
						
			' Funktionskoerper
			For Local c:String = EachIn f.source
				'------------------------------------------------------
				' Graphics
				If Left(c.toLower(), 8) = "graphics"
					Replace(c, "(", " "); Replace(c, ")", "")
					rest = Right(c, c.length - 9)
					Local p:String[] = rest.Split(",")		
					If p.length = 1 Then jBBWidth = Int(p[0])
					If p.length = 2 Then jBBHeight = Int(p[1])
					If p.length = 3 Then jBBSpeed = Int(p[2])
					
					ostream.WriteLine(tab + tab + tab + "Graphics('" + jBBCanvasID + "', " + jBBMainFunc + ", " + jBBSpeed + ");")
				EndIf
				
				'------------------------------------------------------
				' SetColor
				If Left(c.toLower(), 8) = "setcolor"
					Local tmp:String[] = splitFunctionCall(c, "setcolor")
					Local c:Int[] = [0, 0, 0]
					Local z:Int = 0
					For Local i:String = EachIn tmp
						c[z] = Int(i); z:+ 1
					Next
					ostream.WriteLine(tab + tab + tab + "SetColor(" + c[0] + ", " + c[1] + ", " + c[2] + ");")
				EndIf
				
				'------------------------------------------------------
				' ClsColor
				If Left(c.toLower(), 8) = "clscolor"
					Local tmp:String[] = splitFunctionCall(c, "clscolor")
					Local c:Int[] = [0, 0, 0]
					Local z:Int = 0
					For Local i:String = EachIn tmp
						c[z] = Int(i); z:+ 1
					Next
					ostream.WriteLine(tab + tab + tab + "ClsColor(" + c[0] + ", " + c[1] + ", " + c[2] + ");")
				EndIf
				
				'------------------------------------------------------
				' Cls
				If c.length < 6 And Left(c.toLower(), 3) = "cls"
					ostream.WriteLine(tab + tab + tab + "Cls();")
				EndIf
				
				'------------------------------------------------------
				' Local
				If Left(c.toLower(), 5) = "local"
					Local varName:String = ""
					Local varProc:String = ""
					
					Local rest:String = Right(c, c.length - 5).Trim()
					Local pos:Int = Instr(rest, " ")
					varName = Left(rest, pos - 1)
					Local f:String = Right(rest, rest.length - (pos + 1)).Trim()
					Select f.toLower()
						Case "mousex()"		; varProc = "MouseX();"
						Case "mousey()"		; varProc = "MouseY();"
						Default				; varProc = f + ";"
					End Select
					
					ostream.WriteLine(tab + tab + tab + "var " + varName + " = " + varProc)
				EndIf
				
				'------------------------------------------------------
				' DrawImage
				If Left(c.toLower(), 9) = "drawimage"
					Replace(c, "(", " "); Replace(c, ")", "")
					Local rest:String = Right(c, c.length - 9).Trim()
					ostream.WriteLine(tab + tab + tab + "DrawImage(" + rest + ");")
				EndIf
				
				'------------------------------------------------------
				' HidePointer
				If Left(c.toLower(), 11) = "hidepointer" Then ostream.WriteLine(tab + tab + tab + "HidePointer();")
				
				'------------------------------------------------------
				' ShowPointer
				If Left(c.toLower(), 11) = "showpointer" Then ostream.WriteLine(tab + tab + tab + "ShowPointer();")
				
				'ostream.WriteLine(tab + tab + tab + c)
			Next
			
			'abschliessen
			ostream.WriteLine(tab + tab + "};")
			ostream.WriteLine("")
		Next
		
		ostream.WriteLine(tab + "</script>")
		ostream.WriteLine("</head>")
		ostream.WriteLine("<body onLoad='" + jBBInitFunc + "();'>")
		ostream.WriteLine(tab + "<canvas id='" + jBBCanvasID + "' width='" + jBBWidth + "' height='" + jBBHeight + "'>")
		ostream.WriteLine(tab + tab + noCanvasMessage)
		ostream.WriteLine(tab + "</canvas>")
		ostream.WriteLine("</body>")
		ostream.WriteLine("</html>")
		
		ostream.Close()
	Else
		QuitMessage(inFile + " kann nicht gelesen werden.")
	EndIf
Else
	QuitMessage(outFile + " kann nicht geschrieben werden.")
EndIf


Function QuitMessage(msg:String)
	WriteStdout("> " + msg + "~n")
	End
End Function

Function splitFunctionCall:String[](in:String, funcName:String)
	in = Replace(in, "(", " ")
	in = Replace(in, ")", " ")
	Local tmp:String = Right(in, in.length - funcName.length)
	Local pars:String[] = tmp.Split(",")
	
	Return pars
End Function

[bruZard]

Wenn man jBB mit anderen Frameworks zusammen verwenden oder einfach nur erweitern wollte, stieß man schnell an Grenzen. Das soll jBB 1.0 nun alles besser machen.

• Es wird nun der Namespace "jBB" verwendet um Kollisionen mit anderen Frameworks zu vermeiden und es wird derzeit ordentlich aufgeräumt. Das prozeduale API ist kaum betroffen, muss nun aber separat nachgeladen werden damit die Folks die es nicht benötigen etwas weniger Overhead haben.
• Eine große Änderung ist dass das Input-API nicht mehr automatisch initialisiert wird. Das muss nun separat erfolgen (außer man nutzt das prozeduale API) so dass man nun die Möglichkeit hat fremde Eingabe-Framerworks zu verwenden. Beispielsweise hat jBB keinerlei direkte Kontrollen für Touch-Displays etc.
• Farbwerte werden nicht mehr mittels RGBA übergeben, sondern über ein tColor Objekt: "var myYellow = new jBB.tColor(255, 255, 0, 255);"
• Das Canvas-Objekt findet sich nun im separaten Objekt "tCanvas" wieder. Es wurde soweit entschlackt dass es nur noch Dinge kontrolliert die auch das HTML5 Canvas betreffen. So muss nun bspw. ein Image direkt über sein Objekt "tImage" gezeichnet werden. So kann man beliebig viele Canvas verwenden.
• So ist auch das laden, manipulieren und zeichnen von Bildern aus dem Hauptobjekt entfernt worden. Dies muss nun direkt mit dem Imageobject selbst erfolgen.
• Desweiteren sind nun alle Eigenschaften aller Objekte private, es müssen entweder die Getter/Setter verwendet werden, oder man holt sich per "get()" das komplette JSON Objekt und verwendet dies.
• Neu ist das Objekt "browser" welches direkt in tCanvas integriert ist (jBB.tCanvas.browser) und Methoden bereit stellt das Fenster zu lesen und/oder zu manipulieren. Beispielsweise "jBB.tCanvas.browser.backgroundColor(tColor)" -- definiert die Hintergrundfarbe des Browserfensters ...
• Es gibt nun auch keine Init() Methoden mehr, alle Objekte haben einen Konstruktor.
• es wurde optimiert bis die Synapsen wund waren. jBB ist nun kleiner (Dateigröße) und schneller als je zuvor, zudem unterstützt die Version 1.0 nun auch endlich den IE9 ...
• den derzeitigen Stand dokumentiert jsDoc so schön: http://www.sedm.de/jBB1.0/jbb/

Dürftiges Example, aber auch für IE9 ;) -> http://sedm.de/jBB1.0/examples/example01.html

[bruZard]

ein weiterer kleiner Ausblick ...

... es gibt in 1.0 den sogenannten "Basic Mode". Dieser wird mittels "BASCICMODE = true;" aktiviert und bewirkt folgendes:

• Es wird kein HTML Rumpf mehr benötigt
• Es wird keine Initialisierungsfunktion mehr benötigt
• Die Hauptfunktion des Spiels muss "main" heissen.

Eine jBB Datei muss auch im Basic-Mode auf .html enden, sieht aber weitaus übersichtlicher aus:

Code: Alles auswählen

<script type="text/javascript">
    BASICMODE = true;
		
    Include("../js/jBB-1.1.js");
		
    AppTitle = "jBB without HTML";
    Graphics(800, 600);
    ClsColor(90, 120, 200);
		
    function main(){
        Cls();
    };
</script>

Wenn man im Basic-Mode sicherstellen will dass Images, Sounds etc. zu Beginn des Spiels geladen sind, muss man diese vor dem Aufruf von "Graphics()" laden. Außerdem ist noch wichtig zu wissen dass kein Source vor "BASICMODE = true" stehen darf. Kommentare könnt Ihr schreiben wie Ihr wollt, nur halt keinen JavaScript Source.
Vielleicht sollte ich noch erwähnen dass jBB Spiele im Basic-Mode niemals Standardkonform sind da man per JS den Doctype nicht setzen kann.

Wer den Basic-Mode nicht nutzen möchte hat dennoch die Möglichkeit mit wenig HTML sein jBB Game zu bauen. Der jBB Konstruktor unterscheidet nun zwischen der Art der Parameter die übergeben werden. In C++, Java etc. würde man sagen "Die Klasse hat mehrere Kontruktoren".
Man kann nun entweder das Parameterset "ID des Canvas, MainLoop, Bilder pro Sekunde" oder das Set "Breite des Canvas, Höhe des Canvas, Bilder pro Sekunde" verwenden. Wird im ersteren Fall "MainLoop" weggelassen wird angenommen dass die Hauptfunktion "main()" heißt. Wird in beiden Fällen "Bilder pro Sekunde" weggelassen wird das Programm so schnell ausgeführt wie der Client es ausführen kann.
Wenn der Konstruktor mit Breite und Höhe verwendet wird, fügt jBB in den Body der Seite ein Canvas Element mit der ID "jBBCanvas" ein.

Das prozeduale Interface bietet "Graphics()" selbstverständlich auch mit mehreren Parametersets an. Ist Basic-Mode aktiv muss Breite, Höhe und Hertz (Bilder pro Sekunde) übergeben werden, ist dies nicht der Fall erzeugt jBB ein Canvas im Body der Seite. Das zweite Set erwartet die ID des Canvas, die Hauptfunktion des Spiels und die Bilder pro Sekunde. Auch hier wird "main" als Hauptfunktion angenommen wenn der Parameter weggelassen wird. Wird "Bilder pro Sekunde" nicht angegeben läuft das Programm so schnell wie der Browser es zulässt. Prinzipiell kann in jBB1.x die Funktion "Graphics()" auch ohne Parameter aufgerufen werden. In diesem Fall erzeugt jBB ein Canvas der Größe 640x480, erwartet dass die Hauptfunktion "main" heißt und ruft diese sooft auf wie der Browser es erlaubt.

Soviel für heute, bin mal "die hässlichste Sprache der Welt" benutzen...