3d für Anfänger - Effekte

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • 3d für Anfänger - Effekte

      Weitere 3d-Anfänger Tutorials gibt's hier:

      Vorraussetzungen: Grundlagen in der Benutzung von 3d sollten klar sein.

      In diesem Tutorial werde ich einige hübsche Effekte präsentieren, ich fange jedoch mit einem an und reiche später welche nach.

      Tutorial 1 - Schatteneffekte (Gebiete: Scaling, Trigonimetrie)

      Obwohl der Gamemaker keine "wirklichen" Schatten darstellen kann, heisst es noch lange nicht, dass man keinen ähnlichen Effekt erzielen kann.
      Deswegen werde ich in diesem Tutorial zwei vers. Arten von Schatten erklären, einen "festen" und einen "beweglichen".

      Fangen wir mit dem leichteren an. Dafür kramen wir nochmal das Example meines alten Tutorials (Muss nicht zwangsläufig mein altes Example sein) raus.
      Bei beiden Arten von Schatten wird der Schatten so geworfen, als wenn sich die Lichtquelle sich über dem
      jeweiligen Objekt befinden würde (praktisch im Zenit). [1]

      [1]

      "Fester Schatten"
      :

      Wir erstellen ein neues Objekt, nennen wir es einfach mal obj_shadow.
      In das Draw_Event schreiben wir:

      GML-Quellcode

      1. d3d_draw_block(x-10,y-10,10,x+10,y+10,20,background_get_texture(tex),1,1)
      2. draw_set_alpha(0.2)
      3. d3d_draw_floor(x-13,y-13,0.1,x+13,y+13,0.1,background_get_texture(black),1,1)
      4. draw_set_alpha(1)


      Nun die Erklärung: Dieser Code Zeichnet:

      1. Einen Block mit dem Durchmesser von 20 Pixeln welcher von einer Höhe von 10 bis 20 Z gezeichnet wird.
      2. Eine zu 80 % transparente Fläche mit einer schwarzen Textur, welche (nahezu) auf dem Boden gezeichnet wird und um 6 Pixel im Durchmesser größer ist. (Desto höher die Lichtquelle sein soll, desto größer muss der Durchmesser des Schattens sein)
      (Zur Erinnerung: alpha=1 entspricht 0% Transparenz; alpha=0 entspricht 100% Transparenz)

      Das ganze kann dann in Etwa so aussehen: [2]

      [2]

      Diesen "Effekt" kann man nicht nur auf Blöcke, sondern auf alle geometrischen Figuren anwenden, hier z.b einen Ellipsoiden.:

      GML-Quellcode

      1. d3d_draw_ellipsoid(x-10,y-10,10,x+10,y+10,20,background_get_texture(tex1),1,1,30)
      2. draw_set_alpha(0.2)
      3. d3d_draw_ellipsoid(x-13,y-13,0.1,x+13,y+13,0.1,background_get_texture(black),1,1,30)
      4. draw_set_alpha(1)


      "Dynamischer Schatten":


      Einen ähnlichen Effekt können wir auch auf bewegliche Objekte anwenden, damit meine ich aber keine Bewegung auf der X-Y Ebene, sondern eine Z Bewegung. Dies wäre zum Beispiel eine Bewegung wie als wenn ich einen Gummiball auf den Boden werfen würde, oder ein Gegenstand der "schwebt".
      Hierfür verwendet man Trigonometrie. (Alle die sich mit Trigonometrie nicht auskennen: Ihr müsst es nicht verstehen, einfach nur benutzen.)
      Am besten lässt sich die Z-Bewegung mit dem Sinus einer Variable errechnen. [3]
      [3] (Graph einer Sinus Funktion.)

      Als erstes fangen wir an unser Objekt "block" zum Schweben zu bringen. (Auf altes Example bezogen)
      Dafür erstellen wir im Create Event die Variable Z, welche wir jeden Step um 0.05 erhöhen.
      Die Vorhandene Zeile

      GML-Quellcode

      1. d3d_draw_block(x-5,y-4,0,x+5,y+4,5,background_get_texture(tex1),1,1)

      ändern wir nun in

      GML-Quellcode

      1. d3d_draw_block(x-5,y-4,0+sin(z)/4,x+5,y+4,5+sin(z)/4,background_get_texture(tex1),1,1)


      Erklärung:

      Unsere Variable Z entspricht X im Graphen, Y entspricht sin(z). [3]
      In unserem Fall lassen wir Z jeden Step um 0.05 anwachsen, würden wir ihn z.B. um 0.1 anwachsen lassen würden, würde das Objekt schneller schweben. (Die Kurven wären näher beieinander)
      Das Teilen durch 4 verringert den Anteil um welchen unser Objekt nach oben und unten Schwebt.

      Damit würde unser Objekt schonmal schweben, aber da sicht dieses Tutorial mit Schatten beschäftigen soll, verpassen wir unserem "block" einen Schatten, welcher sich dynamisch der Höhe anpasst.

      Dafür Benutzen wir Scaling und wieder Trigonometrie. Zwischen unseren vorhandenen Code fürgen wir nun

      GML-Quellcode

      1. d3d_transform_add_translation(-x,-y,0);
      2. d3d_transform_add_scaling((sin(z)/9)+1.2,(sin(z)/9)+1.2,(sin(z)/9)+1.2);
      3. d3d_transform_add_translation(x,y,0);
      4. draw_set_alpha(0.2)
      5. d3d_draw_block(x-5,y-4,0.1,x+5,y+4,0.1,background_get_texture(black),1,1)
      6. draw_set_alpha(1)

      ein und enthalten letztendlich folgenden Code:

      GML-Quellcode

      1. d3d_transform_set_identity();
      2. d3d_transform_add_translation(-x,-y,0);
      3. d3d_transform_add_rotation_z(direction);
      4. d3d_transform_add_translation(x,y,0);
      5. d3d_draw_block(x-5,y-4,1+sin(z)/4,x+5,y+4,6+sin(z)/4,background_get_texture(tex1),1,1)/
      6. d3d_transform_add_translation(-x,-y,0);
      7. d3d_transform_add_scaling((sin(z)/9)+1.2,(sin(z)/9)+1.2,(sin(z)/9)+1.2);
      8. d3d_transform_add_translation(x,y,0);
      9. draw_set_alpha(0.2)
      10. d3d_draw_block(x-5,y-4,0.1,x+5,y+4,0.1,background_get_texture(black),1,1)
      11. draw_set_alpha(1)
      12. d3d_transform_set_identity();
      Alles anzeigen


      Wer das Schweben des Blockes verstanden hat, sollte diesen Code gut nachvollziehen können.
      Wer will kann auch den Alpha Wert dynamisch machen, indem der Alpha Wert desto höher das Objekt ist geringer wird und andersrum.
      Möglich wäre da zum Beispiel:

      GML-Quellcode

      1. draw_set_alpha(0.2+(sin(z)/12)*-1)


      Verwendung für so einen "dynamischen" Schatteneffekt habe ich zum Beispiel in meinem Spiel "Wobble 3d" gefunden. [4]



      Das war's. Auch wenn sich in diesem Tutorial alles etwas schwieriger anhört als es ist, (nicht zuletzt weil mir auch Kentnisse fehlen) ist alles mit ein bisschen Übung leicht zu meistern. Da ich mir fast alles in diesem Tutorial selbst beigebracht habe, kann es schnell zu Fehlern kommen, diese bitte umgehend melden. Im Anhang nochmal alles was man in diesem Tutorial lernen konnte in einer *.gm6.

      Mfg, Moolt
      Dateien
      • 3dtutorial.zip

        (131,84 kB, 525 mal heruntergeladen, zuletzt: )

      Dieser Beitrag wurde bereits 7 mal editiert, zuletzt von Moolt ()

    • In diesem Tutorial werde ich erklären, wie man ganz einfach, hübsche Spiegeleffekte erziehlen kann. Diese, besonders die zweite Variante, sind sehr performancelastig, und sollten deswegen nur in kleinen 3d-Spielen eingesetzt werden, oder dem Spieler sollte die Option freistehen, Spiegeleffekte im Menü auszuschalten.

      Tutorial 2 - Spiegeleffekte (Keine besonderen Kenntnisse erforderlich.)

      Wie im Schattentutorial, fange ich wieder mit dem leichteren von beiden an.
      Eine leichte Art, spiegelndes Wasser darzustellen, ist es, das was oben gezeichnet wird, horizontal zu spiegeln, und auf dem Z-Wert 0 eine halbtransparente Fläche zeichnen zu lassen.
      In der Theorie sähe das dann so aus:

      [1]

      Damit wäre eine Grobe Vorstellung geschaffen, wie das ganze funktioniert.
      Kramen wir dafür am besten das alte Example des Anfänger-Tutorials raus, wer dies nicht besitzt kann es hier runterladen.
      Als erstes verändern wir das Objekt "floor", und schreiben anstatt:

      GML-Quellcode

      1. draw_set_alpha(1)
      2. d3d_draw_floor(x+1000,y-1000,0,x-1000,y+1000,0,background_get_texture(background0),31.25,31.25)
      3. draw_set_alpha(1)

      dies.:

      GML-Quellcode

      1. d3d_draw_block(x+300,y-300,-100,x-300,y+300,+100,background_get_texture(background0),18.75,18.75)
      2. draw_set_alpha(0.5)
      3. draw_set_color(c_aqua)
      4. d3d_draw_floor(x+300,y-300,0,x-300,y+300,0,-1,31.25,31.25)
      5. draw_set_color(c_white)
      6. draw_set_alpha(1)


      [2]

      In Bild 2 sehen wir, was der Code bewirkt. Er zeichnet, wie am Anfang beschrieben, auf einer Höhe von 0 z, eine halbtransparente, blau eingefärbte Fläche. Außerdem wird ein Block mit einem Durchmesser von 600 Pixeln, und einer Höhe beginnend bei -100 bis +100, gezeichnet.
      (Es wäre zusätzlich ratsam, die Variable Z vom Objekt "camera" zu senken, damit die Kamera nicht über das Spielgeschehen guckt.)

      Damit hätten wir einen Raum, welcher horizotal "gespiegelt" wird. Das gleiche kann man nun auch mit dem Objekt "block_objekt" und "block" machen.

      "block_objekt":

      GML-Quellcode

      1. d3d_draw_block(x-10,y-10,0,x+10,y+10,20,background_get_texture(tex1),1,1)
      2. d3d_draw_block(x-10,y-10,0,x+10,y+10,-20,background_get_texture(tex1),1,1)

      Wie man sieht sind die beiden Codes gleich, lediglich die Z Variable wurde in der zweiten Zeile invertiert, so entseht der Spiegeleffekt.

      Das gleiche in Objekt "block":

      GML-Quellcode

      1. d3d_transform_set_identity();
      2. d3d_transform_add_translation(-x,-y,0);
      3. d3d_transform_add_rotation_z(direction);
      4. d3d_transform_add_translation(x,y,0);
      5. d3d_draw_block(x-5,y-4,0,x+5,y+4,5,background_get_texture(tex1),1,1)
      6. d3d_draw_block(x-5,y-4,0,x+5,y+4,-5,background_get_texture(tex1),1,1)
      7. d3d_transform_set_identity();


      Fügt man nun noch ein paar "block_objekt" Objekte in das Geschehen ein, könnte das Resultat so aussehen:


      Im ersten Bild, wird eine Wasserspiegelung simuliert. Im zweiten Bild habe ich mit diesem Code

      GML-Quellcode

      1. d3d_draw_block(x+300,y-300,-100,x-300,y+300,+100,background_get_texture(background0),18.75,18.75)
      2. draw_set_alpha(0.8)
      3. d3d_draw_floor(x+300,y-300,0,x-300,y+300,0,background_get_texture(background0),31.25,31.25)
      4. draw_set_color(c_white)
      5. draw_set_alpha(1)


      im "floor" Objekt den Alpha Wert auf 0.8 erhöht, und die Textur geändert, sodass es einen reflektierenden Boden zeigt.
      Mein Tutorial lässt sich sehr gut mit diesem Example kombinieren, sodass mit Leichtigkeit soetwas dabei herauskommen kann.:



      Wie ich oben berreits sagte, dieser Effekt ist seht performancelastig, da schließlich die doppelte Menge an Polygonen gezeichnet werden muss.

      Dynamische Spiegeleffekte

      Wie der Name schon sagt, wagen wir uns nun an dynamische Spiegeleffekte. Diese sind sehr leicht zu erzeugen, sind dafür aber umso performancelastiger.

      (Screenshot aus einer alten Version meines Spiels "Aurora")

      Der Effekt funktioniert wie folgend: Der Bildschirminhalt wird als Textur gerendert, mit welcher man anschließend ein Objekt überziehen kann.
      Viel komplizierter als ich es erklärt habe ist es nicht.

      Wir schreiben ins Create-Event eines beliebigen Objekts:

      GML-Quellcode

      1. tex = background_create_from_screen(0,0,800,600,0,0,1)//800,600 ist der Berreich der gerendert wird, umso größer, desto performancelastiger.


      Step-Event
      :

      GML-Quellcode

      1. background_delete(tex)//Ohne diesen Code würde der Speicher förmlich platzen.
      2. tex = background_create_from_screen(0,0,800,600,0,0,1)


      Nun wird der gewünschte Effekt nur noch auf ein Objekt angewand, ich habe mich für eine Kugel entschieden. (Draw-Event)

      GML-Quellcode

      1. d3d_draw_ellipsoid(x-5,y-5,2,x+5,y+5,12,background_get_texture(tex),1,1,30)


      In das Vorhandene eingefügt, sieht die Kugel wie folgt aus:


      (Tipp1: Das Example zum dynamischen Spiegeleffekt solltet ihr euch am besten mit einem Leistungsstarken Rechner angucken.)
      (Tipp2: Das was Leistung zieht ist das Rendern, nicht das Benutzen als Textur. D.h wenn ihr noch 5 weitere sich spiegelnde Kugeln einbauen würdet, würde sich die Performance nicht wesentlich verschlechtern.)

      Das war's auch schon wieder, ich hoffe ich konnte euch ein wenig über Spiegelungen beibringen,

      euer Moolt


      Farben:
      • Variablen
      • Objekte
      • Events
      Dateien
      • Spiegelung1.zip

        (132,34 kB, 397 mal heruntergeladen, zuletzt: )
      • Spiegelung2.zip

        (132,47 kB, 408 mal heruntergeladen, zuletzt: )

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von Moolt ()

    • Benutze wenig 3D, finde aber das erste Spiegeln ganz gut und die Schattensachen kann man sicherlich auch anders hinkriegen ohne gleich 50% mehr Leistung zu fressen, hab zwar grad keine Idee wie aber so is es sicher ineffektive (wenn auch schön anzusehen)

      Schön gemacht ^^
      So far, Schattenphoenix~
      _____________________________________________________________________________
      "Who needs a stairway to heaven...
      If there is an elevator to hell... ?
      "
      - Vergessen
      "Auch ein perfektes Chaos ist etwas vollkommenes."
      - Jean Genet