Dragon brushes in GIMP

Hello guys,

Today, I will show you how to create animated brushes in GIMP 2.8, and this post will also be a useful reminder for me :). I will propose Dragon brushes because dragons are cool, and everybody likes them. The philosophy behind using brushes is not to make the whole painting with them, but rather have a good idea of the final render without spending too much time on it. It is also used to add sparse textures.

First of all, I must link to this video who greatly helped me in designing those brushes. So thanks a lot to M. Remko Troost for his nice video.

I - Download

You can download the dragon brush pack here.
It contains:

• 1 skin brush
• 2 simple scale brushes
• 1 horn brush

Feel free to use them in your work. Credits are appreciated but not mandatory. Here after I explain how you can create (improve? ;) ) and use these brushes.

II - Creating an animated brush

• First of all, create a new grayscale (in the advance parameters) square image if you want a classic "transparent" brush (actually, color brushes are not that useful). Use a white background (= full transparent brush). Don't make it too big, something like 200x200px is quite good.
• Start painting some scales in black. Generally lizard/reptile skin is made of geometric patterns (squares, pentagon, N-gons) well intricated together and separated by little creases.

• Create another layer and paint anoter type of scales. You can use as many layers as you want to create variations.

The goal is to use those 2 layers randomly in order to create irregularity in the skin.

III - Saving the brush correctly

• Save the brush using the GIMP animated brush format: .gih. Save the file in the .gimp-2.8/brushes folder (in your home folder).
• Use a spacing of 50-75 depending on how much you covered the image surface
• Number of cells should be your number of layers (2 for me)
• Dimension is 1 as the brush will only depend on 1 parameter (random only here, no angle track or whatever)
• Ranks is 2 - Random, which means that random will be used to choose between the first 2 layers
• Now you can reload the brushes in the brush panel. Be aware that the "reload" button doesn't seem to work very well. I think it only loads new brushes, not modified ones. So if you want to tweak/modify an existing brush, you have to suppress the file, and then create it again. Be warned that if you already have a lot of brushes, it may be difficult to find the new one in the list!

IV - Going further using dynamics

You can now use this brush in GIMP. But GIMP 2.8 provides another option to influence brush behaviour: Dynamics. It can control how speed, orientation, pressure (for graphic tablet users) and much more parameters affect the brush (in rotation, size, opacity...). For example, to add a random rotation, you can use the existing dynamics "Basic Simple" or "Pencil Shader" for example, or create your own.


Some dynamics are quite useful, especially the ones that follow the direction of the movement to align a brush, for example "Speed Size Opacity", or even "Track Direction" if you don't want to use pressure. But if you plan to use them, you have to well design the underlying brush.

And thus, if you want to create an "oriented" brush, you have to know that the "direction" needs to be horizontal towards the right-hand side when you create the brush. Here is a "horn" brush:

A horn brush oriented towards the right-hand side

When used in a drawing in combination with other brushes you can quickly create a basic design:

A very quick design of a dragon

Or you can use them in a final render just like the first image of this post.

2D image deformation in Blender

Hello everybody,

Today I will introduce a fairly tortuous way to locally deform 2D images using... Blender. Here's what we're going to do:

 Notice the deformation of the web center

OK, But why not in GIMP ?

I recently wanted to apply a lattice correction on a simple 2D image in GIMP (to correct perspective and bad proportions on a drawing)... but GIMP is seriously missing a good and real-time lattice (or FFD=Free Form Deformation) transformation like the one in photoshop (Warp Tool) for example.

Of course there is the cage grid tool and the interactive "I-Warp" filter. But, the cage grid tool doesn't handle well the connections between the selected zone and the rest of the drawing. The I-Warp doesn't provide a good zoom level and is quite laggy, at least on my PC, and there's no undo function... So here's a little work around.

Be aware that this method is not straight-forward and requires a minimum of setup in blender, but it can handle large-scale smooth deformations in real-time, with various levels of zoom, and undo function. It can save you hours of work on a drawing where you missed a perspective default...

I - Setting up the image plane and material

• Launch Blender
• Suppress the default cube
• In file -> User preferences  -> Addons -> Import/Export, activate the "Import images as planes" addon
• Import the image you want to modify, don't forget to activate the following options: shadeless, use alpha, premultiply
• In 3D view, in top view, activate the texture render mode. You should see your image on the plane 

Plane with the base image to modify

 II - Setting up the camera

The goal is to make a render with the same size as your original image

• Set the rendering resolution to the same size as your image. For example 1600x900 px. Choose RGBA if you want to handle a transparent image.
• Position the camera right above the plan, let's say at (0,0,2), facing -Z (rotations = 0)
• Use an orthographic projection.
• Select a vertical sensor fit of the camera. Choose an orthographic scale of 2 (this is the Y size of the textured plane created by the import)

Now the camera field of view should fit exactly your image with the good ratio and the render will generate an image with the same size.

Camera well-aligned with the plane

III - Finally deforming the image

• Select your plane, and in edit mode subdivise it many times. This will create the lattice used to deform the image. Be careful! Do not use too many divisions or it will slow down your computer
• Turn on proportionnal editing and move vertices of the lattice to locally deform your image! Use the mouse wheel to control the deformation radius. You can benefit from Blender real-time texture rendering, 3D zoom/move and undo options.

Subdivising the plane

Proportional editing to locally deform the image

Once you're done, render and save your modified picture! That's it!

How to create a smart tile-based floor in a Diablo-like game?

  Today I will present to you a technique to create a nice looking video game ground using the classical "tiles", but I will go further into details about how to introduce some variation to break the obvious repetition. I have found this trick by carefully studying a video game called "Torchlight" (a cool Diablo-like hack and slash game... by some of the minds behind Diablo in fact... Great team!).

I - First what is a tile? 

Simple! It's a picture like this:

Tile A - A cool stony ground!

What is special about a "tile" is that you can repeat it X times without noticing any artefacts on the edges like this:

 Tile A repeated 3x3 times

Sometimes, it is also called a seamless image/texture. This trick is used a lot in all video games to create vast ground/floors with a small image (to optimize memory use). Even World of Warcraft is using it:

Cobblestone tiles used in World of Warcraft

In this screenshot it is difficult to see the repetition (but you can find it!) because the shapes are quite complex, and because Blizzard artists are very good. Now... if you use A LOT of repetitions, especially on very flat surfaces like indoors floors, the trick will seem obvious. We'll see here how to limit this problem.

II - Variation in textures

First, we can use 2 or more textures in order to add a bit of variety. But to connect well with each other, they MUST have the same edges. Here is an example:

 Tile B with same edges as tile A

The centre of the image is different, but the edges are the same, so that if I fit this tile B in a bunch of tiles A I've got this:

Tile B circled by 8 tiles A

We have introduced a variation in texture and we can now choose randomly one image or the other to create a less uniform floor. You can add as many variations as you want of course, but this will impact memory use. You need to find a trade-off here. If you work in a 2D game, this trick is quite useful, but if you create a 3D world, there is another one you can use...

III - Variations in meshes

For the moment, we have assumed that the tile textures are mapped on a simple square like this (in 3D):

Completely and sadly flat. However, we are not limited to plans! We can add some variety in the meshes we use too. For example we can create a plan with :

Just one stone popping out of the ground

Or an unstable stone

Or a lower stone

You can repeat this process for each tile you have. This results in a wide variety of combinations mesh/tile texture which looks like this:

Variation in texture and mesh for ground tiles

IV - A few precisions and a demo

Quite nice isn't it? Here are a few more considerations on the problem:

• It is much faster and easier to create a new mesh than it is to create a new texture. It also uses less memory (well... at least for low polygon meshes). So if you have to choose... Prefer mesh variations. But for a good visual impact, you'll need both.
• Here I chose some kind of "cartoonish" look, and I didn't use a lot of polygons to model the different ground meshes. This is OK if you look at the scene from a mid-range distance as it is the case in diablo-like games. But if you want more close-up cameras, you may need to reconsider this.
• Of course, you can add even more diversity to the ground by adding objects on top of it (carpets, simple lonely stones, rubble, chairs, tables and other classical crates...)
• You can use a complementary tile set to trace some paths. It breaks the monotony of "cobblestones everywhere". In Torchlight, they used square paths so that they didn't have to deal with the edge transitions BETWEEN THE 2 TILE SETS (quite a lot of work)

Cobblestone smart tiles enhanced with square path tiles in Torchlight

• And finally, you can use this technique on a lot of architectural element types (walls, roofs, ceilings, cornices,...) and with a lot of different styles (modern, gothic, and all the stuff you usually see in video games). Keep in mind that mesh variations on complex geometry like ruined walls may be touchy as you need to watch out for nice mesh connections AND texture connections (which can be difficult as it involves a complex mapping of the textures on the meshes).

Check out for the crazy work on mesh/texture tiles 

on those ruined walls. Connections are invisible!

A little bonus: you can check a real-time demo I made showing a randomly generated ground with this method by clicking here. You may need to install a free plugin (Unity Webplayer, a bit like Flash) to run the demo.


That's all for today guys. I will try to post many tutorials like this one explaining the "backstage" of the creation of a video game. Now you can watch out for this technique in all the games you play ;).

You can use the 2 tiles provided in this post freely... as long as you give me credit somewhere.
Next time I'll write about how to actually create the tile images, and I will detail how to make those texture variations which connect well.

Have fun, and don't hesitate to react/add something in the comments! And if you are interested and you want to receive all the news by email, be sure to subscribe (in the upper right menu of this site). Thanks!

Let's play

Hello!

On this blog I'll try to post various information about video game creation while I am designing my own.
Hopefully this will help someone somewhere! I will share my experience in art creation, software development, marketing issues, and point to resources that I think are useful.

See you!

PS: Of course no, I won't be able to make a FF-like game.