The Processing IDE continues to impress me with its visual capabilities and intuitive functions. In fact, it surprised me to find that I could program a side-scroller – a hitherto complex interface – within 90 lines of code, and decided to write about it.
The term ‘side-scroller’ now encompasses all videogames that utilize a side-view angle of the camera in the gameplay. The common element in all of these games is a display that scrolls in response to the player’s input.
This month’s discussion is dedicated to BikeRoller – an endlessly scrolling sketch. Here, the player controls the biker’s direction (along with the background behind it) using the LEFT and RIGHT arrow keys.
A brief history
Side-scrollers have been in existence since the early 1970s, with Speed Race(1974) being the first game to use a scrolling display, albeit a vertical one. This technological feat was achieved Tomohiro Nishikado, the game’s designer, who also incorporated sprites and collision detection in this racing arcade game.
The most iconic game title in this genre is Super Mario Bros., a platformer game that was developed and published by Nintendo for the NES(Nintendo Entertainment System) platform. Here, the player controls the protagonist Mario, who must race through all the stages in Mushroom Kingdom to save Princess Peach(US version: Princess Toadstool), while smashing bricks, collecting coins and power-ups, and defeating the antagonist Goombas(mushrooms) and Koopa Troopas(turtles).
This game has laid the foundation for subsequent(as well as modern) videogames, whether side-scrolling or not, by incorporating secret levels to discover, power-ups to collect, and enemies to defeat – all within a fixed time frame and limited number of lives.
While side-scrollers have given way to FPSes(first person shooters) in the past two decades, they continue to be popular on smart-phones and other handheld devices.
Scrolling the display
The display may be scrolled in several different ways – horizontally, vertically, or a combination of both. In this sketch, the background elements(the road, the river, and the sky) move in response to the arrow keys pressed by the user. Hence, the biker(controlled by the player) appears to move due to the foreground and background elements moving behind it.
In order to give the player a sense of depth, a parallax effect has been created by moving foreground and background elements at different speeds, giving a sense of depth.
Though the sketch is quite basic, it helps to illustrate the basic working of a side-scroller. Currently using only LEFT and RIGHT arrow keys as its input, its scope may be expanded with more keyboard and mouse controls.
As can be seen from the algorithm, three inputs are required to execute the scrolling loop:
1. img – an image file of the desired element,
2. step – an increment value by which the element is moved or scrolled, and
3. keyCode – the value of the pressed key.
Apart from these, two more integers are declared within this function, which are as follows:
1. x – the x-position of the element on the screen. It is used in the incrementing process (updating the rendered element’s position)
2. dir – used to store either the value of -1 or 1, depending on the value of keyCode.
In the first run, the scrolling function will render the element by positioning one copy of it at (0,0) , (-imgWd, 0) and (imgWd, 0).[Note: imgWd is the pixel width of the element.]
After this, x is incremented by a value of -dir*step, followed by the value of dir being checked.
From here on, depending upon the conditions mentioned in the algorithm, the flow of control will move either towards termination of the loop, or continuation of the same set of steps detailed above.
Hopefully, you have now learnt a little more about the technicalities of a scrolling background.
1. BikeRoller; the project on GitHub:
2. Side Scrollers: A Planar Odyssey; a historical narrative:
3. Forerunners : The History Of The PC Side-Scroller; a documentary:
4. Endless Runner Games: Evolution and Future; an article: