Making a Textured Stone/Brick Wall — by doomjedi
Step 1 — Choose your base color
Pick the "average" or main color of your planned wall. This will be the foundation everything else is built on.
Step 2 — Create a random pixel pattern
Create a small area of randomly placed pixels in close shades of the same base color — some slightly darker than average, some slightly lighter. The pattern can be more or less grainy depending on the type of brick or stone look you're going for.
These pixels can be copied directly from a real brick or wall photo to add extra realism. In the example they are placed manually, without much order.
Step 3 — Tile the pattern across the full wall
Duplicate this area across the entire 64×64 wall using vertical and horizontal flips. Then manually edit any pixels that stand out to make the pattern less obviously repeatable. Intersect patterns and use flips to create a more unique look.
Step 4 — Create the brick line pattern
Draw a brick line pattern using colors slightly lighter or darker than the average wall color. This can cover the full 64×64 image divided into bricks, or just part of it. Brick lines can be 2 pixels wide or just 1 pixel thin.
Step 5 — Paste the brick pattern over the base texture
Paste the brick pattern over the base texture, using the average color as the transparent color.
Step 6 — Add brick edge shading
Add shading along the brick edges to simulate depth. Depending on the type of wall, this step may not always be necessary.
Step 7 — Final touch-ups
Make any final adjustments needed.
Notes and further possibilities
- The same basic stone pattern with a different brick outline will produce a completely different result — and vice versa. Once you've created a good stone pattern, it can be reused as the base for many different walls.
- All brick shade outlines can be horizontally resized by moving the left part to the left and stretching the middle to fill the gap — a fast way to create width variations from a single duplicated brick.
- For thick, double-line brick outlines the method is exactly the same.
- If the basic texturing pattern is more diagonal and has longer, irregular lines, you can easily achieve a marble look using the same wall as a base.
Making a Wolf3D Wall Texture from a Real Photo — by doomjedi
Step 1 — Find the right image
Look for a relatively sharp image with a large color range, shot from a front-facing angle — not a blurry or angled one. Avoid images that are excessively large; a maximum of 4× downsize is about the most you can do while keeping the result readable.
- You can pre-sharpen images or increase contrast beforehand using XNView.
- Try to choose a photo that is evenly lit — uneven lighting makes horizontal seamless tiling much harder later.
Step 2 — Crop before you downsize
To avoid proportional distortion when downsizing, crop the image to a size of 64×64×2ⁿ (e.g. 512×512, 1024×1024) — or at minimum to a square with equal width and height.
It is always better to crop a smaller section from a large image and downsize it by 50% than to downsize a much larger image by 25%. Crop as much as you can.
Keep in mind that a typical Wolf3D wall only shows 4–8 layers of bricks — there is no need to downsize a photo that contains 20 brick layers. The smallest brick size that can still look acceptable in Wolf3D (and even then, only at SDL screen resolutions) is 16 bricks at 4 pixels per brick. More bricks than that will not read well.
You can also crop only the best-looking bricks from the original and duplicate them to fill the wall after downsizing — another reason to crop more and downsize less. A single well-chosen brick or wooden plank can be the basis of an entire wall through duplication and minor pixel work. Crop more, downsize less — this is the rule that keeps images sharp and undistorted.
Step 3 — Convert to Wolf3D palette (optional)
To help preserve or increase sharpness, you can convert the image to the Wolf3D palette using SpriteMaker at this stage. This is not required, but it can help.
Step 4 — Downsize in round steps only
To prevent distortion, always downsize in clean steps — 50% or 25% at a time. Never use irregular values like 63% or 24%.
Step 5 — Always use Nearest Neighbour resampling
To keep images sharp, resize using only the Nearest Neighbour resize/resample filter. Use XNView or IrfanView for this — not MS-Paint.
- XNView is slightly better and offers more resizing filters: Image → Resize → Resample: Nearest Neighbour
- http://www.xnview.com/en/index.html
To return to the GFX tutorials, click here.