GoalOne 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 resultGame : Red Cabriolet
To implement such I've used cyclic background add parallax effect.
Step by step
Cyclic backgroundExample : 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
UsageBy 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 Widthto 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.