tutorials

My knowledge-sharing playground, which mostly contains PHP & JavaScript related stuff.

How to restrict the drag movement of a sprite to both X & Y axis in Phaser

How to restrict the drag movement of a sprite to both X & Y axis in Phaser

Phaser has a built-in function (i.e. setDragLock) that restricts a sprite’s drag movement only on a given axis (i.e. either horizontal or vertical). There are cases though that you want to allow a sprite to move both horizontally and vertically, but not allow movement to any other directions.

I run into a situation like that a few days ago, while building -just for fun- a match-3 type game (like Bejeweled and Candy Crush Saga). Although I ended up making the tiles clickable instead of draggable, I managed to find a workaround that would restrict movement to both axis.

Read more →

How to calculate the selection coordinates of a resized and rotated image

How to calculate the selection coordinates of a resized and rotated image

This tutorial derives from a question I recently answered in Stack Overflow. The person who asked the question was selecting (I assume using some JavaScript library) a part of an image that wanted to subsequently crop. Given that the selection was being made in a resized image, he had the coordinates based on that resized image, and he needed to know the way he could calculate the coordinates corresponding to the original image. Let’s tackle that first, and then we will move onto the rotation part which is mentioned in the title of this tutorial.

Read more →

How to build a slideshow with a blinds transition using jQuery

How to build a slideshow with a blinds transition using jQuery

The other day, I saw a photograph in a printed magazine which inspired me to create a JavaScript effect that would make any photo look exactly like that. After I created this effect, I altered the code into a proper transition effect to be used as a slideshow, using multiple images. I am now going to walk you through how it was built.

Read more →