jBB <basic-style-canvas />

Übersicht Sonstiges Smalltalk

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

Neue Antwort erstellen

Farbfinsternis

Betreff: jBB <basic-style-canvas />

BeitragSa, Sep 11, 2010 21:54
Antworten mit Zitat
Benutzer-Profile anzeigen
Da dieses Projekt zwar BlitzBasic/BMax als Vorbild hat, aber auf JavaScript und HTML5 basiert poste ich es in OffTopic.

Mein Unternehmen will ein wenig im Google AppStore mitmischen und wir dachten uns dass HTML5 + CSS3 + JavaScript genau das richtige Mittel sei um beinahe alle Plattformen zu erreichen. Das Framework heißt "JMax" wird unter GPL veröffentlicht.

Man kann in JavaScript kein BlitzMax nachbauen, aber man kann das Canvas aus HTML5 verwenden und Funktionen schaffen die sich wie BMax anfühlen. Darauf baut das Framework auf: Normaler JaveScript Code, aber prozeduale Funktionen wie in BB/BMax.
Derzeit sind folgende Funktionen implementiert:

  • Graphics()
  • ClsColor()
  • Cls()
  • SetColor()
  • DrawLine()
  • DrawRect()
  • LoadImage()
  • DrawImage()
  • Flip()
  • KeyDown()
  • KeyHit()
  • Rnd()


Wozu das Ganze? Nun, man kann damit in JavaScript 2D Spiele für HTML5 fähige Browser fast so wie mit BMax/Blitzbasic basteln.

>> Live Demo <<

Steuerung: Das BMax Logo wird mit "Cursor Links" + "Cursor Rechts" bewegt. Der Ball wird mit "Space" abgeschossen.

Der Quelltext für das Sample:
Code: [AUSKLAPPEN]

<html>
<head>
   <title>JMax</title>
   
   <script type="text/javascript" src="js/jmax_base.js"></script>
   <script type="text/javascript" src="js/jmax.js"></script>
</head>
<body>
<script type="text/javascript">   

   function oPaddle()
   {
      this.x;
      this.y;
      this.img;
      
      this.Load = function(xPos, yPos, imageFile)
      {
         this.x   = xPos;
         this.y   = yPos;
         this.img= LoadImage(imageFile);
      }
      
      this.moveLeft = function(speed, minX)
      {
         this.x-= speed;
         if(this.x < minX) this.x = minX;
      }
      
      this.moveRight = function(speed, maxX)
      {
         this.x+= speed;
         if(this.x > maxX) this.x = maxX;
      }
      
      this.draw = function()
      {
         DrawImage(this.img, this.x, this.y);
      }
      
      this.getX = function()
      {
         return this.x;
      }
      
      this.getY = function()
      {
         return this.y;
      }
      
      this.getWidth = function()
      {
         return this.img.width;
      }
      
      this.getHeight = function()
      {
         return this.img.height;
      }
   }
   
   function oBall()
   {
      this.x;
      this.y;
      this.img;
      this.dx;
      this.dy;
      this.idle;
      this.maxX;
      this.maxY;
      this.speed;
      this.maxSpeed;
      
      this.load = function(x, y, maxX, maxY, filename)
      {
         this.x      = x;
         this.y      = y;
         this.maxX   = maxX;
         this.maxY   = maxY;
         this.img   = LoadImage(filename);
         this.idle   = true;
         this.speed   = 1.0;
         this.maxSpeed= 12.0;
      }
      
      this.update = function(pX, pY, pWidth, pSpeed)
      {
         if(!this.idle)
         {
            this.speed+= 0.5;
            if(this.speed > this.maxSpeed) this.speed = this.maxSpeed;
            this.x+= (this.dx * this.speed);
            this.y+= (this.dy * this.speed);
            
            if((this.x < 0) || (this.x > this.maxX - this.img.width)) this.dx = -this.dx;
            if((this.y < 0) || (this.y > this.maxY - this.img.height)) this.dy = -this.dy;
            if((this.x > pX) && (this.x < (pX + pWidth)) && (this.y > (pY - this.img.height))) this.dy = -this.dy;
         }
         else
         {
            this.x   = pX + ((pWidth / 2) - (this.img.width / 2));
            this.y   = pY - this.img.height;
         }
         
         DrawImage(this.img, this.x, this.y);
      }
      
      this.setMaxSpeed = function(speed)
      {
         this.maxSpeed = speed;
      }
      
      this.addForce = function(dx, dy)
      {
         this.idle   = false;
         this.dx      = dx;
         this.dy      = dy;
      }
      
      this.getIdle = function()
      {
         return this.idle;
      }
   }
   
   Graphics(800, 600, true, 1000/30);
   ClsColor(0, 30, 90);
      
   var paddle = new oPaddle();
   paddle.Load(350, 524, "media/bmax.png");
   
   var ball   = new oBall();
   ball.load(368, 435, 800, 600, "media/ball.png");
   
   function main()
   {
      Cls();
      
      if(KeyDown(KEY_LEFT)) paddle.moveLeft(8, 0);   
      if(KeyDown(KEY_RIGHT)) paddle.moveRight(8, 700);
      if(KeyDown(KEY_SPACE))
      {
         if(ball.getIdle()) ball.addForce(0.5, -1);
      }
      paddle.draw();
      ball.update(paddle.getX(), paddle.getY(), paddle.getWidth());
         
      Flip();
   }
   
</script>
</body>
</html>

Bitte nicht denken dass das jetzt furchtbar viel Code ist ... das wirkt nur so weil ich das Paddle und den Ball in JS Klassen gepackt habe. Dasselbe Ergebnis lässt sich natürlich auch problemlos mit einfachen Variablen erreichen.

Derzeit ist noch nicht alles für ein Release ausformuliert, wer die Lib trotzdem schon haben will kann sie sich aus dem Demo-Code herunter laden. Am einfachsten geht das im Firefox indem man sich den Quelltext der Seite anzeigen lässt, dort kann man dann per Rechtsklick auf die Script-Includes die Päckchen ziehen.

Kritik, Vorschläge und Fragen sind natürlich willkommen.

P.S.: Weil die Frage kam: Nein, dieses Projekt hat keinerlei Einfluss auf den Ogre-Wrapper. bo3D ist Hobby, JMax ist Job.
  • Zuletzt bearbeitet von Farbfinsternis am Do, Okt 17, 2013 19:44, insgesamt 2-mal bearbeitet

Xaymar

ehemals "Cgamer"

BeitragSo, Sep 12, 2010 0:16
Antworten mit Zitat
Benutzer-Profile anzeigen
Wird es auch Netzwerk befehle geben? Geht ja glaube ich mit jQuery
Warbseite
 

barratator

BeitragSo, Sep 12, 2010 0:41
Antworten mit Zitat
Benutzer-Profile anzeigen
Netzwerk mit Javascript?!?
Höchstens über Ajax...einen eigenen TCP-Stream oder sowas bekommst du denk ich nicht ^^

Skabus

BeitragSo, Sep 12, 2010 2:38
Antworten mit Zitat
Benutzer-Profile anzeigen
Das klingt sehr interessant!

Wie groß wird die Lib vom Umfang her werden?
Bzw. wie weit kommt es im 3D-Bereich etwa an Blitz ran?


Also ich hätte Verwendung dafür, definitiv.



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

ZaP

BeitragSo, Sep 12, 2010 10:34
Antworten mit Zitat
Benutzer-Profile anzeigen
Also irgendwo mal ein Video gesehen, in dem ein Quake 3 Klon zu sehen war (ich glaube auch von Google) und ich meine, dass das über Netzwerk gespielt wurde.
Starfare: Worklog, Website (download)

Goodjee

BeitragSo, Sep 12, 2010 11:06
Antworten mit Zitat
Benutzer-Profile anzeigen
ruckelt bei mir in firefox und chrome
"Ideen sind keine Coladosen, man kann sie nicht recyclen"-Dr. House
http://deeebian.redio.de/ http://goodjee.redio.de/

hazumu-kun

BeitragSo, Sep 12, 2010 11:09
Antworten mit Zitat
Benutzer-Profile anzeigen
In opera läuft es, mit 50% cpu last (2GHz), allerdings ist die kolölision logo-ball sehr schlampig programmiert, manchmal bleibt der ball im Schläger hängen und ruckelt sich dann horizontal weiter.
Warum kann es keine omnipotente Macht geben?
Weil diese omnipotente Macht in der Lage sein müsste, einen so schweren Stein zu schaffen, dass sie ihn nicht heben kann
-> nicht omnipotent

DaysShadow

BeitragSo, Sep 12, 2010 11:20
Antworten mit Zitat
Benutzer-Profile anzeigen
Nette Sache, läuft gut mit 2-3 % Auslastung in Opera 10.62 und System in der Sig.

MfG
Blessed is the mind too small for doubt

hectic

Sieger des IS Talentwettbewerb 2006

BeitragSo, Sep 12, 2010 11:34
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich find die Idee gut. Benutze als Browser ''Iron 4.0.280'' welcher auf meinen Rechner so um 2% Prozessorauslastung benötigt (Win- und Iron-Taskmanager). Dabei zeigt mit der Win-Taskmanager 85MB verbrauch an, während der Iron-Taskmanager mir etwa 8MB verbrauch anzeigt. Das Spiel läuft bei mir mit 30FPS (extra nochmal die Bewegung Pixel pro Zeit gezählt).

System ist AMD Phenom II X4 945 mit 4x 3.00 GHz und 2GB Arbeitsspeicher. Grafikkarte ist onBoard ATI Radeon HD 4200.

Noch eines das ich auch noch nachtragen möchte. Die Ballphysik ist wirklich schlampig programmiert. Wink
Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D

D2006

Administrator

BeitragSo, Sep 12, 2010 12:47
Antworten mit Zitat
Benutzer-Profile anzeigen
hectic hat Folgendes geschrieben:
Das Spiel läuft bei mir mit 30FPS (extra nochmal die Bewegung Pixel pro Zeit gezählt).

Code angucken wäre wohl schneller gegangen. Razz Das Spiel hat offensichtlich einen Timer auf 30 FPS, der bei Graphics mit angegeben wird.

Ich find das übrigens auch recht knorke.
Intel Core i5 2500 | 16 GB DDR3 RAM dualchannel | ATI Radeon HD6870 (1024 MB RAM) | Windows 7 Home Premium
Intel Core 2 Duo 2.4 GHz | 2 GB DDR3 RAM dualchannel | Nvidia GeForce 9400M (256 MB shared RAM) | Mac OS X Snow Leopard
Intel Pentium Dual-Core 2.4 GHz | 3 GB DDR2 RAM dualchannel | ATI Radeon HD3850 (1024 MB RAM) | Windows 7 Home Premium
Chaos Interactive :: GoBang :: BB-Poker :: ChaosBreaker :: Hexagon :: ChaosRacer 2

Hubsi

BeitragSo, Sep 12, 2010 13:08
Antworten mit Zitat
Benutzer-Profile anzeigen
Überaus interresant das ganze. Gibts eine Liste mit den geplanten Features? Ich habs jetzt nur mal schnell überflogen, weil mir das Wetter zu schön ist, aber ich werde das weiter verfolgen Very Happy
Den ganzen Doag im Bett umanandflagga und iaz daherkema und meine Hendl`n fressn...

BtbN

BeitragSo, Sep 12, 2010 13:57
Antworten mit Zitat
Benutzer-Profile anzeigen
Läuft flüssig bei minimaler CPU last(1-2%) im aktuellen Stable Opera auf Win7/Linux, sehr nette Idee.

Lord Stweccys

BeitragSo, Sep 12, 2010 14:44
Antworten mit Zitat
Benutzer-Profile anzeigen
cpu auslast 4% - 6% (winvista + firefox)

Tolle Idee Very Happy
Da macht das Webcoden sicher gelich doppelt soviel Spaß Laughing

Starwar

BeitragSo, Sep 12, 2010 15:02
Antworten mit Zitat
Benutzer-Profile anzeigen
Ubuntu 10.04
Chromium 5: 8-12% / Firefox 3.6.9: 2% / Opera 10.06: 20%
Bei Chromium und Firefox flackert es ein wenig, Opera ruckelt
MFG

Farbfinsternis

BeitragSo, Sep 12, 2010 16:58
Antworten mit Zitat
Benutzer-Profile anzeigen
Netzwerk ist geplant sobald die Webbrowser HTML5 Sockets unterstützen, was widerum davon abhängig ist wann diese endlich fertig spezifiert worden sind. Echtzeit Netzwerk ist somit vorerst nicht möglich. Wie schon erwähnt wurde kann Ajax für die Kommunikation verwendet, in diesem Fall solltet ihr aber mal nachschauen was Euer Provider davon hält Wink

Das die "Ballphysik" fürn Allerwertesten ist erstmal zweitrangig, es geht primär um den prozedualen Zugriff auf das Canvas Element mit Blitzbasic ähnlichen Befehlen.

Ruckeln, schlieren oder was auch immer kann von mir wenig bis garnicht beeinflußt werden, das liegt voll in der Hand der jeweiligen Browser-Implementation. Am schnellsten läuft Chrome. Wie Dee schon richtig erkannt hat ist die Demo auf 30FPS eingestellt, das kann aber jeder für sich selbst einrichten. Wird der Parameter "speed" in Graphics() weggelassen versucht JavaScript die Funktion "main()" 60 Mal pro Sekunde auszuführen.

Wer hier gleich 3D in den Raum geworfen hat: Vergiß es Wink Es hat schon seinen Grund dass das Canvas Element als Parameter "2D" oder "3D" erwartet, "3D" aber noch gar nicht implementiert ist. Ich werde jedenfall keine 3D Engine ohne jegliche Hardwarebeschleunigung schreiben Wink
Farbfinsternis.tv

hectic

Sieger des IS Talentwettbewerb 2006

BeitragSo, Sep 12, 2010 17:15
Antworten mit Zitat
Benutzer-Profile anzeigen
Meine selbst errechnete FPS sollten nur klarstellen, dass es bei mir mit voller FPS läuft und nicht durch technische Einschränkungen gedrosselt wird. Wink
Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D
 

Macintosh

BeitragSo, Sep 12, 2010 17:47
Antworten mit Zitat
Benutzer-Profile anzeigen
gab mal iwo einen Wolfenst**n 3D clone, der auch in sonem HTML 5 view lief.
der hat aber nicht so sehr geruckelt ^^

Farbfinsternis

BeitragSo, Sep 12, 2010 18:54
Antworten mit Zitat
Benutzer-Profile anzeigen
Kann sein dass es ruckelt weil ich einige Dinge in Cls() und Flip() ausführen muss die man sonst wahrscheinlich etwas "geplanter" angeht. In der 0.11 habe ich diese Aufrufe erstmal auskommentiert und es scheint tatsächlich etwas "runder" zu laufen.

>>Demo 0.11<<

Changelog:
Code: [AUSKLAPPEN]

12.09.2010 - V0.11
added   : KeyCodes
added   : jmax.setScale(scaleX, scaleY), SetScale(scaleX, scaleY)
added   : jmx.getScale(), GetScale()
added   : jmx.setAlpha(alpha), SetAlpha(alpha)
changed   : DrawImage() berücksichtigt nun die aktuelle Skalierung
changed   : Parameter "filled" in DrawRect hinzugefügt
changed : SetColor() hat nun den zusätzlichen Parameter "alpha"


Ich habe das ganze Päckchen mal verschnürt und online gestellt:
jMax 0.11 (ca. 27kb)
Farbfinsternis.tv
 

Macintosh

BeitragSo, Sep 12, 2010 19:20
Antworten mit Zitat
Benutzer-Profile anzeigen
ahh schom viel besser =)

Farbfinsternis

BeitragSo, Sep 12, 2010 20:18
Antworten mit Zitat
Benutzer-Profile anzeigen
Super!

Ich habe noch ein wenig gebastelt und man kann nun auch lineare Verläufe verwenden. Dazu gibt es die Funktion LinearGradient(x1, y1, x2, y2). Wie man an der Parameterliste sehen kann übergibt man der Funktion einen Start- und einen Endpunkt für den Verlauf. Die Funktion gibt dann ein Objekt zurück.
Mit AddColor(gradient, position, r, g, b, a) fügt man dann Farben in den Verlauf ein. Der Parameter "position" erwartet einen Wert zwischen 0.0 und 1.0.
Im Moment kann man diese Gradienten nur mit Cls() verwenden, dieser Funktion habe ich den neuen Parameter "gradient" spendiert.

Die Demo zeigt wie ein Gradient via Cls() aussieht.

Die Links in meinem letzten Posting sind aktualisiert.
Farbfinsternis.tv

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

Neue Antwort erstellen


Übersicht Sonstiges Smalltalk

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group