Behind the scenes of the Catfight twine game

POSTMORTEM

This was an experimental attempt at making something like the Pokemon combat system in Twine. I had a lot of fun trying to push Twine to the limit. I was really inspired by Porpetine's No World Dreamers Episode 1, which is a crazy polished twine game: http://slimedaughter.com/sticky_zeitgeist/

It was made in Twine 2.3 with Harlowe and the Harlowe Audio Library plug in. 

FIGHT LOGIC

Basically the fighting logic is pretty straightforward. It starts with a passage called “You’re turn.” This page has links for the four actions (Scratch, Dodge, Pounce, and Flee) Here's an image of the visual chart in Twine:

From here, clicking on the action takes you to one of the moves you can do. In each of the “moves passage”, it’s basically a random number generator for the attack damage, random number for if you hit or missed the enemy (percentage depends on the move), and if the enemy is “dodging” then always Miss.

Then we (go-to:) “His turn” In which, we first randomize which attack he will pick, then the same logic for his attack applies. (Damage, hit percentage, and if you are dodging)

After “His turn” it goes back to “You’re turn” and once again the cycle loops until one of you reaches 0 HP.

CSS...

I'm not really great at CSS, so with this game, it gave me an opportunity to learn more about it. I had to do a lot of digging online to figure out how to make boxes, how divs work and so forth. (This was hours and hours of googling). Unfortunately, I couldn’t figure out how to make it resize properly, so as a result, it’s kind of stuck in that one resolution. I find that CSS-tricks.com tends to mostly apply to Twine. www.w3schools.com also has some basic resource, like how to create buttons out of links, but I ran into a lot of problems with some of their code working in Twine. (Could just be me… I’m trying to fully grasp css still…)

HEALTH BAR

Another tricky thing is the health bar, initially I stuck with numbers, but I thought a health bar would look more Pokemon-y. This answer by greyelf on this twinery thread is amazing and totally works. http://twinery.org/questions/351/how-can-i-implement-a-visual-health-bar-in-harlowe-2-0-1

IMAGES

For the image stuff, I do a bit of graphic design, so I made some cute (and maybe scary) little cats. I find that if you can, having art tailored to your story style is really nice. Since it was just kind of a test, I decided to make everything from the images to the UI just black and white to save time. One important thing about having a lot of images is preloading the images so that they don’t have to load as you're playing the game. This thread is how I learned to preload images with javascript. https://twinery.org/forum/discussion/8195/preloading-background-images-sugarcube-2-0-twine-2

AUDIO

Music is done with the Harlowe Audio library plug-in. Overall it was quite a smooth experience getting it working, however, I noticed that preloading doesn’t seem to work on mobile (at least I couldn’t figure it out) so right now it works alright on computers, but it’s all screwed up on mobile with sounds coming in way too late, etc. For the sake of the prototype, I just used the original sounds from pokemon (sorry nintendo!), but I imagine having a professional audio designer do the music and sound effects would totally make the game stand out.

CLOSING THOUGHTS

Overall, I'm still learning a lot about the javascript and CSS parts of twine. It's been really cool to see what you can make with it outside of basic branching narratives. I approached this project like trying to make a website and through that perspective, it really gives you a lot to play with. Even with the simple math logic in Twine, it actually opens it up to a lot of turn-based gameplay experiences. I hope to keep digging around in the future. 

Thanks for reading! and if you have any questions please let me know.