# Looking for alternative sprite paths?

**URL:** <https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788>\
**Category:** Game Design\
**Created:** [October 6, 2020, 10:49pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788 "2020-10-06T22:49:43Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![cosmoscowboy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cosmoscowboy/32/1718_2.png) [@cosmoscowboy](https://forum.makecode.com/u/cosmoscowboy)\
**Post date:** [October 6, 2020, 10:49pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/1 "2020-10-06T22:49:43Z")

</div>

> **[Bezier curves](https://arcade.makecode.com/08752-44819-09776-13229)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

These sprites take three different animation paths, or Bézier curves. This type of programming lends itself well to ‘space invader’ type games. You do not need concern yourself with the physics of a game, having only to follow straight lines. You just need to define explicit start/end points, and optional control points that the sprite deviates along, and the duration of the animation.

I am new to MakeCode, but I want to eventually make an extension that allows designers to choose animation paths in block code. Also when creating a path, you could add an optional ‘easing’ option ([https://easings.net/](https://easings.net/)).

Is there anyone interested in working together to make this type of extension? Please let me know I would love to hear for you and your ideas. Perhaps it is already done, please let me know.

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 6, 2020, 11:03pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/2 "2020-10-06T23:03:04Z")

</div>

The animation extension has a start on support for movement animations [https://github.com/microsoft/pxt-common-packages/blob/master/libs/animation/animation.ts#L41](https://github.com/microsoft/pxt-common-packages/blob/master/libs/animation/animation.ts#L41) that are defined by the svg path syntax - they aren’t used very often / mind have some bugs though.

![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/c/c82f0611eeed67e9e8e3e009e1cfa9582327fa7f.png)

To define your own with a string you can drop one in place of `fly to center`:

![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/80af274c5c6fce23568836747f831524ec6261e7.png)

---

<div class="post-metadata">

**Author:** ![cosmoscowboy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cosmoscowboy/32/1718_2.png) [@cosmoscowboy](https://forum.makecode.com/u/cosmoscowboy)\
**Post date:** [October 6, 2020, 11:32pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/3 "2020-10-06T23:32:00Z")

</div>

I will have a look at how the animation package has programmed this sort of thing. Also, how svg paths work. Wow, I still have a lot to learn.

---

<div class="post-metadata">

**Author:** ![cosmoscowboy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cosmoscowboy/32/1718_2.png) [@cosmoscowboy](https://forum.makecode.com/u/cosmoscowboy)\
**Post date:** [October 6, 2020, 11:45pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/4 "2020-10-06T23:45:11Z")

</div>

I wasn’t able to paste the text in the ‘with’ block. How is that done?

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 6, 2020, 11:53pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/5 "2020-10-06T23:53:28Z")

</div>

Ah, you have to drag one out of the text blocks from the text category (under advanced), and drag that onto the with. Sorry for not clarifying there ~

---

<div class="post-metadata">

**Author:** ![cosmoscowboy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cosmoscowboy/32/1718_2.png) [@cosmoscowboy](https://forum.makecode.com/u/cosmoscowboy)\
**Post date:** [October 7, 2020, 11:43am UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/6 "2020-10-07T11:43:53Z")

</div>

No problem, I will give that a try, thanks. In the meantime I need to study svg paths. 👍

---

<div class="post-metadata">

**Author:** ![cosmoscowboy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cosmoscowboy/32/1718_2.png) [@cosmoscowboy](https://forum.makecode.com/u/cosmoscowboy)\
**Post date:** [October 7, 2020, 12:00pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/8 "2020-10-07T12:00:52Z")

</div>

> [@jwunderl](#):
>
> Ah, you have to drag one out of the text blocks from the text category (under advanced), and drag that onto the with. Sorry for not clarifying there ~

I wasn’t able to get the “s 1 1 1 1” text to work, as shown in your example.

> **[Working with animations](https://arcade.makecode.com/19148-51300-82066-58720)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

I am doing something wrong?

---

<div class="post-metadata">

**Author:** ![cosmoscowboy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cosmoscowboy/32/1718_2.png) [@cosmoscowboy](https://forum.makecode.com/u/cosmoscowboy)\
**Post date:** [October 7, 2020, 12:15pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/9 "2020-10-07T12:15:13Z")

</div>

Don’t worry. I started playing with the paths defined here

> **[Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)**
>
> The path element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.

and got it working.

> **[Working with animations](https://arcade.makecode.com/70730-74032-25583-95207)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

So a nice extension would be to have the user choose 2 points, and optionally two extra control points, by using the screen picker, and have that translate into an SVG path, and then use that with the other animation library. So actually it would be an extension of the animation extension. Is that possible?

I was playing around with idea of choosing points here:

> **[Linear movement blocky](https://arcade.makecode.com/76081-11337-07303-28259)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 7, 2020, 4:22pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/10 "2020-10-07T16:22:23Z")

</div>

Yes, if you want to you can make an extension that adds more blocks to the animation extension – when you create an extension you can add the animation package like you normally would, and it will become a dependency of the extension / automatically get loaded whenever your extension gets loaded. Then you just make the namespace the same as the animations namespace (or use the blockNamespace attribute to move blocks into that category, if you want your own namespace), and the blocks will appear within the animations category.

---

<div class="post-metadata">

**Author:** ![cosmoscowboy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cosmoscowboy/32/1718_2.png) [@cosmoscowboy](https://forum.makecode.com/u/cosmoscowboy)\
**Post date:** [October 7, 2020, 8:45pm UTC](https://forum.makecode.com/t/looking-for-alternative-sprite-paths/3788/11 "2020-10-07T20:45:05Z")

</div>

Thanks Joey, that makes sense now. I will be sure to keep in touch when I get so far.
