Hey folks!
I’ve decided I’m going to start a series of (mostly) weekly little tutorials about some tips and tricks you can use when making MakeCode Arcade games.
This week, we’re going to be looking at movement animations! That’s right, the other animation block:
At first glance, this block might not appear super useful; it has a few neat built-in animations but they aren’t really customizable and they’re very specific (how many games really need a parachute animation?).
However, this block actually possesses a hidden super power: you can pass in a string to make your own custom animations!
Let’s learn how!
SVG Paths
All of our movement animations are defined using SVG path syntax. I’m not going to go into the details of all the different kinds of things you can do with paths (here is a very helpful article), but let’s take a look at the basics.
First off, path strings are made up of a series of commands. These commands tell the path how to move to different points. Here are a few useful ones:
M x y- “move” command teleports you to the given (x, y) pointL x y- “line” command draws a line to the given (x, y) pointH x- “horizontal line” command draws a line to the given xV x- “vertical line” command draws a line to the given y
To build a path, we can chain together these command. For example:
M 80 60 H 100 V 80 H 80 V 60
Let’s break this path into steps:
M 80 60- Teleport the Sprite to (80, 60)H 100- Make a horizontal line to x=100V 80- Make a vertical line to y=80H 80- Make a horizontal line to x=80V 60- Make a vertical line to y=60
Chain all those together, and here’s what that path looks like:
That’s neat! But it’s also annoying to have to constantly give everything in absolute coordinates. What if I want my sprite to move in a rectangle from wherever it’s current position is?
Well, every command in SVG path has a relative version. If you use a lowercase letter instead of an upper case letter, then all the points will be taken as relative from the current position. Let’s rewrite our path with relative commands:
h 20 v 20 h -20 v -20
And breaking that down again:
h 20- Move right 20 pixels from the current positionv 20- Move down 20 pixels from the current positionh -20- Move left 20 pixels from the current positionv -20- Move up 20 pixels from the current position
That’s much easier to understand!
Example #1: NPC movement
It’s a pretty common thing in RPG-style games to have NPCs that walk around a little bit. SVG path animations are an easy way to automate this behavior! Let’s make a simple path to have our NPC walk around between a few tiles by chaining together some horizontal/vertical relative commands:
h 16 v 16 h 16 v -16
Let’s run this on our NPC with the “loop” parameter set to true:
Here’s the result:
Oh no! Our NPC is glitching back to the start position every time the path loops. That’s because paths always start back at the same spot when loop is set to true. We can fix this by altering our path so that we return back to the same spot:
h 16 v 16 h 16 v -16 h -16 h -16
That gives us a smooth loop:
This is nice, but the movement might look a little more natural if the NPC were to pause between moves. We can do that by adding some segments to our path in between the moves. All commands in the path are given the same amount of time in the animation. That means we can force our NPC to pause if we add some commands that don’t move at all (e.g. h 0). Let’s try this path:
h 16 h 0 v 16 h 0 h 16 h 0 v -16 h 0 h -16 h 0 h -16 h 0
And of course, we’ll want to double the amount of time for our animation:
Now we have much nicer movement:
Example #2: Random NPC movement
We can also use path animations to move NPCs randomly. In this example, we move the NPC in a random direction once per second and keep them within the dirt tiles:
Other ways to write SVG paths
Writing SVG paths by hand can be rather tedious, but luckily there are some tools you can use to make it a little easier.
One option is to use an SVG path editor. Here’s the one I used for making that “hello” program:
I also threw together a little extension for making paths with blocks. Check it out here:
