Wrapping Background: Vertical, Horizontal, and Diagonal

1

Index

Attached Files

The following files have been attached to this tutorial:

.png
.png
.png
.capx

tutwrapbackground.capx

Download now 237.76 KB

Stats

7,142 visits, 13,379 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.

Published on 16 Mar, 2015. Last updated 19 Feb, 2019

I tend to come across people asking about doing a wrapping background, a lot of times they are given an answer to achieving this but I personally feel there are two parts to answer this question. So I am going to go through both parts so that by the end of this tutorial you will have a wrapping background going either horizontal, vertical or diagonal :). Update a bare capx is included in case you don't want to make your own tile and use what I am using to follow along. There is a base tile object that also have the bullet behavior set for it and is already set with the Bad Tile. I will indicate which one to use throughout the tutorial.

VERTICAL

So lets fire up Construct 2 and get a bit of information.

What we're going to focus on next is the window information.

As you can see the width is (480,854) since we want to go up and down we are just going to worry about the height right now.

Now you remember I said there are two parts to answer this question right. ;) So the first part is to make sure that what you are trying to make a wrapping background is built for getting the job done. What I mean by that is that what your using is even tile-able. Because if you got it to repeat if its not tile-able it wouldn't be appealing to look at anyhow.

So to create the tile for the background I will be using Krita, an free open source paint program. I will go into why a little later on what made me chose this.

So remember I said the height was (854) so we might not want to make our image that size so let's divide it in half. Hmmmm...427 lets go a little smaller. 213.5 let's round that to 214. So our target size will be 214 for the tile we will create.

I highly recommend if anything for this one time use Krita just so you will be capable of following along. If you know how to make a tileable image you can just skip forward :).

So remember our target size for this project is 214x214. Type that in the Image Size area and then create. So we are just going to make a night sky. Choose your sky color and fill the canvas. Then choose white to place the stars anywhere you please. Don't worry about it being tile-able right now. We want to purposely make a bad tile to compare to one that was meant for being tile-able. So you can have something like this...

So let's export this to "TileBad.png" and then fire up C2. (Keep Krita open!) If you are starting from scracth and not the supplied .capx file right click and select "Insert New Object". In the object window choose Tiled Background.

Click on the viewport to lay the object. Now the window pops up so that we can load in the tile we just created.

But we won't worry about that right now. Let's get the object in place and set it to wrap. So let's set the x to 0 and we are going to set the Y to (negative) half the window width. Which would be -497.

Once done your project should look like this.

PHEW!! Give yourself a pat on the back you are doing a great job. How about grabbing yourself a cup of water before continuing...ready? Okay let's continue on.

So now that we have that setup lets move over to the EventSheet ...oops almost forgot!! We need to give the "TiledBackground" the bullet behavior. It should be setup like this.

Okay now we can move on to the Event Sheet. If your using the capx file place your event underneath the Vertical Grouping. After that the first thing we going to do is set the angle of the object at the "Start of the Layout". So System->on Start of Layout then add action. TiledBackground->Set Angle of Motion->90. Now the next event we going to make is TileBackground.Y is great than or equal to 0. The action for this is to set the TileBackground.Y back to -427. Okay save everything and run it to see how it look.

Maybe your tile could be passable or you might notice a lot of seams. But you will notice one thing it is continuing on and on and on and on...You get the picture.

So now getting to why I chose Krita to make the tile. Go back over to the tile in Krita we going to make it absolutely tile-able by going and clicking on View->Wrap Around Mode. Now your canvas becomes an infinite repeat of what you previously made.

So now start laying stars anywhere to the point you can't see where the tile start or end. Don't worry about where you draw Krita will automatically update the original.

Once you are done you can go back to View and turn the Wrap Around Mode off.

Here is my updated tile.

Now export this tile and call it "TileGood.png". Back in C2 we will update the TiledBackground with the Good tile. So run it again and this time around if you did it correctly you can't tell where the tile begins or ends and you wouldn't notice when its jumping back to its spot. (Now for the ones using the .capx you will have to switch out the objects and place the GoodTile1 into the project window and fix the Event sheet to work with the new placed object.)

So by using the height information and making the tile conform to that of the height we was able to make a vertical tile-able tile that works and not have that jumping effect.

COOL DOWN!! Phew that was alot!! If you got that working you deserve a piece of pie. Go run and get youself one. I will wait.

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • The text states that we will check if ..

    "TileBackground.Y is great than or equal to 0."

    but the Event screenshot shows Y = 0 and not Y >= 0. Y is unlikely to reach exactly zero and the wrapping therefore won't work. Ensure that you use "greater than or equal to".

  • Minha rolagem lateral funcionou, mas só não entendi porque no início tem que colocar metade da imagem pra fora e depois esticar. Se for algo diferente disso fica estranho. Por que?