Help with smooth movement of tiled sprites

Post Reply
matt7
Posts: 115
Joined: Sun Jul 12, 2015 5:00 pm
My devices: iPhone
Location: USA

Help with smooth movement of tiled sprites

Post by matt7 »

I am trying to move tiled sprites in sync with one another and am experiencing jitter where I was expecting seamless movement. Here is a simplified example which is intended to move two sprites side-by-side.

Code: Select all

GRAPHICS
REFRESH OFF
GRAPHICS CLEAR 0,0,0
REFRESH

OPTION SPRITE POS CENTRAL

GET SCREEN SIZE scrW, scrH

DRAW COLOR 0,0,0

' Scope "S" contains sprite data
S.w = 60
S.h = 60
S.x = scrW/2
S.y = scrH/2

FOR s = 1 TO 2
  SPRITE s BEGIN S.w, S.h
    GRAPHICS CLEAR 1,1,1
    FOR x = 0 TO S.w*2 STEP 10
      DRAW LINE 0,x TO x,0
      DRAW LINE x-S.w,0 TO x,S.h
    NEXT x
  SPRITE s END
NEXT s

SPRITE 1 AT S.x,       S.y
SPRITE 2 AT S.x + S.w, S.y

SPRITE 1 SHOW
SPRITE 2 SHOW

' Scope "T" contains touch data
T.touch = 0

WHILE 1

  GET TOUCH 0 AS T.x, T.y

  IF T.x <> -1 AND T.y <> -1 THEN

    IF T.touch = 0 THEN
      T.touch = 1
      T.x0 = T.x
      T.y0 = T.y
    END IF

    x = S.x + T.x - T.x0
    y = S.y + T.y - T.y0

    SPRITE 1 AT x,       y
    SPRITE 2 AT x + S.w, y

  ELSE

    IF T.touch = 1 THEN
      T.touch = 0
      GET SPRITE 1 POS S.x, S.y
    END IF

    SLOWDOWN

  END IF

END WHILE
How I expected the sprites to look at all times:

Image

How it often looks when the sprites are moving:

Image

The lines "SPRITE 1 AT x, y" and "SPRITE 2 AT x + S.w, y" are right next to each other, yet it seems that moving Sprite 1 sends an update to the screen before I move Sprite 2. Is there any way to force smart BASIC to not refresh Sprite positions until I tell it to? Something like:

Code: Select all

SPRITE REFRESH OFF

' ...

SPRITE 1 AT x,       y
SPRITE 2 AT x + S.w, y

SPRITE REFRESH
I know those commands don't exist but I'm asking if there is some way to essentially get that behavior. (Using the REFRESH OFF and REFRESH commands for the graphics screen as an example.)

User avatar
Mr. Kibernetik
Site Admin
Posts: 4786
Joined: Mon Nov 19, 2012 10:16 pm
My devices: iPhone, iPad, MacBook
Location: Russia
Flag: Russia

Re: Help with smooth movement of tiled sprites

Post by Mr. Kibernetik »

You cannot delay moving a sprite.
In your case you can create new sprite which will be made of two sprites, or you can position both sprites to some page and move that page instead of moving two separate sprites.

matt7
Posts: 115
Joined: Sun Jul 12, 2015 5:00 pm
My devices: iPhone
Location: USA

Re: Help with smooth movement of tiled sprites

Post by matt7 »

As always thank you for the quick reply! Looks like I'll have to develop a more complex algorithm for scrolling across a 2D image that generates as you go.

I hadn't thought about pages. They experience the same jittering as sprites, but I will look into them as well. I'm sure using them as containers for sets of sprites will be useful.

Thanks again for help.

User avatar
Mr. Kibernetik
Site Admin
Posts: 4786
Joined: Mon Nov 19, 2012 10:16 pm
My devices: iPhone, iPad, MacBook
Location: Russia
Flag: Russia

Re: Help with smooth movement of tiled sprites

Post by Mr. Kibernetik »

matt7 wrote:I hadn't thought about pages. They experience the same jittering as sprites, but I will look into them as well. I'm sure using them as containers for sets of sprites will be useful.
Several sprites on one page will move simultaneously as this page moves.

matt7
Posts: 115
Joined: Sun Jul 12, 2015 5:00 pm
My devices: iPhone
Location: USA

Re: Help with smooth movement of tiled sprites

Post by matt7 »

The two-sprite example I gave in the OP was just a short, simplified example to highlight the specific behavior I was asking about. What I'm trying to work towards ultimately is a procedurally generated map that would be virtually endless. So new tiles would be created off-screen and move on-screen as you scroll in that direction. This is why I was starting with the idea to just put tile sprites right next to each other, hoping movement would be smooth even though they are separate sprites.

I could combine multiple sprites onto a page, and that would prevent the jittering within a page as you said, but the problem would still remain on the page boundaries. (So what I was saying in my last post was that the same jittering happens with two pages side by side.)

Using pages instead of sprites:
(Again, I know it is silly at this scale, putting one small sprite on a small page, but this is only to demonstrate the behavior that would also be a problem at larger scales.)

Code: Select all

GRAPHICS
REFRESH OFF
GRAPHICS CLEAR 0,0,0
REFRESH

OPTION SPRITE POS CENTRAL

GET SCREEN SIZE scrW, scrH

DRAW COLOR 0,0,0

' Scope "S" contains sprite data
S.w = 60
S.h = 60
S.x = scrW/2
S.y = scrH/2

FOR s = 1 TO 2
  PAGE s SET
  PAGE s HIDE
  PAGE s FRAME 0,0, S.w,S.h
  PAGE s COLOR .5,.5,.5,1

  SPRITE s BEGIN S.w, S.h
    GRAPHICS CLEAR 1,1,1
    FOR x = 0 TO S.w*2 STEP 10
      DRAW LINE 0,x TO x,0
      DRAW LINE x-S.w,0 TO x,S.h
    NEXT x
  SPRITE s END
  SPRITE s SHOW
NEXT s

PAGE 1 AT S.x,       S.y
PAGE 2 AT S.x + S.w, S.y

PAGE 1 SHOW
PAGE 2 SHOW

' Scope "T" contains touch data
T.touch = 0

WHILE 1

  GET TOUCH 0 AS x, y

  IF x <> -1 AND y <> -1 THEN

    T.x = x
    T.y = y

    IF T.touch = 0 THEN
      T.touch = 1
      T.x0 = T.x
      T.y0 = T.y
    END IF

    x = S.x + T.x - T.x0
    y = S.y + T.y - T.y0

    PAGE 1 AT x,       y
    PAGE 2 AT x + S.w, y

  ELSE

    IF T.touch = 1 THEN
      T.touch = 0
      S.x += T.x - T.x0
      S.y += T.y - T.y0
    END IF

    SLOWDOWN

  END IF

END WHILE
While the code would be simpler putting sprites side-by-side like I was hoping, I can understand if there is no way to delay their movement to sync them up. So this just means I'll have to come up with a more complex system if I want smooth boundaries. But that's part of the fun! I already have some ideas.

Post Reply