My Non-Artist Animations for Swing It

May 29, 2014

In April Tim Waskett (@CheesyWaskett on Twitter) was the team lead for one of the three forum collaboration projects created in the HobbyGameDev community (summer season projects will be starting soon!).

The game Tim led, Swing It, is a 2D grappling hook platformer developed in Unity. It’s available to play in-browser, along with the other April Collaboration projects, over in HobbyGameDev.com’s Games section.

Late in the game’s development, it was fully playable and coming along nicely. Here’s how the prototype looked during development.

I bet that Tim could have created fancier art, but much of what you’re seeing there is just quick placeholder he pulled together. That was the right thing to do since he was otherwise focused on the gameplay programming, core mechanics, and even much of the level design.

The benefit of a team project, at least when team skills and interests line up nicely, is that he gets to focus mostly on aspects he’s interested in getting practice with, and meanwhile others with complementary learning goals can practice by filling in for where his main attention isn’t.

Someone had already offered to make a character animation. That person disappeared when other priorities came up, and time was running out. (In non-commercial game development people sometimes get overly optimistic at first about their time availability, then get caught up in other things. Not a big deal, no jobs or salary at stake. It’s just something to be aware of and prepared for.)

I wanted to help out. I’m not really a game artist, but I am always trying to get better versed in it. I am fortunately at least comfortable enough with basic image creation that I was able to pop together a city background image, some replacements for the grapple hot points, and a new character animation.

My art’s not going to win awards, but I had fun doing it. I think it works well enough.

For the background image I first wanted something that looked a less default than a solid color. As my second criteria I wanted to have enough structure and form to establish a sense of setting. When I say setting, I don’t mean anything elaborate. I was just thinking about the minimum level of detail we were told to think about in middle school for creative writing: time and place.

Is the character a pirate swinging between cliffs in the Caribbean? Tarzan in the jungle? An Indiana Jones-like cave explorer?

The game’s deadline was coming up soon, and as I really can’t stress enough I’m not a particularly good artist. So I didn’t really go through any kind of white board brainstorming, pros/cons, arguments, or thinking about trends. I just promptly started working on a theme that I felt I was capable of pulling off at all, and one that wouldn’t require too much time or fiddling for me to bring to a usable level.

In-game this is darkened considerably, to avoid it conflicting with the foreground elements, but here’s the full background image I came up with, brightened here to make the shapes easier to distinguish.

The skyscrapers in the background was largely just gray boxes, pattern-fill to create the windows, with some quick manual cleanup to keep the window pattern off the building margins. The stars are obviously just random noise, on which I used the levels adjustment slider to hide most of, exaggerating contrast levels between the points that survived. After all that I paint filled a new layer on top with partly transparent dark purple, to wash out detail into the background and help establish its night-ness.

For the skyline I wanted building shapes that are at least a bit more interesting than simple rectangles, so I used one of the old arcade classic Rampage’s backgrounds as a reference image when I was making my gray shapes.

The main art that I was kind of worried about was handling the player animation.

For as much as I’m not a very experienced game artist, I have even less experience and comfort with animation. I was kind of dreading it, in that I’m-going-to-make-myself-do-it-because-it’ll-be-healthy kind of way.

Fortunately, Tim’s placeholder animations largely made the animating aspect a non-issue for my part in helping with the art. As it worked out, this actually felt a little more like I was doing costume design than animation.

The animations already existed in stickman form, I just had to put clothes on it.

I zoomed in then worked out on a couple example frames which colors and clothes I wanted to use. Boots or shoes? Pants color? What could I do with his head to look at least a little distinctive, to add some character?

The hardhat made sense for someone climbing around up high in an urban setting, and made the character very easy to see. The hardhat had me thinking of the old TV show Home Improvement, so I tried giving him some Al Borland facial hair (the co-star on Tim “The Tool Man” Taylor’s show within the show), and I kept it since it seemed preferable to having a solid box of color for a face. I chose bright blue eyes since brown eyes here might’ve looked like hair.

Again, as with the background, I wasn’t putting a lot of time or thought into the concept, I was just trying to figure out something that would work that I was capable of pulling off.

Once I got those questions sorted out on my couple of example poses, I just went through and colored over the lines on Tim’s placeholder stickman animations. Note that these animations are shown over different colors based on the backgrounds behind them, which is also something I did when picking out the character’s colors to ensure he’d pop against the city background.

I had read before – in a bunch of places, as it’s pretty quickly becoming common knowledge – that Mario’s original overalls were the chosen outfit because it’d help show his arms swing. Our character for this game is much smaller, but to try to help show hand motion I gave the character red gloves. The only other tweak I made structurally was adding boot tips and a nose, to reinforce a sense of attention and facing in the poses, and move the legs while swinging into the position of Pitfall Harry’s jumping pose from Atari Pitfall.

As with any pixel art, I stuck to using the pencil tool and eraser on pencil-mode to avoid soft edges or partial transparency.

Here’s how it all looks in action! Compressed a little, sure, but you get the idea.

As someone that isn’t used to dealing with animation I’m pretty happy with the results.

If you want to see and interact with it, go play Swing-It (in-browser, thanks to Unity) over in HobbyGameDev.com’s Games section.

I love collaborating with others on non-commercial projects. In these kinds of situations artist, animators, and people with sound talent are often in short supply. This sometimes means programmer/designers like myself need to adapt to wear different hats, but the freedom to get that kind of practice without stressing over whether the outcome is sellable-quality is actually part of what’s nice about working together on hobby projects.



Learn and practice team game development with Gamkedo Club.
Membership worldwide. Professional support. Proven process.




Subscribe by e-mail to receive weekly updates with Gamkedo.Community interviews and YouTube training videos for game developers!



2 Comments

  1. Craster says:

    It looks amazing, sir.
    How much time did you spent coding it?

    Is it possible to make the same “walk-around” as in pokemon and Don’t Starve?
    that would be awesome if a game took more than 30 hours to complete, because you are in a free roam world ?

    Anyone knows?

    -Craster

    • Chris DeLeon says:

      Hi Craster –

      I only did some of the art on this particular project, I did not do the coding for it. The code was developed over the period of one month entirely by one person (Tim), new at that time to 2D in Unity I believe, and only working in his spare time. Environments like Pokemon and Don’t Starve are absolutely possible to make. The difficulty in those cases is not in their programming but primarily in their quantity of art, writing, and level design necessary.

      Best wishes,
      Chris

Leave a comment

Comments Form
  • Your email will not be used for any purpose other than to update you in replies to your comments. Your website address will be shown as a link from your name with your comment. Your profile photo is auto-magically provided by Gravatar.

All contents Copyright ©2017 Chris DeLeon.

Site production by Ryan Burrell.