Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
a little tutorial STEP by STEP on scrolling in 2D graphic mode
#12
Here a camera/scenario with hero

Code: (Select All)

Rem demonstration of scrolling of a camera (little view) on a scenario (Total view)

' global variables
Dim Scenario As Long, Camera As Long
Dim d As Integer, x As Integer, y As Integer, Sw As Integer, Sh As Integer, Cw As Integer, Ch As Integer
Dim k As String
' initialization
Sw = 1200
Sh = 800
Cw = 200
Ch = 200
x = 1
y = 1
k = ""
Randomize Timer
Scenario = _NewImage(Sw, Sh, 32)
Camera = _NewImage(Cw, Ch, 32)
Screen Camera
_FullScreen
_Title "A demonstration of scrolling of a camera on a scenario"

' creating the scenario
_Dest Scenario
For a = 1 To 100
    Line (Rnd * Sw, Rnd * Sh)-(Rnd * Sw, Rnd * Sh), _RGBA32(Rnd * 255, Rnd * 255, Rnd * 255, 255), B
Next a
_Dest Scr
a = 1
While k <> "Q"

    k = UCase$(InKey$)
    If k = "W" Then y = y - 1
    If k = "S" Then y = y + 1
    If k = "A" Then x = x - 1
    If k = "D" Then x = x + 1
    a = a * -1
    If x < 1 Then x = 1
    If x > (Sw - Cw) Then x = Sw - Cw
    If y < 1 Then y = 1
    If y > (Sh - Ch) Then y = Sh - Ch
    Cls
    _PutImage (1, 1), Scenario, Camera, (x, y)-(Cw + x, Ch + y)
    MakeHero x, Ch + y - 60, a
    _PrintString (1, 1), "Use WASD to move camera"
    _PrintString (1, 18), "Q to quit"
    _Display
    _Limit 100
Wend
End


Sub MakeHero (X As Integer, Y As Integer, status As Integer)
    If X > _Width - 40 Then X = _Width - 40
    If Y > _Height - 60 Then Y = _Height - 60
    Line (X + 20, Y)-(X, Y + 40), _RGBA32(127, 60, 227, 255)
    Line (X + 20, Y)-(X + 40, Y + 40), _RGBA32(127, 60, 227, 255)
    Line (X, Y + 40)-(X + 40, Y + 40), _RGBA32(127, 60, 227, 255)
    Paint (X + 20, Y + 20), _RGBA32(127, 60, 227, 255), _RGBA32(127, 60, 227, 255)
    Circle (X + 10, Y + 30), 5, _RGBA32(255, 6, 6, 255)
    Circle (X + 30, Y + 30), 5, _RGBA32(255, 6, 6, 255)
    If status = 1 Then
        Line (X + 15, Y + 40)-(X + 20, Y + 60), _RGBA(127, 60, 227, 255), BF
        Line (X + 30, Y + 40)-(X + 35, Y + 60), _RGBA(127, 60, 227, 255), BF

    ElseIf status = -1 Then
        Line (X + 10, Y + 40)-(X + 15, Y + 60), _RGBA(127, 60, 227, 255), BF
        Line (X + 25, Y + 40)-(X + 30, Y + 60), _RGBA(127, 60, 227, 255), BF
    End If
End Sub

and here the hero moving on the scrolling of background made by tiles
Code: (Select All)

Rem Demonstration of scrolling towards right or left of the background
Rem  STEP 7 adding a character on the background scrolling towards right /left & down/up in loop
' Global variables' declaration
Dim Back As Long, Scr As Long, x As Integer, y As Integer, w As Integer, h As Integer
Dim i As Integer, k As String, dx As Integer, dy As Integer, O As Integer, V As Integer, S As Integer
Dim Hx As Integer, Hy As Integer, M As Integer
_Title " Demo of background scrolling with character: step 7" ' title on the titlebar of the application
' variables' initialization
w = 800: h = 600
y = 1
x = 1
Scr = _NewImage(w, h, 32)
Back = _NewImage(w, h, 32)
dx = 1
dy = 1
S = 1
O = 1
V = 1
M = 1
Hx = 1
Hy = h - 60
Randomize Timer ' it starts the random generator of number
Screen Scr ' it creates window of the application
_Dest Back ' it sets the surface as destination of graphic output
' it draws a background by using a FOR loop with graphic instructions (LINE and _RGBA)
For i = 1 To 100
    Line ((Rnd * (780) + 10), Rnd * (580) + 10)-(Rnd * (780) + 10, Rnd * (580) + 10), _RGBA32(Rnd * (255), Rnd * (255), Rnd * (255), 255), B
Next i
_Dest 0 ' it sets the surface of destination of graphic output as the window of the application

' it manages the keyboard input of user and the scrolling background
While k <> "Q"
    k = UCase$(InKey$) ' it takes the input from keyboard
    Cls 'it clears previous screen
    _PutImage (x, y), Back, Scr 'it paints screen now
    _PutImage (x - w, y), Back, Scr ' it completes the background on the left side
    _PutImage (x, y - h), Back, Scr ' it completes the background on the upper side
    _PutImage (x - w, y - h), Back, Scr ' it completes the background on the upper side
    _PrintString (1, 1), "Press Q to quit program, S to stop/start demo, R to reverse directions" ' it shows instruction for user on the screen
    _PrintString (1, 20), " O stop/start horizontal scrolling, V stop/start vertical scrolling"
    MakeHero Hx, Hy, M

    M = M * -1
    ' it starts/stops the scrolling
    If k = "S" Then S = S * -1
    If k = "R" Then
        ' it changes only scrolling activated
        If O > 0 Then dx = dx * -1
        If V > 0 Then dy = dy * -1
        ' it changes the direction of scrolling +1 = to right to bottom/ -1 = to left to up
    End If
    If k = "O" Then O = O * -1 'it sets the status of horizontal scrolling
    If k = "V" Then V = V * -1 ' it sets the status of vertical scrolling


    If S > 0 And O > 0 Then x = x + dx: Hx = Hx + dx ' it scrolls only horizontal
    If S > 0 And V > 0 Then y = y + dy: Hy = Hy + dy ' it scrolls only vertical
    If dx > 0 And x > w Then x = 1 ' it corrects x when it is over w and scrolling is to right
    If dx < 0 And x < 1 Then x = w ' it corrects x when it is under 1 and scrolling is to left
    If dy > 0 And y > h Then y = 1 ' it corrects y when it is over h and scrolling is to down
    If dy < 0 And y < 1 Then y = h ' it corrects when it is under 1 and scrolling is to up
    If Hx > w - 40 Then Hx = w - 40
    If Hx < 1 Then Hx = 1
    If Hy > h - 60 Then Hy = h - 60
    If Hy < 1 Then Hy = 1
    _Display ' it forces hardware to show image
    _Limit 100 ' it reduces the number of cycles of CPU used by this application
Wend

End

Sub MakeHero (X As Integer, Y As Integer, status As Integer)
    If X > _Width - 40 Then X = _Width - 40
    If Y > _Height - 60 Then Y = _Height - 60
    Line (X + 20, Y)-(X, Y + 40), _RGBA32(127, 60, 227, 255)
    Line (X + 20, Y)-(X + 40, Y + 40), _RGBA32(127, 60, 227, 255)
    Line (X, Y + 40)-(X + 40, Y + 40), _RGBA32(127, 60, 227, 255)
    Paint (X + 20, Y + 20), _RGBA32(127, 60, 227, 255), _RGBA32(127, 60, 227, 255)
    Circle (X + 10, Y + 30), 5, _RGBA32(255, 6, 6, 255)
    Circle (X + 30, Y + 30), 5, _RGBA32(255, 6, 6, 255)
    If status = 1 Then
        Line (X + 15, Y + 40)-(X + 20, Y + 60), _RGBA(127, 60, 227, 255), BF
        Line (X + 30, Y + 40)-(X + 35, Y + 60), _RGBA(127, 60, 227, 255), BF
    ElseIf status = -1 Then
        Line (X + 10, Y + 40)-(X + 15, Y + 60), _RGBA(127, 60, 227, 255), BF
        Line (X + 25, Y + 40)-(X + 30, Y + 60), _RGBA(127, 60, 227, 255), BF
    End If
End Sub

This is the 7th step of the tutorial and it goes beyond the goal to make a scrolling background and it shows how to render character (so also for obstacles, goods and enemies) on a moving background.
I thank @Bplus for the feedback to give me the stimulus to go on with this basical tutorial.
Reply


Messages In This Thread
RE: a little tutorial STEP by STEP on scrolling in 2D graphic mode - by TempodiBasic - 12-04-2024, 02:41 AM



Users browsing this thread: 18 Guest(s)