Hintergrund-Scrolling  

In den anderen Tutorials wurde bereits erklärt wie man DirectDraw initialisiert, Bitmaps anzeigt und Animationen ermöglicht. Was aber noch fehlt ist Bewegung wie z.B. ein scrollender Hintergrund. Es gibt verschiedene Scroll-Möglichkeiten. Diese Abschnitt beschäftigt sich mit einem einfachen links/rechts scrollenden Hintergrund mit einem Start- und Endpunkt (also kein Endlos-scrollen).

Das Hintergrundbild ist meist deutlich breiter als der Bildschirm selbst, deshalb wird das Bild in kleinere Bilder, in sogenannte Kacheln (Tiles), unterteilt. In diesem Beispiel wurde das Gesamtbild in 3 kleinere Bilder aufgeteilt.

Zu beachten ist hierbei, dass die Ränder des Gesamtbildes ebenfalls zusammenpassen, damit das Scrollen nahtlos weitergehen kann.

 
Darstellen eines scrollenden Hintergrundes

Was nun noch bleibt, ist die Darstellung der Szene. Der Hintergrund dieser Szene ist gekachelt, was bedeutet, dass Bilder Seite an Seite zur Darstellung eines einzigen zusammenhängenden Bildes angezeigt werden. Drei Hintergrundbilder, jedes 400 Pixel breit, bilden einen kompletten Hintergrund von 1200 Pixeln Breite.

Die Bilder werden Seite an Seite angeordnet, wobei das erste an einer X-Koordinate von 0 beginnt, das nächste bei 400 und das letzte bei 800. Dieses Muster wiederholt sich in beiden Richtungen, sodass kontinuierlich in jeder Richtung gescrollt werden kann.

Hierbei sind zwei Dinge zu beachten:
die Bilder müssen scrollen (zur Seite schieben) und dann muss bestimmt werden, welche Bereiche der Bilder sichtbar sind, um sie für den Bildschirm zu clippen.

Clippen ist der Vorgang, vor der Darstellung die Bereiche eines Bildes zu entfernen, die die Grenzen des Bildschirmes überschreiten (siehe dazu Bitmaps zu- und ausschneiden, Animation).

Das Bild selbst wird hierbei nicht geändert, nur die Koordinaten der Quell- und Zielrechtecke werden angepasst, damit die nur die Teile des Bildes umfassen, die auf den Bildschirm passen.

Für das Scrolling wird die X-Koordinate der Bilder um den Wert der in tile_pos (siehe Beispiel-Code) berechnet wurde korrigiert. Dies bewirkt, dass die Bilder sich relativ zum Bildschirm seitlich bewegen, was den Eindruck erweckt, dass sich der Betrachter zur Seite bewegt.

Als Beispiel zeigt die nebenstehende Abbildung den Effekt, wenn x_pos auf 500 gesetzt wird. 

Jedes der Bilder verschiebt sich nach links, wodurch sich das erste Bild aus dem Bildschirm heraus bewegt und Teile des dritten Bildes sichtbar werden. 

'Hintergrund zeichnen
'schleife über die Kacheln
For i = 0 To 2
  'Position der sichtbaren Kacheln berechnen
  tile_pos = 400 * i + (x_pos \ 1200) * 1200
  If (tile_pos + 1200) < (x_pos + 640) Then
    tile_pos = tile_pos + 1200
  end if
  'ist das Objekt im Bild ?
  If (tile_pos + 400) >= x_pos Then
    'ja, Abstand zur linken Ecke des Bildschirm berechnen
    screen_x = tile_pos - x_pos
    'Objekt clippen wenn notwendig
    With srcrect
      .Left = 0: .Top = 0
      .Right = 400: .Bottom = 480
    End With
    'Test auf Clipping
    If screen_x < 0 Then
      srcrect.Left = srcrect.Left - screen_x
      screen_x = 0
    Else
      If (screen_x + srcrect.Right) > 640 Then
        srcrect.Right = 640 - screen_x
      End If
    End If
    'Objekt auf Bildschirm zeichnen
    BackBuffer.BltFast screen_x, 0, _
      bmpBackground(i), srcrect, DDBLTFAST_WAIT
  End If
Next i

Ein Beispiel für Hintergrund-Scrolling können Sie hier downloaden, und den ausführlichen Tipp finden Sie in unserer Tipp-Rubrik.

  Download BitmapBlt.zip Download
tip0175.zip
 (581 kB)
Downloadzeit: ca. 5 Min. - 28.8k / ca. 2 Min. - ISDN Downloads bisher: [ 5 ]

Startseite | VB-/VBA-Tipps | Projekte | Tutorials | API-Referenz | Komponenten | Bücherecke | Gewinnspiele | VB-/VBA-Forum | DirectX-Forum | VB.Net | .Net-Forum | Foren-Archiv | Chat | Spielplatz | Links | Suchen | Stichwortverzeichnis | Feedback | Impressum

Seite empfehlen Bug-Report

Letzte Aktualisierung, Sonntag, 02. Dezember 2001