Scuba Chibi: Playing with Colors

I’ve been playing around with the colors for the game. I was going for some vivid colors, rather than muddy, to show a sort of fun and playful feel in the game.  I’m sure after some playthroughs, these may change, but it’s a start.

player-colored

fish-colored seal-colored
jellyfish-colored

I’ve found that having a “color legend” can be quite helpful.  Sometimes I find colors that I really like, but after changing around some things in the color wheel, that color becomes lost.  So here, I have them saved somewhere for future reference.

color-legend

Scuba Chibi: First Enemy Art

Slowly but surely, I’m working on the enemy art.  Here’s one out of three.

fish-pencil

Pencil drawing

fish-outline

Scanned and outlined as vector art

My intent is to make the enemies look as cute as possible.  As far as what tools and software I’m using, I have an old 4×5 Wacom Graphire4 and am drawing in Adobe Flash Professional CS6.

Creating a Character in an Isometric World

In my previous posts, I have written about how to create an isometric world and how to move a character to tiles using pathfinding.  However, the character I used did not have the proper angles for an isometric world.  So today will be somewhat of a more art-focused post on how I created a character for this.  Also, I don’t claim to be an artist, I just doodle really, so any feedback would be greatly appreciated!

I started off with a front-facing character sketch (using pencil and paper) so that I have a basic idea of the design I wanted to go for.  Mainly, my inspirations were anime, chibi, and steampunk:

Image

From there, again in pencil and paper, I sketched the isometric front and back of the character.  I made this version more chibi-like with more defined lines.  That way, when I scan it, it’ll be easier to see and trace:

ImageImage

Then, I scanned the isometric front and back sketches and traced them in Flash.  I chose Flash because I already have the program, and it keeps the image in vector format so that it’s easy to scale up and down without downgrading the image quality.  Some other options for drawing would be Illustrator, Photoshop, Manga Studio, Sketchbook Pro.  Any others?  Also, I used a really old and small Wacom Graphire4 tablet.  Another option would be a Cintiq.  Or a mouse.  Hehe.Image

As you can see in the screenshot above, I tried to separate the different body parts and clothing into different layers.  This makes it easier to make changes later.

Image

I didn’t trace it exactly.  I wanted to shorten her legs a little.  If you want to make some changes in your design, now’s a great time to do so.  Again, separating the body parts into different layers makes this process much easier, especially if you make mistakes and end up erasing a lot.  I also made separate layers for the colors.  So underneath the “hair” ink layer, I had a “hair color” layer, and so on.  I think it’s also important to label the layers and folders for organizational purposes, and it’ll be easier to remember what you did when you go back to it later on.

Image

Also make sure that you match it up with the tile you’re using!

I am using only four directions in my pathfinding, so I only needed to ink and color the front and back to make the first two directions, and then do a “Modify – Transform – Flip Vertical” to do the last two directions, since they are really mirrors of each other.

Image

The above image would make a great spritesheet (without the directions text of course), and the character dimensions were about 102×195 each.  Using EaselJS, I applied this into the spritesheet settings in the code.  My loadPlayer() code looks something like this:

// create spritesheet and assign the associated data.
var spriteSheet = new createjs.SpriteSheet({
  //image to use
  images: [img],
  //width, height & registration point of each sprite
  frames: { width: 102, height: 195, regX: 32.5, regY: 16.25 }
});

You would then need to associate the four character frames with the four directions.  For example, if the character is moving to a higher row (like from row 0 to row 2), but remains in the same column, she is moving south.  In the spritesheet, it’s the first image, so it’s frame 0.

if ( row < destRow && column === destColumn ) {
  context.player.currentFrame = 0;  // south
} else if ( row > destRow && column === destColumn ) {
  context.player.currentFrame = 2;  // west
} else if ( row === destRow && column < destColumn ) {
  context.player.currentFrame = 3;  // north
} else if ( row === destRow && column > destColumn ) {
  context.player.currentFrame = 1;  // east
}

To view the working example, check it out here!

Starling

Many claim that “Flash is dead,” but I believe that in the world of gaming, this is not so. One of the reasons is a framework called Starling.

Starling is a free open source Actionscript 3 library which renders its content by using Flash’s Stage 3D technology. What does this mean? Faster performance which makes use of GPU hardware acceleration. The ever-so popular game Angry Birds was built using this framework.

My Starling Game Demo Example
Screenshot from my Starling game demo example

After trying out Starling on my own, I was pretty amazed by a few things:

1. Quick setup.
It is simply a swc file that you include in your library. Then, create a Startup class that will instantiate and start up the Starling instance:

import flash.display.Sprite;
import starling.core.Starling;

[SWF(width="400", height="300", frameRate="60", backgroundColor="#ffffff")]
public class Startup extends Sprite
{
private var _starling:Starling;

public function Startup()
{
_starling = new Starling(Game, stage);
_starling.start();
}
}

The “Game” parameter of the constructor expects a class that is a Starling display object.

2. Ease of use.
You can then go on your merry way writing AS3 as usual, but instead of using the regular Flash display classes, use the ones in Starling. Since I use Flash Builder, the IDE would often automatically import “flash.display” classes; you’d have to replace those with “starling.display.” Also, loading images is a bit of more work than loading an image and adding it to the display list. Starling uses a Texture class that contains an image’s data, and then it uses an Image class to render that data:

...
// load background
loadBackground( _gameModel.bgImagePath );
}

/**
* Load background image.
* @param url URL of background image.
* TODO: Create image loader utility class that all image loading can use, then dispatch event when that particular image is ready.
*/
private function loadBackground( url:String ):void
{
_loader.load( new URLRequest( url ) );
_loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, onLoadBackgroundComplete);
}

/**
* On load background image complete.
* @param event Flash event for event complete.
*/
private function onLoadBackgroundComplete( event:flash.events.Event ):void
{
_loader.removeEventListener(flash.events.Event.COMPLETE, onLoadBackgroundComplete);

// add background to display list
var loadedImage:Bitmap = event.currentTarget.loader.content as Bitmap;
var image:Image = new Image(Texture.fromBitmap(loadedImage));
_bgContainer.addChild(image);

3. Awesome performance.
The smoothness of Starling is impeccable, but I am sure it is even more evident with the more graphic-intensive games out there (like Angry Birds). With Starling’s awesome performance and with Adobe Air (and even Flash CS5.5+)’s ability to deploy to iOS and Android, who says that Flash is dead? 🙂

Check out my source files and you’ll find how quick and easy it is for AS3 developers to jump onto Starling!