jBB <basic-style-canvas />

Übersicht

Sonstiges

Smalltalk

Gehe zu Seite Zurück 1, 2, 3, 4, 5, 6, 7 Weiter

	ComNik	So, Sep 12, 2010 20:52 Antworten mit Zitat
Tolle Sache, läuft ziemlich Flüssig mit dem neusten Firefox. Komischerweise ruckeln Ball und "Paddel" ziemlich stark hin und her, sobald nicht der ganze canvas auf den Bildschirm passt. Dann fängt die Scrollbar unten an rumzurutschen und mit ihr die Bilder. Ansonsten sehr schön, HTML 5 könnte echt spannend für Web Programmierung sein. lg ComNik
WIP: Vorx.Engine

ComNik

So, Sep 12, 2010 20:52
Antworten mit Zitat

Tolle Sache,
läuft ziemlich Flüssig mit dem neusten Firefox.

Komischerweise ruckeln Ball und "Paddel" ziemlich stark hin und her, sobald nicht der ganze canvas auf den Bildschirm passt. Dann fängt die Scrollbar unten an rumzurutschen und mit ihr die Bilder.

Ansonsten sehr schön,
HTML 5 könnte echt spannend für Web Programmierung sein.

lg
ComNik

WIP: Vorx.Engine

	Starwar	So, Sep 12, 2010 22:04 Antworten mit Zitat
Schneeeeell! Gefällt mir sehr gut. MFG

Starwar

So, Sep 12, 2010 22:04
Antworten mit Zitat

Schneeeeell!
Gefällt mir sehr gut.
MFG

	Farbfinsternis	Fr, Sep 17, 2010 20:20 Antworten mit Zitat
jMax 0.2 ist auf dem Weg. Die Art und Weise wie es verwendet wird hat sich ein bisschen verändert, das war notwendig um jMax auch mit anderen Frameworks zusammen zu verwenden (im Sample nutze ich bspw. jQuery), um die Geschwindigkeit zu erhöhen und um den CSS Zugriff auf das Canvas Element zu ermöglichen. Hier mal vorab das Sample mit einigen Kommentaren: Code: [AUSKLAPPEN] [EINKLAPPEN] <html> <head> <title>jMax 0.2</title> <style type="text/css"> /* jMax 0.2 erlaubt das Canvas selbst zu stylen: / #myCoolGame { position : absolute; left : 50%; top : 50%; margin-left : -400px; margin-top : -300px; border : 2px dashed #000000; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jmax.js"></script> <script type="text/javascript"> / Wenn man Bilder laden will, sollte man dies tun bevor man man Graphics() aufruft um sicher zu stellen dass die Bilder nach dem Aufruf von Graphics() auch geladen sind. / var ball = LoadImage("media/ball.png"); // Noch ein paar Variablen... var ballx = 400; var bally = 300; / Erst Graphics() aufrufen wenn die Seite bereit ist! Hier benutze ich JQuery, man kann das natürlich auch ohne weiteres Framework machen. Graphics() erwartet als erstes die ID des Canvas, dann die Geschwindigkeit mit der die Hauptfunktion (mainLoop) gefahren werden soll und zu guter Letzt den Namen der Hauptfunktion. / $(document).ready(function() { Graphics("myCoolGame", 30, Game); ClsColor(90, 128, 200); }); / Dies ist die Funktion die Graphics() als MainLoop übergeben wurde. Diese wird mit den angebenen FPS aufgerufen. Wird Graphics() kein MainLoop übergeben wird angenommen dass die Funktion "main()" existiert. */ function Game() { Cls(); if(KeyDown(KEY_LEFT)) ballx-= 4.0; if(KeyDown(KEY_RIGHT)) ballx+= 4.0; if(ballx < 0) ballx = 0; if(ballx > 800) ballx = 800; DrawImage(ball, ballx, bally); } </script> </head> <body> <!-- Hier ist das Canvas das für das Spiel verwendet wird --> <canvas id="myCoolGame" width="800" height="600"> <!-- Wenn der Browser das Canvas Element nicht unterstützt, müssen wir eine Ansage machen: --> Dein Browser ist ja mal sowas von letztes Jahrhundert, aber sowas von. </canvas> </body> </html>
Farbfinsternis.tv

Farbfinsternis

Fr, Sep 17, 2010 20:20
Antworten mit Zitat

jMax 0.2 ist auf dem Weg. Die Art und Weise wie es verwendet wird hat sich ein bisschen verändert, das war notwendig um jMax auch mit anderen Frameworks zusammen zu verwenden (im Sample nutze ich bspw. jQuery), um die Geschwindigkeit zu erhöhen und um den CSS Zugriff auf das Canvas Element zu ermöglichen. Hier mal vorab das Sample mit einigen Kommentaren:

Code: [AUSKLAPPEN]

<html>
<head>
<title>jMax 0.2</title>

<style type="text/css">
   /*
      jMax 0.2 erlaubt das Canvas selbst zu stylen:
   */
   #myCoolGame
   {
      position : absolute;
      left    : 50%;
      top       : 50%;
      margin-left : -400px;
      margin-top : -300px;

      border    : 2px dashed #000000;
   }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jmax.js"></script>

<script type="text/javascript">
   /*
      Wenn man Bilder laden will, sollte man dies tun bevor man man Graphics() aufruft um sicher zu stellen dass die
      Bilder nach dem Aufruf von Graphics() auch geladen sind.
   */
   var ball = LoadImage("media/ball.png");

   // Noch ein paar Variablen...
   var ballx = 400;
   var bally = 300;

   /*
      Erst Graphics() aufrufen wenn die Seite bereit ist! Hier benutze ich JQuery, man kann das natürlich auch ohne
      weiteres Framework machen.
      Graphics() erwartet als erstes die ID des Canvas, dann die Geschwindigkeit mit der die Hauptfunktion (mainLoop)
      gefahren werden soll und zu guter Letzt den Namen der Hauptfunktion.
   */
   $(document).ready(function()
   {
      Graphics("myCoolGame", 30, Game);

      ClsColor(90, 128, 200);
   });

   /*
      Dies ist die Funktion die Graphics() als MainLoop übergeben wurde. Diese wird mit den angebenen FPS aufgerufen.
      Wird Graphics() kein MainLoop übergeben wird angenommen dass die Funktion "main()" existiert.
   */
   function Game()
   {
      Cls();

      if(KeyDown(KEY_LEFT)) ballx-= 4.0;
      if(KeyDown(KEY_RIGHT)) ballx+= 4.0;

      if(ballx < 0) ballx = 0;
      if(ballx > 800) ballx = 800;

      DrawImage(ball, ballx, bally);
   }
</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>

Farbfinsternis.tv

	Farbfinsternis	Mi, Sep 22, 2010 23:18 Antworten mit Zitat
Version 0.3 und die Dokumentation des aktuellen Frameworks stehen nun auf http://www.sedm.de/jmax bereit. Die Seite macht exzessiven Gebrauch von HTML5 und CSS3, sie ist mit alten Browsern zwar zu lesen ... sieht aber nur "original" mit Chrome, Safari oder Opera aus.
Farbfinsternis.tv

Farbfinsternis

Mi, Sep 22, 2010 23:18
Antworten mit Zitat

Version 0.3 und die Dokumentation des aktuellen Frameworks stehen nun auf http://www.sedm.de/jmax bereit. Die Seite macht exzessiven Gebrauch von HTML5 und CSS3, sie ist mit alten Browsern zwar zu lesen ... sieht aber nur "original" mit Chrome, Safari oder Opera aus.

Farbfinsternis.tv

	Klip	Do, Sep 23, 2010 12:28 Antworten mit Zitat
Hallo, sehr coole Sache! Mich stört allerdings, dass du JS wie Blitz aussehen lassen willst. In JS schreibt man Funktionsnamen beispielsweise mit kleinem Anfangsbuchstaben. Wenn das bei jMax nicht der Fall ist, wirkt dessen Code wie ein Fremdkörper, finde ich =(

Klip

Do, Sep 23, 2010 12:28
Antworten mit Zitat

Hallo,

sehr coole Sache! Mich stört allerdings, dass du JS wie Blitz aussehen lassen willst. In JS schreibt man Funktionsnamen beispielsweise mit kleinem Anfangsbuchstaben. Wenn das bei jMax nicht der Fall ist, wirkt dessen Code wie ein Fremdkörper, finde ich =(

	Badudel	Do, Sep 23, 2010 16:53 Antworten mit Zitat
Wow. Unbedingt weitermachen!
Wir werden dem Schwein schon schlachten, auch wenn ihm quiekt. Zum Teufel mit das Grammatik!

Badudel

Do, Sep 23, 2010 16:53
Antworten mit Zitat

Wow. Unbedingt weitermachen!

Wir werden dem Schwein schon schlachten, auch wenn ihm quiekt.
Zum Teufel mit das Grammatik!

	Farbfinsternis	Do, Sep 23, 2010 18:43 Antworten mit Zitat
Version 0.4 ist nun verfügbar. Changelog: Zitat: 23.09.2010 - V0.4 added : DrawText(text, x, y) added : SetFont(fontName, height, isBold, isItalic) added : StringWidth(text) added : MouseX() added : MouseY() changed : WritePixelReady() heisst nun FlushBuffer() fixed : DrawRect setzte die Zeichenfarbe falsch 22.09.2010 - V0.3 added : MouseDown() added : MouseHit() Das vollständige Changelog ist nun auf der Seite verlinkt, außerdem ist nun auch das erste Tutorial mit Live-Demo verfügbar.
Farbfinsternis.tv

Farbfinsternis

Do, Sep 23, 2010 18:43
Antworten mit Zitat

Version 0.4 ist nun verfügbar. Changelog:
Zitat:

23.09.2010 - V0.4
added : DrawText(text, x, y)
added : SetFont(fontName, height, isBold, isItalic)
added : StringWidth(text)
added : MouseX()
added : MouseY()
changed : WritePixelReady() heisst nun FlushBuffer()
fixed : DrawRect setzte die Zeichenfarbe falsch

22.09.2010 - V0.3
added : MouseDown()
added : MouseHit()

Das vollständige Changelog ist nun auf der Seite verlinkt, außerdem ist nun auch das erste Tutorial mit Live-Demo verfügbar.

Farbfinsternis.tv

	Farbfinsternis	Fr, Sep 24, 2010 21:04 Antworten mit Zitat
0.41 steht zum Download bereit. Zitat: added : LoadAnimImage(filename, cellWidth, cellHeight, maxFrames) added : GraphicsWidth() added : GraphicsHeight() added : ImageWidth() added : ImageHeight() changed : LoadImage() gibt jetzt ein Objekt vom Type "tileset" zurück changed : DrawImage() hat nun den vierten Parameter "frame"
Farbfinsternis.tv

Farbfinsternis

Fr, Sep 24, 2010 21:04
Antworten mit Zitat

0.41 steht zum Download bereit.

Zitat:

added : LoadAnimImage(filename, cellWidth, cellHeight, maxFrames)
added : GraphicsWidth()
added : GraphicsHeight()
added : ImageWidth()
added : ImageHeight()
changed : LoadImage() gibt jetzt ein Objekt vom Type "tileset" zurück
changed : DrawImage() hat nun den vierten Parameter "frame"

Farbfinsternis.tv

	Garfield12	Sa, Sep 25, 2010 22:02 Antworten mit Zitat
Also die Idee ist wirklich Klasse. Aber ich habe noch zwei Fragen hinsichtlich der Weiterentwicklung: Wird die performance noch besser? Und wie ist es um die Browserunabhängigkeit bestellt? MfG Yannik

Garfield12

Sa, Sep 25, 2010 22:02
Antworten mit Zitat

Also die Idee ist wirklich Klasse. Aber ich habe noch zwei
Fragen hinsichtlich der Weiterentwicklung:
Wird die performance noch besser?
Und wie ist es um die Browserunabhängigkeit bestellt?

MfG
Yannik

	Farbfinsternis	Sa, Sep 25, 2010 23:20 Antworten mit Zitat
Die Performance entspricht natürlich nicht einer nativen Applikation, kann sie auch nicht weil HTML5 noch nicht zuende definiert ist und diesen Status wohl noch 20 Jahre behalten wird. Allerdings liefern sich die Browser-Hersteller derzeit einen Krieg um HTML5 und derzeit sieht es so aus dass IE9 gwinnt da es das Canvas nativ auf die 3D Hardware zugreifen lässt. Ich denke dass durch diese Vorlage die anderen Hersteller nachziehen werden und bis Ende 2011 Canvas überall nativ verfügbar ist. jMax ist prinzipiell mit allen Browsern kompatibel die das Canvas-Element unterstützen. Ich teste das Framework mit Firefox, Opera und Chrome. Als Sample und als Grundlage für Tutorial 02 baue ich gerade ein "Pong", das wird halbwegs zeigen wie kompatibel und performant der Kram ist.
Farbfinsternis.tv

Farbfinsternis

Sa, Sep 25, 2010 23:20
Antworten mit Zitat

Die Performance entspricht natürlich nicht einer nativen Applikation, kann sie auch nicht weil HTML5 noch nicht zuende definiert ist und diesen Status wohl noch 20 Jahre behalten wird. Allerdings liefern sich die Browser-Hersteller derzeit einen Krieg um HTML5 und derzeit sieht es so aus dass IE9 gwinnt da es das Canvas nativ auf die 3D Hardware zugreifen lässt. Ich denke dass durch diese Vorlage die anderen Hersteller nachziehen werden und bis Ende 2011 Canvas überall nativ verfügbar ist.

jMax ist prinzipiell mit allen Browsern kompatibel die das Canvas-Element unterstützen. Ich teste das Framework mit Firefox, Opera und Chrome.

Als Sample und als Grundlage für Tutorial 02 baue ich gerade ein "Pong", das wird halbwegs zeigen wie kompatibel und performant der Kram ist.

Farbfinsternis.tv

	Farbfinsternis	So, Sep 26, 2010 20:56 Antworten mit Zitat
Version 0.42 ist online. Die Neuerungen: GraphicsWidth(), GraphicsHeight() : Gibt die Größe des Canvas zurück ImageWidth(), ImageHeight() : Gibt die Größe eines Bildes zurück Millisecs() : Gibt die Millisekunden seit Systemstart zurück DebugLog() : Schreibt einen Text in die JavaScript Konsole LoadFont() : Lädt einen TTF oder OTF Font welche dann nach SetFont() verwendet werden kann. (crasht noch in Safari) repariert: DrawLine() malt nun mit der Farbe die mit SetColor() definiert wurde repariert: DrawImage() berechnet das Frame nun korrekt (fettes Danke an hamZta!)
Farbfinsternis.tv

Farbfinsternis

So, Sep 26, 2010 20:56
Antworten mit Zitat

Version 0.42 ist online. Die Neuerungen:

GraphicsWidth(), GraphicsHeight() : Gibt die Größe des Canvas zurück
ImageWidth(), ImageHeight() : Gibt die Größe eines Bildes zurück
Millisecs() : Gibt die Millisekunden seit Systemstart zurück
DebugLog() : Schreibt einen Text in die JavaScript Konsole
LoadFont() : Lädt einen TTF oder OTF Font welche dann nach SetFont() verwendet werden kann. (crasht noch in Safari)
repariert: DrawLine() malt nun mit der Farbe die mit SetColor() definiert wurde
repariert: DrawImage() berechnet das Frame nun korrekt (fettes Danke an hamZta!)

Farbfinsternis.tv

	Farbfinsternis	Di, Sep 28, 2010 19:47 Antworten mit Zitat
0.44 ist am Start. Neben einigen Fixes und Changes gibt es auch wieder einige Neuerungen. Die interessanteste dabei werden wohl die "Bobs" sein. Bobs sind automatisch animierte AnimImages. Das heißt dass man nur ein AnimImage laden, aus einer Reihe von Frames eine Animation definieren und die Geschwindigkeit angeben muss. Nach einem StartBob() wird dann die Animation ohne weitere Eingriffe abgespielt. In einem späteren Release wird man Namen für "Frame-Ranges" erstellen können um zur Laufzeit die Animation ändern zu können, ohne einen weiteren Bob erzeugen zu müssen. Code: [AUSKLAPPEN] [EINKLAPPEN] 28.09.2010 - V0.44 added : CreateBob(image, firstFrame, lastFrame, speed, looped) added : DrawBob(bob, x, y) added : StartBob(bob) added : StopBob(bob) added : SetBobSpeed(bob, speed) added : DesktopWidth() added : DesktopHeight() added : GetScale() changed : die globale Skalierung wird nicht mehr in einem Array, sondern in einem Objekt gesichert. fixed : Text wird nun auch mit dem Handle 0, 0 gezeichnet
Farbfinsternis.tv

Farbfinsternis

Di, Sep 28, 2010 19:47
Antworten mit Zitat

0.44 ist am Start. Neben einigen Fixes und Changes gibt es auch wieder einige Neuerungen. Die interessanteste dabei werden wohl die "Bobs" sein.

Bobs sind automatisch animierte AnimImages. Das heißt dass man nur ein AnimImage laden, aus einer Reihe von Frames eine Animation definieren und die Geschwindigkeit angeben muss. Nach einem StartBob() wird dann die Animation ohne weitere Eingriffe abgespielt.
In einem späteren Release wird man Namen für "Frame-Ranges" erstellen können um zur Laufzeit die Animation ändern zu können, ohne einen weiteren Bob erzeugen zu müssen.

Code: [AUSKLAPPEN]

28.09.2010 - V0.44
added : CreateBob(image, firstFrame, lastFrame, speed, looped)
added : DrawBob(bob, x, y)
added : StartBob(bob)
added : StopBob(bob)
added : SetBobSpeed(bob, speed)
added : DesktopWidth()
added : DesktopHeight()
added : GetScale()
changed : die globale Skalierung wird nicht mehr in einem Array, sondern in einem Objekt gesichert.
fixed : Text wird nun auch mit dem Handle 0, 0 gezeichnet

Farbfinsternis.tv

	ozzi789	Do, Sep 30, 2010 10:45 Antworten mit Zitat
Tolle Sache, nur wo ist diese Demo? Mfg
0x2B \|\| ! 0x2B C# \| C++13 \| Java 7 \| PHP 5

ozzi789

Do, Sep 30, 2010 10:45
Antworten mit Zitat

Tolle Sache, nur wo ist diese Demo? Very Happy

Mfg

0x2B || ! 0x2B
C# | C++13 | Java 7 | PHP 5

	Farbfinsternis	Do, Sep 30, 2010 15:12 Antworten mit Zitat
Die einzige offizielle Demo befindet sich am Ende von Tutorial 01, die Demo mit der ich neue Sachen teste findet sich hier: http://sedm.de/jmax/sample.html
Farbfinsternis.tv

Farbfinsternis

Do, Sep 30, 2010 15:12
Antworten mit Zitat

Die einzige offizielle Demo befindet sich am Ende von Tutorial 01, die Demo mit der ich neue Sachen teste findet sich hier: http://sedm.de/jmax/sample.html

Farbfinsternis.tv

	ozzi789	Fr, Okt 01, 2010 11:43 Antworten mit Zitat
Sehr genial! Respekt
0x2B \|\| ! 0x2B C# \| C++13 \| Java 7 \| PHP 5

ozzi789

Fr, Okt 01, 2010 11:43
Antworten mit Zitat

Sehr genial!
Respekt

0x2B || ! 0x2B
C# | C++13 | Java 7 | PHP 5

	Lord Stweccys	Fr, Okt 01, 2010 17:35 Antworten mit Zitat
Ich wollte mal FRagen ,ob man das Projekt in seine eigenen Projekte einbinden darf, also ich würde gerne JMax für mein kleines Projekt verwenden, ginge das okay? Ich frag lieber nochmal nach, bevor ich da irgendeinen "Rechtsstreit" am Hals habe

Lord Stweccys

Fr, Okt 01, 2010 17:35
Antworten mit Zitat

Ich wollte mal FRagen ,ob man das Projekt in seine eigenen Projekte einbinden darf,
also ich würde gerne JMax für mein kleines Projekt verwenden, ginge das okay?
Ich frag lieber nochmal nach, bevor ich da irgendeinen "Rechtsstreit" am Hals habe Very Happy

	Farbfinsternis	Fr, Okt 01, 2010 17:46 Antworten mit Zitat
Es ist OpenSource und Freeware, kannst Du also machen.
Farbfinsternis.tv

Farbfinsternis

Fr, Okt 01, 2010 17:46
Antworten mit Zitat

Es ist OpenSource und Freeware, kannst Du also machen.

Farbfinsternis.tv

	Lord Stweccys	Fr, Okt 01, 2010 18:00 Antworten mit Zitat
Nice, das find ich wirklich toll von dir.

Lord Stweccys

Fr, Okt 01, 2010 18:00
Antworten mit Zitat

Nice, das find ich wirklich toll von dir. Smile

	Farbfinsternis	Do, Okt 07, 2010 20:40 Antworten mit Zitat
V0.6 ist auf dem Weg und das Projekt wurde erneut umbenannt in "jBB" (beezy war echt scheisse). Die neue Version kommt mit einem OOP Interface daher (prozeduales Interface wird natürlich verfügbar bleiben), ist um die Hälfte kleiner und doppelt so schnell. Außerdem kann man nun komplett auf externe Frameworks für die Initialisierung verzichten, ein einfaches "window.onLoad = ..." genügt nun. Wer schonmal gucken will ob sich "Speed-technisch" bei ihm etwas getan hat kann folgenden Link versuchen: http://www.sedm.de/jbb/
Farbfinsternis.tv

Farbfinsternis

Do, Okt 07, 2010 20:40
Antworten mit Zitat

V0.6 ist auf dem Weg und das Projekt wurde erneut umbenannt in "jBB" (beezy war echt scheisse). Die neue Version kommt mit einem OOP Interface daher (prozeduales Interface wird natürlich verfügbar bleiben), ist um die Hälfte kleiner und doppelt so schnell. Außerdem kann man nun komplett auf externe Frameworks für die Initialisierung verzichten, ein einfaches "window.onLoad = ..." genügt nun.

Wer schonmal gucken will ob sich "Speed-technisch" bei ihm etwas getan hat kann folgenden Link versuchen: http://www.sedm.de/jbb/

Farbfinsternis.tv

	Skabus	Do, Okt 07, 2010 22:57 Antworten mit Zitat
Sieht gut aus. Scheint schneller zu sein, als das alte Beispiel. Bin weiterhin gespannt. Danke das du uns ständig auf dem laufenden hälst! MfG Ska
"In einer so verrückten Welt, kann man um in ihr zu überleben nur eines tun, nämlich eben jenes werden: Ein Verrückter!" -Selbstzitat aktuelles Projekt: Aves Certim - Der Galgen ist nicht weit! Ein SNES-RPG mit Handels- und Wirtschaftselemente. Infos?Hier: http://www.blitzforum.de/worklogs/234/ Besucht meine Seite: www.seelenfriedhof.de.vu

Skabus

Do, Okt 07, 2010 22:57
Antworten mit Zitat

Sieht gut aus.

Scheint schneller zu sein, als das alte Beispiel.

Bin weiterhin gespannt.

Danke das du uns ständig auf dem laufenden hälst!

MfG Ska

"In einer so verrückten Welt, kann man um in ihr zu überleben nur eines tun, nämlich eben jenes werden: Ein Verrückter!" -Selbstzitat

aktuelles Projekt: Aves Certim - Der Galgen ist nicht weit!
Ein SNES-RPG mit Handels- und Wirtschaftselemente.
Infos?Hier: http://www.blitzforum.de/worklogs/234/
Besucht meine Seite:
www.seelenfriedhof.de.vu

Gehe zu Seite Zurück 1, 2, 3, 4, 5, 6, 7 Weiter

Übersicht

Sonstiges

Smalltalk

Nach Oben

BlitzBasic Portal

jBB <basic-style-canvas />