Cyclic background / On Darlingjs

Goal

One of the issue i got during developing of the 2D game Red Cabriolet was creation of landscape with taste of 3D environment. In other words:

• the landscape mast be unlimited;
• placed behind the main stage;
• and gives feeling of 3D space in 2D;

Here is result

Game : Red Cabriolet

To implement such I've used cyclic background add parallax effect.

Step by step

Cyclic background

Example : Infinity cyclic background

Start with cyclic background. The main idea of it that we have finite pool of entities that placed in some pattern and when an entity goes out of the viewport we should place it to opposite side of view port.
Something like that

To implement such behaviour on darlingjs we need: one component to mark entity that should be cyclic and one system to implement cyclic behaviour.
Here is implementation (You really don't need to implement it to use cyclic, it has placed here to show principles of implementation of such behaviour in darlingjs):

fork on gist

Usage

By the way cyclic module has already placed in native darlingjs modules and you don't need to implement it. So all you need it's easily load module, set dependency and add it to the world.
To apply cyclic behaviour to entity just add component to needed entity and set pattern-width.

fork on gist

Pattern Width

to use cyclic background you also need to define pattern width or/and height. Hint: to right cycling it's better to use pattern width/height great then viewport width/height.

In next tutorial I'll describe implementation of parallax effect in darlingjs.

• subscribe to darlingjs G+ Group;
• subscribe my twitter;
• or this blog;

Stay tuned! See you :)