Multimedia

Few days ago, after all sprites for the player character, monsters and items were done. I was creating the background images for my game, and I notice how big they were. For example, the following image is the background of the first level and was originally saved in PNG, which resulted in 1.08MB. A whole megabyte is a lot for a single image for a simple web game, and it was in the resolution of 1024×768. The HD version of this image (2048×1536) had 2.54MB!

Dungeon Thief -Level 1 Background

These ridiculous file sizes are the result of a bad choice for the image format. An image format describes how the pixels of an image are represented. A format can trade the image quality to make the file size smaller (Lossy), or can save the image in the best quality but in the cost of the file size (Lossless). A format also can specify if the image will have a limited number of colors (Indexed) or it will have no limitation (Direct). Common image formats includes: BMP, GIF, JPEG, and PNG.

BMP is a Lossless format and can be Indexed or Direct. There is no compression at all in this format, resulting in very large file sizes. It is an old format and have no application nowadays.

GIF uses a Lossless compression which preserves the image data, but it is an Indexed format used for images with less than 256 colors, impacting on the image quality. GIF also accepts transparency, but only in 100% (totally transparent) or 0% (totally opaque) levels. It is a pretty good format for simple images with limited colors, such as logos and some simple icons.

JPEG (or JPG) is a Lossy and Direct format, preserving the colors but losing image data. This combination makes the format specially useful for rich and complex images such as photographies, where losing some data are not (or barely) noticeable.

The PNG format also uses a Lossless compression, resulting in files with much less size than BMP, and is not limited to a fixed number of colors, such as GIF, thus, resulting in high quality images. PNG accepts alpha transparency, i.e., the transparency may range from 0% to 100%. PNG was created to improve and replace the GIF format.

Given these descriptions and examples, we can summarize:

  • JPEG for complex and detailed artworks and photographies without transparency;
  • PNG for simple images such as sprites, icons, logos, and all images that need transparency;

The first image presented here, which had 1.08MB for 1024×768 and 2.54MB for 2048×1536, converted to JPEG (and keeping a good quality) resulted in 201KB and 336KB for the 1024 and 2048 resolutions, respectively. This show the importance of knowing the different formats and choosing the right one for your images.

References:

Read more

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

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