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.

W jaki sposób samoucy znajdują pracę jako programiści?

W jaki sposób samoucy znajdują pracę jako programiści?

Takie pytanie pojawiło się w serwisie Quora

Mam 17 lat i programuję od 14 roku życia. Głównie koncentruje się na Javie i udało mi się zdobyć piątkę w ocenie końcowej z Informatyki. Jestem całkiem biegły w używaniu Javy (składnia, OOP, GUI/JFrame itd.) i nawet całkiem dobrze radzę sobie z HTML5 oraz CSS3. Jednakże wydaje mi się, że wciąż zbyt wiele mi brakuje, aby się lepiej prezentować na rynku pracy (np: Nie wiem jak działają bazy danych i które z nich powinienem używać). Z tego względu ciekawi mnie jak inni się tego wszystkiego uczą. Zamierzam w przyszłości iść na Informatykę jednak zaczyna mnie irytować fakt, że aby ktokolwiek chciał mnie zatrudnić to muszę iść na studia.  Czy są jakieś kursy, bądź rzeczy, które mógłbym robić, aby polepszyć moją sytuację?


Wydaje mi się, że źle do tego podchodzisz. Masz nadzieję, że aby czegoś się nauczyć to musisz koniecznie przejść przez jakieś kursy, gdzie ktoś cię ciebie czegoś nauczy. A samoucy właściwie robią coś zupełnie innego.

Programista samouk ma właściwie bardzo wiele wspólnego z osobą, która sama nauczyła się grać na gitarze. Nie wiem czy kiedykolwiek grałeś na gitarze, więc wytłumaczę ci jak osoba, która chcę się nauczyć grać na gitarze może podejść do nauki gry na tym instrumencie.

Po pierwsze, znajdują swój wzorzec. Jeżeli zamierzają nauczyć się grać na gitarze, to mają swojego idola(bądź idoli) i prawdopodobnie będzie to jakiś znany gitarzysta, którego chętnie słuchają. Więc starają się być tak jak on. Po tym fakcie decydują się że “Ja też mogę być gitarzystą!”. Więc idą do lokalnego sklepu muzycznego(albo serwisu aukcyjnego) i kupują używaną gitarę (bo są tańsze i nie robi to na początku zbytniej różnicy).



Następnie jedna z dwóch rzeczy się wydarzy.

Albo ta osoba zabierze się za książkę typu “Gitara dla bystrzaków”, bądź wejdzie na YouTube i zacznie się uczyć jak grać ich ulubione piosenki. Z reguły ci którzy grają swoje ulubione piosenki radzą sobie lepiej z grą na gitarze.

Tak więc, jeżeli młody adept jest zmotywowany, aby nauczyć się konkretnej piosenki to będzie oglądał filmy instruktażowe, drukował tabulatury, akordy i tak dalej i będzie starał się tą piosenkę odtworzyć na podstawie dostępnych mu materiałów.

Po wielu godzinach ćwiczeń, nauki akordów, solówek, sposobów kostkowania i tak dalej, będzie w stanie zagrać swoją własną wersję piosenki. Nie będzie ona dokładnie taka sama, ale wystarczająco dobra, aby zrobić wrażenie.

Następnie zacznie się uczyć kolejnej piosenki, która się mu podoba. Po drodze nauczy się schematów, technik i tak dalej nie zdając sobie nawet z tego sprawy, czym one faktycznie są. Będzie je stosować nie znając ich nazw i jak one w teorii faktycznie działają.

Po pewnym czasie gra na gitarze będzie po prostu “czymś naturalnym” i zabranie się za naukę nowej piosenki będzie powszechne i bezproblemowe. A “mowa” gitarowa będzie czymś czym może się porozumiewać tak jak ty, czy ja porozumiewamy się używając słów.

To wszystko się dzieje po tysiącach godzin ćwiczeń. Nawet grając kilka godzin dziennie, zabierze to wiele lat.

Ale… co to ma wspólnego z programistami samoukami?

Więc… tą rzeczą, która tworzy programistów samouków jest to, że oni budują rzeczy. Dużo rzeczy. Aby stać się świetnym programistą z cennymi umiejętnościami na rynku pracy, musisz budować rzeczy i pisać kod.

Chodzenie na zajęcia/kursy i nauka teorii jest świetnym pomysłem, ale wielu profesorów nie dała rady “wykodować” swojej drogi do pracy zawodowej. Nie byliby w stanie stworzyć użytecznej aplikacji, którą ktokolwiek chciałby używać, nawet jakby się starali.

To nie chodzi o to, że oni się na tym nie znają. Raczej o to, że  do umiejętności profesora należą badania naukowe i ich teoretyczne zrozumienie, a nie pisanie kodu i przynoszenie wartości dla klienta.



Widzisz różnicę?

Najlepsi programiści z którymi pracowałem stali się dobrzy ponieważ budowali rzeczy. Wiele rzeczy. Praktycznie… cały czas.

Na ten przykład, dzisiaj wszyscy używają WordPressa. Długo przed powstaniem WordPressa stworzyłem dla własnych celów 3, bądź 5 różnych Systemów Zarządzania Treścią (CMS) w PHP i MySQL. Tworzyłem gry. Tworzyłem aplikacje mobilne. Frameworki. Oraz aplikacjie SAAS.

Nikt mi za to nie płacił. Robiłem to dla zabawy, nauki, bądź z ciekawości.

Nie byłem na zajęciach od lat i nie wydaje mi się, że by pomogły mi one w mojej karierze. Jednakże, gdybym się zdecydował stworzyć własny język programowania, bądź system operacyjny od podszewki, to mogę się założyć że przy okazji nauczył bym się bardzo wielu ciekawych rzeczy.

Tak, prawdopodobnie bym mógł iść na zajęcia z tej dziedziny, ale nauczyłbym się o wiele więcej budując coś, robiąc błędy i naprawdę “doświadczając” tego wszystkiego, niż gdybym przeczytał książkę, bądź wysłuchał wykładu.

Więc moja rada da ci sporą przewagę od tych którzy tego nie robią…

Rozwiąż problem, który chcesz rozwiązać. Stwórz program, który chciałbyś, aby oprogramowanie robiło. Albo ktoś inny by chciał by oprogramowanie robiło. Pisz kod w tym kierunku każdego dnia. Noce, weekendy, codziennie. Nawet jeżeli spędzisz nad tym 15 minut, to będzie to wystarczająca ilość czasu.



Aż w końcu będziesz mieć coś co działa i jest całkiem przyzwoite.

A potem robisz to znowu. Budujesz coś innego. Twórz, twórz, twórz i jeszcze raz twórz. Stawiaj sobie wyzwania, aby pomóc sobie w osiągnięciu tych dziesiątek tysięcy godzin.

W miarę tworzenia staraj się  zbierać swoje prace i publikuj je jako portfolio na swojej stronie. Za każdym razem, gdy ktoś skończysz wrzuć to na social media, Reddit, Twitter cokolwiek. Napisz na ten temat wpis na blogu.

Masz 17 lat… do czasu ukończenia 20 bez problemu zebrałbyś 2000+ godzin i około 10-20 projektów w portfolio. Nauczyłbyś się również masę rzeczy, których nie nauczą się ludzie chodzący na lekcje czy wykłady.

Co więcej, pokażesz że umiesz pisać kod, rozwiązywać problemy i tworzyć coś pożytecznego. To jest cenne. To jest coś czego szukają firmy.

Gdy tylko znajdziesz pracę, twórz dalej w swoim wolnym czasie i promuj to co stworzyłeś. Rozwiniesz się szybciej od swoich rówieśników, bo gdy ty się uczysz, rozwijasz i tworzysz to oni wracają do domu i siadają się przed telewizorem.

Im więcej tworzysz, tym więcej się uczysz. Im więcej się uczysz, tym cenniejszy się stajesz. Im cenniejszy się stajesz, tym łatwiej jest ci znaleźć pracę i większą dostaniesz pensję.

Więc idź i pisz kod! Twórz coś!


Tłumaczenie wpisu z tego bloga:

Sprawdźcie również jego książkę:

A tu link bezpośredni do Amazonu:

Poradnik: Jak skonfigurować konto git z GitLab.

Ze względu tworzenia projektów na studia i konieczności używania systemu git zostałem zmuszony porzucić na jakiś czas GitHuba i zacząć używać GitLaba.


Prywatne repozytoria.

Każdy z nas dostaje co tydzień szereg zadań programistycznych, które musi wykonać. Samemu, bądź z partnerem w grupie. Ze znanych dostępnych mi serwisów oferujących prywatne repozytoria należą wcześniej wymieniony GitLab oraz Bitbucket. Bitbucekt jednak oferuje ograniczenie do 5 członków. Co jednak pasuje, ale jednak ze względu na to, że słyszałem wiele dobrego o GitLabie to postanowiłem go wypróbować.

Read More

Edukacja i umiejętności twarde to nie wszystko.

System edukacji może i jest pod wieloma względami dobry, ale też w niektórych aspektach moim zdaniem posiada błędy.

Może nie są to błędy dydaktyczne. Bo jednak wielu nauczycieli potrafi świetnie uczyć. Tu raczej chodzi o motywację. Wielu uczniów chodzi do szkoły bo musi. Uczy się bo musi. Bo tak każą rodzice. Bo tak każą nauczyciele.

“Ucz się ucz, wiedza to potęgi klucz! Jak ten klucz zdobędziesz to w szkole woźnym będziesz!”

Żartują niektórzy.

Read More

Jeżeli zaczynasz właśnie naukę programowania to koniecznie to przeczytaj!

Odnośnie nauki programowania, to zauważyłem, że wiele osób nie zdaje sobie z tego sprawy, że nauka programowania nie tyle polega na zbieraniu wiedzy i rozwiązywaniu problemów, ale też magazynowaniu rozwiązań i tworzenia z nich bibliotek.

Kiedyś zmagając się z jakimś problemem często szukałem rozwiązania w Google. Czasem trwało to dłużej, czasem krócej. Ale zawsze jakoś udało mi się go rozwiązać.

Obecnie często wracam po prostu do starych projektów i patrze jak dany problem rozwiązałem w innym projekcie. Posiadanie GitHuba z projektami, mimo ze są mało popularne, followersów prawie nie mam wcale i prawie żadnych gwiazdek… to przydaje się jednak jako taki magazyn z rozwiązanymi już zadaniami. Dzięki temu obecnie projekty robione po godzinach pisze mi się o wiele szybciej.

Czytam też projekty innych osób. Czasem kopiuję, czasem ulepszam. Próbuje z kilku projektów zrobić jeden większy i tak się powoli człowiek uczy tego programowania.

Najważniejsze w tym wszystkim to się nie poddawać. Cięższe dni trafiają się zawsze. Czasem rozwiązanie problemu zabierze nam o wiele więcej czasu, niż się tego spodziewaliśmy. Ale koniec końców się opłaca.