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: https://www.noob-programmer.com/pixelart_example/

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+
}

Source: https://builtvisible.com/image-scaling-in-css/

Source: https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look

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

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
    if(timer>spawnTime){
      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
    Instantiate(apple,screenPosition,Quaternion.identity);
  }

}

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.