Create Continuously Scrolling Tiled Backgrounds (Textures)

1

Index

Stats

13,434 visits, 26,152 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Brief Outline

This tutorial explains how to create 'continuous scrolling tiled backgrounds objects' (Scrolling textures). There are three main types which are considered here; they are those scrolling in one direction, four directions and rotating tiled backgrounds. The event coding includes both non-family and family objects.

And example has been uploaded to the Scirra arcade which can be found here:

.

Click Here to view Demonstration

.

.Capx file

The .capx file can be found and downloaded from Here!

.

.

.

Contents:

- Video Tutorial

- Scrolling in One Direction

- Scrolling in Four Directions

- Rotating Tiles/Textures

.

Video Tutorial

.

-View the video here.

.

Create The Texture/Tiles

For this tutorial create at least two texture tiles. Size them to sizes 'to the power of two'. I.e. 16x16, 32x32, 64x64, 128x128, 256x256, 512x512 1024x1024 etc... And idealy create their edges to continues flow from one edge to the other (repeating pattern).

.

The textures I chose for this tutorial are as followed:

.

.

Scrolling in One Direction

This will create a texture that scrolls downward each tick at a selected distance (1 or 2px etc..). It does not include familes and so would not be good for multiple scrolling tiled backgrounds.

Tutorial

- Open up Construct 2

- Create a new project

- Create a new object (Tiled Background)

- Upload the desired textured/tiled image

- Make sure the image is scaled to an appropriate size (Power of two, 256, 512 etc...).

- Rename the Tiled Background object to what you desire.

- Enture their hotspot is set to top-left

- Open up the events editor.

- Enter the code below

Note: I created two tiled background objects (testures) here, labelling them 'Arrows_Small', and 'Arrows_Large'.

.

.

Explaination: The two textures start at their size (in pixels) above the point (0, 0) and move downward. When their hotspot crosses the point Y=0 the texture is repositioned to (0, -256). There it can be continuous.

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!