Startseite
Tutorial
Onlinespiele
Downloads
Links
Kontakt
English version

Scrollen eines Bildschirms

Ich bin mir ziemlich sicher, dass sich jeder von euch noch an das Spiel "Moorhuhn" erinnern kann, das vor ein paar Jahren Internetspiele (v.a. Werbespiele) so richtig populär gemacht hat. Dieses Spiel lebte zu einem großen Teil davon, dass man nie den gesamten Bildschirm, sondern nur Teile davon in seinem Blickfeld hatte. Bewegte man die Maus an den Rand des Fensters, so scrollte der Bildschirm in die betreffende Richtung, d. h. das Blickfeld verschob sich. Und genau dieses "Problem" möchte ich euch mit diesem Kapitel ein wenig näher bringen und euch natürlich meine Lösung dafür vorstellen. Ich habe diese Lösung beim Programmieren des Spiels UfoAttacks entwickelt und das erste mal verwendet.

Die Grundidee

Immer, wenn wir bisher unbewegte Objekte in unser Spiel aufgenommen haben (Steine, Grenzen...), so hatten diese immer einen festen "Standort", also eine fixe Position auf dem Spielfeld, die sich im Laufe des Spiels nicht änderte. Lediglich bewegte Objekte veränderten ihre Position. Von dieser Vorstellung müssen wir uns nun verabschieden und damit haben wir eigentlich auch schon die Lösung für unser Problem, nämlich das Bildschirmscrollen, gefunden. In einem Spiel, dessen Bildschirm bzw. dessen Landschaft scrollen soll, hat einfach kein Objekt eine feste Position. Die Positionen aller Spielobjekte werden beim Scrollen des Bildschirms verändert.

Veranschaulichung

Nehmen wir der Einfachheit halber mal an, wir haben ein Applet der Größe 300 x 300 und einen Hintergrund voller "Sterne", den wir scrollen wollen (siehe Beispiel Applet). Wir können nun nur einen Ausschnitt des gesammten Spielfeldes sehen, das 600 x 300 Pixel groß sein soll, d. h. einige Sterne haben momentan Positionskoordinaten, deren Werte kleiner als 0 oder größer als 300 sein können. Sie werden also außerhalb unseres Blickfeldes gezeichnet, das zu Beginn des Applets den Spielfeldbereich zwischen den Positionen 150 und 450 umfasst, vorausgesetzt wir blicken genau in die Mitte unseres Spielfeldes.


Dieses Bild verdeutlicht die momentanen Positionen aller Spielobjekte. Die gelben Zahlen geben die absoluten Positionen der Objecte im Spielfeld an, die grünen die relativen Positionen, bezogen auf den Sichtbereich. Im blau gestrichelten Bereich haben alle Objekte im Moment eine Position > 300, im rot gestrichelten Bereich sind die Positionen < 0, alle Objekte mit einer relativen Position von 0 - 300 werden in unserem Gesichtsfeld gezeichnet



Stellen wir uns nun vor, wir scrollen den Screen nach links. Das bedeutet, dass wir die Werte der x - Koordinaten aller Sterne erhöhen müssen indem wir die Geschwindigkeit, mit der wir nach links scrollen, zur Position eines jeden Sternes hinzuzählen. So werden die einige Sterne aus unserem Gesichtsfeld verschwinden (ihre Position wird größer als 300), andere werden in unser Blickfeld treten, sobald ihre x - Koordinate nicht mehr negativ sondern > 0 ist.


Dieses Bild zeigt die Situation nach dem Scrollen nach links. Der Blickbereich hat sich bis zum Rand des Spielfeldes verschoben. Daher existieren nun keine Objekte mehr, deren Position kleiner als 0 ist. Nach wie vor gibt es jedoch viele Objekte, deren Lage größer ist als 300, die sich also rechts außerhalb unseres Sichtfeldes befinden.



Die Initialisierung der Objekte

Wie ihr ja gesehen habt, stimmen nun, da wir nicht immer das gesammte Spielfeld sehen, die Positionen der Objekte im Spielfeld nicht mehr mit ihren Zeichenpositionen überein. Ich möchte das kurz am Beispiel der beiden Spielfeldgrenzen verdeutlichen. Wie gesagt ist unser Spielfeld 600 Pixel breit. Wie blicken am Anfang des Applets genau in die Mitte unseres Spielfeldes. Die linke Grenze unseres Blickfeldes ist also, bezogen auf das Spielfeld, die Koordinate 150. Die linke Grenze des Spielfeldes befindet sich also 150 Pixel weiter links, hat also die Position -150. Die rechte Grenze des Spielfeldes dagegen befindet sich 150 Pixel weiter rechts als die Grenze unseres Blickfeldes, also an Position 450. Somit können wir eine kleine Formel ableiten, mit der wir alle unsere Objekte, die eine bestimmte Position bezogen auf das Spielfeld haben, initialisieren können. Diese Formel gilt dabei nur, wenn wir am Start des Applets genau in der Mitte unseres Spielfeldes beginnen. Die Formel lautet:

Ich hoffe, dass euch das Prinzip nun soweit klar ist. Im folgenden möchte ich noch kurz auf den Sourcecode und bewegte Objekte eingehen.

Einige Besonderheiten des Sourcecodes

Wie ich schon angedeutet habe, ist der einzige Unterschied im Bezug auf frühere, nicht scrollende Applets, dass sich jedes Spielobjekt beim Scrollen des Bildschirmes bewegt. Daher verfügt jedes Object in dem Beispielapplet über eine Methode scrollObject (int speed). Diese bewegt das Object beim Scrollen des Bildschirmes mit der richtigen Geschwindigkeit in die betreffende Scrollrichtung.
Das Applet selbst wird mit der Methode scrollGame(int speed) gescrollt. Diese Methode wird bei jedem Threaddurchlauf aufgerufen und ruft (falls die Scrollgeschwindigkeit größer 0 ist) für jedes Spielobjekt (in unserem Fall alle Sterne im Sternenarray, sowie das Ufo) die jeweilige scrollObjekt - Methode des Objektes auf.
Bewegte Objecte können auch weiterhin auf die gleiche Art und Weise wie immer bewegt werden. Es ist nur darauf zu achten, dass auch bewegte Objekte zusätzlich zu ihrer eigenen Bewegung gescrollt werden müssen.

Das Beispielapplet

In dem Beispielapplet zu diesem Kapitel findet ihr beide Arten von Objekten. Die Sterne und die beiden Grenzen des Spielfeldes (blau) representieren statische Spielobjekte, die ihre Position lediglich durch das Scrollen ändern. Des weiteren fliegt noch ein Ufo durch die Gegend, anhand dessen ihr euch die Behandlung von bewegten Objekten ansehen könnt. Die Zahlenwerte dienen nur eurer Orientierung und der Veranschaulichung der Positionen von statischen Objekten (Beispiel: rechte und linke Spielfeldgrenze). Ansonsten ist der Sourcecode eigentlich selbsterklärend und ich hoffe, dass ich euch ein wenig weiterhelfen konnte. Wie immer gibts am Ende das Applet zum Runterladen und Ansehen.

SourceCode download
Applet ansehen

Nächstes Kapitel

Ein schießendes Raumschiff