Animating in code

Hey everyone,

 
I hope you are all doing well!

Today I thought I'd share some more about how I add the art to the game & animate it in code. Now obviously this isn't the most exciting part of the development cycle ( I still prefer drawing girls!) - but it's where things really come to life, and that's always cool to see I think.

Also..it's what I'm working on now :)

Adding images to the game

Now, adding a single image to the game is actually really simple. I just have to add 1 line of code for each image I want to show- and the images will appear in the game at the centre of the screen. So, these 2 images will show keen with an open mouth.

But a lot of art in the Space Rescue is animated. And adding animations to the game is a bit more tricky. Take for example the new spaceships I made for the view from the ships bridge.

Now to make these ships fly, I need to write some more code to make that happen. And that looks like this.

Now this code consists out of 3 commands. The first command tells the game where to place the image at the start of the animation, and the other two commands describe it's movement back and foreward ( by defining it's position on the X & Y axis of the screen). And alongside the movement, the image also rescales (zoom) This is to make sure the ship stays on line with the backgrounds perspective, as it moves to the right.

But finding the right numbers for this bit of code is always a bit of guesswork- and it usually takes me a few tries to get a somewhat believable movement :D

So the code above resulted in rather harsh animation- not really what I was looking for, ahem! But I got it right eventually (pink code below ).

Now once I can make 1 ship fly, it's easy to copy-paste the code to make the rest of the ships fly as well. Like Plorks ship for example (blue underlined code) . It uses similair code as the marzpop ship, but it's just placed more to the right.

The biker.

And then there are scenes that have even more animations stacked upon each other, like this new scene where the biker get’s a tattoo.

Here I had to create 4 seperate animations; one for the tattoo-bird, the laser, the flashy red effect on her back, and the white sun in the background (it slowly fades in and out). Below you can see the seperate images I used.

Ahem! And for those who are still reading...this is how this scene is written in code :) In the left script I list all images I want to show, and in a seperate 'images script' on the right I write how each image animates.

The arcade

Well, and here is one where things get exponentially more complex, as we skip though 3 scenes after each other, showing about 2 dozen animations in a few seconds :)



The arcade alone, already has 4 seperate animations when turned on...

Well, I hope all this talk about code wasn't too boring? :)

Next- extra scenes 

At this time I finished adding all the scenes to the game, as shown above. And normally I would now continue by adding the dialog to these scenes. But after doing a test run through the new story, I thought there was someting missing. The time between the bikers arrival, and playing with her on the arcade was really short. So I decided to add a few extra scenes to game (which also add a fun gameplay challenge), where the biker sneaks around the ship stealing things. And Keen has to 'chase' her a bit. This gives me a chance to show more of who she is.

However, I didn't plan for this. So it will take me a bit longer to finish this update... But, I hope you don't mind... for there will also be more gameplay of course :) Well, If you have any thoughts on this, or the way Space Rescue is animated in code, please let me know in the comments!

And thanks again for all your suport & suggestions so far. It's been really helpful!

All the best,
-Robin  

PS. here is one last bonus gif about another bit of animation!