sqwarkdemon

[Animation Breakdown] The "AI" in my 'A Haunting Bookworm' animation

Added 2022-01-06 19:45:26 +0000 UTC

So older followers of my work may remember an animation I made for Halloween in 2019, and I just wanted to share some backstory on it and also discuss how I made the "AI" for it!

So I made this animation during my last trip to the US, and I remember vividly animating it during the night and when my friend went to work so he didn't see what I was doing. It was a fun time, drinking several baja blasts and consuming many mcdonalds breakfasts. Honestly, American McDonald's breakfasts are insane...

...Anyway, here's how I made the animation!

I started off figuring out a good mechanic for the animation, and initially I worked on a word search puzzle.

While it was somewhat successful, I wasn't skilled enough then to put it together and ultimately it ended up way too confusing.

So then I went on to see what else I could do. Someone on my Discord server suggested writing in a book so I tried that too, which ultimately lead to this:

Now the question was... how do I display this information? And originally I made it so you had to randomly clicked books that changed every time you got the question right, but that ended up too irritating so I changed it so you had a helper character that was searching through the library for you.

Interesting! Now we have a small library map for our little helper to look for books!

Side note, during this time I made a Tic Tac Toe AI that would try their beast to beat you, and I stole part of that code. (Separate Animation Breakdown coming soon).

The idea was that the AI would walk in any one direction until it collided with a wall. Once it collided, it would then make a choice to continue searching or say it found something. Meaning it could make one move or several.

Those red dots you see are secondary collision markers. There's a 50/50 chance for the AI to turn back around if it hits them, or take a left or right angle back into the center square. That means if the AI gets stuck in the outer ring, it can always make it back in.

When the AI hits a wall and says it's found something, it'd present you with an exclamation mark to let you know it's done looking. Then you can just click that and open the book to progress with the animation!

But you're not here for silly explanations, you're here to see code! ...right?

Now beware - when I wrote this code I wasn't very good at programming, so it's gonna look a bit... shit. I'm also going to go into this thinking you understand basic coding practices like // meaning comments, or knowing what ints, booleans, and the likes are.
Also - this code is in ActionScript 3!

So Rose's direction is dictated by an integer (int), which in hindsight isn't the best option but it's still viable, I suppose.

var roseSpeed:int = 2; //Rose's pixel per tick movement speed
var roseDirection:int = 0; //Dictates what direction she's facting
/*************/
// 0 - Left //
// 1 - Up //
// 2 - Right //
// 3 - Down //
/*************/

Why yes - I did spell "facing" wrong.
I can't remember exactly why it started with left, but I feel that's the first direction I programmed. I dunno why it wasn't UP or DOWN but hey, 2019 Sqwark was a different beast.

Rose's speed was also dictated by a number. Higher is faster, lower is slower.

There were also variables called roseGo (boolean) and rosePrevDir (int).
If roseGo was set to true Rose would, well, go. She would move. If it was ever false, she would stop moving.
rosePrevDir does what it says on the tin - it logs the last direction she went. This was supposed to stop, or minimize, double inputs cus if she was already against the wall she was likely to walk through it if this wasn't done... Like right here:

...And here

This next code chunk is a bit of a mouthful so... get your brain ready for this one...
(Patreon posts suck and I can't post the text version here, so just read it in the pastebin below)

Yeah...
I didn't know switches were a thing until later, okay...

Either way, here's the messy and highly inefficient way the "AI" works - and why I call it an "AI" and not just a regular AI. It's hard-coded, mostly, to work as needed. It's not so much AI as just argument taker.

What this code is basically doing is it's attaching an "onTick", command to the main AS3 page. The tick tracks for current and ongoing changes every single tick - or 100 ms (I think).

So this code is always running and checking Rose's position. So yeah, not much AI more than a car that can drive in circles in a very set way.

But it works! And ultimately it looks rather impressive in use - even if it is a lie...