# How to get scrolling tiled background image?

**URL:** <https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753>\
**Category:** Questions\
**Created:** [June 23, 2019, 10:51am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753 "2019-06-23T10:51:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeZvers](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/nezvers/32/16030_2.png) [@NeZvers](https://forum.defold.com/u/NeZvers)\
**Post date:** [June 23, 2019, 10:51am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/1 "2019-06-23T10:51:20Z")

</div>

I’d like to make parallax background but what I see in the tutorial section about parallax is more like faux parallax effect. It’s not showing how the majority of games use the parallax background (scrolling tiled image).

Godot has nodes dedicated to having a parallax background - ParallaxBackground\>ParallaxLayer\>sprite.  
Gamemaker has a checkbox for a sprite to have it tile horizontally/ vertically.  
I’d like to know how to get that in Defold.

---

<div class="post-metadata">

**Author:** ![TheKing0x9](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/theking0x9/32/13588_2.png) [@TheKing0x9](https://forum.defold.com/u/TheKing0x9)\
**Post date:** [June 23, 2019, 11:18am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/2 "2019-06-23T11:18:01Z")

</div>

There are two ways to do this:

1. You create a sprite that moves itself in a direction constantly, and resets it’s position to the initial position when it goes out of bounds, pretty much like what the Runner tutorial does for the platforms
2. You create a material, like @pkeod explained [here](https://forum.defold.com/t/repeating-texture/49201/2)

---

<div class="post-metadata">

**Author:** ![NeZvers](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/nezvers/32/16030_2.png) [@NeZvers](https://forum.defold.com/u/NeZvers)\
**Post date:** [June 23, 2019, 11:38am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/3 "2019-06-23T11:38:34Z")

</div>

1. Seems pretty bad workaround, since in situation where it’s needed to have image repeat 2x time to cover screen, it’s needed to manage 3 images to do movement. And adding more layers of parallax multiply sprites needed to manage.
2. @Pkeod says that it needs to be power of 2. In real world it’s rare to have parallax layers to be power of 2. Although I thought that it should be possible with shaders, but my knowledge of them is close to 0.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [June 23, 2019, 4:31pm UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/4 "2019-06-23T16:31:15Z")

</div>

It’s because of the way Defold makes atlases and uvs. The width and height don’t have to be even. You could have 256x512 and it would work. You could also make some blank space in your image such as having top 50px of your image be transparent, but important thing is width and height both be powers of 2 otherwise that method won’t work right.

---

<div class="post-metadata">

**Author:** ![NeZvers](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/nezvers/32/16030_2.png) [@NeZvers](https://forum.defold.com/u/NeZvers)\
**Post date:** [June 23, 2019, 5:05pm UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/5 "2019-06-23T17:05:12Z")

</div>

Let’s look at a real-world example:  
Jesse Munguia’s [Jungle Asset Pack](https://jesse-m.itch.io/jungle-pack)  
Layers are 384x216.  
I don’t see where I should put transparent.

 ![plx-5](https://forum-defold-uploads.b-cdn.net/original/3X/4/d/4dfa123fbbd16b49c27dc18feb29e89f16da8ed6.png)

---

<div class="post-metadata">

**Author:** ![ross.grams](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/r/cab0a1/32.png) [@ross.grams](https://forum.defold.com/u/ross.grams)\
**Post date:** [June 23, 2019, 5:12pm UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/6 "2019-06-23T17:12:54Z")

</div>

Neither of TheKing’s methods are bad or a workaround, they are -the- ways to do it. Godot and Gamemaker have these options built-in…but how do you think _they_ are doing it? It is either in a shader, or by drawing the same image repeatedly and offsetting them.

In fact you can look at Godot’s code ([background](https://github.com/godotengine/godot/blob/19a6a6286a73ed2e95a00f92994851c817d21401/scene/2d/parallax_background.cpp), [layer](https://github.com/godotengine/godot/blob/5128430700f3f9751e422ce7fd9fcc4f5eeae553/scene/2d/parallax_layer.cpp)) and see. Basically all the ParallaxBackground node does is offset all its child layers whenever the camera moves. The mirroring feature looks like a shader thing, presumably the same as Pkeod’s method (but with all the work done for you already).

* * *

Anyway. So are you using premade assets you find? Can you simply scale them to a power of 2 size? I imagine it’s hard to find assets that match the exact size you want anyway. It should also be possible to wrap the UVs with a non-power of 2 size, provided you input the image size into your shader. I seem to recall there was a way to calculate the remapped UVs inside an atlas ([see this thread](https://forum.defold.com/t/shader-uvs-based-on-whole-atlas/6183)), but I don’t remember how much of pain it was to do. Defold definitely could be better in this area.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [June 24, 2019, 3:32am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/7 "2019-06-24T03:32:15Z")

</div>

The easiest way is to have each layer of the parallax scroll in a separate game object each containing enough images to cover your screen and then move them with a speed dependent upon the z value of the game object. Easy and not a workaround, but you have to do some work yourself.

---

<div class="post-metadata">

**Author:** ![ryanscottlandry](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/ryanscottlandry/32/5436_2.png) [@ryanscottlandry](https://forum.defold.com/u/ryanscottlandry)\
**Post date:** [June 24, 2019, 3:50am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/8 "2019-06-24T03:50:37Z")

</div>

This is what I’ve done a couple times. Works perfectly well. Calculate it out before hand, and pretty simple. If you have a tile-able (repeating) image and set it to update position at a percentage of camera position, basically making it scroll slower than your mid-ground tilemap, you will know based on total level size and image size how many sprites you need, OR, in code spawn/delete them end-to-end as needed, so there are never more than 2 (if the image is full screen width).

---

<div class="post-metadata">

**Author:** ![NeZvers](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/nezvers/32/16030_2.png) [@NeZvers](https://forum.defold.com/u/NeZvers)\
**Post date:** [June 24, 2019, 10:57am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/9 "2019-06-24T10:57:04Z")

</div>

At the moment separate object route for me would be easiest, but I’d like to get shader working which is not cooperating with me.  
this is supposed to be 10x tiling like @Pkeod showed in example (at the moment moving offset):

 ![Capture](https://forum-defold-uploads.b-cdn.net/original/3X/e/5/e5d2552fded2b2384e9a4bad12b267cffca6d281.png)  
they are not 1:1 blocks and they got weird pading.

---

<div class="post-metadata">

**Author:** ![Pawel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pawel/32/24623_2.png) [@Pawel](https://forum.defold.com/u/Pawel)\
**Post date:** [June 24, 2019, 6:39pm UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/10 "2019-06-24T18:39:05Z")

</div>

I’m creating parallax background as a collection with:

- background\_controller: with a bg\_controller.script
- number of other bg objects with: sprites and bg.script:

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/c/f/cfcf9930059f01defef499bcffa1e204ee01aec9.png)

bg\_controller.script:

```
go.property("move_vertical", false)

function init(self)
	BG_CTRL_URL = msg.url()
	self.bgs = {}
	self.speeds = {}
	self.pos_y = go.get_position().y
end

function update(self, dt)
	local cam_x = CAM_POS.x
	local cam_y = CAM_POS.y
	for _,bg in ipairs(self.bgs) do
		go.set(bg.id, "position.x", (1-(0.1*bg.no))*cam_x)
		if self.move_vertical then go.set(bg.id, "position.y", self.pos_y + 0.5*(1-(0.05*bg.no))*cam_y) end
		if bg.speed ~= 0 then
			local pos = go.get_position(bg.id).x
			if self.speeds[bg.no] == nil then self.speeds[bg.no] = 0 end
			self.speeds[bg.no] = self.speeds[bg.no] + bg.speed
			go.set(bg.id, "position.x", pos + self.speeds[bg.no])
		end
	end
end

function on_message(self, message_id, message, sender)
	if message_id == m.REGISTER then
		table.insert(self.bgs, {id = message.id, no = message.no, speed = message.speed} )
	end
end

function final(self)
	BG_CTRL_URL = nil
end

```

You can check move\_vertical property, if you want also vertical parallax effect.

bg.script:

```
go.property("no", 0)
go.property("speed", 0)

local m = require "messages" -- module with available messages, for convenience and pre-hashing

function init(self)
	assert(self.no ~= 0, "Provide no of bg")
	if self.no < 10 then 
		timer.delay(0.1, false, function()
			msg.post(BG_CTRL_URL, m.REGISTER, {id = go.get_id(), no = self.no, speed = self.speed} )
		end)
	end
end

```

where `m.REGISTER` is:

```
hash("register")

```

I do specify in each bg properties:

- No - is my arbitrary number of layer - closer to 0 are far layers, and closer to 10 are slower, closer layers (10 is a static layer - not moving)
- Speed - it is used for some constantly floating layers like clouds

All you need to do for this collection to work is to constantly save camera’s (or just hero’s) position in this global variable - **CAM\_POS**

You can add as many different layers as you want 😉

---

<div class="post-metadata">

**Author:** ![NeZvers](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/nezvers/32/16030_2.png) [@NeZvers](https://forum.defold.com/u/NeZvers)\
**Post date:** [June 25, 2019, 8:45am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/11 "2019-06-25T08:45:13Z")

</div>

Since several people told me that Defold get imprecise positioning when moving the camera far from 0,0, so I’m playing it safe and move world instead (just like in my [example of TrueTileCollision](https://github.com/nezvers/DefoldPublicExamples/tree/master/TrueTileCollision_example)). I have a bit simpler solution in my head for moving multiple sprites for a background but I wanted to get a more elegant approach for that.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [June 25, 2019, 10:35am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/12 "2019-06-25T10:35:41Z")

</div>

> [@NeZvers](#):
>
> imprecise positioning when moving the camera far from 0,0

This is not unique to Defold it’s every game engine because of the way computer numbers work. Most major games move the world around the player to solve this common problem.

---

<div class="post-metadata">

**Author:** ![NeZvers](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/nezvers/32/16030_2.png) [@NeZvers](https://forum.defold.com/u/NeZvers)\
**Post date:** [June 25, 2019, 10:38am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/13 "2019-06-25T10:38:23Z")

</div>

It doesn’t change the fact that using Defold developer has to do the managing that other engines do for developer (same for tiled background).

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [June 25, 2019, 10:52am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/14 "2019-06-25T10:52:49Z")

</div>

Still, they are things you learn to do with any engine. Even Unity or Unreal.

A well designed builtin tiled component would be cool and useful. Not sure if there is a feature request for that.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [June 25, 2019, 11:21am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/15 "2019-06-25T11:21:23Z")

</div>

> [@NeZvers](#):
>
> Since several people told me that Defold get imprecise positioning when moving the camera far from 0,0,

This is no longer as much of a problem as it used to be. In the last release (1.2.156) we did the following:

- `#3128` - **Changed** : Changed precision for the position value in shaders to `highp` .

This will very likely remove the problem for most games, except maybe infinite runners and huge open worlds.

---

<div class="post-metadata">

**Author:** ![NeZvers](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/nezvers/32/16030_2.png) [@NeZvers](https://forum.defold.com/u/NeZvers)\
**Post date:** [June 25, 2019, 11:25am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/16 "2019-06-25T11:25:57Z")

</div>

Have you measured distance from world origin point when first deformation happen?

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [June 25, 2019, 11:28am UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/17 "2019-06-25T11:28:30Z")

</div>

It is up to each developer and application.

A good suggestions is to read up on what [floating point precision](https://forum.defold.com/t/floating-point-precision/11247) actually is and how it manifests itself. It’s a vital thing that is recurring in all engines.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [June 25, 2019, 12:56pm UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/18 "2019-06-25T12:56:27Z")

</div>

And also this post [OpenGL ES shader precision modifiers (lowp, mediump, highp)](https://forum.defold.com/t/opengl-es-shader-precision-modifiers-lowp-mediump-highp/52368)

---

<div class="post-metadata">

**Author:** ![Csaba\_Nagy](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/csaba_nagy/32/33971_2.png) [@Csaba\_Nagy](https://forum.defold.com/u/Csaba_Nagy)\
**Post date:** [January 5, 2024, 2:39pm UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/19 "2024-01-05T14:39:01Z")

</div>

Dear Pawel,

please help me! I don’t understand this code: “m.REGISTER is hash(“register”)”…how and where can I declarate this “m”?  
I’m sorry but I’m new in Defold and Lua!!

---

<div class="post-metadata">

**Author:** ![iotaHum](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/i/977dab/32.png) [@iotaHum](https://forum.defold.com/u/iotaHum)\
**Post date:** [January 5, 2024, 3:19pm UTC](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753/20 "2024-01-05T15:19:20Z")

</div>

This relates to Lua modules:

> **[Lua modules in Defold](https://defold.com/manuals/modules/?q=require)**
>
> Lua modules allow you to structure your project and create reusable library code. This manual explains how to do that in Defold.

[Next page](https://forum.defold.com/t/how-to-get-scrolling-tiled-background-image/55753.md?page=2)