Rob´s BB-Kurs 2

Grafikgrundlagen


© Robert Gerlach 2001-2002

www.robsite.de


Das Warten hat ein Ende! Endlich gehts ans Bildchen malen. Halleluja!

Zurst aber müssen wir in den Graphic-Screen schalten, also in den Grafikbildschirm.
Er ist, wie auch der Textmodus in dem wir die ganze Zeit irgendwas geschrieben haben, ein einfaches Koordinatensystem. Je nachdem welche Auflösung man gewählt hat, kann man auf der Fläche des Monitors mehr oder weniger Pixel malen. Hier ein Beispiel in 640 x 480:

Der Bildschirm als Koordinatensystem


Ganz genau wie das (karthesische) Koordinatensystem mit dem man vielleicht schon mal in Mathe zu tun hatte, ist dieses nicht, denn y fängt hier oben an. Aber das ist auch nicht weiter wichtig, denn bis auf COMAL benutzt wohl keine andere Programmiersprache das mathematische System ^_^'.

Mit


Graphics 640, 480 [,16]


schaltet man in den Grafikmodus mit einer Auflösung von 640 (x) mal 480 (y). Man kann hier alles eingeben was man will, also auch Auflösungen von 4 x 3 oder 339847 x 23987498234, was aber natürlich nicht sehr sinnvoll ist und außerdem nicht von allen Grafikkarten unterstützt wird.
Deshalb sollte man nur Auflösungen im Verhältnis 4:3 nehmen, also solche die ungefähr 1,3333... ergeben wenn man sie teilt (wie 4 / 3), Standardauflösungen eben:

  • 640 x 480
  • 800 x 600
  • 1024 x 768
  • 1280 x 1024
  • 1600 x 1200
  • u.s.w.

    Wenn man sein Programm an andere weitergeben will, sollte man nur sowas wie 640 x 480 oder 800 x 600 nehmen, bei höheren Auflösungen machen alte Grafikkarten wieder nicht mit...

    Die 16 in den Klammern steht für die Farbtiefe, muss man aber nicht angeben (BB setzt dann die aktive Windows-Farbtiefe). Zur auswahl stehen da 16 Bit mit 65536 Farben , 24 Bit mit 16.7 Mio Farben und 32 Bit mit (theoretischen) 4,29 Mrd. Farben. 24 Bit wird nicht von jeder Grafikkarte unterstützt und den Unterschied zwischen 32 und 16 sieht man wirklich nur bei extrem großen Farbverläufen, womit eigentlich nur 16 Bit übrigbleibt (8 Bit, also 256 Farben gibts nicht mehr). 16 Bit haben auch noch den Vorteil dass es weniger Speicher verbraucht.
    Seit Version 1.40 hat der Graphics Befehl noch einen weiteren Parameter bekommen. Mit ihm kann man festlegen ob das Programm :

  • Im Vollbildmodus startet (1)
  • Im Fenster fester Größe (2)
  • Im vergrößer- und verkleinerbaren Fenster (3)

    Automatisch ist man im Vollbildmodus. Hat man den Debugmodus an, wird das Programm im Fenster (2) angezeigt.
    Ein kleines Problem gibts dabei aber noch. Wenn man nämlich nur den Fenstermodus angeben will, nicht aber die Farbtiefe, denkt BB der zweite Befehl nach der Auflösung ist die Farbtiefe und bricht ab. Also muss man dann immer alle Parameter hinten ran setzen.





    So. Nun ist man im Grafikmodus seiner Wahl und fragt sich was man machen kann. Ich empfehle zuerst den Bildschirm zu löschen und danach ein paar Punkte zu malen zu malen:


    Cls


    Cls steht für Clear Screen, also löschen des Bildschirms. Wird man später sehr oft brauchen, jetzt ist es erstmal unwichtig, weshalb wir nun einen Punkt malen:


    Plot x, y


    Nun wird ein weißer Punkt an Position x, y (Die Koordinaten) gemalt. Gibt man Koordinaten außerhalb des Bildschirms an, macht das nichts. BB fängt den Fehler ab, das Problem ist nur das man den Punkt dann nicht sehen kann...
    Ein Punkt allein ist sehr armselig, weshalb wir nun einen kleinen Schneesturm malen. Nicht jede Flocke per Hand, sondern automatisch, mit dem was wir in den letzten Kapiteln gelernt haben:


    Graphics 640, 480

    For zaehler = 1 to 1000

    x = Rnd(0, 640)
    y = Rnd(0, 480)

    Plot x, y

    Next


    Jetzt wird 1000 mal ein Punkt an eine zufällig ausgewählte Stelle des Bildschirms gemalt. Der Zufall daran kommt von Rnd(). Rnd ist die Abkürzung für Random was auf deutsch zufällig heisst. Rnd sucht sich einen Wert zwischen den beiden angegebenen Zahlen raus. Diese Zahlen sind jeweils die äußersten Koordinaten des Bildschirms, wodurch auf dem ganzen Bildschirm verteilt 1000 Punkte sind was täuschend echt einem Schneegestöber ähnelt.

    Hat man nun aus 1000 weißen Punkten einen schönen Schneesturm gemalt, will man mit Sicherheit auch noch ein kleines weißes Haus in die Mitte setzen, um dem ganzen einen dramatischen Touch zu verleihen. Da man das am besten aus Linien konstruiert, wir aber nur sehr umständlich aus Punkten Linien machen können, gibts den Line-Befehl:


    Line x1, y1, x2, y2


    Nun wird eine Linie von (x1, y1) zu (x2,y2) gezogen. Wählt man nun die Koordinaten geschickt und kombiniert das ganze mit den weißen Punkten, kommt ein Haus im Schneesturm raus:


    Graphics 640, 480

    ; Der Schneesturm
    For zaehler = 1 to 1000

    x = Rnd(0, 640)
    y = Rnd(0, 480)

    Plot x, y

    Next



    ; Das Haus
    Line 300,480,340,480
    Line 340,480,340,440
    Line 340,440,300,440
    Line 300,440,300,480
    Line 300,440,320,420
    Line 320,420,340,440


    Sehr schön. Wirklich. Dumm nur das die Hausbewohner nie das Tageslicht sehen und leider auch nicht aus dem Haus können um Käse zu kaufen und somit verhungern müssen. Ihnen kann aber geholfen werden, indem man Fenster und Türen einbaut. Fenster und Türen sind viereckig, das heisst wir könnten das ganze aus 4 Linien malen. Blitz Basic macht es uns aber noch einfacher, es gibt nämlich den überaus bemerkenswerten Rect-Befehl. Rect steht vermutlich für rectangular, was rechteckig heisst.

    Rect x, y, breite, hoehe [, gefuellt]


    X und y geben die linke obere Ecke des Rechtecks an, breite und hoehe sind unter Umständen die Breite und die Höhe des Rechtecks und gefuellt gibt an, ob das Rechteck mit der gerade aktiven Farbe gefüllt (1) ist oder nicht (0). Lässt man den gefuellt-Parameter weg, ist das Rechteck automatisch ausgefüllt.
    Damit nun die Hausbewohner sehen was auf sie zukommt, malen wir ein Fenster rein. Für den weiteren Verlauf der Geschichte ist eine Tür von Bedeutung, weshalb auch sie mit reinkommt:


    Graphics 640, 480

    ; Der Schneesturm
    For zaehler = 1 to 1000

    x = Rnd(0, 640)
    y = Rnd(0, 480)

    Plot x, y

    Next



    ; Das Haus (Mit Tür und Fenster)
    Line 300,480,340,480
    Line 340,480,340,440
    Line 340,440,300,440
    Line 300,440,300,480
    Line 300,440,320,420
    Line 320,420,340,440
    Rect 325,460,10,21,0
    Rect 310,460,10,10,0


    Grandios geradezu. Mit Sicherheit fragst du dich jetzt, wieso auf dem Bild kein Ufo ist. Die Frage ist berechtigt, weswegen wir nun auch eins malen. Ufos sind bekannterweise oval und nicht rechteckig, daher können wir nicht Rect nehmen, sondern müssen auf Oval ausweichen:


    Oval x, y, breite, hoehe [,gefuellt]


    Wieder das gleiche wie bei Rect. Sehr praktisch wenn man Ovale und Ellipsen malen will, eher unpraktisch wenn es ein normaler Kreis sein soll. In diesem Fall müssen Breite und Höhe gleichgroß sein und außerdem das doppelte des Abstands zwischen x,y und dem gedachten Mittelpunkt sein.
    Ein Beispiel...


    Graphics 640, 480

    ; Kreis mit dem Mittelpunkt 200,200 malen:
    Oval 100, 100, 200, 200,0


    Nun denn, zeichnen wir ein einfaches Ufo:


    Graphics 640, 480

    ; Der Schneesturm
    For zaehler = 1 to 1000

    x = Rnd(0, 640)
    y = Rnd(0, 480)

    Plot x, y

    Next



    ; Das Haus (Mit Tür und Fenster)
    Line 300,480,340,480
    Line 340,480,340,440
    Line 340,440,300,440
    Line 300,440,300,480
    Line 300,440,320,420
    Line 320,420,340,440
    Rect 325,460,10,21,0
    Rect 310,460,10,10,0


    ; Das Ufo
    Oval 350,100,150,50,1


    Nun schwebt das Ufo also über dem Haus und wird es gleich zertören. Dank den neu eingebauten Fenstern können die Hausbewohner sehen, dass sie gleich gegrillt werden und rennen durch die Tür raus, gerade in dem Moment als das Ufo beginnt ihr Haus mittels dem patentierten Spishak Masterblaster 8003 © zu pulverisieren.
    Ein überaus großer und starker Phaser, der beim Abschuss wunderschön bunt leuchtet. Leider können wir mit Weiß nur unzureichend den Eindruck von schönen bunten Farben vermitteln, weshalb wir nun zum Color-Befehl kommen.
    Wer schon etwas mit alten DOS-Sprachen wie QBasic gearbeitet hat, wird sich noch an den COLOR-Befehl dort erinnern. Es gab bei 640 x 480 ganze 16 Farben und jede hatte ihre eigene Nummer die man einfach dahinter schreibt. In Blitz Basic ist das ähnlich, nur mit dem Unterschied dass es hier einen Million mal mehr Farben gibt (nämlich 16,5 Millionen), aus denen man wählen kann. Anzeigen kann man sogar noch mehr, aber das ist jetzt unwichtig.
    Da es nun so viele Farben sind, hat nicht jede ihre eigene Nummer sondern besteht aus 3 Farben, rot, grün und blau (RGB). Diese einzelnen Farbwerte gehen von 0 bis 255. Aus diesen 3 Farben kann man dann alle anderen kombinieren.


    Color r, g, b


    Alles was jetzt an Punkten, Strichen u.s.w. gemalt wird (bis auf Cls), hat die eben angegebene Farbe. Einfach ein bisschen rumprobieren. Am einfachsten ist es natürlich einfach ein besseres Malprogramm zu starten und die Werte abzulesen.
    Da, wie gesagt, Cls nicht die Farbe ändert, sondern den Bildschirm immernoch in schwarz löscht, gibt es den


    ClsColor r, g, b


    Befehl. Mit ihm legt man einzig und allein die Farbe des Cls-Befehls fest.

    Nun können wir also endlich das Haus, aus dem die 3 Hausbewohner gerade gerannt kommen, mittels Super-Bunt-Strahlen zerstören:


    Graphics 640, 480

    ; Der Schneesturm
    For zaehler = 1 to 1000

    x = Rnd(0, 640)
    y = Rnd(0, 480)

    Plot x, y

    Next



    ; Das Haus (Mit Tür und Fenster)
    Line 300,480,340,480
    Line 340,480,340,440
    Line 340,440,300,440
    Line 300,440,300,480
    Line 300,440,320,420
    Line 320,420,340,440
    Rect 325,460,10,21,0
    Rect 310,460,10,10,0


    ; Das Ufo
    Oval 350,100,150,50,1


    ; Der Spishak Master-Blaster-Super-Bunt-Phaser-Strahl:

    ; Anfang des Strahls setzen. Mitte-Unten des Ufo´s.
    ; x_anfang# und hoehe# sind Float-Zahlen, weil von ihnen Kommazahlen abgezogen werden.
    x_anfang# = 320
    y_anfang = 150
    breite = 1
    hoehe# = 1

    ; In einer Schleife die Werte so verändern, das die Ovale nach unten hin immer breiter werden.
    Repeat
    x_anfang# = x_anfang# - 0.5
    y_anfang = y_anfang + 5
    breite = breite + 1
    hoehe# = hoehe# + 0.5

    ; Zufällig gewählte Farben
    Color Rnd(50,255), Rnd(50,255), Rnd(50,255)

    ; Jeden Schleifendurchlauf ein Oval mit den neuen Werten zeichnen
    Oval x_anfang#, y_anfang, breite, hoehe#, 0

    ; Solange bis es unten angekommen ist
    Until y_anfang > 480


    ; Jetzt noch die Hausbewohner malen. Da sie alle gleich aussehen, wird nur einer gemalt, allerdings in einer Schleife, die 3-mal durchlaufen wird:

    Color 255,255,255

    For x_bewohner = 400 To 440 Step 20

    ; Der Kopf
    Oval x_bewohner, 460, 6,6,0

    ; Der Körper
    Line x_bewohner + 3, 466, x_bewohner + 5, 473

    ; Die Arme
    Line x_bewohner + 3, 467, x_bewohner, 468
    Line x_bewohner, 468, x_bewohner, 472
    Line x_bewohner + 3, 467, x_bewohner + 8, 469
    Line x_bewohner + 8, 469, x_bewohner + 9, 466

    ; Die Beine
    Line x_bewohner + 5, 473, x_bewohner + 1, 475
    Line x_bewohner + 1, 475, x_bewohner-1, 472
    Line x_bewohner + 5, 473, x_bewohner + 11, 477

    Next

    WaitKey
    End


    Kopiere das Programm in den BB-Editor und starte es. Ein Meisterwerk, fürwahr.
    Nur leider ist all das absolut sinnlos, denn in Blitz Basic kann man fertige Bilder laden und anzeigen...







    Zusammenfassung


    ; Das Koordinatensystem des Grafikmodus ist nicht ganz genau so wie das karthesische, denn y fängt hier oben an, nicht unten:


    ; In den Grafikmodus schaltet man so:
    Graphics x_aufloesung, y_aufloesung [, Farbtiefe_in_Bit, Modus]
    ; Modus: 1 für Vollbild, 2 für Fenster fester Größe, 3 für Fenster variabler Größe


    ; Wie im Textmodus kann man mit Cls den Bildschirm löschen:
    Cls


    ; Einen Punkt in der aktuellen Farbe malt man mit:
    Plot x, y


    ; Um eine Linie zwischen zwei Punkten zu zeichnen nehme man:
    Line x1, y1, x2, y2


    ; Um ein Viereck zu zeichnen kann man 4 Linien malen oder einfach Rect nehmen:
    Rect x, y, breite, hoehe [, gefuellt]


    ; Kreise und Ovale aller Art macht man am besten hiermit:
    Oval x, y, breite, hoehe [,gefuellt]


    ; Auch wieder wie im Textmodus kann man mit Color und ClsColor Farben bestimmen:
    Color r, g, b ; Für die normale Zeichenfarbe
    ClsColor r, g, b ; Für die Cls-Farbe