#1 28.12.2007 18:58:26

Coolcat
ProGuru
Ort: Aachen, NRW
Registriert: 24.01.2005
Beiträge: 2780
Web-Seite

JavaScript-Pseudo-3D-Engine

Moin,
ich bastel gerade aus Spaß an einer JavaScript-Pseudo-3D-Engine. Soll später mal eine Art Browsergame werden, sowas in der Art wie http://de.wikipedia.org/wiki/Konquest, wer es kennt. Also das Ding braucht nur einen modernen Browser mit JavaScript. Dinge wie ActiveX, Flash oder Silverlight werden nicht benötigt. Allerdings muss der Browser transparente PNG-Bilder unterstützen. Der InternetExplorer kann das erst seit Version 7, alle anderen Browser sollten das aber können.

Hier nen kleines Sample: http://www-users.rwth-aachen.de/Martin.Weusten/sprite/

Natürlich entwickle ich nicht direkt in JavaScript, sondern benutze das http://code.google.com/webtoolkit/, eine Art Compiler der Java-Quellcode in HTML, CSS und JavaScript übersetzt. (der größte Vorteil ist, dass es in jedem Browser gleich aussieht und AJAX ganz einfach wird tongue)

Nun zu meinem Problemen:
1. Wie man im Sample sieht will ich ein paar kreisende Planeten in deren Mitte eine Sonne ist. Die "Engine" macht aber natürlich nichts anderes, als Bilder in der richtigen Größe an die richtige Stelle setzen. Das Problem ist also die Beleuchtung: Es dürfte reichlich dämlich aussehen wenn die helle Seite des Planeten der Sonne abgewandt ist.
Meine Idee wäre diverse Bilder vor zu berechnen und halt immer das am besten passende anzuzeigen. Fällt jemandem eine Anordnung ein, in der ich möglichst wenig Bilder brauche, ich effizient berechnen kann welches Bild ich brauche und das außerdem noch gut aussieht? (oder eine bessere Idee?)

2. Es wäre vielleicht nicht schlecht wenn der Spieler später eine Art Orientierung hätte, damit man besser die Lage der Planeten zueinander besser erfassen kann. Dummerweise kann man mit normalen HTML-Elementen keine beliebigen Linien zeichnen, allenfalls vertikale oder horizontale. Fällt jemanden eine Art von Orientierungshilfe ein, die mit wenigen HTML-Elementen auskommt?

Coolcat


My software never has bugs. It just develops random features.

Offline

 

#2 28.12.2007 21:19:38

Lotipats
UltraMember
Registriert: 17.05.2005
Beiträge: 395

Re: JavaScript-Pseudo-3D-Engine

Als erstes eine kleine Anmerkung:
mit dem IE6 (vllt. auch 5.5, ...) kann man auch PNGs transparent darstellen, jedoch über einen Umweg. Das habe ich vor Jahren mal bei einer Wirtschaftssimulation gemacht (musste mehrmals umbenannt werden, weil sich nach einiger zeit immer jmd. die Rechte an den Namen gesichert haben und dann selber soetwas rausbrachten ...). Dabei werden Bilder mit PNG rausgefiltert, mit DirectX und einer ein-Pixel-großen Gif-Datei(transparent) wird dann die PNG auch transparent. Eigentlich muss man dazu nur eine Script-Datei einbinden (in HTML).

Zu deinen Problemen:
ich weiß nicht, ob es geht, aber wenn du Bilder aktiv verändern kannst, dann könntest du ...

1) ... für verschiedene Positionen ein allg. Beleuchtungsbild machen. Je nach Position der Himmelskörper bzgl. Lichtquelle wird bei denen das richtige in der richtigen Größe "drübergejagt". Vllt. sollte es für verschiedene Typen verschiedene Beleuchtungsbilder geben (runde Planeten, klüftige Kometen/Trabanten, Weltraumschrott, ...)

2) ... ein transparentes Bild drüberpacken, in dem du "reinrenderst", was angezeigt werden soll. Prinzipiell würde das so wie mit der oben beschriebenen "Ich mach mal das Transparente transparent"-Methode sein. Ich weiß aber nicht, ob man das koppeln kann (für den Fall, dass Bildbearbeitung mit JavaScript nicht so geht).

Ich weiß, nicht so schöne Lsg., aber das beste, was mir einfällt. Ich kann auch nur hoffen, dich richtig verstanden zu haben. wink

LOTIPATS

Offline

 

#3 28.12.2007 22:26:09

Coolcat
ProGuru
Ort: Aachen, NRW
Registriert: 24.01.2005
Beiträge: 2780
Web-Seite

Re: JavaScript-Pseudo-3D-Engine

Ich kann keine Bilder bearbeiten, wäre auch viel zu lahm. Ich kann nur Bilder positionieren, skalieren und durch ein anderes Bild ersetzen. Alles was darüber hinaus geht, geht nicht. Auch z.B. das drehen eines Bildes ist nicht möglich.

@IExpl: Ich habe nicht wirklich vor dieses Schrottteil von Browser zu unterstützen...wenn das allerdings einfach möglich sein sollte ohne die Darstellung für andere Browser zu beeinflussen werd ich mal drüber nachdenken.


My software never has bugs. It just develops random features.

Offline

 

#4 28.12.2007 23:29:38

Christian
Webmaster
Ort: Wien
Registriert: 19.01.2005
Beiträge: 508
Web-Seite

Re: JavaScript-Pseudo-3D-Engine

Gibt es keine Möglichkeit nur die Schatten vorzuberechnen und die dann erst bei der Anzeige drüberzulegen?

Offline

 

#5 29.12.2007 08:04:54

Lotipats
UltraMember
Registriert: 17.05.2005
Beiträge: 395

Re: JavaScript-Pseudo-3D-Engine

[quote=Christian]Gibt es keine Möglichkeit nur die Schatten vorzuberechnen und die dann erst bei der Anzeige drüberzulegen?

Mit Alphawert von 50% sollte es doch möglich sein (oder anderer Wert). Wenn man selber schon nicht zeichnen kann, so wäre dies wenigstens möglich, dadurch hätte man aber auch 2 Bilder pro Planetz (beim Anzeigen) und damit Mehraufwand.

Und was mit den PNGs ist:
http://labuschin.com/journal/xhtml-css/ … t-explorer.
Auf der Seite steht, dass diese Option "filter" wohl nur vom IE genutzt wird. Auch Selfhtml meint dies sei nur für den IE, ab Version 4.0.

Ich hatte damals eine andere Lsg., die ähnlich war. Sie stammt von der Seite http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html. Das ist auch nicht kompliziert. Wenn aber das andere klappt, würde ich hierrauf, aus heutiger Sicht, verzichten.

LOTIPATS

Offline

 

#6 29.12.2007 14:13:50

Christian
Webmaster
Ort: Wien
Registriert: 19.01.2005
Beiträge: 508
Web-Seite

Re: JavaScript-Pseudo-3D-Engine

Naja, der Mehraufwand hält sich in Grenzen. Man müsste nur das Planetenbild per CSS-Background-Image in den Hintergrund des IMG schieben und als IMG-SRC den Schatten angeben.

Offline

 

#7 29.12.2007 20:02:29

Coolcat
ProGuru
Ort: Aachen, NRW
Registriert: 24.01.2005
Beiträge: 2780
Web-Seite

Re: JavaScript-Pseudo-3D-Engine

So, ich habe jetzt mal vorberechnetes Licht eingebaut:
http://www-users.rwth-aachen.de/Martin.Weusten/sprite/

Sieht ganz hübsch aus find ich smile

Ich habe jetzt 18 vorberechnete Bilder für jeden Planeten. Die Anordnung sieht so aus:
http://imageshack.us
Das ganze natürlich in 3D, also insgesamt 29 Bilder. Die Bilder mit der Lichtquelle auf der Rückseite kann man sich sparen da sie alle nahezu gleich aussehen. Das Bild in der Mitte (Planet sitzt auf der Lichtquelle) ersetze ich durch das mit der vollen Beleuchtung. So komme ich auf 18 Bilder.

Ich transformiere Planet und Lichtquelle mit World- und Viewmatrix und berechne die Richtung vom Planet zur Lichtquelle. Die Richtung wird auf die Länge 1.3f normalisiert (äußerer Kreis im Bild). Ohne den Faktor 1.3f (innererKreis) wären die Winkel falsch und es würde nicht ganz zu gut aussehen. Jedenfalls runde ich dann für jede Koordinaten-Achse auf -1, 0 oder 1 und kann mir damit den Index des benötigten Bildes berechnen.

Die ganze Berechnung sieht im Quellcode so aus:

Code:

    if (sprite.useLight) {
      Vector3f transformedPlanet = view.transformCoord(pos);
      Vector3f lightDir = transformedLight.sub(transformedPlanet);

      if (lightDir.lengthSq() < 0.0001f) {
        // planet is inside lightsource...
        sprite.newLightIndex = 4;
      }
      else {
        // magic number for angle correction
        lightDir = lightDir.setLength(1.3f);

        int x = (int)( lightDir.x + 1.5f);
        int y = (int)( lightDir.y + 1.5f);
        int z = (int)(-lightDir.z + 1.5f);
  
        sprite.newLightIndex = 9*z + 3*x + y;
        if (sprite.newLightIndex >= 18) {
          // lightsource behind planet
          sprite.newLightIndex = 13;
        }
      }
    }

My software never has bugs. It just develops random features.

Offline

 

#8 29.12.2007 20:05:41

Coolcat
ProGuru
Ort: Aachen, NRW
Registriert: 24.01.2005
Beiträge: 2780
Web-Seite

Re: JavaScript-Pseudo-3D-Engine

Zitat:

Und was mit den PNGs ist:

Das mit dem GWT zu machen ist schon Aufwand, da ich keine Conditional-Comments benutzen kann und keinen Zugriff auf irgendwelche Browserweichen habe. Wird halt alles automatisch generiert. Naja, vielleicht baue ich irgendwo ein Optionsmenü ein wo man das einfach einschalten kann.


My software never has bugs. It just develops random features.

Offline

 

#9 30.12.2007 09:37:54

efilnukefesin
Member
Ort: Bayreuth
Registriert: 12.04.2007
Beiträge: 50
Web-Seite

Re: JavaScript-Pseudo-3D-Engine

hmm um mal was weniger konstruktives einzuwerfen: BOAH! big_smile
ich hab schon immer gesagt dass spiele die einzig interessante möglichkeit des web 2.0 sind smile

Offline

 

#10 04.01.2008 10:46:38

Coolcat
ProGuru
Ort: Aachen, NRW
Registriert: 24.01.2005
Beiträge: 2780
Web-Seite

Re: JavaScript-Pseudo-3D-Engine

(hm, hier macht der Thread irgendwie mehr Sinn...*verschieb)


My software never has bugs. It just develops random features.

Offline

 

Brett Fußzeile

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson