Scroll a SpriteMap?

Right now I’m just loading a whole tiled tmx map into a SpriteMap and moving a camera around but this creates artifacts and shimmering/stuttering. How would you go about moving the camera around a tile map being displayed by a SpriteMap?

Did using this example not fix it?

Can you set up a simplified scene in a PG that I could take a look at and try to get this figured out for you?

I hacked together an example. Use wasd to move the camera.

I put the camera on a building so the flickering/stuttering is apparent. Thanks!

hmmm what’s your refresh rate because I don’t see it.

Buuuuut if its something that is even something I cant see, I could give you a nifty post effect that could possibly alias and fix any rendering artifacts on all refresh rates.

actually looking at your code this might be doing it:

  setInterval(() => {
            mainCamera.target.x = mainCamera.position.x = mainCamera.position.x + xChange;
            mainCamera.target.y = mainCamera.position.y = mainCamera.position.y + yChange;
        }, 16)

You were out of timing with the refresh of the render sequence.

1 Like

Oh wow, duh. Thank you so much! This has eliminated a lot of it but there is still some. Hmmm, it seems there’s none now on the playground. I’ll have to investigate my project more.

Actually I got it to happen on the playground.

Move left and right and in a diagonal for what looks like waves running through the building tiles.

Im not seeing that, what is your refresh rate?


I tried ProMotion and 60hz and it was the same.

A few users see it in the playground.

i see waves going across the screen when scrolling up and down, theres a diagonal line there i think, like screen tear, very noticeable when moving camera over buildings


Another user video. Can you see the wobbling on the building?

https://www.youtube.com/watch?v=6qlNjy-bZ9k

I don’t see that at 144, I do see it in your video though. Its very subtle. I guess you could do a post process that takes the current and last frame then blends them to kind of alias that result at lower refresh rates.

Are you using an orthographic camera?

ArcRotate

That is a movement style not a mode. Are you using projection or orthographic?

Sorry wasn’t thinking. It’s projection.

Anyone else have any ideas?

Its super hard to notice and might be isolated to your client for the most part. Id be able to help more if I could recreate, but there is little I can do just watching a recording.

Odds are its your movement style that needs to be refined. Instead of doing whole numbers maybe incorporate a acceleration or lerp for the movement and also see if applying the engine.deltaTime * 0.001 would help as well.

Alright I guess I’ll have to write my own.

I can give you a better example of movement and maybe that will fix up the problem you are having. I just really think its a timing issue with the movement and your refresh rates.