timer-based movement - GameCreators Forum

Author

Message

Phaelax

DBPro Master

23

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 20th Feb 2013 00:48

Link

User clicks on two adjacent boxes to swap them, and using a little timer-based animation, they move into each other's places. The only thing affected by the timer is the positions of the two boxes, the drawing is independent.

Seemed simple enough to me, but the movement is slower when I cap the frame rate at 60 versus leaving it unlimited (which is around 6600fps for me).

My only thought is that by running at a higher frame rate, the timer check happens more frequently and thus stays more accurate to the 10ms delay I set.

#CONSTANT cBLUE = rgb(0,128,255)
#CONSTANT cRED = rgb(255,0,0)
#CONSTANT cYELLOW = rgb(255,255,0)
#CONSTANT cGREEN = rgb(0,255,0)
#CONSTANT cPURPLE = rgb(255,0,255)

dim colors(5) as dword
colors(1) = cBLUE
colors(2) = cRED
colors(3) = cYELLOW
colors(4) = cGREEN
colors(5) = cPURPLE

dim map(10, 10)
for x = 0 to 9
    for y = 0 to 9
        map(x,y) = rnd(4)+1
    next y
next x

mx = -1
my = -1
mx2 = -1
my2 = -1

sync on
sync rate 60

do
    cls
    
    rem user control to swap tiles
    if mouseclick() = 1 and flag = 0 and swap = 0
        flag = 1
        x = mousex() / 64
        y = mousey() / 64
        if mx = x and my = y
            mx = -1
            my = -1
        else
            if mx = -1 and my = -1
                mx = x
                my = y
             else
                if (abs(mx-x) = 1 and my-y = 0) or (mx-x = 0 and abs(my-y) = 1)
                    swap = 1
                    t# = 0
                    timestamp = timer()
                    mx2 = x
                    my2 = y
                endif
             endif
        endif
    endif
    if mouseclick() = 0 then flag = 0

rem draw the map and tiles
    for x = 0 to 9
        for y = 0 to 9
            ink rgb(128,128,128),0
            box x*64+1, y*64+1, x*64+63, y*64+63
            if swap = 0
                ink colors(map(x,y)), 0
                box x*64+4, y*64+4, x*64+60, y*64+60
            else
                if (x <> mx or y <> my) and (x <> mx2 or y <> my2)
                    ink colors(map(x,y)), 0
                    box x*64+4, y*64+4, x*64+60, y*64+60
                endif
            endif
        next y
    next x

rem swap two tiles
    if swap = 1
        x = (mx2 - mx)*64*t#
        y = (my2 - my)*64*t#
        
        ink colors(map(mx2, my2)), 0
        box mx2*64+4-x, my2*64+4-y, mx2*64+60-x, my2*64+60-y
        
        ink colors(map(mx, my)), 0
        box x+mx*64+4, y+my*64+4, x+mx*64+60, y+my*64+60
    
        rem do some animation in swapping the tiles
        if timestamp+10 <= timer()
            inc t#, 0.04
            if t# >= 1
                t# = 1
                swap = 0
                local t as dword
                t = map(mx, my)
                map(mx, my) = map(mx2, my2)
                map(mx2, my2) = t
                mx = -1
                my = -1
                mx2 = -1
                my2 = -1
            endif
            timestamp = timer()
        endif
    endif

rem draw swapping tiles
    a2Box mx*64, my*64, mx*64+64, my*64+64, rgb(255,255,255)
    a2Box mx2*64, my2*64, mx2*64+64, my2*64+64, rgb(255,255,255)

sync
loop

+ Code Snippet

#CONSTANT cBLUE = rgb(0,128,255)
#CONSTANT cRED = rgb(255,0,0)
#CONSTANT cYELLOW = rgb(255,255,0)
#CONSTANT cGREEN = rgb(0,255,0)
#CONSTANT cPURPLE = rgb(255,0,255)


dim colors(5) as dword
colors(1) = cBLUE
colors(2) = cRED
colors(3) = cYELLOW
colors(4) = cGREEN
colors(5) = cPURPLE

dim map(10, 10)
for x = 0 to 9
    for y = 0 to 9
        map(x,y) = rnd(4)+1
    next y
next x


mx = -1
my = -1
mx2 = -1
my2 = -1


 
sync on
sync rate 60

do
    cls
    
    rem user control to swap tiles
    if mouseclick() = 1 and flag = 0 and swap = 0
        flag = 1
        x = mousex() / 64
        y = mousey() / 64
        if mx = x and my = y
            mx = -1
            my = -1
        else
            if mx = -1 and my = -1
                mx = x
                my = y
             else
                if (abs(mx-x) = 1 and my-y = 0) or (mx-x = 0 and abs(my-y) = 1)
                    swap = 1
                    t# = 0
                    timestamp = timer()
                    mx2 = x
                    my2 = y
                endif
             endif
        endif
    endif
    if mouseclick() = 0 then flag = 0


    rem draw the map and tiles
    for x = 0 to 9
        for y = 0 to 9
            ink rgb(128,128,128),0
            box x*64+1, y*64+1, x*64+63, y*64+63
            if swap = 0
                ink colors(map(x,y)), 0
                box x*64+4, y*64+4, x*64+60, y*64+60
            else
                if (x <> mx or y <> my) and (x <> mx2 or y <> my2)
                    ink colors(map(x,y)), 0
                    box x*64+4, y*64+4, x*64+60, y*64+60
                endif
            endif
        next y
    next x


    rem swap two tiles
    if swap = 1
        x = (mx2 - mx)*64*t#
        y = (my2 - my)*64*t#
        
        ink colors(map(mx2, my2)), 0
        box mx2*64+4-x, my2*64+4-y, mx2*64+60-x, my2*64+60-y
        
        ink colors(map(mx, my)), 0
        box x+mx*64+4, y+my*64+4, x+mx*64+60, y+my*64+60
    
        rem do some animation in swapping the tiles
        if timestamp+10 <= timer()
            inc t#, 0.04
            if t# >= 1
                t# = 1
                swap = 0
                local t as dword
                t = map(mx, my)
                map(mx, my) = map(mx2, my2)
                map(mx2, my2) = t
                mx = -1
                my = -1
                mx2 = -1
                my2 = -1
            endif
            timestamp = timer()
        endif
    endif

    rem draw swapping tiles
    a2Box mx*64, my*64, mx*64+64, my*64+64, rgb(255,255,255)
    a2Box mx2*64, my2*64, mx2*64+64, my2*64+64, rgb(255,255,255)



    sync
loop

"You're all wrong. You're all idiots." ~Fluffy Rabbit

Back to top

Profile PM Email Website

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 20th Feb 2013 03:26 Edited at: 20th Feb 2013 03:29

Link

Well this is not timer based movement seeing as the speed it moves is not based on frame ticks.

Your thoughts are correct, this line [inc t#, 0.04] would be check quicker at a high frame rate so it would reach it's target quicker.

Timer based movement works by calculated the difference of the timer between frames (delta), using this we can accurate update things at a consistent speed whatever the frame rate (sort of, starts to get more complicated depending on what sort of TMB you want, then you have to deal with timer overflow and bla bla bla... google is your friend). The simple version, I've edited your code (look for the Sasuke tags):

#CONSTANT cBLUE = rgb(0,128,255)
#CONSTANT cRED = rgb(255,0,0)
#CONSTANT cYELLOW = rgb(255,255,0)
#CONSTANT cGREEN = rgb(0,255,0)
#CONSTANT cPURPLE = rgb(255,0,255)

dim colors(5) as dword
colors(1) = cBLUE
colors(2) = cRED
colors(3) = cYELLOW
colors(4) = cGREEN
colors(5) = cPURPLE

dim map(10, 10)
for x = 0 to 9
    for y = 0 to 9
        map(x,y) = rnd(4)+1
    next y
next x

mx = -1
my = -1
mx2 = -1
my2 = -1

// SASUKES EDIT //////////////////////////
tick as dword = timer()
lastTick as dword
delta as float

// Also took this out of the update
local t as dword

sync on
sync rate 60

do
    cls
    
    // SASUKES EDIT //////////////////////////
    // update frame tick
    lastTick = tick
    tick = timer()
    delta = (tick-lastTick) * 0.001
    
    rem user control to swap tiles
    if mouseclick() = 1 and flag = 0 and swap = 0
        flag = 1
        x = mousex() / 64
        y = mousey() / 64
        if mx = x and my = y
            mx = -1
            my = -1
        else
            if mx = -1 and my = -1
                mx = x
                my = y
             else
                if (abs(mx-x) = 1 and my-y = 0) or (mx-x = 0 and abs(my-y) = 1)
                    swap = 1
                    t# = 0
                    mx2 = x
                    my2 = y
                endif
             endif
        endif
    endif
    if mouseclick() = 0 then flag = 0

rem draw the map and tiles
    for x = 0 to 9
        for y = 0 to 9
            ink rgb(128,128,128),0
            box x*64+1, y*64+1, x*64+63, y*64+63
            if swap = 0
                ink colors(map(x,y)), 0
                box x*64+4, y*64+4, x*64+60, y*64+60
            else
                if (x <> mx or y <> my) and (x <> mx2 or y <> my2)
                    ink colors(map(x,y)), 0
                    box x*64+4, y*64+4, x*64+60, y*64+60
                endif
            endif
        next y
    next x

rem swap two tiles
    if swap = 1
        x = (mx2 - mx)*64*t#
        y = (my2 - my)*64*t#
        
        ink colors(map(mx2, my2)), 0
        box mx2*64+4-x, my2*64+4-y, mx2*64+60-x, my2*64+60-y
        
        ink colors(map(mx, my)), 0
        box x+mx*64+4, y+my*64+4, x+mx*64+60, y+my*64+60
    
        rem do some animation in swapping the tiles
        inc t#, 4*delta  // SASUKES EDIT //////////////////////////
        if t# >= 1
            t# = 1
            swap = 0
            t = map(mx, my)
            map(mx, my) = map(mx2, my2)
            map(mx2, my2) = t
            mx = -1
            my = -1
            mx2 = -1
            my2 = -1
        endif
    endif

rem draw swapping tiles
    a2Box mx*64, my*64, mx*64+64, my*64+64, rgb(255,255,255)
    a2Box mx2*64, my2*64, mx2*64+64, my2*64+64, rgb(255,255,255)

sync
loop

+ Code Snippet

#CONSTANT cBLUE = rgb(0,128,255)
#CONSTANT cRED = rgb(255,0,0)
#CONSTANT cYELLOW = rgb(255,255,0)
#CONSTANT cGREEN = rgb(0,255,0)
#CONSTANT cPURPLE = rgb(255,0,255)


dim colors(5) as dword
colors(1) = cBLUE
colors(2) = cRED
colors(3) = cYELLOW
colors(4) = cGREEN
colors(5) = cPURPLE

dim map(10, 10)
for x = 0 to 9
    for y = 0 to 9
        map(x,y) = rnd(4)+1
    next y
next x


mx = -1
my = -1
mx2 = -1
my2 = -1

// SASUKES EDIT //////////////////////////
tick as dword = timer()
lastTick as dword
delta as float

// Also took this out of the update
local t as dword

sync on
sync rate 60

do
    cls
    
    // SASUKES EDIT //////////////////////////
    // update frame tick
    lastTick = tick
    tick = timer()
    delta = (tick-lastTick) * 0.001
    
    rem user control to swap tiles
    if mouseclick() = 1 and flag = 0 and swap = 0
        flag = 1
        x = mousex() / 64
        y = mousey() / 64
        if mx = x and my = y
            mx = -1
            my = -1
        else
            if mx = -1 and my = -1
                mx = x
                my = y
             else
                if (abs(mx-x) = 1 and my-y = 0) or (mx-x = 0 and abs(my-y) = 1)
                    swap = 1
                    t# = 0
                    mx2 = x
                    my2 = y
                endif
             endif
        endif
    endif
    if mouseclick() = 0 then flag = 0


    rem draw the map and tiles
    for x = 0 to 9
        for y = 0 to 9
            ink rgb(128,128,128),0
            box x*64+1, y*64+1, x*64+63, y*64+63
            if swap = 0
                ink colors(map(x,y)), 0
                box x*64+4, y*64+4, x*64+60, y*64+60
            else
                if (x <> mx or y <> my) and (x <> mx2 or y <> my2)
                    ink colors(map(x,y)), 0
                    box x*64+4, y*64+4, x*64+60, y*64+60
                endif
            endif
        next y
    next x

    rem swap two tiles
    if swap = 1
        x = (mx2 - mx)*64*t#
        y = (my2 - my)*64*t#
        
        ink colors(map(mx2, my2)), 0
        box mx2*64+4-x, my2*64+4-y, mx2*64+60-x, my2*64+60-y
        
        ink colors(map(mx, my)), 0
        box x+mx*64+4, y+my*64+4, x+mx*64+60, y+my*64+60
    
        rem do some animation in swapping the tiles
        inc t#, 4*delta  // SASUKES EDIT //////////////////////////
        if t# >= 1
            t# = 1
            swap = 0
            t = map(mx, my)
            map(mx, my) = map(mx2, my2)
            map(mx2, my2) = t
            mx = -1
            my = -1
            mx2 = -1
            my2 = -1
        endif
    endif

    rem draw swapping tiles
    a2Box mx*64, my*64, mx*64+64, my*64+64, rgb(255,255,255)
    a2Box mx2*64, my2*64, mx2*64+64, my2*64+64, rgb(255,255,255)

    sync
loop

Back to top

Profile PM Email

Libervurto

20

Years of Service

User Offline

Joined: 30th Jun 2006

Location: On Toast

Posted: 20th Feb 2013 04:04

Link

I added my super-secret-special toggle code and now we have optional click and drag!

+ Code Snippet

   cls
    text 640,0,str$(screen fps())
	 text 640,16,str$(click)
    rem user control to swap tiles
	 click = mouseclick()*(click+1)
    if swap = 0
      x = mousex() / 64
      y = mousey() / 64
		if click=1 or (click>10 and ((abs(mx-x) = 1 and my-y = 0) or (mx-x = 0 and abs(my-y) = 1)))
        if mx = x and my = y
            mx = -1
            my = -1
        else
            if mx = -1 and my = -1
                mx = x
                my = y
             else
                if (abs(mx-x) = 1 and my-y = 0) or (mx-x = 0 and abs(my-y) = 1)
                    swap = 1
                    t# = 0
                    timestamp = timer()
                    mx2 = x
                    my2 = y
                endif
             endif
        endif
		 endif
    endif

I don't have a2d, well I do because I just downloaded it but I don't know how to "install" it. (Can dbp free version use plugins?)

Back to top

Profile PM Email

Phaelax

DBPro Master

23

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 20th Feb 2013 16:51

Link

I would think, regardless of framerates, my example would update every 10ms.

Thanks.

Quote: "Can dbp free version use plugins?"

Only difference between free and not free is the ad in the IDE.

"You're all wrong. You're all idiots." ~Fluffy Rabbit

Back to top

Profile PM Email Website

Andrew_Neale

16

Years of Service

User Offline

Joined: 3rd Nov 2009

Location: The Normandy SR-2

Posted: 20th Feb 2013 17:10 Edited at: 20th Feb 2013 17:14

Link

If you've capped the frame rate at 60 frames per second, then each frame takes 16.6 milliseconds. So your check will always return true that the amount of time since the last frame is greater than or equal to 10 milliseconds but will still only be running every 16.6 milliseconds. Also, if you removed the cap and your rendering happened to take up 9 milliseconds then the first time it checked whether or not to update it would fail and the next time it would succeed but would've waited 18 milliseconds to have done so. Proper timer based movement would avoid both of these issues.

[Edit] Fixing stupid punctuation mistake. [/Edit]

Previously TEH_CODERER.

Back to top

Profile PM Email Website

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 20th Feb 2013 17:23 Edited at: 20th Feb 2013 17:25

Link

Quote: "I would think, regardless of framerates, my example would update every 10ms."

It's because this line if timestamp+10 <= timer() is called far more often at a higher frame rate. So the statement will be considered true before a lower frame rate finds that it's true.

Andrew beat me to it

Back to top

Profile PM Email

TheComet

18

Years of Service

User Offline

Joined: 18th Oct 2007

Location: I`m under ur bridge eating ur goatz.

Posted: 20th Feb 2013 17:32

Link

The way I approached it in my game is with the following:

+ Code Snippet

rem timer based movement
type TBMVT
   Ticks                            as dword
   TickTracker                      as dword
   TotalElapsedTime                 as integer
endtype

rem timer based movement
global TBM as TBMVT

rem main loop
do

   rem increment tick counter, should increment 60 times every second
   TBM.Ticks = (hitimer(1000)-TBM.TotalElapsedTime)/16.666

   rem tick based controls (dependant on network code and tick counter)
   while TBM.TickTracker < TBM.Ticks

      rem update time critical stuff
      updateTimeCriticalStuff()

      rem next tick
      inc TBM.TickTracker

   endwhile

   rem control non-time critical stuff (such as 2D command drawing or input polls)
   updateNonTimeCriticalStuff()

   rem refresh screen
   sync

rem end of main loop
loop

The function updateTimeCriticalStuff() is guaranteed to be called 60 times a second, no matter what.

TheComet

http://blankflankstudios.tumblr.com/
"You're all wrong. You're all idiots." - Fluffy Rabbit
"Bottom line, people are retarded." - Fluffy Rabbit

Back to top

Profile PM Email Website

Phaelax

DBPro Master

23

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 21st Feb 2013 00:37

Link

Thanks guys.

Comet, nice signature

"You're all wrong. You're all idiots." ~Fluffy Rabbit

Back to top

Profile PM Email Website

TheComet

18

Years of Service

User Offline

Joined: 18th Oct 2007

Location: I`m under ur bridge eating ur goatz.

Posted: 21st Feb 2013 07:25

Link

Likewise.

TheComet

http://blankflankstudios.tumblr.com/
"You're all wrong. You're all idiots." - Fluffy Rabbit
"Bottom line, people are retarded." - Fluffy Rabbit

Back to top

Profile PM Email Website

Sorry your browser is not supported!

DarkBASIC Professional Discussion / timer-based movement