tutorials
My knowledge-sharing playground, which mostly contains PHP & JavaScript related stuff.
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 →
I recently had a case in a B2B project I was working on where we wanted to allow users to upload their company logo, but resize them automatically to specific dimensions, while keeping the aspect ratio of the logo intact (and without cropping any part of it). Here’s how I tackled the issue.
Read more →
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 →
While playing around with some CSS3 transitions for an image gallery representation, I ended up creating a menu that I really liked, so I decided to write a tutorial around it. Have a look at the demo (or this pen) to see what we’re going to create. After building the horizontal version, it’s very easy to create a vertical menu as well. But we’ll get to that.
Read more →
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 →
