Hi, all. This is Pyro typing. I'm not as well known as Mordred (in the Verge community) which, I suppose, is a good thing. This is the introduction to Mordred's tile drawing tutorial. The TDT, I guess. Not as deadly as DDT and not even banned from the US market. We are in Canada, but the US market still counts. Mordred just reminded me that a) this intro is pointless and b) this intro should tell you that this tutorial is a series which might cover more than tiles. I say might because it is planned; whether or not Mordie finishes it has yet to be seen. A bit of history: we live in the same city and have programmed together for about seven years. Mordred is fifteen, by the way. We have drawn tiles and graphics for years; they really sucked. These are a bit better, I think - a great deal better.

So far, about ten articles have been posted to the Verge Repository (henceforth referred to as "The Repo") covering common Verge plot problems. We have heard the wisdom of the countless multitudes about how to make your plots realistic, how to avoid erroneous errors (pun intended), and how to make your game better. However, they have neglected to point out one major problem: The graphics in most Verge games blow goats.

It is a popular misconception that graphics are difficult and that it is nearly impossible to draw things that do not resemble dog vomit. Most people think that this is true, and, rather than doing a nice job on their sprites and tiles, will hastily throw something together, rip Hahn's sprites (or that nice little ACE char), and try to rely on their plot (which, as previously pointed out by the ten mystic Repo gurus, usually has as many holes in it as a Swiss cheese factory). With just a little effort and a little knowledge, however, you can make quite nice looking graphics. Think how cool games

(as opposed to HAHN01.PCX and the FF6 ripped tiles!) Think how cool games like ToV and SotS are with nice looking graphics! Think how cool Beyond Eternity : Ascension WILL be with new graphics! (SHAMELESS PLUG FOR MY GRAPHICS AND MUSIC!)

That is why this tutorial exists. I am going to attempt to share with you what I know about making graphics. I may not be the world's greatest artist, but I do make my own art and my worlds contain many recognizable objects (rocks, trees, grass, and dog vomit). This is intended to be a series, coming out whenever I feel like it. It will cover the fine arts of making tiles, characters, CR2 files, mangas, save/load boxes, how to use several common paint programs, a short bit of work with POVRAY, and anything else I feel like.

Tiles are probably the easiest thing I can think of to draw. Animation is not something that you usually have to worry about; your tiles are only 16 by 16, and they don't need to have nicely flowing capes. It is quite easy to create fairly nice looking tiles without much artistic ability.

The first thing you need to know about tiles is not to use MapEd's built in tile editor. I have been fortunate enough to see a copy of the MapEd 2.0 tile editor by Ric, which is fantastic, and I have been unfortunate enough to see the MapEd 1.0 tile editor by Vecna, which has all the sophistication and ease of use of a rather poorly made sheepskin bucket. There's a copy of a program called Tiled on the Repo by some person whose name eludes me for the moment, which never let me move the mouse past X coordinate 160, so I don't really know if it's any good. It didn't seem all that great.

I use Deluxe Paint IIe for all my art; unfortunately, it's a bit hard to find. You can probably pick it up at second hand sales, the occasional old pirate BBS, and in any fine Utah Computer store. If you can't find it, grab MVP Paint by MVP Software; it's a bit hard to use but still quite nice. I would strongly recommend that you get Dpaint IIe at all costs; pirate, beg, borrow, scrape, telephone, do whatever you have to get it. Message somebody on #verge; most of the old vergers have a copy. Photoshop 4 has nice features, but unfortunately the tiles it generates don't look very good in 320x200x256; also, I'm not sure if it will work with the Verge palette. XBig_D mentioned something about how you can use it with Photoshop 4; I will check my IRC logs and try to dig that up for you. McGrue has used it for some new SotS tiles which actually look pretty cool, so it can be done; more on that later.

When I use DPaint, I will generally include screen shots to show you what exactly I am talking about when I say "Go to the stencil bar and invert your stencil" or "Choose a gradient between colors 6 and 12". These will always be stored as DPX-*.PCX. If I hvae screen shots of other programs, they will be recognizeable like that as well.

You will also need blank templates; I have included the one I use for my tiles to stop you having to clear out Hahn01.pcx yourself (BONUS TIP: This is extremely easy to do in Deluxe Paint. Go to the stencil menu, click on color 255, and turn your stencil on. This means that color 255 (the grid color) can not be overwritten. Then, select color 0, choose the rectangle tool, and just wipe the entire thing. You will have the grid left over. Make sure that you turn your stencil off. This is a very useful technique as well for when you want to recolor PART of an object (tile, chr, etc.)) (Stencil Dialog Box explained in DPX-003.PCX) This is stored in TILETEMP.PCX

Grass which is a solid color doesn't look good; neither do one color walls and sidewalks. So the first thing you need to know how to do is to texture something. In this case, texturing means to create random gibberish in your 16x16 grid. Deluxe Paint makes it extremely easy; I will quickly discuss other various ways to do it down below.

Deluxe Paint has two supremely powerful options: The custom brush functions and the shading tool. Custom Brush Functions allow you to draw with a brush of a user defined shape (or one of many predetermined ones), and the shade tool allows you to increment colors linearly within a certain gradient. If that doesn't make sense to you, you will see what I mean shortly.

To easily create random gibberish in DPaint, you need to start by filling a 16x16 square with the fill tool. This will be your "base" color. Next, go into the gradient area (DPX-000.PCX)

, and create a gradient which starts at the base color (or even slightly lower) and ends at the highest (brightest/darkest) color that you want on your texture. Next, select this gradient. Turn on the spray can tool, select "Shade" (DPX-002.PCX)

, and just spray away! In an instant you will have a wonderful texture. If you have over shaded, just use the right mouse button to shade in the opposite direction. This way, you can have wonderful hand-pixelled-looking textures in no time.

This is not to say that doing a little image editing on your own isn't a good idea. Deluxe Paint, once again, makes it really easy. Just create custom brushes, set your draw mode to "Paint", and you can rearrange all you want. Also, you can use the color selector to touch up what you're actually doing a bit. Some experimentation may be required with various custom brushes to get exactly the texture that you're looking for.

I have included in the accompanying ZIP a PCXs showing some textures that I did. There is some grass, wood, brick, and some stone as well, just as examples. Try experimenting with different shaped custom brushes; wierdly shaped ones will give interesting results.

TUTTILE1.PCX has it all; note that I did not put as much effort into the brick shown there as I did the one for BE:A. Also, the BE:A brick is much darker. Experiment with how high you decide to make your gradient and suchlike.

A note on the brick textures: I created a custom brush and overlaid it to create the brick outlines. Custom brushes can be picked up with the select tool (That looks like the dotted rectangle), but make sure that your background color (select with the right mouse button, either on the color picker or with the eyedropper) is the color that you want to be transparent. You can use this to outline the brick, to make wierd shading tools, or just to wallow in cool things. Deluxe Paint even allows you to save and load custom brushes (which can be multi or single color, btw); Just go to the brush menu and choose... GASP! Load or Save! There are brush distortion functions, brush modification functions like Bend and Shear (which will come in handy later on, as I will explain in future tutorials)

MVP PAINT: MVP Paint has two useful functions for random texture generation: The color replacement tool and the random replacement tool. Essentially, these two useful functions let you replace X% of all the color in an area with another color. Thus, you can use this for randomly generating textures; it still doesn't look nearly as good as DPaint. Another useful function is the blend tool which you can then use to blur the randomly colored pixels together.

PHOTOSHOP: Photo Shop has a good deal of random texture generation functions. Clouds can work; after that you can just run random filters on it until you get the right sort of effect. To create random textures in a certain area, just select it.

COREL PHOTOPAINT: Corel is wonderful for generating textures; it has a whole Turkish Horde of texture generation tools. Unfortunately, in 320x200x256 mode they always seem to turn out kinda chunky, and you will need a palette conversion program. IF anybody knows a way around these two dilemnas, please tell me; I'd love to know.

NEOPAINT: Neopaint, if memory serves me correctly, sucks. Er, has a spray can. So just spray random colors into a 16 x 16 picture. I think it has custom brushes as well. Basically, you want to avoid it like the plague, though.

Essentially, with a tile, you will have a lighter side and a darker side. The darker areas can be used to convey depth, the lighter areas to convey "height". You will also have sort of a normal, unshaded side. This is very

B) create a gradient in the GRADIENT PICKER (make sure that you don't use the color picker) which encompasses all the appropriate colors that you want (from the darkest color that you want on your object to the lightest color that you want)

C) create a custom brush which shows all the areas that you want to make lighter. Those of you who have really complex objects (or simple objects) can just choose a small - line, or even the single ù pixel and use that instead.

D) with your gradient selected and the Shade "Technique" (choose in the Tech Menu, BTW) on, click with the left mouse button (usually; it changes for some reason, I know not why) until the desired brightness is achieved.

You only want to click a couple of times; usually about 2. Then do a section where you have clicked once, so you have a nice smooth light. This works well for things like torch illumination and areas of tiles that are naturally dark (see the Beyond Eternity:Ascension tiles for a good example of this when they come out)

In Photoshop, you have the ability to create lighting layers. I don't have a copy of Photoshop here so I can't really remember how to do this, but basically you want to create a new layer (with your texture on the layer below this), set your layer draw mode to Intensity (or Add?) and just draw the light areas and dark areas on that layer. The results look really good, however once again you have the problem that Photoshop has of being natively 24 bit. I will look into these things for you, dear readers, but that should be enough to get you started.

Fractal Design Painter can do it too, but I don't remember how. You can do it in MVP Paint with the brighten/darken selection device; unfortunately, it has the worst interface in the history of creation and with about 24 bricks to a tile (and 18 brick tiles) you will eventually lose your mind and undergo the course of action that I suggested if you want to texture tiles with Windows Paintbrush (i.e. knife between cheeks again) So get a real paint program.

First of all, check to make sure that your tiles line up properly with each other. In Deluxe Paint, clear an area of your tile grid and use it as a testing surface; if needs must, you can always draw the tiles back later. Use the Deluxe Paint custom brush function to draw tiles next to each other and see what you get.

Second, sometimes you will want to have various types of tiles to do the same thing. Generally, the best bet is to basically use the same techniques that you used for the other tiles - same custom brush for the shading, same maps for the lighting, etc. You just want the textures to look slightly different.

Third, it helps to have a knowledge of map making as well, just so you know how to set up your tiles. My knowledge of map making is pretty terrible, so I can't really help you there. :)

Fourth, avoid obvious patterns. If you have a pattern in your tile, even if it is accidental, your eye will be able to detect it and see that it is a tile. Remember, you do not want to be able to see that it is a tile. In the Beyond Eternity:Ascension tiles (usually referred to as BE:A) you will notice that a lot of the wooden objects look the same. Guess why? Because I made them all out of the same 16x16 block of wood, just stretched, chopped, shaded and mutated a bit! However, it's totally obviously patternless so I can get away with it.

Five, keep your lights in the same direction. One thing that you notice about the "Mordred Method" of tile making is that everything really looks nicely textured and actually deep. The brick that is in the example area and the bricks in BE:A all look nicely rough and cobbled, because the lights work. However, if for some bricks your light comes from Upper Left and for some Upper Right, it all falls apart. You also don't always want light on everything - rugs, for example. Objects like vases need their own lights; more on these more challenging objects in tutorial #2.

And six, don't be discouraged if your early attempts don't turn out. I know that mine didn't. However, practice is necessary, and besides, think of it this way - anything has got to be better than ANOTHER game with HAHN01.VSP!