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.

Working with Images in SpriteKit – Image Sets

By: Mark Johnson @mellowcoder

Asset Catalog – Image Sets

This is the second in a series of posts on working with images in SpriteKit.  In this post we will look at using Images Sets.  Asset Catalogs and Image Sets were introduced in Xcocde 5.  If you start a new app in Xcode 5 the App Icon and Launch Images are automatically setup in the Asset Catalog.  In this post we will look at adding a new image to the Asset Catalog for use in SpriteKit.

To illustrate this I am going to create a new universal app using the SpriteKit template.  After creating the new App I first deleted the boilerplate touchesBegan method as well as the code in the initWithSize method that adds the label.  In the init method I added the following code to load a test image named “Frog” and have it centered on the screen.


SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@”Frog”];
sprite.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
[self addChild:sprite];


For the image I am using  three different sizes of one of the Frog images from our Fillip Frog game.  To make it clear which image is actually being used I have added a text label on the image for testing purposes.

  • fillip-ipad-retina.png – 654 x 312
  • fillip-ipad.png – 323 x 156 (50%)
  • fillip-iphone-retina.png – 303 x 146 (46.9%)

One of the nice things about using Image Sets is that you do not need to follow a specific naming convention for your image files.  So in our code above we are loading an image named “Frog” but none of the actual images we are going to use have that name.

Create a new Image Set

In your project select the Image Catalog.  It is the folder named Images.xcassets in the explorer. You should already see that there is an item for the AppIcon and the LauchImage.  Select the “+” button at the bottom of this list.  This will present a contextual menu.  Select the “New Image Set” item.

create-image-set

 

The new image set will be created with the default name of “image”.  Select this item and then change the name to Frog.  Additionally, change the devices popup from “Universal” to “Device Specific”.  You will notice that in addition to the iPhone and iPad checkboxes there is also a checkbox for the iPhone Retina 4-inch.  If you had a different image you wanted to use just for the 4-inch iPhone you could check this box as well.

setup-image-set

 

The next step is to add the images to the image set.  To do this simply drag the images from the finder to the appropriate spot in the image set.  Because we are using SpriteKit in this App, there is no need to add the non-retina iPhone images. SpriteKit requires iOS 7 which is not supported on the non-retina iPhone.

adding-images

 

Now running the app on each of the simulators we should see the appropriate image for each of the different devices.

in-simulator

But, suppose that we actually want to use the same image for multiple devices.  For example since the sizes are very similar we may want to use the same image for the the iPhone Retina and the iPad.  To do this you could simply drag the image from the finder into the project a second time.  This will create a second copy of the image in your project. But, there is also a manual process you can use to avoid having to bring in a second copy of the image.  If you look at the “Frog.imageset” in finder you will see it is a folder that contains your images as well as a Contents.json file.

file-structure

If you open the Contents.json and manually edit the iPhone 2X file name to be the same as that for the iPad 1X, you can then delete the iPhone Retina image from your project.  Your app will then use the same image for both the iPad and the iPhone.  This can help to reduce the overall size of your app.

In the next post we will look at setting up and using a Texture Atlas, which is the preferred method for working with images within SpriteKit.

 

Impressionist Study

Today’s post is a impressionist portrait study. The Obama image is one I painted a while ago and I’ve been wanting to do a similar portrait ever since but wasn’t sure who to paint. With recent political events I decided a version of Putin would make a good counter point to the image. I think the image came out very well, though in hindsight I wish I had painted him straight on or Obama at 3/4 to make the images go together more.

today002

today001

 

 

Pencil Made Brush Set

The title of this post may be a little misleading. This is not a brush set of pencils. It’s a set of brushes that I’ve created for speed painting by using a HB pencil to draw the shape, then scanning them into Photoshop. I’ll be doing a speed painting with these brushes to post as soon as I get a chance.

Right click the link and save to your computer. If you just click the link it tries to open it in your browser.

Pencil Made Brush Set

Brushes

 

Edit:

40 min speed painting. Not great, but not bad for under an hour.

Willy