🖼️ Tiling, Offset & Texture Scroll System

The engine allows you to control the repetition and offset of textures on any object with an assigned image. These features are useful for creating infinite floors, animated backgrounds or scrolling effects such as water or clouds.

🔹 These properties are configured directly in the Inspector inside the Texture Settings section.
🔹 They can be freely adjusted, and their effect is visible at runtime.
🔹 Fully compatible with all browsers and do not depend on experimental features.

⚙️ Main properties

tiledX → Number of horizontal repetitions of the texture inside the object.
tiledY → Number of vertical repetitions.
offsetX → Horizontal offset of the pattern (0–1 equals 0–100% of one tile).
offsetY → Vertical offset.
scrollSpeedX → Automatic horizontal scroll speed (tiles per second).
scrollSpeedY → Automatic vertical scroll speed.

🧩 How it works

The visible area of the object is internally divided into virtual tiles according to the values of tiledX and tiledY. Each tile shows a scaled copy of the texture. offset lets you move the pattern inside the area without affecting the object’s position.

// Visual example (tiledX = 2, tiledY = 1, offsetX = 0.5)
|----|----|
| TX | TX | ← The texture is repeated twice horizontally
↑ shifted half a texture (offsetX = 0.5)

💡 Usage example

// Repeating floor that scrolls automatically
function Start(obj) {
  obj.tiledX = 4;
  obj.tiledY = 1;
  obj.scrollSpeedX = 0.3; // moves 0.3 tiles/second
}

function Update(obj, dt) {
  // automatic scroll based on speed
  obj.offsetX += obj.scrollSpeedX * dt;
}

🔸 The engine automatically normalizes offset values.
🔸 If offsetX or offsetY exceed 1 or -1, they wrap using modulo 1.
🔸 This allows infinite scrolling with no precision loss.

🎮 Inspector Properties

In the right panel of the editor, objects with images display the following controls inside Texture Settings:

Tiling X / Y: control the number of repetitions.
Offset X / Y: adjust the initial pattern position.
Scroll Speed X / Y: define the automatic scroll speed.

Positive values scroll to the right / down; negative values scroll to the left / up.

⚡ Performance & advantages

The Tiling, Offset and Scroll system not only makes it easy to create visual effects such as moving backgrounds or infinite floors: it also provides a significant performance improvement compared to the traditional method.

One object, many repetitions

Previously, to create a long wall or large floor, you needed to instantiate dozens of objects with the same texture, resulting in more drawImage() calls, more collisions and a heavier objects[] list.

With this system, a single object internally draws the repeated texture as many times as needed:

// 40x4 block wall using a single object
obj.image = "brick.png";
obj.tiledX = 40;
obj.tiledY = 4;

This way, a 1600 “block” wall is rendered with just one object. The engine repeats the texture inside the area without creating extra entities.

Direct advantages

🔹 Fewer active objects → less memory, fewer calculations, fewer collisions.
🔹 Fewer draw calls → one object can cover huge areas.
🔹 Scalable performance → ideal for large backgrounds or extended floors.

🚀 Advanced example: infinite background

// Script: background_scroll.js
function Start(obj) {
  obj.tiledX = 3;
  obj.tiledY = 1;
  obj.scrollSpeedX = -0.2; // scroll to the left
}

function Update(obj, dt) {
  obj.offsetX += obj.scrollSpeedX * dt;
}

💡 Tip: combine scrollSpeed with different tiling layers (e.g., clouds, mountains, ground) to create a parallax effect without moving the camera.

📌 Summary

✅ tiledX / tiledY: horizontal and vertical repetitions.
✅ offsetX / offsetY: pattern offset.
✅ scrollSpeedX / scrollSpeedY: automatic texture scrolling.
🧱 Ideal for backgrounds, floors, water, walls or infinite scrolling effects.
🚀 Significant performance boost by reducing object count.