ButtonNode

When we first started developing with SpritKit we quickly felt the need for some higher level abstractions.  One example of this is a button.  As a result we ended up creating a simple ButtonNode class that we could use throughout our game.  This post will present an example of our button node extracted from our Fillip’s Feast game, available in the Apple App Store.

The following features are included in this basic button node implementation.

  • Buttons would use images from textures or named image assets
  • Provide visual feedback when button is selected

The ButtonNode subclassed SKSpriteNode and provides 2 contractor methods.

+(instancetype)buttonWithImageNamed:(NSString*)image forTarget:(id)target andSelector:(SEL)selector;
+(instancetype)buttonWithTexture:(SKTexture*)texture forTarget:(id)target andSelector:(SEL)selector;

The implementation of each of these only varies based on the source of the image to be used for the button.  Here is what we have for the creating the button with a named image.

// Allocates and initializes a new button node from a named image
+(instancetype)buttonWithImageNamed:(NSString*)image forTarget:(id)target andSelector:(SEL)selector {

ButtonNode *button = [[ButtonNode alloc] initWithImageNamed:image forTarget:(id)target andSelector:selector];
return button;

}

// Init button with a named image
-(instancetype)initWithImageNamed:(NSString*)image forTarget:(id)target andSelector:(SEL)selector {

if (self = [super initWithImageNamed:image]) {

self.target = target;
self.selector = selector;
self.userInteractionEnabled = true;
self.color = [SKColor grayColor];

}
return self;

}

With this constructor we can now create our new button node and add it to our scene.  Since this is a subclass of SKSpriteNode you use the normal SKNode position property to set the location of the button within the scene.

-(void)addMyButton {

ButtonNode *myButton = [ButtonNode buttonWithImageNamed:@”myButtonImage” forTarget:self andSelector:@selector(myButtonAction)];
myButton.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
[self addChild:myButton];

}

Notice in the method above we are setting the target to self (our current scene) and the selector (the method that will be called) as myButtonAction.  In the scene you then need to add the myButtonAction method with the appropriate code to be executed when the button has been pressed and released.

So now we have to address what happens when the button is touched.  There are a few different scenarios we have to deal with. First what happens when the button is touched, then what happens when the user touches the button but then drags out of the button area, and then finally what happens if the user is within the button area and lifts their finger off the button.  The final case is what is commonly referred to a “touch up inside event”.  Lets go through the code for each of these.

First what happens when the user touches the button.  In this case we want to give the user a visual indication that they are touching the button.  For this we will respond to the “touches begin” event.  Here we are responding to this event and if the touch happens to be inside our button we will set the button to the selected state.

// When the button is touched blend the button color with the image to give it a selected appearance
– (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

UITouch *touch = [touches anyObject];
CGPoint touchPoint = [touch locationInNode:self.parent];
if (touches.count == 1 && CGRectContainsPoint(self.frame, touchPoint)) {

[self setSelectedState:YES];

}

}

Setting the button to the selected state will simply update the color blend factor so the buttons appearance changes.

// Helper method to set or unset the button selected state
– (void)setSelectedState:(BOOL)selected {

if (selected) {

self.isSelected = YES;
self.colorBlendFactor = 0.7;

} else {

self.isSelected = NO;
self.colorBlendFactor = 0.0;

}

}

So what happens if the user has touched the button but then drags their finger off of the button.  In this case we want to change the state of the button to be not selected.  But, we also need to handle the case of the user then dragging their finger back within the area of the button.  To handle both of these cases we need to handle the touches moved event.

– (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

UITouch *touch = [touches anyObject];
CGPoint touchPoint = [touch locationInNode:self.parent];
if (CGRectContainsPoint(self.frame, touchPoint)) {

[self setSelectedState:YES];

} else {

[self setSelectedState:NO];

}

}

So when in the touches is moved we are checking to see if the touch is inside or outside of our button and setting the Selected state as appropriate.

Finally we need to handle the case where the user has touched the button and then releases it.  For this we need to respond to the touches ended event. If the button selected state is true we will call the activateButton method,

– (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {

if (self.isSelected) {

[self setSelectedState:NO];
[self activateButton];

}

}

Then finally we need to respond to the activateButton method.  In this case we are going to simply call the selector on the target that was passed in when the button was created.

// When activated the button will selector on the target to invode the buttons action
– (void)activateButton{

if (self.target != nil && [self.target respondsToSelector:self.selector]){

[self.target performSelectorOnMainThread:(self.selector) withObject:self waitUntilDone:NO];

}

}

In future posts we will expand on the button node class adding additional functionality.

A sample app, ButtonNode , with this ButtonNode class can be found on our github page.

You can find me on twitter @mellowcoder

An Isometric Point of View

6d89bcd782b67e3646835d5fb4bc23As I’ve been thinking about future game possibilities for our company, I’ve become enamored with the isometric point of view. This is when basically you design the point of view of your game from a top down angle where the grid for your ground plane forms parallel lines.

You see this point of view in the smallest independent games all the way up through major platform releases like the Diablo series from Blizzard.

As I’m working on the concepts for games, I’m also performing a series of exercises to get my self thinking from this point of view.
IsometricSketching

Everything from doing throw away thumb nail and silhouette sketches to trying to design how architecture can be rendered so it feels dynamic but doesn’t block your point of view.
Here is a look at one of the exercises I’m working on. Staring with a concept sketch.

MercyConcept
After developing the character in a hero pose, if I was developing this character fully there would be a break down of different angles and behaviors, clothing, equipment and variations. But in this exercise I’m predominately concerned with developing an idle pose that works on an isometric grid. Because I’ve made it a flying character that pose can be fairly dynamic with the wings flapping to keep them in the air.

mercy

I’ve also started trying to figure out the detail I can put into the character with out slowing down my animation process or letting the character get so busy that it’s hard to read from far away. In this case, the sketches I’ve started I are too detailed for the end goal. While I like the design, given our workflow, it takes too much time to draw, and the features need to be simplified.

mercyAnimation

As I’m working of this point of view and the challenges and opportunities it presents, I start thinking about some of the art I’ve already done. I wonder for instance how difficult it would be to take a concept like this and translate it into a playable isometric scene.

DugTooDeepGood

Over all it’s an extremely interesting way to be thinking about game design and I know I’m just scratching the surface of possibilities.

Speed Painting Update

Of late I’ve found myself to be very busy and have very little time. With that in mind I’ve been working on improving my speed painting. I’m approaching this process in three steps. Step one is doing single character speed painting with a focus on keeping each step of the process as tight as possible.

This is a speed painting I did a couple weeks ago that took me about two hours from concept to completion. I like the idea but I didn’t get a chance to refine it as much as I wanted to.

EnchantedMinitor

Given the same time period, here is a speed painting finished last night.

Stone

I was able to get a much more finished looking piece by making some slight edits to my process. The first step was to spend more time concentrating on the silhouette. Even though I’m still sketching the character out in a construction style I’m blurring my eyes and looking at the over all shape. I’ve been doing quick silhouette studies through out the week to practice looking for shape of the positive and negative space.

StoneSketch

And secondly, I’m forcing my self to use a larger brush then I want to! I let myself make larger shapes and concentrate on getting the tone relationships in and then moving to a smaller brush as I get into the detail areas.

The next step in this series of studies is to apply the silhouette study style I’ve been working on to designing an entire composition and not just a character. And the final step is to bring togeather the first two steps to increase the efficiency of speed painting full scenes at higher quality and in turn allowing me to increase the speed and quality of the paintings I spend more time on.

Working Outside Your Style

togeather

As your moving towards working as a professional artist you are often told how important it is to develop your own style. It’s very important for getting noticed and having your work stand out from the artists around you. Developing your style is very important and should not be overlooked by any aspiring artist, but there are many career paths in the art world where it is just as important to be able to work with in the style of the project you’ve been hired to develop.

This could be as simple as the armor in the world your working on having exaggerated shoulders and specific decorations, or as complicated as the finishing has to match the body of work as exactly as possible following very specific guidelines and models. Whether the style is that of matching a known artist like Norman Rockwell, working with-in a game style, like Magic the Gathering, or working in the style of an animation like the Simpsons, you need to approach the project in a similar way.

First and foremost, spend time studying the franchise and how it’s developed over time. when other people have worked in that style what are the key elements included that makes it stand out. The broad strokes are important, matching colors, brush strokes, and/or line weight, but it all comes down to the details. The angle of a jaw line, the direction of a hair part or the thickness of a lip can be the difference between nailing a character or having an audience know somethings wrong, even if they can’t place what it is.

I find a good exercise is to take the base style you need to work in and your personal style and mash them together in order to let yourself find ways to use your own methods to express the style you need to.  Below are some studies I did for working on projects for American Dad! I worked with similar colors, character design and shading, but my own base features for eyes, noses, mouths and ears as well as exaggerated the line weights and I was a little more expressive with body shapes.

 

Doc Girl Hare Convict

 

Ru’Bacom Tutorial Part One

Ru”Bacom, Pedlar of Dragons.

Today’s blog post is looking at the first step of my digital painting process. My first step is subdivided into three sub drawings as shown below. A construction sketch. This is laid down in Blue, Green and Red to build up the forms and get the basic shapes in place. I than put down a rough sketch in black establishing contours and basic shadows. In the third pass I lay in the basic highlights and usually add an under painting color wash just to start myself thinking about the palette I want to develop. The color I use is normally complimentary to the main feeling I want to express in the final image.

001Ru'BacomConstruction002Ru'BacomRuffShadows

003Ru'BacomRuffHighlightsThe last image in this post is to demonstrate how I set up my workspace as I begin to draw. I collect several reference images that I keep near by when working, Often including images from a book or on my Ipad set up as well depending on what I’m working on and how many details there are.

In the next post we’ll look at the tight sketch process. Fixing some angles and details and planning the painting process.

The next two process posts will include time laps and/or tutorial videos to demonstrate the process in more detail.

FullScreenSetUp

 

Pen Sketches

For the last couple weeks my computer was in the shop being repaired. During that time I began working on some traditional paintings and was very frustrated. I discovered my skills with traditional media to be quite out of practice. To combat this I started practice sketching with pen drawings to work my way up to completing the paintings. Here are a selection of simple pen sketches I completed in a session yesterday.

image

image-1 image-4 image-5 image-6

How Do You Figure 1

 

HDYF-Header-I1

Hey! Welcome to ‘How do you Figure’ a bimonthly feature exploring the use of figure drawing in Illustration. All images are copyrights are reserved to their respective holders and are presented here for editorial and educational purposes.

Series 1. I can see your model stand

In sci-fi and fantasy illustration the human figure is often the most important element in a piece, serving a number of different roles. Whether cementing a sense of scale in the minds of the audience, providing an empathetic entry point into the fantastical scene or carrying the entirety of the story on its shoulders. To accomplish this the illustrator must strive for the illusion of life, a term coined in the halls of the disney animation studio to describe the ultimate goal of any character animation. While character animation and figurative illustration are not exactly the same in practice, many of the same underlying principles can be applied. One of the most common weaknesses of fantasy illustrators is to mistake surface refinement for the illusion of life.

fig-1aCase in point, Boris Vallejo. Vallejo is an incredibly talented illustrator fig-1bwho has been working essentially non stop since he broke into the industry in the 1970’s, and rightfully so. He is truly a master of his medium, pushing paint into realms of the impossible in a way that challenges the imagination of the viewer. His images are most successful when the imaginary elements are primary (fig. 1a) or when the story telling is best served by a figure in repose (fig. 1b)

 

His work is weakest when he must convey story through the movement of a figure. As a point of comparison we’ll be looking at the work of Frank Frazetta, no stranger to the figure in repose (fig. 1c). The primary difference being that Frank got his start drawing Thunda comics (fig. 1d), a job that demands the figure be as dynamic as possible while still being easily reproduced in stark black and white.

fig-1cfic-1d

 

 

 

 

 

 

 

 

 

For the first example we’ve got some muscles clashing with each other (Fig 2a). On the left is Frazetta’s piece and on the right is Vallejo. Both have strong silhouettes (fig 2b) that draw attention to the figure and emphasize the fight as the central focus. But lets look at the line of action (Fig 2c). In the Vallejo piece we have two nearly identical gestures offset only by size. The primary lines of action in the body and arms are nearly parallel with each other, this symmetry stiffens the composition and the figures within it. Imagine if the Giant figure had a contrasting line of action, similar to that of the frazetta piece (Fig 2d)

 

Further, there are anatomical clues to the model stand that disconnect the figures from the fantasy of the moment. In both pieces the muscle bound men are flexing, ostensible to swing a weapon at a no doubt deserving target. In Frazetta the muscles of the arms and torso are roughly equal in their engagement. The biceps engage but are elongated, the whole character feels like a spring pulled back about to be released. (fig 3a). Vallejo on the other hand is clearly a figure posing to show off his muscles. There is no twist in the spine and the weight is centered between the feet. This is good for maintaining balance when on a model stand for longer poses, but does not convey movement particularly well. The biceps are extremely flexed, in a way only seen in bodybuilders in competition. If one were to swing a warhammer one handed like this, the biceps wouldn’t even engage this way. Its a masterful handling of the figure, but it looks more like he’s trying to win Mr. Universe than that he’s trying to knock out Mr Giant over there.  (fig 3b)

Vallejo is one of the many spiritual successors to the style that Frazetta first established in his Conan illustrations in the 1960’s. As a result there are multitude of comparable pieces by Vallejo that clearly reference the Frazetta aesthetic, paint handling and subject matter. Take a look at these examples (frazetta on the left, Vallejo on the right) and try to see the model stand. Want to take it a step further? Try doing a paint over of the Vallejo half using the Frazetta gestures as guidance.

 

FrankBoris_1

FrankBoris_2

Fillip Frog’s game play update.

Just a quick update on Fillip Frogs Fly Feast! We’ve gotten the basic game play coming together nicely. The Mosquitos are now attacking you in a very natural way and we are homing in on the menu designs. Below is a basic demonstration of the game play in alpha testing.

As a fun bonus, here is a video of Spencer working on getting the bugs to stick to your tongue after you capture them. Looks like Fillip needs to swallow every now and then, but it’s looking great!

Working with Images in SpriteKit – Texture Atlas

By: Mark Johnson @mellowcoder

 What is a Texture Atlas

A Texture Atlas is simply a large image file that is created by combining together multiple individual images.  This can save memory and allows iOS to more efficiently render the textures in your application.  The nice thing about SpriteKit is that Apple takes care of building the texture atlas for you.  All you need to do is add the individual image files and the textures will be generated when your app is built.

The following is an excerpt from the SpriteKit Guide on when to use Texture Atlases

When you create a texture atlas, you want to strike a balance between collecting too many textures or too few. If you use too few images, Sprite Kit may still need many drawing passes to render a frame. If you include too many images, then large amounts of texture data may need to be loaded into memory at once. Because Xcode builds the atlases for you, you can switch between different atlas configurations with relative ease. So experiment with different configurations of your texture atlases and choose the combination that gives you the best performance.

Starting Point

As in my previous posts on working with images in SpriteKit, I am going to start off with a new App generated with the SpriteKit template.  After creating the new App, I deleted the boilerplate touchesBegan method as well as the code in the initWithSize method that adds the label.

For this test app I have a couple of different images (a frog and a spaceship) in three different sizes.  I have also added a label on each of the images so I am sure which image is actually being rendered in each of the different simulators.

finder-screen-shot

Adding a Texture Atlas

All you need to do to create a texture atlas is create a folder in your project with “.atlas” at the end of the name.  You can manually create this folder within the project or you can create the folder in the finder with all your images organized within it and then add the folder to your project.  For this app I setup my folder in the finder.  Within the .atlas folder you can use subfolders to organize your files.  The following screenshot shows the folder I have setup for this example.

atlas-file-structure

Once you have added the atlas to your project you will then add/remove images as needed from the finder.  Changes to the content of the atlas are not handled within the project editor.

Using a Texture Atlas in SpriteKit

To use images from the atlas in your project you first need to instantiate the atlas.  For example the following initializes the character atlas and then loads the individual images into sprite nodes.


SKTextureAtlas *character = [SKTextureAtlas atlasNamed:@”character”];

SKSpriteNode *frog = [SKSpriteNode spriteNodeWithTexture:[character textureNamed:@”Frog”]];
frog.anchorPoint = CGPointMake(0.5,0.0);
frog.position = CGPointMake(CGRectGetMidX(self.frame), self.frame.size.height*0.25);
[self addChild:frog];

SKSpriteNode *ship = [SKSpriteNode spriteNodeWithTexture:[character textureNamed:@”Spaceship”]];
ship.anchorPoint = CGPointMake(0.5,1.0);
ship.position = CGPointMake(CGRectGetMidX(self.frame), self.frame.size.height*0.75);
[self addChild:ship];


 Supporting multiple devices

As you may have noticed in the file list above I have used the standard naming convention to differentiate the images for each device.  When you build your project it will create a texture map for each device based on the file naming convention.  You can see this by locating the built application in finder.  If you select the product in the Navigator in Xcode you can find the location of the actual files.

product-location

If you then navigate to this location in the finder you can select the actual built app, right click and select the “Show Package Contents” option.

source-show-package-content

Then selecting the “character.atlasc” folder will show you the actual texture atlases for each of the devices along with the .plist file that is used to mange the files as well as the individual images.  The “.1” on the files is a sequence number.  If the texture atlas gets too large Xcode will  break the atlas into multiple files.  If this happens you would see a “.2” or more versions of the texture atlas.

built-character-atlas

Bug Related to iPad specific Texture Atlas

There is one caveat to this.  Even though the “character.1~ipad.png” file is created and it is correctly represented in the “character.plist” when running the app on the non-retina iPad, simulator or device, it always uses a auto scaled down version of the retina images.  I have entered a bug report with Apple for this and will update this post when I get an update on this issue.