Difference between revisions of "CastleTutorial"

From The Battle for Wesnoth Wiki
(Changed the images on the castle tutorial to wesnoth-based hosting)
Line 26: Line 26:
 
in figure (1); castle walls will then be drawn as shown in figure (2)
 
in figure (1); castle walls will then be drawn as shown in figure (2)
  
''(figure 1)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure1.png
+
''(figure 1)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure1.png
  
''(figure 2)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure2.png
+
''(figure 2)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure2.png
  
 
Castle Walls are composed of 12 different images (as show in figure 3), that
 
Castle Walls are composed of 12 different images (as show in figure 3), that
Line 38: Line 38:
 
point of view.
 
point of view.
  
''(figure 3)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure3.png
+
''(figure 3)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure3.png
  
''(figure 4)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure4.png
+
''(figure 4)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure4.png
  
 
===The Keep Model===
 
===The Keep Model===
Line 51: Line 51:
 
required for a complete castle.
 
required for a complete castle.
  
''(figure 5)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure5.png
+
''(figure 5)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure5.png
  
 
There are 4 kinds of keep images: those representing keeps corners that are
 
There are 4 kinds of keep images: those representing keeps corners that are
Line 85: Line 85:
 
correctly tile with C!||
 
correctly tile with C!||
  
''(figure 7)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure7.png
+
''(figure 7)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure7.png
  
 
Geometry, and a good methodology, may be used to make those tile correctly.
 
Geometry, and a good methodology, may be used to make those tile correctly.
Line 134: Line 134:
 
the following:
 
the following:
  
''(figure 10)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure10.png
+
''(figure 10)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure10.png
  
 
Do not be afraid with all those coloured polygons! Those just are guides, that
 
Do not be afraid with all those coloured polygons! Those just are guides, that
Line 159: Line 159:
 
Let's draw the wall (figure 11).
 
Let's draw the wall (figure 11).
  
''(figure 11)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure11.png
+
''(figure 11)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure11.png
  
===Exploding The Wall=== http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/castle-exploder.png
+
===Exploding The Wall=== http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/castle-exploder.png
  
 
Now, we must draw the concave version of the wall. To make sure it will
 
Now, we must draw the concave version of the wall. To make sure it will
Line 180: Line 180:
 
file will then look like figure 12
 
file will then look like figure 12
  
''(figure 12)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure12.png
+
''(figure 12)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure12.png
  
 
===Drawing The Concave Wall===
 
===Drawing The Concave Wall===
Line 194: Line 194:
 
file should look like figure 13
 
file should look like figure 13
  
''(figure 13)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure13.png
+
''(figure 13)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure13.png
  
 
===Imploding Back the Concave Wall===
 
===Imploding Back the Concave Wall===
Line 207: Line 207:
 
It should look like as in figure 14.
 
It should look like as in figure 14.
  
''(figure 14)'' http://www.anathas.org/ayin/wesnoth/castle-tutorial/images/figure14.png
+
''(figure 14)'' http://www.wesnoth.org/wiki-images/tutorial/castle-tutorial/images/figure14.png
  
 
===Further manipulations===
 
===Further manipulations===

Revision as of 04:35, 13 August 2012

Building tileable castles - A tutorial

Introduction To Castles

Overview

Wesnoth terrain graphics system allows the WML designer to create various terrain graphics "models": rules that allow to determine how the different terrain tiles will be displayed by the game. Those allow the terrain designer to specify renderings that go beyond the simple "one terrain type = one image" representation.

One of those terrain models is the Castle (it will be called like that, "Castle", all along this document, although this model can be used for many other terrain types, like, for example, caves.) Castles are created from two type of elements: a castle floor, and a castle wall. Castle floors are normal, basic tiles that are placed on each corresponding tile. As those really have nothing special, they will not be detailed in this document. What we will detail is how to build castle _walls_.

The Simple Castle Model

The Simple Castle Model is used to build castle walls, without keeps. Castle walls are special transitions, that are drawn between Castle tiles, and Non-Castle tiles. For example, imagine some castle tiles are disposed as shown in figure (1); castle walls will then be drawn as shown in figure (2)

(figure 1) figure1.png

(figure 2) figure2.png

Castle Walls are composed of 12 different images (as show in figure 3), that tile together. Those are positioned at the corners of the castle border, as shown in figure 4. "convex" images are positioned at convex borders, "concave" images are positioned at concave borders (as it hopefully might be expected.) When we talk about "concave", or "convex" borders, we always take the castle's interior point of view.

(figure 3) figure3.png

(figure 4) figure4.png

The Keep Model

The Keep Model is created to build the special transitions that are used to build a wall around the Keep of a Castle. Keeps are assumed to be always composed of one tile (isolated from any other keep tile.) Keeps are a little more complex than castles walls: they are built from 24 different images (see figure 5,) thus setting to 36 the number of images required for a complete castle.

(figure 5) figure5.png

There are 4 kinds of keep images: those representing keeps corners that are outside of a castle, those representing keep corners that are inside of a castle, and thos representing keep corners which are in the border; the last one being divided in 2 categories, depending on the castle-keep tiles going clockwise, or counter-clockwise (see figures 5 and 6.) Interior keep tiles are supposed to tile with other interior keep tiles, and with corresponding transition tiles; same for exterior keep tiles. Figure 6 illustrates the different types of transitions for keep tiles.

(figure 6)

The Wall

Tile drawing problematics

To draw tileable castles, one should start with drawing the wall. Some tileable castles may only consist on a wall, without a keep (Think here that what we call "Castles" in this document may apply to a lot of other terrains, built with the same rules. Also think that some castle may have keeps that are normal tiles.) The 12 tiles that compose a wall are made from 2 groups of tiles, as stated above: convex wall tiles, and concave wall tiles. Tiles for each one of those 2 groups are drawn together, then automatically cut out using a specialized software. That way, only 2 graphics are necessary to generate those 2 tiles.

The main problem, as that should be inferred from reading the tile model description, is making convex graphics tiling with concave graphics: as concave graphics are drawn together, there is no problem making them tile together; same with convex graphics. See figure 7 for an illustration of this problem: ||A and B are drawn together, so they tile perfectly. However, we must make sure A will correctly tile with C!||

(figure 7) figure7.png

Geometry, and a good methodology, may be used to make those tile correctly. This is possible, but, trust me, this is tedious. And hard to maintain. And even harder to explain. And, the more complex the graphics are, the harder it is. That is why ia helper tool was developed, to help in the process. The helper tool we are talking about is called the Castle Exploder. We will describe how to used it to build a complete castle.

Preparing the work environment

Before using the Exploder, you must prepare a work environment. The Exploder, must be provided with files named according to a correct pattern in order to be able to work. Exploder files are named according to the type of image they represent. The "type" of the image corresponds to the position of the different tiles that compose the image. For example, the exploder recognizes any image that is called foobar-convex.png as containing the 6 convex castle walls, disposed around an hex.

There currently are 7 different image types; all of which are used to build a complete castle with keep. Those are named:

  • convex
  • concave
  • exploded-convex
  • exploded-concave
  • keep (not yet available)
  • keep-walls (not yet available)
  • keep-flower (not yet available)

(figure 8)

Forget about the last 3 ones for now; the 4 first ones are used to build castles.

Download the castle project here:

http://www.anathas.org/ayin/wesnoth/castle-tutorial/files/castle_project.zip

To prepare your work environment, unpack the castle_project.zip file in a directory of your choice.

Drawing The Convex Wall

Open, using your favourite bitmap editor the file "castle-convex.png" (if your favourite bitmap editor cannot open png files, I can't help you.) You will see the following:

(figure 10) figure10.png

Do not be afraid with all those coloured polygons! Those just are guides, that will help you to position your image. If your bitmap editor handles layers, I suggest you make the actual drawing on another layer, keeping this one to provide guidelines. If it does not, you should just delete all this coloured stuff. The different hexes, corresponding to the position of the actual terrain hexes in the game, are represented with a value change. The 6 different corners, that will be cut into tileable pictures, are represented with a hue change.

This image is supposed to represent a convex castle tile: that is, a single castle hex, followed by non-castle hexes all around. Draw the corresponding graphics on it. You do not have to bother about them tiling together: they will, as they were drawn together.

Some guidelines on drawing the wall: when drawing a wall, the TOP of the wall (not the bottom) should be around the hex border (TODO: confirm this: this is good for the positioning of units, but not so for villages near castles) Ideally, a wall should not be higher than 1/4 of a tile (that is: 18 pixels). Try to make the castle appear to be viewed under the same angle as other castles, and villages.

Let's draw the wall (figure 11).

(figure 11) figure11.png

===Exploding The Wall=== castle-exploder.png

Now, we must draw the concave version of the wall. To make sure it will correctly tile with the convex version, we will not directly draw it in the castle_concave.png image: we will draw it in an exploded version of the castle_convex.png image. That is where the Exploder Tool comes into play.

Just open a terminal window, and type the following command:

exploder castle-convex.png castle-exploded-convex.png

The exploder will open the first file, extract from it the tiles it recognizes, then put those on the second file, if there is a place to put them (For example, exploding castle_concave.png to castle_convex.png is a no-op, as those two pictures do not have any tile in common.)

After the program finishing merging the tiles, the castle-exploded-convex.png file will then look like figure 12

(figure 12) figure12.png

Drawing The Concave Wall

Draw the castle graphics on the 6 concave tiles, so that they tile correctly with the convex tiles. It is useless to modify the concave tiles; if you have inadvertently done so, you may explode back the castle_convex.png file on the file you are working on. Do not worry: your work will not be lost; as the exploder tool does only overwrite the portions of the image it actually replaces.

After you have drawn the missing castle corners, the castle-exploded-convex.png file should look like figure 13

(figure 13) figure13.png

Imploding Back the Concave Wall

The concave tiles you drew should, magically, tile together. However, you may want to ensure they actually do, and, if they don't, to correct them so they do. Just implode back the castle_exploded-convex.png file into the castle_concave.png file, using the command

exploder castle-exploded-convex.png castle-concave.png

It should look like as in figure 14.

(figure 14) figure14.png

Further manipulations

Cutting The Tiles For Use In The Game

Once you have up-to-date castle_convex.png and castle_concave.png files, you must cut them, so they are usable by Wesnoth. To do this, create a directory where you want the cut tiles to be output (or you may just use the "output" directory which already was created), and use the commands:

cutter castle-concave.png output
cutter castle-convex.png output

Keeps

As it was said above, keeps are a little bit more complicated than castles. Keep always being composed of one isolated tile, keep tiles always are convex, however, they may have several different relationships with nerby castle tiles: they may be inside of a castle, outside from a castle, or in a border.

The keep views

Drawing interior and exterior keeps

Keeps inside of a castle, and keeps outside of a castle, may be strictly identical. However, for your graphics to be more "realistic," you may decide they are different. For example, keep tiles located outside of a castle may have no doors, less windows, they even may have a stronger wall, etc. Interior keep and Exterior keep tiles do not need to tile together, as there always will be an intermediate Border tile to make transition. They may be made separately; however, keep in mind that you will have to make each transition between those. If they are too different, transitions may be clunky.

Making keep transitions

Flower Power