# Procedural Animation Dev Page

**URL:** <https://forum.makecode.com/t/procedural-animation-dev-page/41737>\
**Category:** Arcade\
**Tags:** graphics-and-math, extension, art\
**Created:** [January 27, 2026, 2:51am UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737 "2026-01-27T02:51:44Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [March 2, 2026, 6:16pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/41 "2026-03-02T18:16:14Z")

</div>

ALRIGHT! The image mapping extension is out!  
I worked intensively hard on it over the past week and I’m pretty happy with how it turned out, and I hope you all are too!

Introducing, the Image-Mapping extension:

> **[GitHub - bladebaillio/image-mapping: An extension on MakeCode Arcade for image mapping...](https://github.com/bladebaillio/image-mapping)**
>
> An extension on MakeCode Arcade for image mapping and simple shape-based transforms.

This was also my first time doing anything with a README.md. I just made it a simple read with some examples on the side. I would suggest looking at those examples to get a feel of what to use this extension for.

But here is a short list of functionalities included in this extension:

1. Mapping an image to four points. It basically interpolates the pixels from the four corners of the image to the new four points of your choice.
2. Mapping an image to a color region. I’m really excited that this was actually something possible on Makecode arcade. It finds the shape of a color region on a base image and then maps the source image onto that shape. I was inspired from [this video](https://youtu.be/HsOKwUwL1bE)\[1\].
3. Outlining. I just wanted to add blocks for Outlining images. I may add more blocks in the future that do the reverse of the outline blocks.

Please check this extension out! I hope this extension is useful to you guys!  
I’m really happy with how it turned out, and I want that to be the same for all of you, so please comment what you think! I would love to hear your ideas and improvements.

On a side note, the next thing I will be working on is that Ragdoll extension, because I saw that it still has interest which is good!

Thank you!

* * *

1. If you watch the video, you’ll see that there’s lots of color used in the mapping, but this was a problem because Makecode Arcade only provides 16 types of color. So this took some brainstorming and I think region mapping turned out to be the best answer.

---

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [March 2, 2026, 11:43pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/42 "2026-03-02T23:43:59Z")

</div>

Also, copy and paste this link for a few color region animations:

> **[Color Region Animations](https://arcade.makecode.com/65192-19989-23541-27136)**
>
> 4 little Animations for color mapping. 3 humans with color regions and 1 cat with color regions.
> 
> These animations go great with the Image Mapping Extension which allows you to map textures to the different color regions of each animation!

---

<div class="post-metadata">

**Author:** ![Rune](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rune/32/18951_2.png) [@Rune](https://forum.makecode.com/u/Rune)\
**Post date:** [March 3, 2026, 4:07am UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/43 "2026-03-03T04:07:35Z")

</div>

They walk with such intent…

Anyways the extension is really cool.

---

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [March 3, 2026, 7:45pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/44 "2026-03-03T19:45:41Z")

</div>

Another thing, I noticed that the softbodies (especially when given a low damping rate) started to “drift” towards 0,0. It’s like they would just start floating to the top-left of the screen.  
I found out what was causing it so I patched that bug recently!  
Please let me know if you guys find bugs in any of my extensions!

---

<div class="post-metadata">

**Author:** ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)\
**Post date:** [March 16, 2026, 1:05am UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/45 "2026-03-16T01:05:33Z")

</div>

[![](https://img.youtube.com/vi/qlfh_rv6khY/maxresdefault.jpg "A simple procedural animation technique") ](https://www.youtube.com/watch?v=qlfh_rv6khY)

i randomly remembered watching this video and realised it was definitely something you would enjoy! (unless you’ve already watched it lol)

---

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [March 16, 2026, 2:18am UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/46 "2026-03-16T02:18:44Z")

</div>

I remember this video! I think it was about a year and a half ago I was just going down the rabbit hole of all the YouTube videos on procedural animation.

---

<div class="post-metadata">

**Author:** ![The4Lexanator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/the4lexanator/32/32913_2.png) [@The4Lexanator](https://forum.makecode.com/u/The4Lexanator)\
**Post date:** [March 22, 2026, 7:15am UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/47 "2026-03-22T07:15:15Z")

</div>

Hey @BLADEr! How easy is it to do Procedural Animation in Makecode with Blocks? (Have you done it with Blocks. Just wondering)

---

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [March 22, 2026, 7:33am UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/48 "2026-03-22T07:33:23Z")

</div>

I’ve been working really hard on my [hair salon](https://forum.makecode.com/t/hair-salon-game-dev/42456) game and so I haven’t really been able to touch the ragdoll extension and I’m sorry for the delay. I will work on it sometime next month hopefully.

Happy belated cake day, @Luke!

---

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [March 24, 2026, 2:49am UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/49 "2026-03-24T02:49:37Z")

</div>

I first started doing procedural animation with blocks! I would set up simple constrain systems using arrays. I either deleted or changed my old games from blocks to Java, but here’s an example of something I made:

> **[a worm chases the pizza](https://arcade.makecode.com/S88091-54495-89587-40108)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

And then that turned into this:

> [@Proceduraly-animated AI worm](https://forum.makecode.com/t/proceduraly-animated-ai-worm/29956):
>
> Here’s the project [https://makecode.com/\_51W5r98m2RU4](https://makecode.com/_51W5r98m2RU4) I used riknoll’s useful arcade-state-transitions extension. Still working on it currently and I wanted to here other coder’s ideas. press A to smile (decreases aggressiveness. increases mood) press B to frown (decreases mood. increases aggressiveness) press MENU to see stats of worm Let me know what you think!

I think that was one of the first procedurally animated things I did with blocks.

Creating that little worm led to me creating all these extensions to make better and more complex creatures.

Hopefully this helped, The4Lexenator!

---

<div class="post-metadata">

**Author:** ![The4Lexanator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/the4lexanator/32/32913_2.png) [@The4Lexanator](https://forum.makecode.com/u/The4Lexanator)\
**Post date:** [March 24, 2026, 7:49pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/50 "2026-03-24T19:49:11Z")

</div>

So Procedural Animation is that easy?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/d/7/d740135ff93c6cc9a10fb7e6cb3ef1d25758fcca.png)

---

<div class="post-metadata">

**Author:** ![coppercode](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/coppercode/32/26022_2.png) [@coppercode](https://forum.makecode.com/u/coppercode)\
**Post date:** [March 24, 2026, 9:32pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/51 "2026-03-24T21:32:43Z")

</div>

hi just wandering hows the cat going?

---

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [March 25, 2026, 4:44pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/52 "2026-03-25T16:44:16Z")

</div>

I actually haven’t been able to make anything yet and I am greatly sorry.  
I’ve been a little busy this month prioritizing my hair salon game and the outdoors mini game jam.

I’m sorry for putting it off for so long. I hope to work on it starting on the 27th when the game jam ends.

Thank you for reminding me! Again I apologize.

---

<div class="post-metadata">

**Author:** ![coppercode](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/coppercode/32/26022_2.png) [@coppercode](https://forum.makecode.com/u/coppercode)\
**Post date:** [March 25, 2026, 10:12pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/53 "2026-03-25T22:12:06Z")

</div>

no worry’s but I’m upset that I have not been able to find you your salon game because it sounds so COOOOOOL! and don’t be sorry I’m also in a game jam and I know just how hard it is so I don’t mind but make sure you win the game jam!!! best of luck!

---

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [March 25, 2026, 10:25pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/54 "2026-03-25T22:25:35Z")

</div>

Here’s the [hair salon game topic](https://forum.makecode.com/t/hair-salon-game-dev/42456).

---

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [April 5, 2026, 7:24pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/55 "2026-04-05T19:24:40Z")

</div>

After some trial and error, here’s the procedurally animated cat @coppercode has suggested:

> **[Procedurally Animated Cat](https://arcade.makecode.com/S64187-18553-32498-48995)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

It’s really weird and cursed looking, but it’s a start.

---

<div class="post-metadata">

**Author:** ![coppercode](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/coppercode/32/26022_2.png) [@coppercode](https://forum.makecode.com/u/coppercode)\
**Post date:** [April 6, 2026, 4:55pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/56 "2026-04-06T16:55:18Z")

</div>

thank you some much for trying this and its so cool I could of never have been able to do this its epic your so good!!

---

<div class="post-metadata">

**Author:** ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)\
**Post date:** [April 8, 2026, 9:09pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/57 "2026-04-08T21:09:43Z")

</div>

the wobbliness kinda works if you make it super fluffy

---

<div class="post-metadata">

**Author:** ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr)\
**Post date:** [May 30, 2026, 8:42pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/58 "2026-05-30T20:42:03Z")

</div>

I’ve been making some changes to the IK extension and I’m still trying to finish the ragdoll extension, and I realized that they are still kind of just beta extensions with a lot of areas that need improving.

I plan on making both the IK and ragdoll extensions _the same format_ as my softbody extension, so all rendering will be the same, all the updating will be the same, just the logic for how the segments interact will be different; softbody will stay with its math, IK with its FABRIK math, and ragdoll with its own math.

When I was making all these extensions, they were just quick-wips of ideas.

The reason I’m saying all this is because the IK and Ragdoll extensions are having major updates to them and wanted to warn those who are using them in their games.  
Before I make any changes though I need to make sure I can update the changes and have earlier extension access.

@WoofWoof as our new scientist, or @richard, could either of you please shed some light on how I can make changes to an extension without it braking others’ games?

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [May 30, 2026, 8:46pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/59 "2026-05-30T20:46:31Z")

</div>

When extensions are installed in projects, they are pinned to the version available when installed. They do not automatically update.

You would “break” projects that update to a newer version of the extension if you do one of the following:

- Change the behavior of an existing function
- Change the API of an existing function

If all you are doing is adding blocks, then you will not break existing projects.

If you have specific questions or ideas, then feel free to ask.

---

<div class="post-metadata">

**Author:** ![WoofWoof](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/woofwoof/32/32523_2.png) [@WoofWoof](https://forum.makecode.com/u/WoofWoof)\
**Post date:** [May 30, 2026, 11:19pm UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/60 "2026-05-30T23:19:36Z")

</div>

Well, to break a game they have to update the extension, so just make sure to make the new version at least a 0.1.0 update. You also can create new whole new functions for new versions of blocks and mark the other version depreciated (idk what the block syntax is for that, I forgot. Probably something like `depreciated=1`) and that was those blocks (I think) won’t show up in the block tab anymore but will still exist in older projects.

[Previous page](https://forum.makecode.com/t/procedural-animation-dev-page/41737.md?page=2)

[Next page](https://forum.makecode.com/t/procedural-animation-dev-page/41737.md?page=4)
