Tutorials

QBasic 3D Grafikprogrammierung Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
anzeigen
QBasic 3D Grafikprogrammierung


1987 - javadomi - 10.02.2006 22:21 Uhr - Version: 1 - - verlinken als BB-Code


1. Einleitung
Ich will euch hier zeigen, wie man mit
QBasic einfache 3D Grafiken darstellen
kann. Vorausgesetzt werden Grundkenntnisse
in QBasic und QBasic selber. QBasic
kriegt man auf www.qbasic.de
Die Standards mit der Grafik werden hier
nochmal kurz erklärt. Also, fang ich mal an Smily NR:7

2. Kleine Einführung
Ich zeige hier nochmal die Basics der
2D Grafikprogrammierung. Normalerweise
hat man ja QBasic im Textmodus. Wir
wollen aber im Grafikmodus arbeiten.
Das geht mit dem Befehl SCREEN:
1
SCREEN Modus[, Farbschalter][, Seite][, SichtbareSeite]

- Modus:
Hier haben wir die Auswahl zwischen den
Modis 0 (Textmode) bis 13 (320x200 Grafik,
256K Farben). Wir wollen ein Modi mit mehreren
Seiten, deshalb habe ich mich für den Modus 7
entschieden. Dieser hat eine Auflösung von
320x200 Pixeln und mehrere Seiten für das
Double Buffering.

Das Double Buffering funktioniert etwa so:
Wenn man was auf den Bildschirm animieren
will, und gleich die Grafiken auf den Bildschirm
anzeigt, dann flimmert es so. Man sieht,
wie die Grafiken nacheinander einzeln gemalt
werden. Mit Double Buffering werden die Grafiken
erstmal auf eine unsichtbare Bildschirmseite
"gemalt" und dann, wenn sie fertig gemalt
sind, werden sie auf die sichtbare Seite
"kopiert". Damit unterdrückt man dieses
"Flimmern" und der Benutzer kriegt nichts
von den Aufzeichnen der Grafiken mit.

- Farbschalter:
Der Farbschalter legt fest, ob die Farbe
auf den Monitor angezeigt wird, oder nicht.
Für uns ist das erstmal unwichtig. Das
können wir freilassen.

- Seite:
Welche Seite du benutzen willst.

- SichtbareSeite
Hier musst du angeben, welche
Bildschirmseite sichtbar ist. Wenn du als
Seite 0 angegeben hast, dann musst du hier
auch 0 angeben, damit die Grafiken sofort
angezeigt werden. Wenn du als Seite 0 angibst
und als SichtbareSeite z.B. 1, dann musst du,
nachdem die Grafiken auf Seite 0 gemalt worden
sind, sie auf die Sichtbare Seite 1 kopieren,
damit sie angezeigt werden. Dies geschieht
mit dem Befehl PCOPY. Dieser wird später erklärt.

Nun schreiben wir einfach in die ersten Zeilen
1
2
SCREEN 7, , 0, 1
CLS

Damit wird der Grafikmodus 7 initialisiert mit
320x200 Pixeln und der unsichtbaren Seite 0.
Außerdem hat er 16 Farben ^^ Jetzt kannst du
mit einfachen Befehlen, wie PSET Grafiken
"aufmalen". Hier als Beispiel:
1
PSET (160, 100), 15

Hier wird ein Pixel mit den Koordinaten 160 (x)
nach rechts und 100 nach unten (y) und mit der
Farbe 15 gesetzt. Die Farbe 15 ist weiß. Hier
sind alle 16 Farben:

0 = schwarz, 1 = dunkelblau, 2 = dunkelgrün,
3 = türkies, 4 = dunkelrot, 5 = lila, 6 = braun,
7 = grau, 8 = dunkelblau, 9 = blau, 10 = hellgrün,
11 = hellblau, 12 = rot, 13 = pink, 14 = gelb,
15 = weiß

Aber wenn du jetzt das Programm startest, dann
wird nichts angezeigt. Das leigt daran, dass du
mit den Befehl SCREEN 7, , 0, 1 erstmal auf eine
unsichtbare Seite geschrieben hast. Kopiere einfach
diese Seite auf die Sichtbare Seite (1) mit dem
Befehl PCOPY:

PCOPY Quellseite, Zielseite

Also hier bei unseren Projekt ist die Quellseite 0
und die Zielseite ist dann 1. Wir führen demnach den
Befehl so aus:
1
PCOPY 0, 1

2.1. Animationen
Das Double Buffering ist dazu geeignet Animationen
auf den Bildschirm dazustellen. Wir wollen erstmal
einen bewegten Punkt haben. Bewegliche Grafiken nennt
man Sprites. Also erstmal initialisieren wir den
Grafikmodus 7 mit Seite 0, und der Sichtbaren Seite 1:
1
SCREEN 7, , 0, 1

Da sich unser Punkt bewegen soll, brauchen wir
Variablen für die Koorinaten des Punktes. Dazu
nehmen wir einfach Integervariablen:
1
2
x% = 0
y% = 0

Jetzt können wir mit der Schleife beginnen:
1
2
3
4
5
6
7
8
9
10
11
12
13
DO
PSET (x%, y%), 14

PCOPY 0, 1
CLS

IF INKEY$ <> "" THEN EXIT DO

x% = x% + 1
y% = y% + 1
IF x% > 320 THEN x% = 0
IF y% > 200 THEN y% = 0
LOOP

Erstmal werden die Grafiken in der Schleife
(hier ist unsere Grafik erstmal ein Punkt)
auf den Backbuffer (unsichtbare Seite) aufgemalt.
Dann wird der Backbuffer in den Primärbuffer
(Seite, die sichtbar ist) aufgemalt (Double Buffering).
Der Backbuffer wird dann durch CLS gelöscht, damit
wir nicht den alten Punkte haben.
Du kannst ja mal versuchen, was passiert, wenn
man CLS weglässt Smily NR:7 Dann berechnen wir die neuen
Koordinaten des Punktes. Die IF Abfragen dienen
dazu, damit der Punkt nie aus den Bilschirm
verschwindet.

Also so sieht dann das fertige Programm dazu aus:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
SCREEN 7, , 0, 1

x% = 0
y% = 0

DO
PSET (x%, y%), 14

PCOPY 0, 1

IF INKEY$ <> "" THEN EXIT DO
CLS

x% = x% + 1
y% = y% + 1
IF x% > 320 THEN x% = 0
IF y% > 200 THEN y% = 0
LOOP

3. 3D Grafiken
Wir erweitern nun unser 2D Koordinatensystem um eine
Dimension. Hier zeigt die X Achse nach rechts, die Y
Achse zeigt nach oben und die dritte Achse Z zeigt
nach hinten. Unser einfacher Punkt würde dann drei
Koordinaten haben. Wir definieren also drei Koordinaten
für unseren zukünftigen Punkt:
1
2
3
x% = 100
y% = 70
z% = 10

Aber wie können wir nun diesen Punkt auf den Bildschirm
darstellen? Wenn unser Punkt sagen wir mal die
Z Koordinate mit 100 hat und die X Achse mit 20:

x
|------P-z
|
|

Hier müssen wir den Schnittpunkt zwischen P-XM(itte) zu der
mitte der x Achse, des Bildschirms berechnen. Das
wird dann der Punkt in 2D. Aber wenn wir das so machen,
dann wird der Punkt immer auf der einen Stelle bleiben,
weil der Schnittpunkt dann immer der selbe ist, egal mit
welchen Koordinaten wir arbeiten. Deshalb kommt jetzt
der Betrachter ins Spiel. Wenn wir mit ihn den Schnittpunkt
berechnen, dann wird alles klappen:

-----x
-----|----P--z
B----|
-----|

(sry für die hässlichen Skizzen ^^)
Hier berechnen wir wo sich die Gerade BP mit der
X Achse schneidet. Dies erscheint nun viel logischer Smily NR:7
Aber wie berechnen wir das nun? Nennen wir mal die
Entfernung mal k. Ein Wert zwischen 150 und 200 wäre
gut für diese Variable. Wenn wir den Punkt
1
2
3
x% = 100
y% = 70
z% = 100

haben, dann müssten wir das so machen:
1
2
SCREEN 7, , 0, 1
CLS
0
Da wir die Koordinaten in umgekehrter
Form bekommen, setzten wir sie einfach in die
negative. Nun, wenn wir den Punkt (100, 70, 100)
darstellen wollen, wie oben schon die Variablen
definiert, dann führen wir im Bildschirmmodus 7
(320x200) die oben genannte Rechnung aus
(+160, weil 320 / 2; +100, weil 200 / 2).
Dann setzen wir einfach den Punkt mit:
1
2
SCREEN 7, , 0, 1
CLS
1

4. 3D Animationen
Nun haben wir zwar den Punkt in 3D, aber für den
Benutzer erscheint es nicht so, wie 3D. Das wird
erst mit einer Animation sichtbar. Dazu werden wir
einfach unser altes Codestück aus Kapitel 2.1.
verwenden.

Hier wollen wir aber nicht die X oder Y Achse
verändern, sondern die Z Achse!

Erstmal initialisieren wir den Screenmodus 7,
wie immer:

SCREEN 7, , 0, 1

Und dann die Variablen für die Sprites, aber diesmal
sind es drei Variaben, aber wir brauchen noch ein Wert
für die Entfernung zwischen den Benutzer und den Bildschirm.
Unsere Variable k. Also sieht es so hier aus:

k = 160
x% = 100
y% = 70
z% = 100

Und nun für dies einfache Animation eine einfache
DO - LOOP Schleife. Diesmal werden wir hier die
Rechnung vor dem Setzen des Punktes ausführen und
nur die originalen Variablen für die Koordinaten
verändern:
1
2
SCREEN 7, , 0, 1
CLS
2
Das wäre dann eine schöne Animation, um den 3D Effekt
dazustellen. Hier nochmal den ganzen Code:
1
2
SCREEN 7, , 0, 1
CLS
3
Ein schöner Effekt, wo die kleinen Punkte schnell
rausschiessen Smily NR:7

Schlusswort
So, das wars vorerst. Ihr könnt ja mal versuchen
die Punkte mit Linien oder so zu verbinden, usw.
Es gibt viele Möglichkeiten. Ich hoffe, ihr konntet
neues Wissen aus den Workshop entnehmen und ich
wünsche euch noch viel Spass Smily NR:7 Ein weiterer Teil kommt
noch.

Hier noch ein kleines Programm, dass ich noch mit QBasic zu diesen Workshop programmiert habe. Man kann mit den Tasten w, d, s, a die kleine Plattform steuern und mit q bricht man das Programm ab. Smily NR:7
1
2
SCREEN 7, , 0, 1
CLS
4

Kompilierte Dateien
Auf Anfrage habe ich nochmal die Sources kompiliert und
zum Downloaden bereitgestellt Smily NR:7

http://javadomi.jens-wurster.de/piranhostuff/workshops/QBasic3D/BSP1.EXE
http://javadomi.jens-wurster.de/piranhostuff/workshops/QBasic3D/BSP1-1.EXE
http://javadomi.jens-wurster.de/piranhostuff/workshops/QBasic3D/BSP2.EXE
http://javadomi.jens-wurster.de/piranhostuff/workshops/QBasic3D/BSPS.EXE

Mitglieder-Kommentare


Es sind leider noch keine Einträge vorhanden!

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)