Inkscape LogoI love inkscape! It is a great tool to create and edit vector graphics. It is free, has a lot of features, has an intuitive interface and usability. It works in Windows, Linux or Mac. It can produce high-quality bitmaps. Do I have to say more?

Inkscape is one of that kind of programs that you must have to install in your computer, even if you don’t have plans to use it in a near future. This is my favorite tool to create graphics for my games or other visual applications, and in this post I will give you a little introduction of how you can do that too.

Before anything, download and install the last version of inkscape here.

Start with simple things, rounded ones. Create some circles, reshape them, apply some colors, try to do something without any help. Inkscape is a very intuitive tool, you will probably discover the important features by yourself.

There are several tutorials around the internet and you can follow them. My favorites are in the blog 2D Game Art for Programmer. Chris Hildenbrand, the author, presents basic and advanced tips to create characters, objects, backgrounds, among other elements for 2D games.

Recommended tutorials:

When you feel comfortable with inkscape features, try creating things by yourself. My suggestion is using references such as images and drawings, cartoons are a very good choice. Just remember you are creating a new art, do not copy anything, just use the references as references!

My final tip to you. I have no skills to choose colors and to painting my drawings. Most of you probably feel the same. To overcome this problem, what I do now is searching for color palettes or creating ones from images.

Sites with color palettes:

Sites to create your own color palettes:

Note: I will start to publish some tutorials here, stay sharp!

Read more

EaselJS is a Javascript library that allows the programmer to work on html canvas in an easy way. It means that EaselJS abstracts the low level API of the canvas element and provides classes, structures and functions to manipulate visual elements.

Before starting the examples and the talk about the Easel modules, let’s set up the html file which will be used as basis throughout this post. Create a file called easel.html and copy the following code:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>

<script>
    function init() {
        var canvas = document.getElementById('canvas')
        var stage = new createjs.Stage(canvas);
        // CODE HERE!
    }
</script>
</head>
<body onLoad="init();">

<canvas id="canvas" width="600" height="300">alternate content</canvas>

</body>
</html>

 The Basics

EaselJS provides a whole architecture to control the objects that will be used at our games. The following list explains a bit of each one of the core components of this architecture.

  • EventDispatcher: the EventDispatcher class provides the structure for managing queues of events listeners and dispatching events. All components of EaselJS inherit from this class, thus, any component can handle events such as mouse clicks, drags, etc. For example, you can register a callback function to the ‘click’ event of a Bitmap object, causing the callback to be called whenever the user clicks that Bitmap.
  • DisplayObject: is the base class for all visual element, exposing properties such as position, rotation, scale and transparency. It means that, you can manipulate the position, rotation and other display properties of any object that draws something at the screen.
  • Container: The Container inherit from DisplayObject and provides methods to group other DisplayObjects. Using Containers, you can create hierarchy of visual objects and manipulate them together. For example, if you have a container within 3 images and move the container to the left, all the three images will be moved to the left too.
  • Stage: the Stage is the root level of the DisplayObject hierarchy, thus, if you want to show an object in canvas you need to add this object to the stage.

After adding objects to stage, you need to call the stage “update” method, otherwise the canvas will be redraw and you won’t see any change. All examples below show how to use it.

Working with Shapes

A Shape object stores a group of vector graphics that are created directly by the canvas element. Each shape has a Graphics instance which is the interface to the canvas drawing system. Check the example below.

var shape = new createjs.Shape();
shape.graphics.beginFill('#99f');
shape.graphics.drawRect(0, 0, canvas.width, canvas.height);

shape.graphics.beginFill('#33f');
shape.graphics.beginStroke('black');
shape.graphics.drawCircle(canvas.width/2, canvas.height/2, 50);

stage.addChild(shape);
stage.update();

Notice how the graphics instance does the hard work. The beginFill function sets the filling color for the next drawings while beginStroke sets the stroke color. The Graphics object provides several functions for the drawing itself, take a look at the official documentation to see how drawRect, drawCircle and other directives work.

Working with Texts

With Text objects you can draw… texts! But just plain texts, not HTML-formatted ones. EaselJS allows you to change the color, alignment, size, font, wrapping and others settings of Text objects, check the official documentation to know more:

var text = new createjs.Text('Hello, World!', '32px Arial', '#53f');
text.textAlign = 'center';
text.x = canvas.width/2;
text.y = canvas.height/2;

stage.addChild(text);
stage.update();

Working with Bitmaps

With Bitmap objects you can display an image, canvas or video (the HTML elements) into the canvas. You can instantiate the Bitmap object using the HTML element explicitly or passing a string, as shown in the example. Notice that, the first lines of the code below is a bit different from the examples above, that is because I am using a external resource (the image ‘assets/html5.png’) and we can use it before the browser totally load it. This process is automated by PreloadJS.

img = new Image();
img.src = 'assets/html5.png';
img.onload = function(event) {
    var bitmap = new createjs.Bitmap('assets/html5.png');
    bitmap.x = canvas.width/2 - bitmap.image.width/2;
    bitmap.y = canvas.height/2 - bitmap.image.width/2;

   stage.addChild(bitmap);
   stage.update();
}

Consult the documentation to know more about bitmaps:

 Working with SpriteSheets

A sprite sheet is a group of several images combined into a single larger file, e.g.:Bubbles Sprite SheetYou can also define animations using sprite sheets as shown in the example.

EaselJS provides the SpriteSheet class to handle this kind of image.  The SpriteSheet object requires some configuration to work, such as the size of each frame and the sequence of animations, check the documentation for a detailed description of each property:

img = new Image();
img.src = 'http://static.guineashots.com/tutorials/easeljs/assets/bubbles.png';
img.onload = function(event) {
    var data = {
        framerate: 10,
        images: [img],
        frames: {width:64, height:64, regX:32, regY:32},
        animations: {
            'explode': [0, 10],
        }
    }

    var spritesheet = new createjs.SpriteSheet(data);
    var animation = new createjs.Sprite(spritesheet, 'explode');
    animation.x = canvas.width/2;
    animation.y = canvas.height/2;

    stage.addChild(animation);

    createjs.Ticker.addEventListener("tick", update);
    function update(event) {
        stage.update();
    }
}

The SpriteSheet only represents the sequence of images, to see them as isolated images or animations you need a Sprite.

Notice that, in the last lines of example, I register a function “update” to the “tick” event, so it will be called every frame by Easel. In this function I call the stage update so it can redraw the canvas and show each frame of our animation.

Other Tutorials

To learn more about EaselJS, follow the official tutorials:

Read more

Almost all games needs to record certain information about the player progression. For example, you may want to have a local leaderboard to track the player best results of each round, or the story progression, or the name of the player, etc. Sometimes is interesting to record these kind of information even after the user closes the browser and turn off the computer, thus, the next time a user comes back to your game, the progression is saved there.

HTML5 provides a feature for this kind of offline storage, called Local Storage. The concept is similar to cookies: you have a key-value storage system and you can write or read information locally with it. It is really basic, all you have to do is:

localStorage['key'] = 'value'

and you have an information stored in the user computer. The user can close the browser and turn off the computer but when he or she opens you game again, the information ‘key = value’ is still there.

The problem is when the browser does not support the HTML5 Storage feature. When this is the case, you need to use a third party library for offline storage, store the information into some server, or don’t save the information at all. The third option is the easier (if storing information is not essential), because you don’t have to change all your code, just define a stub localStorage object and the life goes on.

A beautiful way to detect if browser supports localStorage or any other HTML5 feature is using the Modernizr library. Thus, you can add the following verification to your code:

if (!Modernizr.localstorage) {
    window.localStorage = {};
}

Take a look at http://html5demos.com/storage to see an example.

Read more

Alan Wake

I know a lot of good programmers that want to develop games, but don’t go forward because they don’t know any artist and lack the skills to make something beautiful. For a while, I also complained about that. I am a skilled programmer, but I ain’t an artist, what should I do?

My answer for you is: stop whining and deal with it! Yes, you don’t need the artistic skill to create a copy of Bioshock Infinite, or the wonderful atmosphere of Alan Wake. You need, most of cases, simple graphics. You may want to create a ultra beautiful game with painted sprites that even Picasso would be proud, but you probably won’t. Recognize your limitations and adjust your game to what you can do. Go for simple graphics and work hard in the gameplay and other aspects of the game.

Following, I will give some tips to create you game art. I’m not a Picasso myself, but I can handle the basics. I hope I can help you in this process.

Know Your Tools

Before starting to draw something, you need to know what tools you will use, but remember that a tool itself doesn’t do anything, you do. Personally, I like vector graphics, for this I use Inkscape, but you can use Corel Draw, Illustrator or many other tools like them. You may like pixel art or 3D models – you can use GIMP, Blender, or even MS Paint – just choose the tool you feel more comfortable with and learn the basics.

For the final touches, I use GIMP. You can use Photoshop, Z Brush or any other tool related to your style of art. Again, just pick one and go through it.

Follow Tutorials

With your tools ready, go for tutorials. There is a lot of them around the internet, a simple search can reveal several great how to’s. I recommend you follow sites and blogs with general tutorials, such the 2D Game Art For Programmers and Tutplus, also take a look on Devian Art and other artistic forums where people create a lot of tutorials.

Do it for specific things too, for example, if you want to draw a simple sword for you game, take a look on google, you will find a lot of things, e.g.:

Use References

When you have a certain skill with your tools, go for references. Search images of real things, line drawing things, clip arts, etc. You don’t have to create everything from zero. For example, if you want to draw a hand, take a picture of your own hand, search for images of hands on google or use reference such this one:

Hand Reference Sheet by Ultimate Iron Giant (http://ultimateirongiant.com)

Hand Reference Sheet by Ultimate Iron Giant (http://ultimateirongiant.com)

Learn With The Bests

When you see a game or a cartoon, pay attention to details. For example, cartoons usually have large borders, ridiculous proportions, fast movements, caricatured expressions, simple forms, poor shadows, just like the Dexter Laboratory. The Samurai Jack is other example, but now without any border, which makes it special among other Cartoon Network’s programs.

cartoons
Pay For It

If you are too lazy to learn new tools or can’t spend any time to do it, or even simply don’t want to, your solution is: pay for it! There is a lot of freelancer sites and forums where you can find artists and pay their prices.

Read more

I created a new repository in Github with my personal boilerplate to CreateJS. This boilerplate includes:

  • A simple server written in Python using the Flask web framework, you will need them to run the server;
  • A simple html page initializing the CreateJS libraries and jQuery;
  • The last release of jQuery;
  • A folder structure containing: assets, core, data, models, scenes, and systems;
  • Core files containing some useful objects for your games;

I will keep these files updated as much as I can.

For those who don’t know, a boilerplate is a “template project” that you can use to start a new work. The template includes files, folders and the structure of the project. If you are happy user of Sublime Text, you can install the Nettuts + Fetch plugin to add this (or other ones) boilerplate automatically.

You can access the repository and propose changes, access:

https://github.com/renatopp/createjs-boilerplate

Read more