B4J Question help please with smooth scrolling


Active Member
Licensed User
Hi Guys,

i need some serious help, I have to develop a simple program which displays a (or multiple) "flying" object(s), bouncing on the screen edges (resizable) over a constant moving background.
I used Erels bounce sample to get it done, but unfortunately my app was not accepted due to the fact of flickering and no smooth scrolling of the back and the the flying object.

I looked briefly into the game libraries, what I think will be the right approach to get smooth scrolling done, but I got nowhere as I have absolutely 0 experience in game development :(

can somebody get me into the right direction?



Active Member
Licensed User
Hi, nope will run on a PC.....

The app will be a kind of test software for camera calibration .....


Licensed User
I loaded the Angry Birds X2 demo and ran it with B4J and it is definitely smoother. I assume that the X2 library knows when the screen refresh happens, so it can cleanly update the screen. If you have the time to explore the library, maybe that is a solution.


Licensed User
Give this a try. Looks ok on my Windows laptop. There are a few small stutters in the first couple of seconds (perhaps a shakedown of the memory layout and garbage collection?) and after that's it's quite hypnotic :)
Sub Process_Globals
    Type TargetType(P As B4XView, X As Float, Y As Float, VX As Float, VY As Float)
    Private fx As JFX
    Private MainForm As Form

    Dim NumTargets As Int = 50
    Dim Target() As TargetType
    Dim tmr As Timer
    Dim ThisFrameTime As Long
    Dim LastFrameTime As Long
    Dim xu As XUI
    Dim TestPanel As B4XView
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1

    TestPanel = xu.CreatePanel("pnlGauge")
    Form1.RootPane.AddNode(TestPanel, 10, 10, 100, 100)
    Dim Target(NumTargets) As TargetType
    For I = 0 To NumTargets -1
        Target(I).P = xu.CreatePanel("")
        Target(I).X = 300
        Target(I).Y = 300
        Target(I).VX = Rnd(-100, 100)
        Target(I).VY = Rnd(-50, 150)
        Dim RandomColor As Int = xu.Color_RGB(Rnd(0,255), Rnd(0, 255), Rnd(0, 255))
        Target(I).P.SetColorAndBorder(RandomColor, 1, xu.Color_Black, 3)
        Form1.RootPane.AddNode(Target(I).P,300, 300, 30, 30)
    LastFrameTime = DateTime.Now
    tmr.Initialize("tmr", 16)    '16 ms = 60 frames per second (if all goes well ;-)
    tmr.Enabled = True
End Sub

Sub tmr_Tick

    'first attempt - rotating test panel, changing color, changing border corner radius   
    Dim T As Float = (DateTime.Now Mod 3000) / 3000 * 2 * cPI
    Dim TempColor As Int = xu.Color_ARGB(255, 128 + Sin(T) * 127, 128 + Cos(T) * 127, 0)
    TestPanel.SetColorAndBorder(TempColor, 5, xu.Color_Black, 25 + Sin(T * 2) * 24)
    TestPanel.Rotation = T / cPI * 360
    TestPanel.Left = Sin(T) * 200 + 300 - 50
    TestPanel.Top = Cos(T) * 200 + 300 - 50
    'second attempt - multiple objects
    ThisFrameTime = DateTime.Now
    Dim ElapsedTime As Float = (ThisFrameTime - LastFrameTime) / 1000
    For I = 0 To NumTargets - 1
        MoveTarget(Target(I), ElapsedTime)

    LastFrameTime = ThisFrameTime
End Sub

Sub MoveTarget(T As TargetType, ElapsedTime As Float)
    T.VY = T.VY - 10 * ElapsedTime    'gravity
    T.X = T.X + T.VX * ElapsedTime    'move X
    If T.X < 0 Then
        T.X = -T.X
        T.VX = -T.VX
    else if T.X > 600 - T.P.Width Then
        T.X = (600 - T.P.Width) * 2 - T.X
        T.VX = -T.VX
    End If
    T.Y = T.Y + T.VY * ElapsedTime    'move Y
    If T.Y < 0 Then
        T.Y = -T.Y
        T.VY = -T.VY
    else if T.Y > 600 - T.P.Height Then
        T.Y = (600 - T.P.Height) * 2 - T.Y
        T.VY = -T.VY
    End If
    T.P.Left = T.X
    T.P.Top = 600 - (T.Y + T.P.Height)    'in gravity world, increasing Y means up
End Sub


Licensed User
I hadn't implemented the scrolling background yet, but that's just a case of making one or two of the panels as large as the screen is, putting them in the background behind the other panels (by putting them at the top of the views tree) and then moving them about by changing their Left and Top properties.

The reason for having two background panels, rather than one, is so that you can have continuous and limitless scrolling (in one direction, or in two directions with four panels), since the outgoing tile will be leaving the screen on one side just as you need a incoming tile on the other side.