Working with Images in SpriteKit – Image Files

By: Mark Johnson @mellowcoder

The following is the first in a series of posts on working with images in SpriteKit. Specifically how to manage image files when developing a Universal App.  This first post will be a general discussion of image sizes and look at the naming conventions that can be used when adding images directly to a project.

Before we get started we need to discuss screen sizes.  SpriteKit requires iOS 7, so we do not need to support images for the non-retina iPhone.  This means there are currently four screen sizes we will be working with.

  • iPhone Retina (3.5  inch)  –  960 x 640
  • iPhone Retina (4 inch)  –  1136 x 640
  • iPad  –  1024 x 768
  • iPad Retina  –  2048 x 1536

The approach we have taken when designing our images is to first create the highest resolution images for use with the iPad Retina and then scale down the images for the other devices.  This means that the images for the iPad are simply scaled down by 50% from the retina size.  Scaling down to the iPhone it is a little more complicated and depends on how the images are being used (characters or backgrounds) and the supported orientation (portrait or landscape) of the app.  For most characters sprites we use the same size images that are used with the iPad.  For other images it may be appropriate to scale them relative to scaling factor associated with the width or the height.  The table below shows the potential scaling factors that could be used.

device scale factors

Once you have worked out the appropriate scaling factors to use, the next question is how to get the correct image for each device.  When adding images directly into your project this can be done using Apples’s image file naming convention.  The following is the naming convention for each of the different devices that support SpriteKit.

  • iPhone Retina (3.5  inch)*  –  image_name@2x~iphone.png
  • iPhone Retina (4 inch)*  –  image_name@2x~iphone.png
  • iPad  –  1024 x 768  –  image_name~ipad.png
  • iPad Retina  –  2048 x 1536  –  image_name@2x~ipad.png

* The ~iphone extension on the name is optional but, I find it helps to avoid confusion.

Then to load the images you simply use the base image name.

    spSKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"image_name"];

Unfortunately, there isn’t a specific naming convention that can be used to automatically load a different image on the 4 inch iPhone.  Additionally, when using the naming conventions there isn’t an easy way to share an image between devices.  For example, if you wanted to use the same image for the iPhone and the iPad since there scaling is almost the same.

In the next post we will look how to work around these two issues using Image Sets.


Dwarfs! Speed Paint and Process Work

The last two weeks I’ve been extremely busy but I wanted to make sure I took an hour here and there to keep working on my process and speed painting. I also took the opportunity to explore a pallet I’ve extracted from a Paul Bonner painting that I’m using for one of the book covers I’m working on.

I started with a blocky speed painting to warm up creating volumes quickly, about an hour.


Over the next week when ever I had a free couple hours I would work on this more developed character.






Next week I’ll be going through the process of putting together page one for Gellini’s special gift.

SpriteKit Landscape Setup

By: Mark Johnson @mellowcoder

Configuring a Landscape Only Game Using SpriteKit

When we began developing our first game in SpriteKit we started out the same way that I suspect most everyone else does.  Open up Xcode and create a new game using the SpriteKit framework template.  The simple default app that is created worked fine when I ran it in the simulator.  But, I wanted my app to only run in landscape and the default app comes up in portrait view and is configured to support both orientations.

So, I update the target Deployment Info, unchecking the portrait options and ran the demo app again.  Everything looks fine so I think I am good to go.

Deployment Info Landscape Only


The Problem

Next, I remove the existing scene setup code and start adding my background sprites to build up my scene.   My first background sprite should be located in the lower left corner of the screen so I position it there and run the simulator.  But, when the simulator comes up the image is on the far left but it is below the bottom of the screen.

Image off the screen

 I add some log statements to look at the size of the view and the size of the screen and in each case it reports the size as if it was in portrait orientation rather then landscape.

One Option is to use viewDidLayoutSubviews

One option to address this problem is to add a “viewDidLayoutSubviews” method to your view controller and then add your code to present your scene inside this method. The viewDidLayoutSubviews method is the recommended place to put any geometry related code. It is called after the system has completed any auto-layout items. This means, in addition to the initial presentation of the view, it will also be called anytime the device orientation changes and the view auto-rotates. If you are supporting both portrait and landscape orientations and need to manually adjust the layout when the orientation changes, you should put that code here. If you do add your code to present the scene, you will need to ensure that it only runs the first time the scene is loaded.  But, for the initial setup and presentation of the scene, I think there is a simpler solution.

A Simpler Solution for Landscape only orientation

Simply, update the SKScene scaleMode that is defined in the view controller.  The SpriteKit template sets up the scaleMode as “SKSceneScaleModeAspectFill”. Instead, you should change this to “SKSceneScaleModeResizeFill”.  Now if you run the simulator you will see that the background image is correctly positioned.  Please see last weeks post, SpriteKit – Understanding SKScene scaleMode, for a more detailed discussion of the different SKScene scale modes.

  scene.scaleMode = SKSceneScaleModeResizeFill;

The only other thing to be concerned with is getting the correct width and height to use for the scene.  I get the bounds for the mainScreen.  This always returns the dimensions based on the portrait orientation so, I simply swap the width and height to get the size in landscape.

  CGRect screenRect = [[UIScreen mainScreen] bounds];
  float landscapeWidth = screenRect.size.height;
  float landscapeHeight = screenRect.size.width;

This is a simple straightforward approach to setup a game that is only intended to support landscape orientation.  The following is a screen shot of the one of the backgrounds for the game we are working on.  This background is made up of numerous images with their positions adjusted relative to the top, bottom, left and right so that we can handle both iPhone and iPad devices.

Fillip Background





SpriteKit – Understanding SKScene scaleMode

Moving from Cocos2D to SpritKit

We have recently moved from Cocos2D to using SpriteKit as our game development framework.  In the process we have been experimenting with the various aspects of developing with SpriteKit.  This will be the first in a series of posts sharing what we have learned along the way.

What is scaleMode?

The scaleMode of a scene determines how the scene will be updated to fill the view when the iOS device is rotated.  There are four different scaleModes defined:

  • SKSceneScaleModeFill – the x and y axis are each scaled up or down so that the scene fills the view.  The content of the scene will not maintain its current aspect ratio.  This is the default if you do not specify a scaleMode for your scene.
  • SKSceneScaleModeAspectFill – both the x and y scale factors are calculated.  The larger scale factor will be used.  This ensures that the view will be filled, but will usually result in parts of the scene being cropped.  Images in the scene will usually be scaled up but will maintain the correct aspect ratio.
  • SKSceneScaleModeAspectFit – both the x and y scale factors are calculated. The smaller scale factor will be used.  This ensures that the entire scene will be visible, but will usual result in the scene being letterboxed.   Images in the scene will usually be scaled down but will maintain the correct aspect ratio.
  • SKSceneScaleModeResizeFill – The scene is not scaled.  It is simply resized so that its fits the view.  Because the scene is not scaled, the images will all remain at their original size and aspect ratio.  The content will all remain relative to the scene origin (lower left).


For these examples we will use the default spritekit template that is generated when you start a new spriteKit project. I named my project ExporingScaleMode and setup to be an iPad only project.

New project step 1 New project step 2

Next we will go to myScene.m and remove the touchBegins event handler since we are not going to be using that.  We will then add code to the initWithSize method to add two copies of the spaceship sprite.  One in the lower left corner of the screen and the other in the upper right.

SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@”Spaceship”];
sprite.anchorPoint = CGPointMake(0.0,0.0);
sprite.position = CGPointMake(0,0);
[self addChild:sprite];

SKSpriteNode *sprite2 = [SKSpriteNode spriteNodeWithImageNamed:@”Spaceship”];
sprite2.anchorPoint = CGPointMake(1.0,1.0);
sprite2.position = CGPointMake(self.frame.size.width, self.frame.size.height);
[self addChild:sprite2];



Now go ahead an run the project in the iPad simulator.  You should see a screen like this, with one spaceship in the lower left, another in the upper right, and the “Hello, World!” text in the center.

Now lets try each of the different scaleModes and see what happens when we change from portrait to landscape view.  Go to the viewController.m and update the scene.scaleMode to each of the modes listed below, run the simulator, and then rotate the simulator so you are looking at the results in landscape rather then portrait.




SKSceneScaleModeFill – As you can see SKSceneScaleModeFill does not maintain the aspect ration when the scene is scaled.  But, it does ensure that everything in the scene is shown.




SKSceneScaleModeAspectFill – this was the mode that was originally set in the project template.  With this mode the spaceship images are slightly larger then the originals.  This is because the scene was scaled up so that the portrait width matches the landscape width.  The scene does completely fill the view but the images on the top and bottom are now cropped.




SKSceneScaleModeAspectFit – This scale mode does enable you to see the entire scene.  The scene has been scaled down so that the portrait height now equals the landscape hight.  As a result the images are smaller and we now have letterboxing on the left and right of the scene.




SKSceneScaleModeResizeFill – This final scale mode is the only one in which the original images are the same size and aspect in both portrait and landscape.  But, as you can see the content is positioned relative to the origin (lower left) so the image that was in the upper right is now partially cropped and no longer on the far right.  Additionally the text is not centered in the screen.




Well that is all very interesting but, what conclusion can we draw from this.  The first conclusion is that it would be very challenging to build a game that worked in both portrait and landscape.  It can be done but you would probably need to rearrange the content whenever the user rotated the view.  I also think that the best scale mode to be using is SKSceneScaleModeResizeFill.  This mode maintains the size and aspect ratio of your content in both portrait and landscape views.

I believe this also gives some insight in how to setup your scene when you want to maintain the landscape only view.  But, I will save that for the next post.

Painting from colors of photos of paintings

There is a common practice in digital painting these days of extracting the colors from a photograph in order to create a unified pallet. While this works quite well, as I’m been trying it I find it’s important to limit the amount of colors you pull from the photo to make sure the colors in your painting don’t get too busy. I have however discover that extracting colors from images of other paintings allows you to work with in that paintings color range. By no means should you just develop your pallets this way. If you don’t have experience with creating a color pallet I highly suggest reading “color and Light” by James Gurney. He does an excellent job laying out techniques for developing an oil painting pallet that translates easily to digital painting.  Below is a speed painting study of a character I’ve roughly rendered with color pallets extracted from still life photos. I’m finding for limited, moody pallets, classic still life paintings of fruit make an interesting place to start. (although, be aware that blues are more uncommon in this type of painting.)


DrunkFisianColorTest copy

Holiday Art

As we’re moving into the new year, I wanted to add a little blog post showing some of what we’ve been sketching over the holidays. I’m including a selection from Joshua’s 12 days of Christmas pin ups, and an image I did for the Imagine FX forum challenge “Bad Santa.”









Kris Kringle and the Bah Humbugs



All that glitters is not gold.

I’ve been working on a cover illustration for a young adult fantasy book and I got a piece of feedback I’ve heard before, and is absolutely no help to an artist what so ever. It was, “can you make the title more gold and less yellow.” Not that this is bad feed back. Clearly it means you want it to look different, the issue is figuring out what you mean by gold.

Gold as a color, or golden, can exist anywhere from an olive yellow to a red brown yellow. Crayola’s original gold color is a pale tan brown. The reason is that golds color is really brown. yellow brown, green brown or red brown, it’s still a brown. What color to make gold can be a very subjective topic and normally has to do with the limitations of your color pallet and the colors surrounding the gold elements in your image.

This is before we even get to the discussion of metallic gold. To make something look metallic gold is always interesting because it has an initial brown color and then, like all reflective metals, it’s color is defined by it’s reflections and shadows. What makes gold look like gold has very little to do with the actual shade of yellow brown you use and more about how you define the shadows and highlights. Our brains recognize gold by how the light spreads across it’s surface.

Below is the image I sent to look for clarification on what he was looking for. you’ll notice the gold I used in the title with it’s color extracted, between a gold bar(warm red brown shadows) and a gold ore(cool olive green shadows). You’ll find in most photos gold is depicted as being the warm orange red but when painting it can be very effective to use a pale yellow green. In a mostly warm pallet painting this will let the gold feel heavy, cold, and a little more aged.

I also included in the image a list of color swatches. The top dot “A” is crayola’s original gold, and then the rest are alternative golds that crayola released. Using this set of examples and finding out how metallic he wants it to appear, I feel like I can accurately interpret what the client means when they ask for the element to be more gold. I’m going to be doing an exercise to explore metallic surfaces for my next post. I’ll be doing gold, silver, iron, and copper spheres depicted under a couple different lighting set ups.


Quartermaster Speed Painting Session

For our speed painting session this week, Josh and I decided to do a sci fi quarter master. Which has several definitions including an officer in charge of supplies, or a non com in charge of navigation. I wanted to do one delivering supplies, and I hated everything I did for the first 40 mins or so. I then really loosened up and made a very ruff painting of a futuristic hover plane scraping against the ground with supply officers heading towards you from it. Considering this was done in 20 mins I was very happy with the layout and the bold use of color I got set in.


Silhouette studies of Fis

After doing a set of exercises with Josh involving, speed painting and character development I decided I needed to do some studies while working on the story concept I’ve been developing. So to help me develop the characters that will surround my main story I began the first in a series of silhouette studies. This particular set is designed to explore different divisions of the standing armed forces for the City of Fis, a major location in the Story. The goal of these studies is to find ways to create visual consistency across all the characters because they are in the same army. Visual consistency for each group of characters that also differentiates them from the other groups. And of course, develop each characters individuality while still having them stand out of there group.
The Alchemists Guild
This is a section of the military that is in charge of research and development of energy sources based on the metals and minerals found in the Sol’Ashe’ world.

The White Hand
A small group of wizards who are relatively powerful and are mainly advisers. They only will participate in battles during War or in times of desperation.

The Fisian Guard
The main guard of the City of Fis consisting mainly of Humans because the native Dwarfs of Fis have their own divisions.
The Black Hand
A group of mages that make up the magical element of the fighting force of Fis.
The Tinkers Guild
Working closely with the Alchemist Guild, the tinkerers implement and develop technology based on the alchemists’ work.
The Sisters Blood
The Female fighting force of the Native dwarfs of Fis. This force also includes The Veiled Sallie. A group of women who are the executioners of the Fisian realm.
The Brothers Stone
The male fighting force of the native dwarfs of fis. Extremely well trained to fight as a unit, they are typically not as strong at one on one combat.