# Richard's Arcade Tips #1 - SVG Paths for moving Sprites
**URL:** https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212
**Category:** MakeCode Blog
**Tags:** arcade-tips
**Created:** [April 12, 2024, 6:16pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212 "2024-04-12T18:16:38Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@richard](https://forum.makecode.com/u/richard)
#### Post date: [April 12, 2024, 6:16pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/1 "2024-04-12T18:16:38Z")
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!
[](https://makecode.com/_ezjPrr0PvDrs)
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](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) 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) point
- `L x y` - “line” command draws a line to the given (x, y) point
- `H x` - “horizontal line” command draws a line to the given x
- `V x` - “vertical line” command draws a line to the given y
To build a path, we can chain together these command. For example:
```auto
M 80 60 H 100 V 80 H 80 V 60
```
Let’s break this path into steps:
1. `M 80 60` - Teleport the Sprite to (80, 60)
2. `H 100` - Make a horizontal line to x=100
3. `V 80` - Make a vertical line to y=80
4. `H 80` - Make a horizontal line to x=80
5. `V 60` - Make a vertical line to y=60
Chain all those together, and here’s what that path looks like:
[](https://makecode.com/_dUHDo8h4KbaH)
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:
```auto
h 20 v 20 h -20 v -20
```
And breaking that down again:
1. `h 20` - Move right 20 pixels from the current position
2. `v 20` - Move down 20 pixels from the current position
3. `h -20` - Move left 20 pixels from the current position
4. `v -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:
```auto
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:
```auto
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:
```auto
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:
> **[npc-random-walking](https://arcade.makecode.com/43095-48303-32351-95870)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.
## 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:
> **[SvgPathEditor](https://yqnn.github.io/svg-path-editor/)**
>
> Online editor to create and manipulate SVG paths
I also threw together a little extension for making paths with blocks. Check it out here:
> **[arcade-path-builder](https://arcade.makecode.com/S23144-31609-25128-84321)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.
---
### Author:  [@49dev](https://forum.makecode.com/u/49dev)
#### Post date: [April 12, 2024, 6:22pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/2 "2024-04-12T18:22:53Z")
Wow, this is incredibly cool! (And I thought that block was useless for everything except animating floating orbs.)
---
### Author:  [@ChimbroDaPro](https://forum.makecode.com/u/ChimbroDaPro)
#### Post date: [April 12, 2024, 6:34pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/3 "2024-04-12T18:34:47Z")
How long did that “hello” take you?!
---
### Author:  [@richard](https://forum.makecode.com/u/richard)
#### Post date: [April 12, 2024, 6:35pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/4 "2024-04-12T18:35:07Z")
@ChimbroDaPro eh, like 10 minutes.
---
### Author:  [@Blobbey](https://forum.makecode.com/u/Blobbey)
#### Post date: [April 12, 2024, 7:17pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/5 "2024-04-12T19:17:27Z")
Woah, this is awesome! I look forward to the weekly coding tips! 😃
---
### Author:  [@CreativeUsername](https://forum.makecode.com/u/CreativeUsername)
#### Post date: [April 12, 2024, 7:27pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/6 "2024-04-12T19:27:20Z")
This is really cool! I wonder what people will do with this
---
### Author:  [@Luke](https://forum.makecode.com/u/Luke)
#### Post date: [April 12, 2024, 9:25pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/7 "2024-04-12T21:25:03Z")
This will probably make boss fights way easier to code
---
### Author:  [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [April 12, 2024, 9:27pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/8 "2024-04-12T21:27:05Z")
Woah this is great!
@richard to import the extension we can import that share link just like a GitHub repo? (I’m adding this to Awesome Arcade extensions definitely)
---
### Author:  [@randomuser](https://forum.makecode.com/u/randomuser)
#### Post date: [April 12, 2024, 9:27pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/9 "2024-04-12T21:27:43Z")
Hey, this is awesome! It opens a lot of new doors for art…
I could also use this with my AI’s! I’ve been trying to make a generative AI that could draw, but having it decide each pixel’s color would be way too big. With a path like this, it could generate a path and draw that way, which is smaller and much more ‘human’ like… Thank you!
---
### Author:  [@richard](https://forum.makecode.com/u/richard)
#### Post date: [April 12, 2024, 9:30pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/10 "2024-04-12T21:30:15Z")
@UnsignedArduino yes! I will probably move it into a repo soon though!
---
### Author:  [@randomuser](https://forum.makecode.com/u/randomuser)
#### Post date: [April 12, 2024, 9:30pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/11 "2024-04-12T21:30:55Z")
> **[svg-yippee-path](https://arcade.makecode.com/69403-73123-28474-34735)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.
The ducks so happy to see you! 😄
---
### Author:  [@Josef](https://forum.makecode.com/u/Josef)
#### Post date: [April 13, 2024, 4:52pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/12 "2024-04-13T16:52:10Z")
POV: Me when I manage to get into Makecode Forums: A Coder King Mystery.
---
### Author:  [@ChimbroDaPro](https://forum.makecode.com/u/ChimbroDaPro)
#### Post date: [April 13, 2024, 7:27pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/13 "2024-04-13T19:27:16Z")
Bro is sending easter eggs (and spoilers, watch yourself) everywhere 💀
---
### Author:  [@InvalidProject](https://forum.makecode.com/u/InvalidProject)
#### Post date: [April 18, 2024, 3:37pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/14 "2024-04-18T15:37:24Z")
Awweee! That’s so adorable! \>w\<
---
### Author:  [@Sarge](https://forum.makecode.com/u/Sarge)
#### Post date: [June 12, 2024, 9:07pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/15 "2024-06-12T21:07:04Z")
@richard Is it possible to do ease in/out path animations with this? If not, what other method is there?
---
### Author:  [@richard](https://forum.makecode.com/u/richard)
#### Post date: [June 12, 2024, 9:16pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/16 "2024-06-12T21:16:12Z")
@Sarge no, not really. the built in path animations always give the same amount of time to each segment of the path regardless of length
i started working on an extension that would change animations to work based on distance travelled instead of segments (i.e. so that sprites could follow path animations at a constant speed) but never polished it up. would be pretty easy to adapt that code to follow an ease in/out function instead of a linear one, though. here’s the code if you want to play with it:
> **[arcade-path](https://arcade.makecode.com/S15323-64079-79116-41490)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.
---
### Author:  [@Luke](https://forum.makecode.com/u/Luke)
#### Post date: [June 12, 2024, 9:55pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/17 "2024-06-12T21:55:12Z")
I like to code easing in and out with the distance from player block as that auto increases the speed at which an object moves towards the player (but also with +60-70 so it doesn’t completely slow down when close)
---
### Author:  [@KIKIvsIT](https://forum.makecode.com/u/KIKIvsIT)
#### Post date: [June 18, 2024, 10:56pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/18 "2024-06-18T22:56:38Z")
---
### Author:  [@ChimbroDaPro](https://forum.makecode.com/u/ChimbroDaPro)
#### Post date: [June 20, 2024, 3:40am UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/19 "2024-06-20T03:40:38Z")
Can someone make an SVG path extension?
---
### Author:  [@Luke](https://forum.makecode.com/u/Luke)
#### Post date: [June 20, 2024, 2:48pm UTC](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212/20 "2024-06-20T14:48:24Z")
Richard made one read the post
[Next page](https://forum.makecode.com/t/richards-arcade-tips-1-svg-paths-for-moving-sprites/28212.md?page=2)