3D-Missile-Game mit Stereobrille

[Striezel]

Hallo ihr Flasher!
Ich arbeite gerade an einem Spielchen, welches Pseudo-3D-Darstellungen mit der Tiefenwahrnehmung einer Rot/Cyan-Brille kombiniert. Als Vorlage musste "The 3D missile game" herhalten. Geschrieben ist es in AS2, wobei ich wohl genötigt werde auf AS3 umzusatteln. Bevor ich euch aber mit meinem Problem belästige, gebe ich als Ausgleich die Methodik preis, obwohl das mit Flash 10 bald eh überflüssig sein wird.

Die Mathematische Grundlage:
1/x bzw. 1/z

Die Tiefendarstellung:
Um die Tiefe eines Objekts darzustellen, statte man einen MovieClip beim erstellen mit einem zusätzlichen Wert "_z" aus, in dem die Position auf der z-Achse festgehalten wird. Die Tiefendarstellung entspricht hier lediglich einer Änderung der Darstellungsgröße des MovieClips, weshalb diesem die Originalgröße als "real_height" und "real_width" bekanntgemacht werden muss:

this._height = this.real_height/this._z;
this._width = this.real_width/this._z;

z = 1 entspricht dann der Originalgröße und der z-Position auf Höhe des Bildschrims. z < 1 befindet sich vor dem Bildschirm und z > 1 hinter dem Bildschirm. z == 0 ist ungültig, da sich der MovieClip dann auf Höhe der eigenen Netzhaut befindet und "unendlich groß" wird.
Will man nun noch die Objekte auf der x und y-Achse ausrichten, muss man eine real_x und real_y Position dazwischenschalten, da entfernte Objekte weniger und nähere Objekte stärker versetzt werden müssen:

this._x = this.real_x/this._z;
this._y = this.real_y/this._z;

Das Rot/Cyan-Farbtrennungsprinzip:
Eine Rot/Cyan-Brille teilt die Farbinformationen auf, so dass das eine Auge Cyane Farben nicht sehen kann und das andere Rote Farben nicht sehen kann: Schwarz (#000000) wird also in Rot (#FF0000) und Cyan (#00FFFF) aufgeteilt. So lässen sich alle Grautöne und auch so manche Farbe in die 3D-Darstellung aufteilen. Die beiden 3D-Objekte müssen den BlendMode = "multiply" haben um sich nicht zu überdecken.
Will man Objekte nutzen, die im Hintergrund liegende Objekte verdecken, muss man das Objekt noch einmal hinter die Textur-Objekte legen mit den absoluten Füllfarben und Linienfarben (#00FFFF bzw. #FF0000) und der BlendMode auf "Screen" gestellt werden.

Die Anwendung:
Jedes 3D-Objekt muss also 2-4x dargestellt und versetzt werden. Dabei muss das Objekt für das linke Auge nach rechts und das für das rechte Auge nach links versetzt werden. Der globale Maximalversatz "displace" ist vorher festzulegen:

var displace :Number = 30;

...

var disp = displace - displace/this._z;
this.cyan._x = this.real_x/this._z - disp;
this.red._x = this.real_x/this._z + disp;

Das Problem:
In der aktuellen Version ist es schon kaum spielbar, da entweder die Berechnung der Objektgrößen und -positionen, oder die BlendModes "Multiply" und "Screen" zu sehr an den Resourcen nagen.
Würde ein Umstieg auf AS3 Besserung versprechen, oder kann ich das Projekt nun vergessen?

Wenn ich die Hindernisse rotieren lasse, treten merkwürdige Verzerrungseffekte auf. Als wenn man das Spiel auf Droge spielt.
Woran könnte das liegen?

Das Spiel:

3D-Missile-The-Game-in-real-3D

Inhalt der RAR:
Die 3D-Version ("displace = 30;")
Die 2D-Version (gleicher rechenaufwand, da nur "displace = 0;")
Die 2D-Version mit Rotation (DROGE)


Ansonsten ist Kritik jeder Art erwünscht.
Vielen Dank für die Aufmerksamkeit!

[Janoscharlipp]

Mit AS3 wird das definitiv viel besser laufen.

Womit Flash was Performance angeht noch nie gut klar kam ist Transparenz, nimm die mal raus.

Generell sollte aber auch mit AS2 _viel_ mehr machbar sein, wenn ich mich da an einige Demos mit dem damaligen Papervision3D auf AS2 Basis erinnere ...

[Master Wu]

Wäre interessant es mal mit so ner Brille zu sehen, hab leider keine da

Ansonsten: AS3!!

[Striezel]

So, ich hab mir jetzt mal eine "AS2 zu AS3 Migration-Anleitung" geholt. Ich werds versuchen.

@Janoscharlipp: Transparenz kann ich natürlich rausnehmen, bringt aber nicht viel Besserung. Das Problem, denke ich werden die BlendModes sein, vermute ich... Weiß man ob die auch so aufwendig in der Berechnung sind?

Hat jemand noch eine Idee zu den wirren Rotationseffekten? ich weise die Größe zu, aber die wird (laut trace) irgendwie verändert.
Wenn es hilft, kann ich auch die fla hochladen, wobei ich darauf hinweisen möchte, dass ich noch nicht lange flashe und es "nur" eine recht simple Hausarbeit werden soll, bei der der Größenwahn mit mir durchging .

@Master Wu: Die 3D-Brille kann man sich zur Not selbst basteln, Brillenrahmen aus Pappe, dann rote und cyane Folie draufkleben und "welcome to the early 90s" . Wobei ich nicht weiß, ob die Folien aus dem Bastelladen "filtertreu" sind. Zur Not ein Blatt mit Rot und Cyan ausdrucken und schauen ob es passt.

[Janoscharlipp]

Bevor du den großen Schritt zu AS3 wagst, solltest du vielleicht erstmal mit getTimer() durchmessen, wo die ganze Rechenzeit hingeht.
Sind es deine Berechnungen? Welche Berechnungen? Code?

[Striezel]

ich habe meine Funktion ""falling()" die ich mit SetInterval() alle 30ms aufrufe mal per getTimer() durchgemessen und komme auf 1-2 ms pro Durchlauf.
Wenn ich die Zeit zwischen 2 Aufrufen der Funktion checke, kommen 30-200 ms dabei rum.
Vorallem wenn etwas komplexer gestaltete Hindernisse richtig groß werden werden die Zeiten größer.

Wegen der merkwürdigen Darstellungsfehler bei der Rotation bin ich noch komplett ratlos.

Die .rar aus meinem ersten Beitrag enthält jetzt auch die dazugehörige .fla

Es ist mein erstes selbstständiges Flashprojekt und es ist mit Sicherheit das ein oder andere stümperhaft gelöst (game_h kann ich auch über stage._height oder so beziehen) also Zähne zusammenbeißen wenn ihr es euch anschaut.

[Kenji]

Aha! Alles klar. Lass die finger von setInterval. Das hat nicht mal viel mit Auslastung zu tun, aber im Browser wird setInterval mit bis zu 100ms verzögerung aufgerufen. Mach lieber enterFrame, das wird jedenfalls sicher ausgeführt.

Ich hab mal ein Spiel gebastelt und dachte ich sei furchtbar clever wenn ich setInterval brauche... Nein, danke, nie mehr! Das ruckelt wie sonst nichts!

Gruss
Kenji

[Striezel]

Ich rufe sie noch nicht im Browser auf, sondern direkt per Flashplayer. onEnterFrame bringt keinerlei Besserung. Trotzdem danke für den Tipp, ich hatte schon befürchtet niemand hätte eine weitere Idee.

Ich denke die Darstellungsmodi "screen" und "multiply" sind ähnlich Rechenintensiv wie "alpha"-Darstellungen. Wenn AS3 das schneller kann werde ich nun doch auf AS3 umsteigen müssen. Hat jemand Erfahrungen mit den Rechenzeiten solcher Ebeneneffekte und AS2 vs. AS3?

Die Rotationsverzerrungen gibt es bei dem Original nicht und ich nutze schon einen bombensicheren (wenn auch hässlichen) Zuweisungsblock:

// Neue Anzeigegröße berechnen
this.hurdle_texture_left._width = this.hurdle_texture_left._height	=
this.hurdle_texture_right._width= this.hurdle_texture_right._height	=		
this.hurdle_base_left._width 	= this.hurdle_base_left._height 	=
this.hurdle_base_right._width 	= this.hurdle_base_right._height 	= 2*rad/this._z;
				
this.hurdle_back_left._width 	= this.hurdle_back_left._height 	=
this.hurdle_back_right._width 	= this.hurdle_back_right._height 	= 2*rad/(this._z+thickness);

jemand noch eine Idee?

[Kenji]

Hey, also ich hab das zu Hause mit Brille (Selbst gebastelt) angeschaut. Ist ECHT genial. Aber ich hatte echt mühe mit dem Fokussieren, das rote und das blaue sind zu weit auseinander, man muss die Augen zu stark verdrehen. Mach vllt. nur einen centimeter Abstand oder so.

Und ich hab rausgefunden warums laggt. Setz mal detail auf "low". Alles läuft flüssig ab. Hohe Details brauchst du im 3D sowieso nicht, da alles leicht verschwimmt wenn man die Augen verdreht.

Fazit: Du hast schlicht und einfach zu viele Linien. Das glätten braucht die CPU auslastung.

Gruss
Kenji

[Striezel]

Schön, dass dir der 3D-Effekt gefällt. Es war zu Beginn des Projekts nicht klar, ob das so klappen wird, aber es geht.

Der Abstand zwischen den beiden Fluchtpunkten beträgt 60 Pixel. Ich muss noch ein Menü basteln in dem man den Abstand dann selbst anpassen kann. Am Anfang braucht man etwas Zeit um die Tiefenwahrnehmung ohne verschwimmen wahrzunehmen, man sollte also den Versatz langsam von 10 Pixeln ausgehend steigern. Ich werde es jetzt unter "low"-Einstellungen zu Ende bringen. "high" ist dann die highend-PC-Einstellung.

[Striezel]

Ein letztes Update:
Das Spiel ist (irgendwie) fertig! Leider habe ich die Rotationseffekte nicht mehr in den Griff bekommen, weshalb alles recht statisch ist (Die Hindernisse drehen sich nicht).
Fertig ist es schon seit längerem und da viel mir ein, dass ich das Thema hier zumindest mit der letzten Version abschließen sollte.

Da Flash sich bei den sich mehrfach überladenen Blendmodes "multiply" und "screen" totrechnet, empfehle ich "LOW" als die flüssigste Qualitätseinstellung. Wer eine flotte CPU hat, kann auch mal "MED" und "FOG" testen.
Da ich keinen Pre-loader habe, kommt die Menue-Musik etwas zeitversetzt.

Hier also die letzte Version (ohne In-Game-Musik) für alle die es noch interessiert...
The Stereoscopic 3D Game

[Kenji]

Hallo Striezel

Ich finde es sehr schade, dass du den 3D-Effekt herausgenommen hast (zumindest ist er nicht mehr sichtbar), auch die Drehung ist jetzt weg. Meines Erachtens ist jetzt viel, das das Spiel attraktiv gemacht hat, verloren gegangen.

Zwar ist das Spiel immer noch interessant, aber die beiden Dinge waren doch sehr wichtig.

Gruss
Kenji


EDIT: Sorry, ich hab den Balken mit dem 3D-Abstand doch glatt übersehen. Kannst du den nicht irgendwie deutlicher machen? SUPER, jetzt endlich mal was für meinen eigenen Augenabstand. Danke!

[joeydee]

Schöner Effekt, auch wenn ich gerade nicht mit 3D-Brille testen kann. Mit sowas hab ich auch schon experimentiert :-)

Zum Drehen: ich hab jetzt nicht in die RAR geschaut, aber ich vermute Folgendes: beim Drehen eines Objekts kann dieses eine neue Breite bekommen, daher stimmt evtl. die Berechnung nicht mehr.
Übergib mal die neu berechnete Größe nicht als ._height/._width, sondern als ._xscale/._yscale (in %, 100=keine Änderung).
Zur Verdeutlichung teste mal Folgendes: ein MC mit einem Quadrat, Instanzname "mc" auf der Bühne.
Im Frame dann der AS-Code:

trace(mc._xscale);
trace(mc._width);
mc._rotation=45;
trace(mc._xscale);
trace(mc._width);

(hier jetzt AS2, oder bist du inzwischen auf AS3 umgestiegen?)

Die Ausgabe bringt dann:
100
101
100
142.8

Obwohl nur gedreht und nicht skaliert, hat sich die Breite des MC geändert, nicht aber der scale-Wert.

[Striezel]

Den Balken könnte ich natürlich noch deutlicher kennzeichnen, bei Gelegenheit kann ich das ja mal machen. Das Projekt ist aber eigentlich abgeschlossen, weil es nur eine Hausarbeit war und ich nur testen wollte, ob der 3D-Brillen-Effekt auch funktioniert...

Auf die Möglichkeit zu skalieren bin ich - nach dem Abgabetermin - auch gestoßen. Ich habe mich tierisch geärgert, weil scale zusätzlich _x und _y runterskaliert. Es wäre also einiges einfacher geworden.

Wenn ich an die 3D-Möglichkeiten des Flashplayers 10 denke , ist meine Arbeit wohl mehr als Überflüssig geworden, also würde es nur noch Sinn machen, das Ganze nochmal komplett neu aufzuziehen, wozu ich leider keine große Motivation habe.

Trotzdem vielen Dank für die Hilfe!