Rendering Crisp Pixelart in Phaser (2017)

I had this problem while building my pixelart game in Phaser. My Pixelart was blurry. It didn’t looked nice. I was searching the web for an answer but i didn’t found one. Many of the tutorials were outdated so i decided to write my solution here.

You can find the working example here:

Example above works for Chrome and Mozilla Firefox.

Solution includes editing CSS and one line in phaser script.

Here is the CSS which you need to apply to your html element:

body {
  filter: none;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;

Used it on body element.

The other line is the Phaser script:
var game = new Phaser.Game(200, 150, Phaser.AUTO, 'gameContainer', {
      preload: preload,
      create: create,
      update: update
    }, null, false, false);

The last parameter (“false”) is for antialiasing. It needs to be set to false.

What about other browsers? What do i need to change in order to get crispy Pixelart? Check this solution:

body {
  -ms-interpolation-mode: nearest-neighbor; // IE 7+ (non-standard property)
  image-rendering: -webkit-optimize-contrast; // Safari 6, UC Browser 9.9
  image-rendering: -webkit-crisp-edges; // Safari 7+
  image-rendering: -moz-crisp-edges; // Firefox 3.6+
  image-rendering: -o-crisp-edges; // Opera 12
  image-rendering: pixelated; // Chrome 41+ and Opera 26+



How to create a simple countdown Timer in Unity

How to make a timer (countdown Clock from 60) as you see in the GIF below:

First you need to create a new Object on the canvas. Choose from the Menu:

GameObject -> UI ->Text

Than remove the “New Text” from the Inspector where the window is labeled “Text”. If you want you can change the size of the font in Inspector by changing the value “Font Size”.

To your object in Unity add a new script called: “Countdown”.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System.Threading;

public class CountDown : MonoBehaviour {

  public int timeLeft = 60; //Seconds Overall
  public Text countdown; //UI Text Object

  void Start () {
    Time.timeScale = 1; //Just making sure that the timeScale is right

  void Update () {
    countdown.text = ("" + timeLeft); //Showing the Score on the Canvas

  //Simple Coroutine
  IEnumerator LoseTime()
    while (true) {
      yield return new WaitForSeconds (1);


Don’t forget to add the Text object to our script too!


You can change the Font too. In the gif example we used different one, than the standard Arial font.

Other tutorials in the series:

How to make the objects fall in Unity

Making Objects Fall Random On The Screen in Unity

How to Speed Up (Increase Speed) Time in Unity

How to Speed Up (Increase Speed) Time in Unity

How to Increase Speed in your game?

This tutorial can be helpful if you want to create boosters which increase for example the character speed.

All you need to write if you want to increase the speed in your game is this one line of code:

Time.timeScale = 2f;

As you see the value is two, which means the speed will be doubled. You can use any other value. It depends on you how you want your game to react. But remember! The value can’t be lower than 1! If you use as value for example “0.5” the speed will decrease.

In my code it is upon the collision with the Red Timer object.

public float speedUp = 2.5f;

//public variable at the beginning of the code 

if (col.gameObject.tag == "SpeedUp") {
      Time.timeScale = speedUp;

If you want your Time effect last only for 5 seconds you can use Coroutines and function called WaitForSeconds(5f);

if (col.gameObject.tag == "SpeedUp") {
    StartCoroutine( FiveSecondsCooldown());

We just simply call this function using Coroutine.

public IEnumerator FiveSecondsCooldown() {
  Time.timeScale = 2.5f;
  yield return new WaitForSeconds(5f); // 
  Time.timeScale = 1;

As you see. The Time.timeScale value has changed to 2.5, than after 5 seconds went back to normal value, which is 1.

Other tutorials in the series:

How to make the objects fall in Unity

Making Objects Fall Random On The Screen in Unity

How to make the objects fall in Unity

There are a lot of ways how to make the objects fall in Unity. In our game we are using two of them.

Why did the left timer hit the ground first? After all the red watch was a little higher than the blue one. Thanks to Physics! And artificial Gravitational pull.

While the left watch was taking on the speed and falling faster in every millisecond (for example like cars do) the right one had a steady linear falling speed. You can use this in a lot of ways.

Why don’t we stick with one falling type? Because we wanted to differentiate the two falling types for different objects.

If you want to use the right way of objects falling (Blue Timer) you can use this script below and assign it to the object.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TimerFall : MonoBehaviour {

  public float fallSpeed = 40.0f;      //How fast should the object fall

  // Update is called once per frame
  void Update () {

      transform.Translate(Vector3.down * fallSpeed * Time.deltaTime, Space.World);

As you see. It’s not much. In fact we need only to write two lines of code. Variable initialization which is responsible for the speed of falling and the transform.Translate function. What does the function do? It just changes the position of an object in the Scene. That’s all.

In the left example (Red Timer) we don’t any code at all!

You just need to use build-in function called Rigidbody 2D. On the object “Add Component” => Physics 2D => Rigidbody 2D

What kind of numbers (variables) do i need to put there to make the physics work? It depends on what do you want to achieve. I am focusing most of the time on “Mass” and Gravity Scale. Sometimes i change the Linear Drag and Angular drag. But not so often.

Here are the variables used in the example above:

Well that’s all you need to know. Thanks for reading.

Making Objects Fall Random On The Screen in Unity

How to spawn object on the screen in Unity Randomly?

I am currently developing with a friend o mine a game. It’s called Badger Adventures. It’s a very simple game in which you are collecting Apples with an Badger.

So… how do you spawn apples randomly?

Actually, if you are an experienced user than you just need to check out the Random.range function which is built in Unity3d Library.


Otherwise check out my Script. It’s called AppleSpawn and well… it is spawning Apples.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class AppleSpawn : MonoBehaviour {

  public GameObject apple;			// Apple Object in Scene (Sprite)
  public GameObject badApple;			// Bad Apple Object in Scene (Sprite)

  public float spawnTime = 2f;            // How long between each spawn.
  public float fallSpeed = 40.0f;		//The speed of falling Apples

  private float timer = 0; //counting timer, reset after calling SpawnRandom() function
  private int randomNumber; 			//variable for storage of an random Number
  void Update () {

    timer += Time.deltaTime;   // Timer Counter
      SpawnRandom(); 			//Calling method SpawnRandom()
      timer = 0;				//Reseting timer to 0


  public void SpawnRandom()
      //Creating random Vector3 position
    Vector3 screenPosition = Camera.main.ScreenToWorldPoint(new Vector3(Random.Range(0,Screen.width), Random.Range(600 ,Screen.height), Camera.main.farClipPlane/2));

    //Instantiation of the Apple Object


In the update function there is an if statement because i wanted to restrict the number of spawned Apples. If i want to create more apples i can change the variable in the public function from 2 to 0.2. For the time counting i used Time.deltaTime because this function is frame rate independent.

SpawnRandom() method is creating an random Vector3 value on the top of the screen depending on the Screen Size (Camera) Width and Height.

If we wanted for example to place the spawned elements little lower on the screen we can change the number from 600 to 400. In your example the variable can be a little different depending on the screen size you are developing.

Instatiate just spawns the object on the scene.

That’s all. Thanks for Reading.