CodePink
patreon
Animating in code
🕑 Added 2024-10-28 14:02:00 +0000 UTCHey 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!
Comments
Robin
Hey Adam! That's sortof correct :) The '4.0' refers to the time it takes to go to the given position in that line of code- so 4 seconds in this case. And 'linear' refers to a constant movement, opposed to for example the term: 'easein'; where the motion would start slow, and speeds up after that (all still in 4 seconds). But 4 seconds is very fast, and this indeed creates the ping-pong effect. Later on I changed it to 20 seconds, and used the 'easein' term, to get a more natural movement. (I think that is what you refer to with the sine-function?) Well, all the best! -Robin
Robin
It's my please! :) Thanks again Dacer!
Robin
Hey Jon, thank you so much for the hartwearming comment :) I just really enjoy working on this project - and love to add all these little details. And I'm glad you enjoy it too! Thank you so much & please take care! All the best, Robin
Adam
I'm guessing the 'linear 4.0' in those two lines of position code for the Mars pop ship. I guess that's why you have a bit of an Atari ping pong effect going on when it changes direction. It occurred to me that maybe it's possible to use a sine function of time in the rate of motion?
Dacer
Always interesting to see "how the soup is made". :-) Thanks, Robin!
Jon
This is so cool! Thank you for sharing the creative process! And your game is really a standout against mass-produced CGI smut games. You have real art, and your cartoons are way more believable, and a thousand times more charming and desireable, than any misproportioned, plastic-faced inflated CGI babe!
punchbandit
๐ Iโm sure itโll all come together nicely!
Robin
Thanks Arboris! When I just started the game, I decided to let the shuttle in the shuttlebay float. Back then I didn't think much about it, but after that I felt obligated to keep things consistent & animate things in similair situations. And that slowly lead to me making a few hundred animations :D I didn't consiosly plan for it, but I'm glad it came to this! (my favorite background animations are those in the junkyard ship).
Robin
Thank you punchbandit! These scenes were cool to make as well. I just hope I can keen that atmoshphere steady throughout the story, because there are also scenes where she will be walking in some bright hallways. I dunno, maybe I let her sabotage the light, to make everything gloomy during her story :D
Robin
Thank you TJab, I'm glad you like it!
Robin
awesome, thanks for letting me know SYH! :)
TJab
These are rad, I find them so interesting.
punchbandit
Really digging the cyberpunk atmosphere of the biker scenes! Lovely!
Arboris
It might be a giant pita, but the end result does not lie ๐
SYH
No problems here.
Robin
Thank you so much Rik- I'm glad you like it! This is actually a big part of what I do, so I love to talk about it as well occasionally :)
Robin
Oh, I'm so glad you like it :) Also, if you want to make a VN-game like Space Rescue, then I highly recommend using Ren'py (the game engine I use). This game enige gets regular updates, it's free and it's easy to use. Of course, making animations like this work in code is a bit more complex, but still very doable. Well, if you need any help getting started, feel free to send me a message. Maybe I can be of some assistance? All the best, Robin
tingeltangelflo
as someone considering trying to dip its toes into making a game of his own, i am so thankfull for this post man!
Rik Kershaw-Moore
Awesome post into what it takes to make a game. Really fascinating
Robin
Oh, I'm experimenting with adding gifs to my post. These can sometimes get quite big (up to 15 mb). I hope it still shows up well at your side?
