Parallax effect with Krita 4 and Phaser 3

Today we will learn how to use Krita and Phaser to make a nice Parallax effect, I will not teach you how to properly draw with Krita, because … I’m not a very good designer but I will give you some useful hint for our need !

Prerequisite

Krita

Krita is a free and open source raster graphics editor that I like to use while learning digital painting !

Krita

Phaser

Phaser is also a free and open source tools, a JS framework, for creating game using Canvas !

Phaser — A fast, fun and free open source HTML5 game framework

A Web Server

Phaser need to be hosted to load resources like images, while developping, I will use a simple HTTP server with Python.

python3 -m http.server

If you dont know what is Python you can consult his documentation :

Welcome to Python.org

The drawing

I use “Environments 2.0”, a nice set of brushes available on DeviantArt.

I drew this artwork with a foreground frame, I recommand to set your document dimensions same as your canvas in Phaser, for example 1175x831 in my side.

While drawing, the most important thing is to properly separate your layers to later be able to animate them separately. Here I have 5 layers:

“forest foreground”, “tree”, “forest background”, “cloud” and “sky” (my background, which can potentially be ignored here to be defined in Phaser)

My Artwork from Krita with 6 layers

I have made an extra layer between my foreground and my trees : “seamless border”, a simple square frame that I use while drawing my layers that will be moving, like my clouds, for creating infinitely tilable textures with the “Wraparound Tool” with no ugly “cut” behaviour :

Type “W” in Krita to active the “Wraparound Tool”

When your artwork is ready, save it first and you can finally export your layers ! Go to “Tools”>“Scripts”>“Export layers”. You can choose the folder and what to do with visible/invisible layers (I ignore the seamless border during the export). The output image names are the layer names. Export in PNG for transparency !

The Code

Once we have our beautiful landscape, we can start creating our Web application !

Application Structure

- parallax/
  - static/
    - images/
      - all images
    - main.js
    - style.css
  - index.html

For this article I will import Phaser using his CDN, I’ve also created a simple css file for defining the min-height and background of my body.

A simple index.html template

// content of style.css
body {
  min-height: 100vh;
  background-color: #3a0f54; // same color as my artwork foreground
}

Phaser

Inside our main.js file, We will create our Scene and create a Phaser Game that will load it. A Scene has 3 primary methods :

• preload(): Here we can load all resources thats will be used inside our game
• create(): Here we will define and display our entities, based on resources loaded during the preload
• update(): Finally, we can add our multiple scrolling effect !

A simple ES6 Phaser starter

So let’s start by uploading our images ! Inside the preload() method we use the initializer :

this.load.image(key, pathToFile);

this.load.image('sky', 'static/images/sky.png';)

The key argument allow us to easily find and use our images within our application.

Note that we can use a setBaseUrl() method to define the default directory, or URL, from where we load our images :

this.load.setBaseUrl('static/images');
this.load.image('sky', 'sky.png');
this.load.image('cloud', 'cloud.png');

Remember that by default, the names of our images are the same as the names of our layers in Krita! You can rename it for convenience …

So, we load all of our images in preload() and then display them on our Canvas using the create() method :

// static sky
this.add.image(
  0, // position x in the Scene
  0, // position y in the Scene
  'sky' // image key to display
).setOrigin(0, 0);
// moving cloud
this.cloud = this.add.tileSprite(
  0, 
  0, 
  this.game.config.width, //size to display, same as our Scene
  this.game.config.height, 
  'cloud'
).setOrigin(0, 0);

The setOrigin() method allow us to define the anchor of the image, by default this center (0.5, 0.5). Here we attach the top-left of the image to the top-left of the Scene. I have loaded my “cloud” into a TileSprite and save it into a variable for be able to move him, the layers must be defined from the background to the foreground ! The result :

Static background and sky

That’s a start ! Finally, let’s take a look at the update() method, we juste have to use our variable this.cloud and redifine this position, by default Phaser update the rendering once per frame and I want to move him horizontaly, so this x-axis, from right to left:

this.cloud.tilePositionX += 0.15;

Greater is this value, faster it will be moving ! Adjust according to your tastes but remember that for a successful effect, the background must be slower than the foreground.

If it is not already done, start your web server, for my part with Python, at the root of my project : python3 -m http.server

I have increased the tilePosition to 0.55 for the record

Repeat the steps for each layer and we get our parallax!

The final code

Enjoy !

To conclude, I would simply say that the rendering of your parallax will mainly depend on the time spent refined the drawing and the number of the layers !

The source code and templates are available on my Github :

https://github.com/ezamlinux/parallax