game art

Using SpriteKit’s Scene Editor for Simple Animations

When I began working on Corgi Corral, I knew I wanted to keep the game as simple code-wise as humanly possible. I wanted there to be one “LevelScene.swift” file that would handle the game logic for all of the levels in the game, and I didn’t want to clutter up that file with level-specific code for animating background/decorative sprites. In fact, I didn’t really want to write that code anywhere.

Enter the SpriteKit scene editor.

I know many developers prefer positioning things in code over using tools like Storyboards or the level/scene editor, but I personally love the ease of drag-and-drop positioning and the ability to preview what things will look like without building and running the app.

This morning, I decided to create and animate some twinkling lights on the fence that encloses the sheep pen. Here’s the end result (and yes, the sheep are wearing scarves):

Snow scene

I could have written something like this to animate the fence sprites:

let textures = [SKTexture(imageNamed:"twinkle1"), SKTexture(imageNamed:"twinkle2"), SKTexture(imageNamed:"twinkle3")]
let twinkleAction = SKAction.animateWithTextures(textures, timePerFrame: 1.0)
fence.runAction(SKAction.repeatActionForever(twinkleAction))

Instead, I decided to make the fence sprites SKReferenceNodes (in case I want to use them in another level) and animate them using the scene editor. To do that, I created an .sks file that matched the dimensions of the fence and placed the fence inside it. Next, I opened the animation timeline at the bottom of the editor and dragged in an “AnimateWithTextures” action from the object library on the lower right.

SpriteKit animation editor

After that, all I had to do was tweak the parameters in the attributes inspector on the right. I set the duration for 3 seconds and dragged my textures from the media library to the “textures” box in the attributes inspector. Finally, I set the animation to loop forever. When I added added the SKReferenceNodes to my scene, they animated automatically. Piece of cake!

January 25th – Progress Update

It’s been a week since I last blogged; here’s what I’ve been up to!

Accomplishments

  1. I created some art assets for the second level/scene, which has an autumnal theme. The screenshot below shows a funny bug (now fixed) in which a sheep would spawn in the wheelbarrow and be unable to escape.

    Corgi Corral Level 2

  2. The corgi now blinks when idle and barks occasionally during the game.
  3. I created a struct called “LevelConfiguration” that reads information from a property list. The list contains information like how many animals should spawn, what the time limit should be, what sounds should be used, etc.
  4. For scene management, I decided to abandon the idea of a SpriteKit-only solution and ran back to something I’m more familiar with: UIKit and Storyboards. I set up bare-bones view controllers with simple UIButtons and UILabels that players can use to navigate to and from the main menu, options screen, etc. They’re not pretty, but they work, and now all I have to do is create art assets for them:

    Storyboard Layout

  5. After the timer for a level runs out, the game now waits 3 seconds and displays a score summary screen with options to retry the level, select a different level, or return to the main menu.

Under Consideration

Here are a couple of things I’m mulling over:

  • Whether to have the different levels/scenes progressively unlock, or to make them all available from the beginning.
  • Implementing a “medals” system similar to the one used in Flappy Bird with bronze, silver, and gold levels depending on how many critters you herd into the pen. And then maybe you’d need at least a bronze medal to unlock the next level? I don’t know. Still thinking about it.

What’s Next

Now that I have a very simple menu structure set up, it should be relatively painless for me to set up things like iAd, sharing a score via the share sheet, and adding an option to turn off the sound effects. My goal from now until the baby is born in March is to make it so that the only thing I have left to do is add the art, music, and remaining sound effects.

It looks like I started the Xcode project on November 20th, which means I’ve been working on this for a little over two months now (and sometimes only for a couple hours a week). With that in mind, and knowing that it’ll take me a long time to do graphics and music, I’m hoping it’s reasonable to expect the game to be ready to ship sometime before my birthday in July!

Trying Affinity Designer

When I decided to make all my own art for Corgi Corral, I figured I would use Photoshop CS6 because that’s what I’m most familiar with. However, after making both the corgi and the sheep in Photoshop, I’ve started to realize that there’s a reason people use Illustrator for vector graphics: Photoshop’s tools just don’t cut it. I can’t afford Illustrator, so I went hunting for an alternative and stumbled upon Affinity Designer ($49.99), which happened to be on sale right before Christmas.

I just started messing with it the past few days, and I really like it. When you create a new document, there are preset sizes for Apple devices such as iPad Retina (1024×768 points) and iPhone 6 (375×667 points). All I had to do was watch a couple of short (< 4 minute) video tutorials before I felt like I knew enough to get started with the pen and shape tools, which are all really flexible. Another thing I like is that when you bring up the list of color palettes (PANTONE, Greys, Colors, Gradients, etc.), it also lists any custom palettes you’ve created from within Apple’s color picker. I’ve created a few palettes in Xcode, and I could access them easily from within Affinity Designer. Finally, I don’t have a graphics tablet, so the ability to do stuff like this is pretty great:

Anyway, the app gets great reviews and an iPad version is coming eventually, so if you’re looking for some intuitive, robust vector graphics or pixel art software, you might want to give Affinity Designer a try. It also has a nice dark interface, if that matters to you!

Football and Fleece

Like many hobbyist developers, I’m planning to create all of the art and music for my game myself, with the possible exception of some free/public domain sound effects. That being said, I’m not exactly an artist.

Tonight, as I sat with my husband watching the Huskers eke out a controversial and unlikely win against undefeated Michigan State, I made this sheep:

sheep sprite

And it’s a cute sheep. I think I can work with it. Eventually, I’d like for the sheep to have a couple different idle animations…perhaps blinking its eyes and flicking one ear at a time.

I know it’s probably against both convention and good sense to work on the art for my game before I start programming, but without the art, I just can’t seem to get motivated. If I can get all of the assets done for just one level, that’ll be enough for me to want to start working on the code. And right now, I have only one asset left to complete: the hero of my little game! Hopefully my next update will be about digging in to the actual Xcode project, with the goal of having the first level fully functional on iPad by Christmas.