# Scroll a SpriteMap?

**URL:** <https://forum.babylonjs.com/t/scroll-a-spritemap/40955>\
**Category:** Questions\
**Created:** [May 18, 2023, 8:43pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955 "2023-05-18T20:43:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 18, 2023, 8:43pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/1 "2023-05-18T20:43:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 18, 2023, 11:38pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/2 "2023-05-18T23:38:02Z")

</div>

> [@Pixel perfect spritemap?](https://forum.babylonjs.com/t/pixel-perfect-spritemap/40316/7):
>
> Ok I found the example that I was working on to convert it to a CustomMaterial extension. I have not been able to find the PR that I was working on for that. So a little more digging and this should be a thing. It looks like it might fix the rendering artifact you were having.

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?

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 21, 2023, 2:37am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/3 "2023-05-21T02:37:53Z")

</div>

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

> **[Babylon.js Playground](https://playground.babylonjs.com/#IUVPK5%2312)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 21, 2023, 5:09am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/4 "2023-05-21T05:09:03Z")

</div>

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:_

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

```

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 21, 2023, 5:11am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/5 "2023-05-21T05:11:32Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#IUVPK5%2313)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 21, 2023, 5:54am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/6 "2023-05-21T05:54:22Z")

</div>

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.

> **[Babylon.js Playground](https://playground.babylonjs.com/#IUVPK5%2315)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 21, 2023, 6:02am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/7 "2023-05-21T06:02:28Z")

</div>

Actually I got it to happen on the playground.

> **[Babylon.js Playground](https://playground.babylonjs.com/#IUVPK5%2316)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 21, 2023, 7:32am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/8 "2023-05-21T07:32:01Z")

</div>

Im not seeing that, what is your refresh rate?

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 21, 2023, 11:09pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/9 "2023-05-21T23:09:59Z")

</div>

![Screenshot 2023-05-21 at 4.09.02 PM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/d/8d910ce5f5d80b99c571f8dc5af9a57da1aa10f5.jpeg)  
I tried ProMotion and 60hz and it was the same.

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 21, 2023, 11:37pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/10 "2023-05-21T23:37:55Z")

</div>

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

[https://i.gyazo.com/e51fe28280c776b28d6f90f263830200.mp4](https://i.gyazo.com/e51fe28280c776b28d6f90f263830200.mp4)

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 21, 2023, 11:41pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/11 "2023-05-21T23:41:49Z")

</div>

[https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/e/ae925c4f2524aebe0e537e90969356895449edc2.mp4](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/e/ae925c4f2524aebe0e537e90969356895449edc2.mp4)
  
Another user video. Can you see the wobbling on the building?

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 21, 2023, 11:43pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/12 "2023-05-21T23:43:06Z")

</div>

[https://www.youtube.com/watch?v=6qlNjy-bZ9k](https://www.youtube.com/watch?v=6qlNjy-bZ9k)

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 22, 2023, 5:33am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/13 "2023-05-22T05:33:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 26, 2023, 3:13am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/14 "2023-05-26T03:13:21Z")

</div>

ArcRotate

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 26, 2023, 5:38am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/15 "2023-05-26T05:38:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 26, 2023, 6:37am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/16 "2023-05-26T06:37:25Z")

</div>

Sorry wasn’t thinking. It’s projection.

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 30, 2023, 4:51am UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/17 "2023-05-30T04:51:16Z")

</div>

Anyone else have any ideas?

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 30, 2023, 3:33pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/18 "2023-05-30T15:33:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pixelodo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pixelodo/32/29875_2.png) [@Pixelodo](https://forum.babylonjs.com/u/Pixelodo)\
**Post date:** [May 30, 2023, 6:16pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/19 "2023-05-30T18:16:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 30, 2023, 7:07pm UTC](https://forum.babylonjs.com/t/scroll-a-spritemap/40955/20 "2023-05-30T19:07:53Z")

</div>

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.

[Next page](https://forum.babylonjs.com/t/scroll-a-spritemap/40955.md?page=2)