Hey so I'm not sure if this will be helpful info for anyone but I wanted to do some retrospective content because it just feels like the thing to do and is hopefully helpful info for other devs! So I'm gonna make a couple posts just going over my process on how I made my game "Pet the Damn Cat". If this is helpful info please let me know in the comments!

You can play "Pet the Damn Cat" here to see it all in action.

Part 1: Draw the Damn Cat

Alright this is already a bit of a misnomer. For the art of my game I didn't draw anything by hand - rather I used one of my favorite art tools Affinity Designer. It's a very affordable Adobe Illustrator clone which I enjoy for a couple reasons that I'll go into.

If you're unfamiliar with both Illustrator or Designer here's the main point: These tools are made to create vector art as opposed to raster art which you would create in tools like Photoshop or Clip Studio.

Raster images are made from individual pixels. Vector art is basically made of math - stored coordinates, curves, and other info that tells your computer how to read it to create the image.

It's a lot like creating 3D models just with one less dimension. You can create shapes that scale infinitely and assemble them into the final image because no matter how big or small the item is the math is always the same.

I use vector for a few reasons: - I personally just love the flat shapes. It's a part of my own style but has unique limitations that allow me to problem solve and make more unique work than if I drew by hand

• Nothing is ever wasted. I can reuse my cat or any piece as many times as I want and scale it infinitely to fit any project. I could also reuse parts for another animal if I wanted and simply recolor them within seconds, or create skins and color variants within moments.

Dawn of the first day

So the jam starts and pretty shortly into it I have my concept decided on a game where your cat begs for attention every 10 seconds. Now what?

Well, since I already know my game is going to rely heavily on my visuals I just jump right into making mostly finalized graphics. There's not a lot of time for iteration here.

I get to work building the room first. I don't go too overboard on details, I just make enough to make sure it reads as a room in someone's house. I made my canvas a standard 1920x1080 then just started filling it with room stuff.

Dramatic recreation of room making

Once I had a basic room I needed my characters. So I created the first iterations of my player character and the eponymous cat.

I do this similarly to the room, but with the expectation that I'll need some clean up to rig these characters for animation later.

Her hair is made of balls

Once I got both of the characters looking about how I want them to and to the scale I want them in the room, I copied their assets into their own individual files.

I also made some changes to the cats design to help everything blend together as if the cat is one piece

From here I grouped everything together into the individual chunks that need to be animated and labeled them to make rigging easier on myself later. I also label based on what side of the character, as I consider where I want the shape to rotate from.

The ears, for example, I want to rotate at the base of each, not at the center between the two. So they both get their own asset and I label them as left and right accordingly.

The eyes always pose an interesting challenge. I want the irises to be able to move around and look in different places. So what I do is I punch out holes in the shape of the eyes on the head and create an Eyeback asset. So then I have the head, the irises, and the whites of the eyes all in separate pieces.

For the mouth, I create multiple assets that I can hide and reveal to mimic the opening and closing of the mouth, including some expressions for when the cat is angry at your petting ability

And to give the eyes more personality, I create eyelid assets that can just appear over top of the face to create the illusion of blinking or changing expressions

Now that the cat is ready for rigging, I highlight all of my layers and create Slices in Designers Export Persona. This will allow me to export all of my assets without having to break them out into their own artboards.

So because I'm animating in Spine2D I have another step before I export all my pieces out. Spine2D needs a JSON file to take all the info of my character and allow me to import it all at once with it's body parts in the correct place. With Adobe tools, you usually need to get a special export widget from Github. But Affinity Designer just has it built in! So handy

And that's it! I hit export and it does the rest for me. I now have all my art assets broken into chunks, labeled, and they have their own Spine.json to let me just plop this into my animation tool and get started.

That's it for part one of my Retro! Next is animating in Spine2D. Let me know if you found this helpful or if there's anything you'd like me to talk about.