making custom wallsets for dummies

[Adamo]

CUSTOM WALLSETS FOR DUMMIES

I have been asked by Kentaro for a general instruction of drawing custom wallsets for dummies. Ok. Here`s an instruction, how to make a proper (I hope!) new wallset for CSBwin. I dont know, if it is usefull to anyone and If it makes sense to finish this "instruction" (that`s the first part only). PLEASE LET ME KNOW, IF IT IS USELESS - IF SO, I`LL DELETE THIS POST
[Caution! Because I don`t know english well, some words could have different meaning to the context!]
There are 6 files, wchich contains wallset in CSBwin (you can extract them by ADGE):
1. "83 [Dungeon Graphics - Wall (Right Side 0)] .bmp"
2. "84 [Dungeon Graphics - Wall (Left Side 0)] .bmp"
3. "85 [Dungeon Graphics - Wall (Front and Sides 1)] .bmp"
4. "86 [Dungeon Graphics - Wall (Front and Sides 2)] .bmp"
5. "87 [Dungeon Graphics - Wall (Front and Sides 3)] .bmp"
6. "88 [Dungeon Graphics - Wall (Far Left Side 3)] .bmp"
Each of these files have different function:
Third file describes a wall, that you see, when distance from the wall to the player = 1 tile (front and sides). Fourth, when distance = 2 tiles (front and sides), and fifht, when distance = 3 tiles (front and sides).
Sixth also describes a wall, that is used, when a distance = 3 tiles, but only in special cases (it is seen in some open spaces only).
First two ones describes a wall, that is seen on the left and right of the player, when he is near a wall (when distance = 0). The original wallset uses different colours, wchich are changing depending of a distance. Here it goes:
1. white (16th colour from original DM palette),
2. pale*/light (14th colour from original DM palette),
3. "light" grey (3rd colour from original DM palette),
4. "normal" grey (2nd colour from original DM palette),
5. "dark" grey (13th colour from original DM palette),
6. black (1st colour from original DM palette).
These are the colours, used on walls in original DM/CSB. You can use any other colours from original palette too, but these are "savest", in my opinion (each one can change to another one near smoothly). White can be smoothly changed to light, light to light grey, and in another direction - black to dark grey, dark grey to normal grey, etc. All these 6 colours, that I have just described, makes IMHO a bigger possible colour line here(by "colour line" I mean a chain of colours, that are quite similar to each other, smoothly abuting/adjoyning with another one on the left and on the right). Why am I writing about this? Because always, when you`re drawing new wall, you have to pay attention on the fact, that colours of the wall are changing smoothly, depending of the distance. In other words, in dark corridors wall near to the player seems lighter than the same wall, but far from the player.
Of course, you can ignore that fact and draw walls on distance 0,1,2,3 without changing colours due to the distance, but then your dungeon will loose the effect of light dispersal*. The chain (gradience) of the colours is very important, if you want to retain this. You can use various non-grey colours, like light-green (8th) and dark green (7th) for example, but they wont create a big colour-chain: The biggest chain from these colours will contain 4 colours only: white or light will turn into light green, light green will EASILY turn into dark green, dark green will turn into, let`s say, dark grey. So this chain will have 4 elements only. The same situation is with light-blue (5th) and dark-blue (15th). You cannot add for example red colour (9th), because it definitely wouldn`t fit to them. With red as a "basic" colour, the case is simplest - it would EVENTUALLY fit to the dark red (6th), dark red to brown (4th), brown maybe to dark grey (13th). From the other side, you could connect red colour with orange (10th), orange EASILY with "cream-coloured one" (11th), or with yellow (12th). But be carefull! 10th and 11th colours are always CUSTOM colours and could change themselves, depending of the monster colours on the level! It means that in some levels you could have a big mess on the walls!
It`s up to you, by wchich colours will you draw your walls, but I definitely prefere original chain (from white to black).
Ok, suppose, you want to make a new, grey custom wall. First of all, you have to find (or draw) a new picture, wchich is suitable to make a wall. It can be almost everything, but beware! The more picture will be complicated, the more work you will have with layouting!
The size of its picture doesn`t matter: if you find somewhere a picture, that is big, you could just resize it to the proper values. The case with colours is more complicated: CSBwin uses 16 indexed colours, so you have to keep eye on that. I don`t really know, how it works, but when you load any CSBwin PROPER picture to the GIMP program, they`re all indexed.
How to adapt colours to 16-colours CSBwin needed format from the picture, that have some different colour palette system? Well, ADGE does it very well. You just have to load any graphics.dat file for ADGE, then just import one your picture to the one of already used (size doesn`t matter), and then export it somewhere as ".bmp" file. When opening it by GIMP you have already indexed picture. This is the best way I know to do this.
Now open the "85 [Dungeon Graphics - Wall (Front and Sides 1)] .bmp" file by GIMP. As you can see, it have 256x111 size. It actually contains 3 wallsets: left, front and side (when distance=1) AND some empty spaces on the left and on the right. Considering the fact, that not ALL side wall on this file is showed, when you`re standing over the wall, there`s also an "empty" space in that part of the picture. I mean, the edges of that side wall are changing in some complicated way: replacing themselves giving you an illusion of "changing walls", when moving. It`s because the wall is showed variable (resized horizontally) each time you move, wchich gives you an illusion of "unstableness*", when moving.
Resize your picture to the 96x111 size.
Now you have 2 options:
1. Copy this resized 96x111 picture and paste it right on the middle of that wall picture. (The result of drawing wall like this you can see in my custom wallset posted by PaulH in "Creative Endavours" on the forum). I don`t wont to explain THIS system of drawing now here.
2. (I prefere this option, because the walls looks much better, when finished):
Copy this resized 96x111 picture and paste it first on the left side of the front-big-wall (it is that 192x111 picture on the middle of the screen, so you can paste 96x111 picture in the left and in the right of that wall, leaving 32 pixels on the left and the same on the right. 96+96=192, so it should fit, if you resized your picture well). Don`t worry about the 32x111 part on the left and similar part on the right yet.
Ok, so we`ve got one wall (front 1).
Now you have to make these two small 32x111 parts on the left and on the right (left side 1 on the right and right side 1 on the left) on the same screen ([Dungeon Graphics - Wall (Front and Sides 1)] .bmp).
First cut your "original-resized" 192x111 picture (so two joined 96x111 pictures) from the 256x111 picture, (simply by cutting 32x111 edges on the left and the same one on the right). Resize that 192x111 picture to 28x111 picture and save it separately.
That`s because the right-side wall you see on the left of the screen have really 28x111, not 32x111 pixels (on the very left of the screen there`s 4 empty vertical lines).
Then you have to use "change perspective" (*I dont know english name of GIMP options, I use polish version*) and transform this 28x111 picture to that shape you see on the original picture (CAUTION! It is quite complicated. If you use that option for first time in your live, then you will have to do this by try-and-mistakes method!). But it isn`t really that complicated, as it seems. Be very carefull, watch the angles and you`ll make it. Your final right (left) 1-wall picture may not be 100% accurated to the original. (Don`t worry about that. I made it almost perfectly for 8th or 9th try). Just change the positions of down-left and up-left points to these you see on the origin wall.
Done? Ok, then copy it and paste (better without that transparent colour - it should help you with pasting the wall) to the original picture on the left (without these 4 vertical lines of course, wchich are non-used!). There shouldn`t be a problem, because these 28x111 shapes should overlap themselves. If they don`t, just correct the wrong-pixels.
The same thing, BUT with changed sides, make with the left wall on the right of the screen. Take non-transformed 28x111 picture and transform it using "change perspective" option again. BUT! This time change angles of the up-right and up-left corners and do similar things I had just written.
You ask: why to do it again, if I could just take that 28x111 picture allready transformed and just reflect* it horizontally? [It`s because if your picture is not the same on the left side comparing to the right side = means cannot be easily reflected. (I don`t know how we call it in english, when something can be reflected horizontally without changes)]. If so, your left wall would be the same as the right in the corridor, so that wouldn`t look nice.
OK. So your final picture should contain from these parts (I`m counting from the LEFT):
- 4 empty lines (4x111) on the LEFT
- right-side wall (28x111)
- "basic" 96x111 picture
- another "basic" 96x111 picture (the same, rather not reflected-you could experiment, but I dont advice you)
- left-side wall (28x111)
- 4 empty lines (4x111) on the RIGHT
Compare the shape and the angles with the original ones again.
OK, so you should have FIRST file (256x111) needed for the game. I dont want to write, how it is used while characters are moving in the game (it`s a very strange and complicated system - only the front 1 wall really contains by FIVE parts + two sided + two semi-empty, but I could write a 10-toms book about this). Never mind.
Next step is to make "86 [Dungeon Graphics - Wall (Front and Sides 2)] .bmp" file.
Now I will show, how I`m doing next two files. I know that it`s not a perfect method, but I use it for drawing my wallsets. If you have better way to do this, then please let me know!
We could just resize that file we just made to 144x71. But as you can see, the secons file (front and sides 2) DOESN`T have that empty space on the left, wchich is on the right. Previous file had 4 empty lines on the left and 4 on the right. This one have only 8 empty lines on the right. So we have to take that 256x111 file and CUT the edges on the left (4 lines) and on the right (4 lines), to make 248x111 picture without those empty spaces (256-2*4=248). So really this picture is 248x111, as long second`s size is really 136x71 (144-8=136). Resize 248x111 picture to 136x71 and paste it to the 144x71 size original one.
NOTE: THE ANGLES MAY NOT BE 100% ACCURATE, BUT ARE 99% SIMILAR. You can do each part separately, to make it perfectly accurate, but it`s a lot of work!
You will have to correct it by hand, comparing the file you made with the original one.
Now you have to do the third file by similar way. But remember that, though it`s size is formally 128x51, it have 11 empty lines on the right, so you should resize your 136x71 picture (second file) to the 117x51 size and paste it... Don`t forget to correct errors on the end.
Let`s say you have all three files resized, while shapes and angles are similar to the original ones. But it`s not an end yet. You have to change colours of second (wall seen from distance 2) and third files (wall seen from distance 3).

OK, that`s enough for today-next time I will write, what to do next, if this part is usefull for anyone...

[PaulH]

Sounds complicated, but it is effective. Here is what you will be looking at:

[PaulH]

This is the 1st one I did. I didn't get it fully right, but its sorta atmospheric:

[kentaro-k.21]

hi Adamo.
your tutorial is very nice.
i wrote summary of your tutorial while i was trying your steps.
your instruction contains informative parts so i decided to write a summary so that more people can notice the useful parts.
but i omit many parts i cannot represent in my words.
thanks for helpful instruction Adamo!

(also my English is bad, plz forgive it!)





[1] wallset in CSBwin

currently there is single wallset in DM/CSB or CSBwin dungeon. you cannot include 2 or more...

a wallset is consist from a floor, a ceil and parts of wall images. (a wallset may contain other GFX elements such as door sliders and pitfalls)
in CSBwin, there are 6 bitmap images to consist wall images in a wallset.
you can obtain images with a tool called extractor. ADGE support to import/export images.

1. "83 [Dungeon Graphics - Wall (Right Side 0)] .bmp"
2. "84 [Dungeon Graphics - Wall (Left Side 0)] .bmp"
3. "85 [Dungeon Graphics - Wall (Front and Sides 1)] .bmp"
4. "86 [Dungeon Graphics - Wall (Front and Sides 2)] .bmp"
5. "87 [Dungeon Graphics - Wall (Front and Sides 3)] .bmp"
6. "88 [Dungeon Graphics - Wall (Far Left Side 3)] .bmp"

each image has different rule and purpose.

next quote helps you to explain rule of positioning wall images.

Code: Select all

F4L2, F4L1, F4, F4R1, F4R2
F3L2, F3L1, F3, F3R1, F3R2
      F2L1, F2, F2R1
      F1L1, F1, F1R1
      L0L1, F0, F0R1

F0 is your position.
F1 is a position: you reach if you move one step forward.
L0L1 is a position: you reach if you go one step left.
F0R1 is a position: you reach if you go one step right.

continue about 6 wall images. where do the 6 wall images occupy in Fx/FxLx/FxRx representation?

1. a wall at L0L1 position. (often it is at F0R1 in mirrored image)
2. a wall at F0R1 position. (often it is at L0L1 in mirrored image)
3. walls cover distance=1 (F1L1, F1 and F1R1).
4. walls cover distance=2 (F2L1, F2 and F2R1).
5. walls cover distance=3 (F3L1, F3 and F3R1).
6. walls cover distance=3 (F3L2 and F3R2).

[2] color palette used by wallset

a palette always have 16 colors. (10th and 11th color is variable per dungeon level)

you must consider about color allocation of your image if you design any wallset images. you should not change the original DM palette. 
it is safe to apply DM color palette to your image. if so, you don't have to worry color palette issue about other exist DM gfx. if you change the original DM palette, you should have to tweak other image to keep consistent displaying.

next shows an assignment example of DM palette.

Code: Select all

 1. black  (#000000) gray6               
 2. gray   (#6D6D6D) gray4               
 3. gray   (#919191) gray3               
 4. red    (#6D2400)                     red2
 5. cyan   (#00DADA)               blue2 
 6. red    (#914800)                     red1
 7. green  (#009100)        green2       
 8. green  (#00DA00)        green1       
 9. red    (#FF0000)                     
10. orange (#FFB600)                     
11. orange (#DA916D)                     
12. yellow (#FFFF00)                     
13. gray   (#484848) gray5               red3
14. gray   (#B6B6B6) gray2               
15. blue   (#0000FF)               blue1 
16. white  (#FFFFFF) gray1              

about #RRGGBB, it is called HTML color. each of RR, GG and BB part shows intensity of red, green and blue. each range is from 0 to 255. it is represented in hexadecimal value (from 00 to FF).

X of grayX, greenX, blueX and redX means 'intensity' of each color. (gray color has most intensity variation.)
a intensity set of colors is called as 'chain of colours'.
grayX is a chain of colours.

the intensity affects by following situations:

a) your gfx design
you can use 6 colors to design well shaded wall images.

b) light level
DM/CSB assume you are in dungeon. dungeon has no directional light like sun. so if you lit, then you can see around.

you see around very well if you have bright torch.
you see around almost dark if you have wasted torch.
you see nothing if you have no light.

c) distance
if a wall is near from you, a light lits the wall brightly.
if a wall is far from you, a light lits the wall darkly.

[3] how to apply CSBwin palette to your image

the image forces to DM palette if you import a image with ADGE. then export the image to BMP bitmap file.
the palette always retains if you edit the image with GIMP.

[4] structure of mixed wall images

following each of 3 images has 5 pats in it.

3. "85 [Dungeon Graphics - Wall (Front and Sides 1)] .bmp"
4. "86 [Dungeon Graphics - Wall (Front and Sides 2)] .bmp"
5. "87 [Dungeon Graphics - Wall (Front and Sides 3)] .bmp"

Code: Select all

+-----------------------------+   -+
|    /|     |    |      |\    |    |
|   / |_____|____|______| \   |    |
|  X  |   |    |    |   |  X  |    |
|  |  |___|____|____|___|  |  |    +-- Height(111)
|  |  |     |    |      |  |  |    |
|  X  |_____|____|______|  X  |    |
|   \ |   |    |    |   | /   |    |
|    \|   |    |    |   |/    |    |
+-----------------------------+   -+
A  A  A        A        A  A  A
|  |  |        |        |  |  |
+--+--+--------+--------+  +--+
|  |           |        |     |
|  |           |        |     +-- Blank
|  |           |        |            (4)
|  +-- CornerL |        +-- CornerR
|         (28) |               (28)
+-- Blank      +--- Wall part
       (4)                (192)

numbers near names mean length of each image part.

FYI: middle wall part can be consisted from two 96x111 images.

[5] how to compose a mixed wall image

in this how to, use GIMP for instruction.

[5-1] middle wall part

1. prepare 96x111 image.
if you have larger image, resize it so that it fits to 96x111.

2. paste the image at wall part
you line the 96x111 image twice along wall part. it fills complete wall part area (192x111).

[5-2] make CornerL and CornerR image

you can use transform feature in GIMP. (i tried GIMP 2.2.8)

1. press 'R' key to enter "select rectangular region" mode
2. select rectangle from (32, 0) to (224, 110)
3. enter "Change perspective of the layer or selection" mode.

press [SHIFT]+'P' key
or,
right click the image [Tools]->[Transform Tools]->[Perspective]

4. move 4 corner point.
your rectangle selection is pointed by 4 corner boxes. 4 boxes are at topleft, topright, bottomleft and bottomright.
dragging the corner causes realtime preview (it is slow). you can check easily the result of perspective transformation.

5. press 'Transform' button in 'Perspetive' window.
6. combine to background
you created a independent transformation layer by transform action. you have to merge it to background image.

press [CTRL]+'H' key
or,
window menu [Layer]->[Anchor Layer]

[Gambit37]

Using the transform feature in this way can result in a very obvious effect that can look unprofessional. You would need to still clean it up by hand.

Dont' forget you also need an alternate image for the opposite wall to suggest the illusion of movement.

[Adamo]

Kentaro said:

hi Adamo.
your tutorial is very nice.

Thanx Kentaro! But it is not finished yet! I`ll finish it later, because now I`ve got a lot of other work. Then *I`ll try* to put some screenshot pictures to illustrate the whole process in GIMP.

[Adamo]

How to change colours?
Suppose you have 6 colours used in your "basic" wall file:
1. white (16th colour from original DM palette),
2. pale*/light (14th colour from original DM palette),
3. "light" grey (3rd colour from original DM palette),
4. "normal" grey (2nd colour from original DM palette),
5. "dark" grey (13th colour from original DM palette),
6. black (1st colour from original DM palette).

All that palette of 6 colours have to be used in first graphics file only (distance=1) (83 [Dungeon Graphics - Wall (Right Side 0)] .bmp). In the next graphics file (wchich represents wall seen from distance=2), the colour palette need to be changed. It`s because of the effect of light dispersal, when greater distance makes objects darker.
There should be 4 colour palettes in general:
1. wall seen from distance=0, when colour palette stays on 6 colours. Files: "83 [Dungeon Graphics - Wall (Right Side 0)] .bmp" and "84 [Dungeon Graphics - Wall (Left Side 0)] .bmp"
and:
wall seen from distance=1, when colour palette stays on 6 colours. File: "85 [Dungeon Graphics - Wall (Front and Sides 1)] .bmp"
2. wall seen from distance=2, when colour palette decrease to 5 colours. File: "86 [Dungeon Graphics - Wall (Front and Sides 2)] .bmp"
3. wall seen from distance=3, when colour palette decreases to 4 colours. File: "87 [Dungeon Graphics - Wall (Front and Sides 3)] .bmp
4. wall seen from distance=3, when colour palette decrease to 3 colours (you can even use 2, if you want). File: "88 [Dungeon Graphics - Wall (Far Left Side 3)] .bmp"

Each time, when you want to decrease palette of one colour for the wall seen from distance=1 to the wall=2 distance, you have to change first (lightest) colour on the wall to its darker equivalent. In our case colour changes will be changed in this order:
1. white colour => pale/light colour
2. pale/light colour => "light" grey colour
3. "light" grey colour => "normal" grey colour
4. "normal" grey colour => "dark" grey colour
5. "dark" grey colour => black colour
6. black colour stays as it is.

Each time, when you want to decrease palette of one colour for the wall seen from distance=1 to the wall=3 distance, you have to change first (lightest) colour on the wall to its darker equivalent (but now more darker as before). In our case colour changes will be changed in this order:
1. white colour => "light" grey colour
2. pale/light colour => "normal" grey colour
3. "light" grey colour => "dark" grey colour
4. "normal" grey colour => black colour
5. "dark" grey colour => black colour
6. black colour stays as it is.

In the "88 [Dungeon Graphics - Wall (Far Left Side 3)] .bmp" you can just change all lighter colours (white, pale/light, "light" grey) to "dark" grey colour and all darker colours ("normal" grey colour and "dark" grey colour) to black. Black colour stays as it is.

After making all bitmaps and before adding effect of steady light dispersal, you can use special function, that makes a little "mess" on the screen. I dont know the name of that functionj in english version of GIMP, but it is in "filters" function and is propably calles "ham", "spatter", "commotion" or something like this (it is the next function after "colours"). When you choose it, you see several sub-functions: in case of 16 indexed colours only 3 of 6 are avaliable (at least in my version of GIMP): you choose 6th function, wchich is probably called "mangle", "mutilate" or something like this". This function is usefull for making wallsets, because they are showed in the game on screen in difficult order, that gives you an illusion of movement. When every part of wall in one bitmap is identical or almost the same, you won`t get effect of movement, especially in narrow corridors (because you won`t see any changes). But use that function depends of type of the picture, that is used on the bitmaps. It`s up to you, how much you can mangle your picture, but I advice you not to exaggerate, not to make your picture TOO mangled. Get various matrix, set "chancableness*" to 5-10% with 2 repetitions or 10-15% with one repetition. But I advice you to experiment a bit with that function, because for some bitmaps these values might be too high.

How to make an effect of steady* light dispersal:
as long there are only 5 possible distances in the game [distances: 0, 1, 2, 3, 3far (wchich is actually 4)], bitmaps changes in non-steady way. To avoid that, graphicians in DM made darker pixels in side walls (left and right) in all wall bitmap files, wchich amount increase depending of the distance. That gives you an illusion of steady light dispersal when moving.
You can extract and copy that colour from an original SIDE (not front!) walls of every bitmap and paste (only that one special colour) it into your custom bitmaps (into side parts only, of course).

[Adamo]

how to add an image here, like Paul did 2 times in this thread (5 and 6 posts above)?

[PaulH]

You need to upload to your own space, then link to it.

[Adamo]

ok. I forgot about one thing: describing, how to make

Code: Select all

1. "83 [Dungeon Graphics - Wall (Right Side 0)] .bmp" 
2. "84 [Dungeon Graphics - Wall (Left Side 0)] .bmp" 

from the picture. So the tutorial isn`t finished yet. But you`ll have to deal with that yourself.
=============================================

What i want to suggest is that you can easily (ok: this is not easy, but at least possible) expand your "colour chain" used when painting wallsets. How? Here`s what I propose:
Open your graphics.dat file in ADGE.
Change the palettes of most of the creatures (some creatures uses "special" colours, wchich can disturb the "colours displaying system" on a level). You can change it in "graphic info/monster graphic info" ADGE menu ("custom colour A" and B).

Here`s what Beo wrote about that:

For portraits to be displayed correctly, they need to be on a level that uses the "default" palette. Some creatures affect the palette and change the active colours, making the portraits look wrong.
You need to remove all occurences of 'paletted' creatures and replace them with 'non-paletted' creatures, or better still, start with a fresh level and don't load any creatures at all.

Paletted DM Creatures:
===================
Trolin
Worm
Scorpion
Pain Rait
Ruster
Demon
Dragon
Oitu
Wizard's Eye
Water Elemental
Couatl
Swamp Slime
Materialiser
Lord Grey
Lord Order

Non-paletted:
=================
Screamer
Rock-pile
Mummy
Skeleton
Wasp
Lord Chaos
Animated Armour
Ghost
Giggler
Vexirk

Note that in CSB some of these creatures are mapped to others, but you can normally work out which ones.

Change ALL paletted monsters to non-paletted monsters to make an order in a dungeon. Choose one (or more of them - depends of the number of additional colour chains you want to make) monster to make two default colours fit to the colour chain; you`ve got, for example, "green" and "dark green" colours in indexed colour values. Now you can choose two similar colours in ADGE - say "pale green" and "semi-dark green" colours. You should get four green colours instead of existing two. Make a wallset, that uses two already existing green colours and two additional green ones; while painting, 10th and 11th colours will be shown as "skin" and "orange" in ADGE; they will be changed in a game automaticly, when you set a monster, that uses them as a last monster in a level (CSbuilder). I can guarantee you, that wallset with FOUR green colours will look MUCH better than the similar wallset using TWO greens.
Same with second monster, where you can set two additional blue colours, for example.

So the wallsets with colour chains like:
- black- 1st green (darkest)- 2nd green- 3rd green- 4th green(lightest)- white,
- black- 1st blue (darkest)- 2nd blue- 3rd blue- 4th blue (lightest)- white,
- black (indexed)- brown (indexed)- dark red (indexed)- red (indexed)- 2nd red (additional)- 3rd red (additional)- white (indexed),
should look very well, when these colours were changing smoothly depending of a distance.

For example you draw 3 additional wallsets:
- with a green colour chain
- with blue colour chain
- with red colour chain
You have to choose three levels, wchich would use them; on 1st level give (at last position) monster using additional green colours, on 2nd level give monster using additional blue colours, on 3rd level give a monster using additional red colours etc.
You have to be very carefull, wchich wallset and monster you use on a given level !

Warning:this is not tested yet, so I don`t guarantee that there won`t be any glitches during the play !
But this seems to be a big chance to cheat wallset colour limitation in CSBwin