SyntaxBomb - Indie Coders

Hello all,

I'm trying to recreate some retro scroller from the 80s. I'd like to recolour the grid on the fly, so I need to draw it without using images.
Also the canvas size is fixed at 272 x 85 pixels.

BMX code (requires BMX GUI for the framework)

SuperStrict

Framework MaxGui.Drivers
Import BRL.GLMax2D
Import BRL.StandardIO
Import BRL.Pixmap
Import BRL.EventQueue
Import BRL.Timer
Import BRL.Retro
Import BRL.Max2D
Import BRL.Pngloader
Import BRL.Jpgloader

Const MAINWINDOW_W:Int = 278
Const MAINWINDOW_H:Int = 154
Const WIN_MENU_FLAG:Int = 0

Global SpectrumTimer:TTimer=CreateTimer(24)

'Global Spec_BackgroundIMG:TImage = ResizeImage(LoadImage("station_ico.png", Null),137) ' Scale to 50% of canvas size

' Main Window
Global flags:Int=WINDOW_TITLEBAR | WINDOW_CLIENTCOORDS | WINDOW_CENTER | WIN_MENU_FLAG | WINDOW_ACCEPTFILES | WINDOW_RESIZABLE
Global window:TGadget=CreateWindow("Retro 80s Test",0,0,MAINWINDOW_W,MAINWINDOW_H+70,Null, flags)
Global Button2:TGadget=CreateButton("Exit APP",2,MAINWINDOW_H+70-20,MAINWINDOW_W-3,20,window,BUTTON_OK)

Global RadioStationCanvas:TGadget = CreateCanvas(2, 2, 274, 87, window, PANEL_ACTIVE)

Const Retro_Grid_CenterX:Int=137
Const Retro_Grid_CenterY:Int=44

SeedRnd MilliSecs()

Global Retro_MountainRange:Int[16]
For Local i:Int=0 To 15 ' Precalculated, will be dynamic later
Retro_MountainRange[i]=Rand(1,15) ' maximal height 1-15
Next

Global Retro_GridHY:Int[5]
Retro_GridHY[0]=Retro_Grid_CenterY
Retro_GridHY[1]=Retro_Grid_CenterY+10
Retro_GridHY[2]=Retro_Grid_CenterY+20
Retro_GridHY[3]=Retro_Grid_CenterY+30
Retro_GridHY[4]=Retro_Grid_CenterY+40

Global Retro_GridVX2:Int[8]
Retro_GridVX2[0]=Retro_Grid_CenterX-160
Retro_GridVX2[1]=Retro_Grid_CenterX-120
Retro_GridVX2[2]=Retro_Grid_CenterX-80
Retro_GridVX2[3]=Retro_Grid_CenterX-40
Retro_GridVX2[4]=Retro_Grid_CenterX+40
Retro_GridVX2[5]=Retro_Grid_CenterX+80
Retro_GridVX2[6]=Retro_Grid_CenterX+120
Retro_GridVX2[7]=Retro_Grid_CenterX+160

SetGraphics CanvasGraphics( RadioStationCanvas )
Flip()

' //////////////// Main Loop

While WaitEvent()
Select EventID()
Case EVENT_WINDOWCLOSE
End
Case EVENT_GADGETACTION
          Select EventSource()

                 Case BUTTON2
          End
                 End Select

       Case EVENT_TIMERTICK

    Select EventSource()

Case SpectrumTimer ' Update Canvas
     
        SetGraphics CanvasGraphics( RadioStationCanvas )
        Cls

'       Draw background landscape
        SetColor 255,255,255
Retro_Upd_Mountains()

'       Draw neon grid lines
        SetColor 220,155,255
        DrawLine 1,Retro_Grid_CenterY,272,Retro_Grid_CenterY ' Horizontal line fixed
        DrawLine 137,Retro_Grid_CenterY,137,85 ' Vertical line (cemter) fixed

        Retro_Upd_Hor_Grid()
        Retro_Upd_Vert_Grid()
'       DrawImage Spec_BackgroundIMG,69,22,0
        Flip 0

       End Select

End Select

Wend
End

Function Retro_Upd_Mountains()
DrawLine 1,Retro_Grid_CenterY,17,Retro_Grid_CenterY-Retro_MountainRange[0]
DrawLine 17,Retro_Grid_CenterY-Retro_MountainRange[0],17*2,Retro_Grid_CenterY-Retro_MountainRange[1]
DrawLine 17*2,Retro_Grid_CenterY-Retro_MountainRange[1],17*3,Retro_Grid_CenterY-Retro_MountainRange[2]
DrawLine 17*3,Retro_Grid_CenterY-Retro_MountainRange[2],17*4,Retro_Grid_CenterY-Retro_MountainRange[3]
DrawLine 17*4,Retro_Grid_CenterY-Retro_MountainRange[3],17*5,Retro_Grid_CenterY-Retro_MountainRange[4]
DrawLine 17*5,Retro_Grid_CenterY-Retro_MountainRange[4],17*6,Retro_Grid_CenterY-Retro_MountainRange[5]
DrawLine 17*6,Retro_Grid_CenterY-Retro_MountainRange[5],17*7,Retro_Grid_CenterY-Retro_MountainRange[6]
DrawLine 17*7,Retro_Grid_CenterY-Retro_MountainRange[6],17*8,Retro_Grid_CenterY-Retro_MountainRange[7]
DrawLine 17*8,Retro_Grid_CenterY-Retro_MountainRange[7],17*9,Retro_Grid_CenterY-Retro_MountainRange[8]
DrawLine 17*9,Retro_Grid_CenterY-Retro_MountainRange[8],17*10,Retro_Grid_CenterY-Retro_MountainRange[9]
DrawLine 17*10,Retro_Grid_CenterY-Retro_MountainRange[9],17*11,Retro_Grid_CenterY-Retro_MountainRange[10]
DrawLine 17*11,Retro_Grid_CenterY-Retro_MountainRange[10],17*12,Retro_Grid_CenterY-Retro_MountainRange[11]
DrawLine 17*12,Retro_Grid_CenterY-Retro_MountainRange[11],17*13,Retro_Grid_CenterY-Retro_MountainRange[12]
DrawLine 17*13,Retro_Grid_CenterY-Retro_MountainRange[12],17*14,Retro_Grid_CenterY-Retro_MountainRange[13]
DrawLine 17*14,Retro_Grid_CenterY-Retro_MountainRange[13],17*15,Retro_Grid_CenterY-Retro_MountainRange[14]
DrawLine 17*15,Retro_Grid_CenterY-Retro_MountainRange[14],17*16,Retro_Grid_CenterY
End Function

Function Retro_Upd_Hor_Grid()
For Local j:Int=0 To 4
DrawLine 1,Retro_GridHY[j],272,Retro_GridHY[j]
Retro_GridHY[j]=Retro_GridHY[j]+1
If Retro_GridHY[j]>94 Then Retro_GridHY[j]=Retro_Grid_CenterY
Next
End Function

Function Retro_Upd_Vert_Grid()
For Local j:Int=0 To 7
If j < 4 Then ' tilt /
   DrawLine Retro_GridVX2[j],85,Retro_GridVX2[j]+15,Retro_Grid_CenterY
Else  ' tilt \
   DrawLine Retro_GridVX2[j],85,Retro_GridVX2[j]-15,Retro_Grid_CenterY
EndIf
Next
End Function


How do I calculate the vertical grid lines correctly, so I get a proper "3D effect". My spacing seems to be not correct.

Also I couldn't find a draw glowing line code for DirectX in the code archives. I'm pretty sure that someone did a function for this years ago.
Anything else to improve the quality is welcome as well. Palm trees, sunset in the center, gradiant backgrounds?

Grisu

A slight improvement, but not really what you're looking for:

Function Retro_Upd_Vert_Grid()
  For Local j:Int=0 To 7
    If j<4 Then ' tilt /
      DrawLine Retro_GridVX2[j],85,Retro_GridVX2[j]+40-j*9,Retro_Grid_CenterY
    Else  ' tilt \
      DrawLine Retro_GridVX2[j],85,Retro_GridVX2[j]+20-j*9,Retro_Grid_CenterY
    EndIf
  Next
End Function

Complimenting chalky's code, I cobbled this together.
Instead of storing the y position in the array it stores an angle between 0 and 90. When its time to draw it calculates the sin of 90-angle and multiplies it up to vertical height of the window. It gives a very subtle pseudo 3d effect.


SuperStrict

Framework MaxGui.Drivers
Import BRL.GLMax2D
Import BRL.StandardIO
Import BRL.Pixmap
Import BRL.EventQueue
Import BRL.Timer
Import BRL.Retro
Import BRL.Max2D
Import BRL.Pngloader
Import BRL.Jpgloader

Const MAINWINDOW_W:Int = 278
Const MAINWINDOW_H:Int = 154
Const WIN_MENU_FLAG:Int = 0

Global SpectrumTimer:TTimer=CreateTimer(24)

'Global Spec_BackgroundIMG:TImage = ResizeImage(LoadImage("station_ico.png", Null),137) ' Scale to 50% of canvas size

' Main Window
Global flags:Int=WINDOW_TITLEBAR | WINDOW_CLIENTCOORDS | WINDOW_CENTER | WIN_MENU_FLAG | WINDOW_ACCEPTFILES | WINDOW_RESIZABLE
Global window:TGadget=CreateWindow("Retro 80s Test",0,0,MAINWINDOW_W,MAINWINDOW_H+70,Null, flags)
Global Button2:TGadget=CreateButton("Exit APP",2,MAINWINDOW_H+70-20,MAINWINDOW_W-3,20,window,BUTTON_OK)

Global RadioStationCanvas:TGadget = CreateCanvas(2, 2, 274, 87, window, PANEL_ACTIVE)

Const Retro_Grid_CenterX:Int=137
Const Retro_Grid_CenterY:Int=44

SeedRnd MilliSecs()

Global Retro_MountainRange:Int[16]
For Local i:Int=0 To 15 ' Precalculated, will be dynamic later
Retro_MountainRange[i]=Rand(1,15) ' maximal height 1-15
Next

Local gap:Int = 90/5
Global Retro_GridHY:Int[5]
Retro_GridHY[0]=90
Retro_GridHY[1]=Retro_GridHY[0]-gap
Retro_GridHY[2]=Retro_GridHY[1]-gap
Retro_GridHY[3]=Retro_GridHY[2]-gap
Retro_GridHY[4]=Retro_GridHY[3]-gap

Global Retro_GridVX2:Int[8]
Retro_GridVX2[0]=Retro_Grid_CenterX-160
Retro_GridVX2[1]=Retro_Grid_CenterX-120
Retro_GridVX2[2]=Retro_Grid_CenterX-80
Retro_GridVX2[3]=Retro_Grid_CenterX-40
Retro_GridVX2[4]=Retro_Grid_CenterX+40
Retro_GridVX2[5]=Retro_Grid_CenterX+80
Retro_GridVX2[6]=Retro_Grid_CenterX+120
Retro_GridVX2[7]=Retro_Grid_CenterX+160

SetGraphics CanvasGraphics( RadioStationCanvas )
Flip()

' //////////////// Main Loop

While WaitEvent()
Select EventID()
Case EVENT_WINDOWCLOSE
End
Case EVENT_GADGETACTION
          Select EventSource()

                 Case BUTTON2
          End
                 End Select

       Case EVENT_TIMERTICK

    Select EventSource()

Case SpectrumTimer ' Update Canvas
     
        SetGraphics CanvasGraphics( RadioStationCanvas )
        Cls

'       Draw background landscape
        SetColor 255,255,255
Retro_Upd_Mountains()

'       Draw neon grid lines
        SetColor 220,155,255
        DrawLine 1,Retro_Grid_CenterY,272,Retro_Grid_CenterY ' Horizontal line fixed
        DrawLine 137,Retro_Grid_CenterY,137,85 ' Vertical line (cemter) fixed

        Retro_Upd_Hor_Grid()
        Retro_Upd_Vert_Grid()
'       DrawImage Spec_BackgroundIMG,69,22,0
        Flip 0

       End Select

End Select

Wend
End

Function Retro_Upd_Mountains()
DrawLine 1,Retro_Grid_CenterY,17,Retro_Grid_CenterY-Retro_MountainRange[0]
DrawLine 17,Retro_Grid_CenterY-Retro_MountainRange[0],17*2,Retro_Grid_CenterY-Retro_MountainRange[1]
DrawLine 17*2,Retro_Grid_CenterY-Retro_MountainRange[1],17*3,Retro_Grid_CenterY-Retro_MountainRange[2]
DrawLine 17*3,Retro_Grid_CenterY-Retro_MountainRange[2],17*4,Retro_Grid_CenterY-Retro_MountainRange[3]
DrawLine 17*4,Retro_Grid_CenterY-Retro_MountainRange[3],17*5,Retro_Grid_CenterY-Retro_MountainRange[4]
DrawLine 17*5,Retro_Grid_CenterY-Retro_MountainRange[4],17*6,Retro_Grid_CenterY-Retro_MountainRange[5]
DrawLine 17*6,Retro_Grid_CenterY-Retro_MountainRange[5],17*7,Retro_Grid_CenterY-Retro_MountainRange[6]
DrawLine 17*7,Retro_Grid_CenterY-Retro_MountainRange[6],17*8,Retro_Grid_CenterY-Retro_MountainRange[7]
DrawLine 17*8,Retro_Grid_CenterY-Retro_MountainRange[7],17*9,Retro_Grid_CenterY-Retro_MountainRange[8]
DrawLine 17*9,Retro_Grid_CenterY-Retro_MountainRange[8],17*10,Retro_Grid_CenterY-Retro_MountainRange[9]
DrawLine 17*10,Retro_Grid_CenterY-Retro_MountainRange[9],17*11,Retro_Grid_CenterY-Retro_MountainRange[10]
DrawLine 17*11,Retro_Grid_CenterY-Retro_MountainRange[10],17*12,Retro_Grid_CenterY-Retro_MountainRange[11]
DrawLine 17*12,Retro_Grid_CenterY-Retro_MountainRange[11],17*13,Retro_Grid_CenterY-Retro_MountainRange[12]
DrawLine 17*13,Retro_Grid_CenterY-Retro_MountainRange[12],17*14,Retro_Grid_CenterY-Retro_MountainRange[13]
DrawLine 17*14,Retro_Grid_CenterY-Retro_MountainRange[13],17*15,Retro_Grid_CenterY-Retro_MountainRange[14]
DrawLine 17*15,Retro_Grid_CenterY-Retro_MountainRange[14],17*16,Retro_Grid_CenterY
End Function

Function Retro_Upd_Hor_Grid()
For Local j:Int=0 To 4
Local ang:Int = Retro_GridHY[j]
ang :+ 1; ang :Mod 90
Local sc:Int = 54, sy:Float = sc * Sin(90-ang)
DrawLine 1,Retro_Grid_CenterY + sc - sy,272,Retro_Grid_CenterY + sc - sy
Retro_GridHY[j] = ang
Next

End Function

Function Retro_Upd_Vert_Grid()
  For Local j:Int=0 To 7
    If j<4 Then ' tilt /
      DrawLine Retro_GridVX2[j],85,Retro_GridVX2[j]+40-j*9,Retro_Grid_CenterY
    Else  ' tilt \
      DrawLine Retro_GridVX2[j],85,Retro_GridVX2[j]+20-j*9,Retro_Grid_CenterY
    EndIf
  Next
End Function


Needed to remove the

SetGraphics CanvasGraphics( RadioStationCanvas )
Flip()

before the while loop as I got a black rect with it (on my linux box).


so after replacing some lines with for loops Col's posted code looked like this:

SuperStrict

Framework MaxGui.Drivers
Import BRL.GLMax2D
Import BRL.StandardIO
Import BRL.Pixmap
Import BRL.EventQueue
Import BRL.Timer
Import BRL.Retro
Import BRL.Max2D
Import BRL.Pngloader
Import BRL.Jpgloader

Const MAINWINDOW_W:Int = 278
Const MAINWINDOW_H:Int = 154
Const WIN_MENU_FLAG:Int = 0

Global SpectrumTimer:TTimer=CreateTimer(24)

'Global Spec_BackgroundIMG:TImage = ResizeImage(LoadImage("station_ico.png", Null),137) ' Scale to 50% of canvas size

' Main Window
Global flags:Int=WINDOW_TITLEBAR | WINDOW_CLIENTCOORDS | WINDOW_CENTER | WIN_MENU_FLAG | WINDOW_ACCEPTFILES | WINDOW_RESIZABLE
Global window:TGadget=CreateWindow("Retro 80s Test",0,0,MAINWINDOW_W,MAINWINDOW_H+70,Null, flags)
Global Button2:TGadget=CreateButton("Exit APP",2,MAINWINDOW_H+70-20,MAINWINDOW_W-3,20,window,BUTTON_OK)

Global RadioStationCanvas:TGadget = CreateCanvas(2, 2, 274, 87, window, PANEL_ACTIVE)

Const Retro_Grid_CenterX:Int=137
Const Retro_Grid_CenterY:Int=44

SeedRnd MilliSecs()

Global Retro_MountainRange:Int[16]
For Local i:Int=0 To 15 ' Precalculated, will be dynamic later
    Retro_MountainRange[i]=Rand(1,15) ' maximal height 1-15
Next

Local gap:Int = 90/5
Global Retro_GridHY:Int[5]
For local i:int = 0 to 4
    Retro_GridHY[i] = 90 - i*gap
Next

Global Retro_GridVX2:Int[8]
For local i:int = 0 to 7
    Retro_GridVX2[i] = Retro_Grid_CenterX - 160 + i*40 + (i>3)*40
Next

'SetGraphics CanvasGraphics( RadioStationCanvas )
'Flip()

' //////////////// Main Loop

While WaitEvent()
    Select EventID()
        Case EVENT_WINDOWCLOSE
            End
        Case EVENT_GADGETACTION
            Select EventSource()
                Case BUTTON2
                    End
            End Select

        Case EVENT_TIMERTICK

            Select EventSource()
                Case SpectrumTimer ' Update Canvas
                    SetGraphics CanvasGraphics( RadioStationCanvas )
                    Cls

                    'Draw background landscape
                    SetColor 255,255,255
                    Retro_Upd_Mountains()

                    'Draw neon grid lines
                    SetColor 220,155,255
                    DrawLine 1,Retro_Grid_CenterY,272,Retro_Grid_CenterY ' Horizontal line fixed
                    DrawLine 137,Retro_Grid_CenterY,137,85 ' Vertical line (cemter) fixed

                    Retro_Upd_Hor_Grid()
                    Retro_Upd_Vert_Grid()
                    'DrawImage Spec_BackgroundIMG,69,22,0
                    Flip 0
            End Select
    End Select
Wend
End

Function Retro_Upd_Mountains()
    DrawLine 1,Retro_Grid_CenterY,17,Retro_Grid_CenterY-Retro_MountainRange[0]
    For local i:int = 0 to 13
        DrawLine 17*(i+1), Retro_Grid_CenterY - Retro_MountainRange[i], 17*(i+2), Retro_Grid_CenterY - Retro_MountainRange[i+1]
    Next
    DrawLine 17*15,Retro_Grid_CenterY-Retro_MountainRange[14],17*16,Retro_Grid_CenterY
End Function

Function Retro_Upd_Hor_Grid()
    For Local j:Int=0 To 4
        Local ang:Int = Retro_GridHY[j]
        ang :+ 1; ang :Mod 90
        Local sc:Int = 54, sy:Float = sc * Sin(90-ang)
        DrawLine 1,Retro_Grid_CenterY + sc - sy,272,Retro_Grid_CenterY + sc - sy
        Retro_GridHY[j] = ang
    Next
End Function

Function Retro_Upd_Vert_Grid()
    For Local j:Int=0 To 7
        If j<4 ' tilt /
            DrawLine Retro_GridVX2[j],85,Retro_GridVX2[j]+40-j*9,Retro_Grid_CenterY
        Else  ' tilt \
            DrawLine Retro_GridVX2[j],85,Retro_GridVX2[j]+20-j*9,Retro_Grid_CenterY
        EndIf
    Next
End Function



Think it might look more interesting if the lines got some rotation (as if we rotate to the left and right) and the mountains doing an shift on the x-axis.


bye
Ron

Sorry, it took me a while, but my private life changed a lot over the past months. Thanks to everyones help I did some code adjustments.

I uploaded the latest version, as it uses Brucey's Fmod Wrapper and some image files.

Screenshot:


Downlöad full source with fmod module: http://www.mediafire.com/file/q83cwd6uoczjrzj/bmx_retro.zip/file

My aim is to add some variety it, for users should look a bit of difference each time they use it. Though it's still too static and "empty" for my taste.
I'm not sure how to add movable mountains and grid, if the mountains "fluid" as well.  I tried to move the logo and mountains to the front like in the game Outrun from the C64, but the the perspective looked wrong.

Would be better to add some grid art, like tanks, palm trees etc to breath more life into the screen. Just want it to look retro but still "interesting" for users.

Any improvements are highly welcome.

Changed the code and added 7 different "themes" to the grid and background.

Example:


Download with code: http://www.mediafire.com/file/0xrr71rl68s7x0r/bmx_retro%237.zip

I don't know how to integrate a station logo in there. It feels out of place.
I'm looking for a way to add the logo and retro palm trees like in the old c64 outrun game: (Source: C64 Wiki)
Does someone know how to scale the logo image up coming from the far background to the front until it disappears?