[Extension] Arcade Easing - Move your sprite from A to B in style!


https://github.com/ChimbroDaPro/arcade-easing

Hey yall, so I’ve found myself getting really frustrated with the limited movement options for MakeCode, like, pretty much EVERYTHING is linear, and it makes things like character dashing, objects falling, and UI movement have a lot to be desired. I found it to be very limiting especially when you want certain movements to be really expressive or fancy.

But all of that has changed now, with the all new Easing Extension, my first proper extension! I made sure it’s super easy to use, and, who knows, maybe it’ll become something like Timers or Settings that people won’t be able to live without :sweat_smile: . I guess time will tell. But let me give you a breakdown of what this extension has to offer:

I strived to make the extension as accessible as possible, so that it’s simply a case of a “sprite moves from A to B” type block. So, in that sense, it helps with simple sprite movement, similar to that one block in @jwunderl’s sprite utils extension. Of course their also the twist of the actual easing to the location of your choice:

IMG_6697

I have various easings, from sine, quad, quint, bounce, elastic, circular (my favourite), exponential, quart, and back.

Here are a few fun ones:

Circular

IMG_6698

Elastic

IMG_6699

Bounce

IMG_6700

And if you want to move your sprite relative to the sprites location, like, say, you want a sprite to dash, you can use the ease by dx and dy block!

Now, trust me, my example isn’t great, but you can do A LOT with this if you pair it with an animation, or like some killer move where the enemy flies in and… nevermind lol, getting ahead of myself.

IMG_6701

Those are the main two blocks, and the rest are intuitive enough, but the cancel easing blocks are very useful too, especially if you want a diving attack to be parried of deflected, you could cancel the easing and… bruh why am I giving you ideas again? Just use it for yourself, I think you’ll like it.

Another gif with me just goin crazy with easings:

IMG_6703

21 Likes

This is great! I see it being really useful in cutscenes and stuff like that in the future. I already have alot of projects that i’d like to implement this with! :fire:

Awsome work :clap:

11 Likes

really cool extension!

oohhh god the geometry dash brainrot is kicking in…

6 Likes

FIRE IN THE HOLE​:speaking_head::speaking_head::speaking_head::fire::fire::fire::100::100::100::100:

4 Likes

what do you mea

4 Likes

gd movement triggers

i know geometry dash didnt invent easings but its where i recognize them from

6 Likes

SAME LOL! I got the easing idea straight from gd

3 Likes

I got a thing using this extension : https://makecode.com/_e8F3f8EU1Uc8

4 Likes

Something happened. Guess we doin circles now!

3 Likes

I’m updating it… it’s almost finished…

2 Likes

Oh my god thank you so much

1 Like

How did this happen :sob:

Wow, that is so terrifying :scream: /s

It wont work, in circles

Just a sec… almosttttt…

1 Like

IT’S FINISHED, IT’S FINALLY COMPLETELY FINISHED, AFTER 1 MONTH! You can now ease anything. Absolutely anything. Tutorial incoming.

3 Likes

no it’s actually 19 days

1 Like

can I ease tilemaps?

2 Likes

none taken

2 Likes

Tutorial for Easing Extension v2.0.0!

Ok, so, as you can tell, A LOT has changed. We even had a super cursed “circle” block at some point (explanation of what the block was later on), but now, after so long, it’s ready! Let’s start with the blocks!

The update implements easing ID’s - you can cancel them, get their progress, tag them, replay them… and that’s how it works. Every time you create an easing, it has an ID. The number type blocks for position, scaling and camera do the easing, but also return the ID.

Sprite Movement

Yeah this is the one we’ve already seen above. No differences, but I suppose it does it’s usual. Move a sprite from A to B with easing options. There’s another block to move the sprites relatively, based on its position, but it’s basically the the same.

As I said above, there’s an ID version which returns the ID of the easings so you can do a ton of stuff with it in the future.

Sprite Scaling

Alright so this is a new block. You can now ease scaling as well! You can make all sorts of stuff with this, for example…

IMG_6725

A JUMPSCARE!

So, uh, anyway… just like the movement block, all of this can be done relatively with a separate block. There’s also the ID version of the block, which you can use to uhhh… yeah, what I said above.

And here’s what it looks like just for the lols. You can set up what the scale starts as, which I think I forgot to say earlier.

Camera Easing

This is also a new block! It’s a little bit buggy, might patch a few things later, but with this, you can ease the camera to a coordinate! You can also do really sick stuff with this, you could even do parallax easing if you mix it with another easing block

IMG_6726

I personally feel it’s very good if you want camera effects for cutscenes, and maybe it could work well mixed with sprite movement if you’re feeling innovative. Quick note: if the camera is following a sprite elsewhere in your project, that will fight manual centering, so turn off any follow behavior or be mindful that the follow will dominate. There’s obviously also the ID version, but it works exactly as mentioned above.

Generic Easing Function Creation

This. This is the block that caused this update to take so long. If you want to predefine behaviors, use this block to register a named handler ahead of time; later you can call to run it. Put the value parameter in for the number in the block you wish to ease. If people use this extension, big projects would have like millions of these. It’s neat for reusable effects, so you can define how “rotate” or “transform” should behave once, then launch it with different ranges and durations. This block works best with other extensions. Oh yeah, and this was the super cursed circle block.

Here are a few examples:

Here’s a fun one to implement rotation easing! I used this extension. Here’s the result:

IMG_6729

Let’s try adding some camera zoom into the mix:

And here’s what we get as a result:

IMG_6731

I could go on and on, but in any case, this is a really huge block. You can do anything with it. You can even put easings in the easing function and do really stupid stuff. This is by far the best block in the extension, so uh, have fun!

Easing ID and Tag Usage

Easing number blocks return easing IDs when you create them. Keep that ID if you want to cancel the effect or check its progress.

This block cancels a single easing by ID. Basic stuff.

This cancels all easings attached to a sprite (and yes, you can have more than one), and this:

This cancels all easings with a tag. This would be a good time to show the block to tag easings!

Just be aware that tagging an easing plays the easing. Finally there’s this block:

And this just nukes everything. Good if you want to crash out.

Tagging is one of those small conveniences that becomes very useful in larger projects: when you create an easing you can optionally tag it (for example “intro” or “enemy-hit”) and then cancel or replay groups by tag instead of juggling lists of numbers (look at replay in the next dropdown).

Aight I’m tired of taking pictures, I might just blitz through the last few of these.

Querying is simple and helpful for logic: is <sprite> easing? answers whether there’s any active easing on a sprite. easing progress of <sprite> or easing progress of job id <n> returns a 0 to 1 progress float (or -1 if nothing’s running), so you can drive other things off the easing state.

Easing Replayability

Replaying is the fun part, and it’s just lovely to use. This clones whatever easing you point it at and restarts it, giving you a new easing id (though unobtainable since you have the original). You can also replay em by tag. That will replay every easing with that tag; great for re-running an “intro” sequence when the player retries a level, like you could just name them all “intro” and boom! I made them create fresh easings so your old easing records stay for later use.

Here’s a super fun example I made showcasing the replay blocks:

And now, here’s the result! Introducing the rolling duck! He’ll never stop rolling.

IMG_6737

Here’s a final example with me using most of the ver.2.0.0 features (except for camera stuff). It’s far from perfect, but here’s a random ultimate attack I made with Vortex throwing a… well, vortex… at scamma!

IMG_6740

5 Likes