Looking for alternative sprite paths?

Arcade Game Design
#1

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/).

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.

#2

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 that are defined by the svg path syntax - they aren’t used very often / mind have some bugs though.

image

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

image

#3

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.

#4

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

#5

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 ~

#6

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

#8

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

I am doing something wrong?

#9

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

and got it working.

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:

1 Like
#10

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.

1 Like
#11

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