How to Make a Scroll and a Parallax Scroll in 2D Games
This tutorial, how to make a scroll and a parallax scroll in 2D games, addressed to users with basic knowledge of WiMi5, is divided into 8 chapters in which we will learn a very simple case of setting up an automatic finite scroll to a scroll with infinite parallax depending on the player’s actions.
For those who don’t know, in 2D games, parallax is a scroll technique which creates the illusion of depth and is based on the fact that elements in the background move more slowly than those in the foreground. Based on the number of backgrounds, there could be double parallax, triple parallax etc.…
Example 1. Simple, Finite, Automatic Scroll
To better follow this chapter, we recommend you clone the “HowToMakeScroll_1” project in the WiMi5 Dashboard.
This scroll is simple because it’s only going to have one element; it’s finite because we’re going to stop it when we get to the end of the element; and it’s automatic because once it starts, it won’t stop until it’s finished.
An example of a game in which this type of scroll could be used is a ship game with a horizontal scroll in which the ship only moves up or down, while the horizontal movement is actually simulated by moving the background of the scene horizontally, a lone background. Also, each level would be won by reaching the end of that background.
So to show this type of scroll, we’re going to go straight to the point, and instead of creating a game full of ships (oh please no! ;-) ), we’re going to run a scene horizontally from left to right, stopping once we reach the end:
Step 1. Setting Up the Scene
This is a simple scene that has a lone background, which will be the sky from the game ‘Baku’s Legend’. Also, we’ve added a button which will serve to activate the scroll.
The background is situated at 0,0, and it has a width of 1392 pixels. Given that we’re going to make the scroll horizontal, its height will have no influence on anything, so we don’t need to know it.
On the other hand, the screen resolution defined for this example is 1024×576, so the display window will need to have that resolution and, we’re just going to see, in width, 1024 pixels for the scene.
Therefore, what we need to do to get the scrolling effect is move our background leftwards until the right end of the background coincides with the right edge of the display window.
To see this more clearly, we’re going to simplify it into 2 images. So, we’ll start from the place where the borders of the complete scene, represented by the blue rectangle, and the display window, represented by the black rectangle, coincide on the left.
And we’ll finish with this other place, where the borders of the complete scene and the display window coincide on the right.
From these images, we can deduce that what we need to do is move our background from its starting position at value 0 on the x-axis to a final position with a value of -368 on the x-axis. The -368 figure comes from subtracting 1392-1024, that is, from subtracting the width of the display window (1024) from the width of the complete scene (1392).
Step 2. Creating Scripts
Performing this movement with WiMi5 is really easy thanks to the MoveFromTo blackbox that we can find in the Animation section.
This is a screengrab of the script that performs the scrolling movement in the clonable HowToMakeScroll_1 project; specifically, the script called Scroll which is in turn found inside the Tutorial Script.
When this Script is activated, first we situate the background, in this case, the sky, in its initial position, which is x=0, y=0. To do this, we use the ActionOnParam blackbox, whose Do input we’ve connected to an input connector we’ll call Start. We set the Target parameter as a bitmap of the sky, we select the setPosition operation, and we set the position as a Vector2D with the values (0,0).
Tip: if we double click on the “position” parameter, it will be assigned a Vector2D-type parameter automatically.
Once the background’s initial position is established, we use the MoveFromTo blackbox to move it. In the example, we’re going to give it a duration of five seconds. We don’t want the movement to repeat, so we don’t assign any value to the Loop parameter, whose default value is false.
Tip: if you select a parameter that’s not assigned in a blackbox, on the properties sidebar, you can see its default value, if it has one.
Finally, we assign the starting and ending positions, and we connect the blackbox’s Done output to start the position with the blackbox’s Start to move. We have added an output connector called Arrived so that this Script notifies the outside that the movement has been completed, and we have connected the MoveFromTo blackbox’s Arrived output, which is what will trigger this output when the movement is complete.
Tip: Given that the “position” parameter of the “ActionOnParam” blackbox and the “fromPosition” parameter of the “MoveFromTo” blackbox have the same value, only one shared parameter needs to be used. To do this, the “position” parameter can be dragged out, whether or not it’s assigned, to the “fromPosition” parameter, and that way the same parameter will be sued for both blackboxes. But be careful: it’s the same parameter, so if its value is changed, it will affect other blackboxes.
And it’s that easy! :-) When this Script’s Start is triggered, the sky will situate itself at x=0, y=0 and after, it will slide at a constant rate for five seconds in order to arrive at its final position.
In the next chapter, we’ll do the same, but making the scrolling movement “infinite”.10/10/2014 / No Comments
- How to Integrate a Game into Your Website
- How to integrate a WiMi5 game in Moodle
- How to create texts from sprites using a SpriteText Blackbox
- How to clone a project
- New ways of interacting in wimi5
- How to easily adapt WiMi5 game templates to create your own games
- How to monetize your games using Virtual Goods
- How to use the CodeRunner blackbox
- How to use Game Session Storage
- How to Use Rankings
- How to publish your HTML5 game to other game platforms
- How to publish your HTML5 game on the Google Chrome Web Store
- How to set up game levels based on data from a text file: using the ParamMap.
- How to create a scoreboard for lives, time, and points
- How to Make a Scroll and a Parallax Scroll in 2D Games
- How to create collisions
- How to debug in WiMi5