Movement With PhaserJS — Animated Motion (Before User Input)

If you’re starting with this article and just learning Phaser, please read my first article about setting up your program initially! Otherwise, let’s make some sprites move!

As previously stated, setting up a game is the most important thing to do with our program, as if we can’t, then we won’t have game (of course); but what really makes a game? Well, being able to play! That involves controlling your sprite, whether it be a pong paddle or Mario, around the screen. That means movement!

Let’s look at some of the beginning ways we can have movement come into play with Phaser. This article will cover how we can make objects move within the scene (enemies, environments, NPCs, etc). This will take place in the same JS file we built out our initial code in as well.

Moving Across Our Canvas

Alright! We’ve learned how to load our assets, so lets move ’em. Now we won’t be working just yet with animations within the movement (i.e. a walking animation as the character moves) but we can have the sprite physically move across the canvas which is a great start. So where do we place this code?

As a little recap, first we have to define a global variable as our sprite. That way we can reference it between our different functions.

REMEMBER that global variables are dangerous in big applications. They can cause a lot of bugs and turmoil for you down the road in development. We are only declaring this as a global variable for simplicity of this small project!

Now that we have our sprite defined, let’s make a function to make this pile of pixels move. I’m personally going to use a picture of Psyduck, but you can use whatever you want (Just remember that Psyduck rules and everything will still work)!

To get this started, we gotta create an update function in our Phaser program. This is what is going to pull information from the previously declared in both our preload function and create function. Let’s take a look at what that code looks like and see how it all comes together.

Lets break this down into simple steps! If we look at each of our individual functions we can understand how simple this really is.

1. First function here is the preload(). We learned about that previously in the past blog; this loads our assets. In my case, I have a Psyduck image imported here. Within the preload() we call this.load.image() which is our standard set up to add an asset of which takes two arguments. Now our Psyduck will load as soon as the program starts and be able to be used and handed around to other functions! The first of the two arguments is the name of the asset we are referring to (‘psyduck’), and the second argument is the link to the actual image so we can use it with our declared psyduck call.
2. Next we add the sprite in our create() method. Much like the image in the preload() function, create has a similar syntax with just swapping out a single word. This time around we call this.load.sprite. This will take three arguments, which are (x, y, reference). The x and the y are pixel placements for our sprite; telling the program where to put ’em. The third, the reference argument, is pulling from our declared name in our preload() function. In this case, we pull in the asset labeled ‘psyduck’. Now lets save that creation to a variable!
3. Third we have the update() function, which is going to be our user’s input and tell the sprite what to do. Now we are calling psyduck.x += 1. What does this mean? Well, we are telling the asset psyduck to be moved on the x axis, hence psyduck.x and += 1. The += 1 is, just like in JavaScript, a way to increment the amount by one each time the update() is called.

Quick aside: The update() method in Phaser has two parameters that aren’t necessary if you want it just go by the default, but you can also put in your own information if you want to! The two arguments that update could take are time and delta. Time is the amount of… well… time that has passed as your game is running in milliseconds. Delta is the difference in time since the last update() method call. Since Phaser tries to stick close to calling the update() method 60 times in one second, we can leave the default as that will do just fine.

Lastly, we have our config, which we talked about in the previous article. Since you know what config is, all I have to say is to add the update() function within it (as you can see it is added to the scene nested object).

Wow. Exciting. Our avatar is moving.

But I hear you thinking to yourself, “But Rutger, we didn’t put our own input into the sprite, they’re just moving on their own!” Well that’s whats next!

Join me on our next article to see how user input makes the game COME ALIVE!!