Graphical ideas for *bands

[Leon Marrick]

  /##*\ /###\ /***\/###\ /***\/###\ /***\/###\ /***\ /###\ 
 |#/`\**\/`\##\/`\*\/`\##\/`\*\/`\##\/`\*\/`\##\/`\**\/`\#|
 |#\./\**\./\##\./\*\./\##\./\*\./\##\./\*\./\##\./\**\./#|
  \/##/ \***/ \###/\***/ \###/\***/ \###/\***/ \###/ \*/#/ 
  /#/\                                                /#/\ 
 |#/\*|        Some ideas for jazzing up the         |#/\*|
 |#\/*|                                              |#\/*|
  \/*/     _____                 _     _              \/*/ 
  /*/\    / ____|               | |   (_)             /*/\ 
 |*/\#|  | |  __ _ __ __ _ _ __ | |__  _  ___ ___    |*/\#|
 |*\/#|  | | |_ | '__/ _` | '_ \| '_ \| |/ __/ __|   |*\/#|
  \/#/   | |__| | | | (_| | |_) | | | | | (__\__ \    \/#/ 
  /#/\    \_____|_|  \__,_| ___/|_| |_|_|\___|___/    /#/\ 
 |#/\*|                   | |                        |#/\*|
 |#\/*|                   |_|                        |#\/*|
  \/*/                                                \/*/ 
  /*/#\ /***\ /###\/***\ /###\/***\ /###\/***\ /###\ /**/\ 
 |*/`\##\/`\**\/`\#\/`\**\/`\#\/`\**\/`\#\/`\**\/`\##\/`\#|
 |*\./\##\./\**\./\#\./\**\./\#\./\**\./\#\./\**\./\##\./#|
  \***/ \###/ \***/\###/ \***/\###/ \***/\###/ \***/ \###/

This post covers only the presentation of graphics - by which term is meant both bitmapped pictures and ASCII artwork - in Angbands as a whole. It does not handle the broader topics of user interface, multimedia, the proper relationship between game and display modules, or what have you. Just pretty pictures.


The problem:

Tim Baker went silent something like five years ago. From that day to this, Angband coders have sporadically tried to jazz up the presentation of graphics in the game he, Adam Bolt, and David Gervais added such sparkle to. Setting aside individual efforts, and looking at the game most players actually see, we've failed more-or-less miserably. For a old-school player like myself, used to terminals and text, this doesn't matter so much. Yet graphics make a vital difference to the ability of our favorite game to win new players - and it is they who count.

Most coders, lacking anything like the skill of a Tim Baker, would prefer to see Somebody Rather Else take charge of getting the game to look better. As there appear to be no obvious saviors, let's see if we can't spend our wait time more productively.


A sampling of possibilities:

There are a variety of practical ways we can make the game look better using tools mostly available right now and with no enormous amount of skill. Three of them are:

1. Colored ASCII artwork using customized extended fonts
2. The existing 2D bitmapped graphics, presented more intelligently
3. Any of several diffent kinds of isometric views


Tempt you with some examples?

Ideas and example pictures may be viewed at:
http://www.runegold.org/angband/graphic_ideas.html


... Or, because this is an honest-to-God graphical forum, you can view them right here!



ASCII artwork

Roguelikes have featured ASCII artwork since they began, but several problems - lack of custom fonts, very restrictive font selection, and inability to flexibly use all the available application space) have stymied progress. These problems are beginning to get sorted out, making it possible for ASCII artists to do things in *bands they never could before. If people decide to push ASCII artwork some more, we could easily start seeing screenshots like this (note that this is an example of the possible, not of something currently available) :

Here we see a simple Celtic knot border, drawn in a 4x6 font. Imagine how cool Saxon-style beast imagery and Scandinavian pattern-work would be!

If that border is a little large for your taste, there is always the option of going 2x3:

This probably doesn't qualify as ASCII art anymore but it would certainly fit in well with such.


Better use of the existing 2D graphics

Adam Bolt's and David Gervais' 2D bitmapped graphics have been presented only crudely thus far. A small but helpful improvement would be to vary terrain graphics depending on what terrain was adjacent. For example, a forest could be thick and bushy in the center, but show individual tress at the edge. Water is an even more obvious candidate:

Here we see what is very nearly the most primitive possible way to make water look a little less like blue paving tiles. Since we were too lazy to check diagonally adjacent terrain, you see some minor visual artifacts (the arrow points to one).

[Leon Marrick]

Isometric views

There have been a awful lot of isometric displays for various variants offered at one point or another. The one I believe to be the most advanced as of this writing is that of UnAngband, coded by Andrew Doull and displaying David Gervais' 54x54 isometric tiles. We will use this project as a frame of reference.

Of all the many ways to go isometric, the most common is what I call the "Civ2" method: Make game tiles horizonal diamonds and allow the graphic(s) in a diamond to protrude into the three diamonds above it. Here are examples from Civ2 and UnAngband 0.6.1:

The second picture shows which direction the character moves in when you press the number key shown. As you can see, the display is rotated by 45 degrees. This solves the vexed problem of displaying walls in a diamond, but may confuse players used to '6' or -> meaning "go right".


And we MUST use our full quota of images!

[Leon Marrick]

Is there a way to both show dungeon walls correctly and keep directions consistant with the keyboard layout? Maybe:

Here we see a series of mockups of an "offset view", using David Gervais 32x32 graphics. The standard offset is 12 vertical, four horizonal; the strong offset is 16 and 8. Tile images may protrude into tiles left and above.

[pav]

Great post, Leon.

I would personally prefer isometric, without 45 degree rotation. Semi-transparent walls. Shadows. No vertical offset of sprite over tile.

For a visually appeasing, open source, isometric, hack and slash game I'd refer to Daimonin, which happens to be MMORPG. Screenie:



The difference is they don't do transparent walls (don't have to, they have a lot of large rooms and only a small number of rather wide corridors between them), and obviously they are 45 degree rotated.

Oh and be sure to add the hitpoint bar above each monster!

[Konstantin]

Originally Posted by pav

Great post, Leon.

I would personally prefer isometric, without 45 degree rotation. Semi-transparent walls. Shadows. No vertical offset of sprite over tile.

For a visually appeasing, open source, isometric, hack and slash game I'd refer to Daimonin, which happens to be MMORPG. Screenie:



The difference is they don't do transparent walls (don't have to, they have a lot of large rooms and only a small number of rather wide corridors between them), and obviously they are 45 degree rotated.

Oh and be sure to add the hitpoint bar above each monster!

This desighn would be really GREAT !!!!!

[Mondkalb]

Looks pretty cool but the drawback is, that you can only see a very tiny part of the dungeon. This needs an additional always visible area map which displays all monsters in adjacent rooms.

[Shockbolt]

Hello,
My name is Raymond and I'm a freelance digital artist.

I've been a fan of these types of games ever since I was a kid back in the 80's,
and I feel now it's time to do some payback for all the hours of fun I've spent inside Angband in all these years, I've decided to paint a new tileset for Angband

I'm aiming for a top-down somewhat tilted look on the tilesets, something similar to the "original" tiny pixelart tilesets before mr Adam Bolt created his tileset, but ofcourse larger and more detailed. There is however one feature I would love to have for the gamescreen though, an ingame realtime zoom in/out option, as I plan to paint the tiles in 32 x 64 pixels or even larger.

But apart from that, how do I use my soon-to-be-painted-tileset with the angband game? I've just recently started learning C++ but my skills at programming are almost invisible at this stage.

So while I wait for a few good replies, I'll start painting the tiles and post some examples on here, prob by the end of today or later this week.

Curious to see what I've painted in the past? Check out one of my online galleries at DeviantArt here: http://shockbolt.deviantart.com/gallery/

[Faust]

I like the isometric view in post #2, kinda reminds me of Heroquest (I wonder if I can find my disks for that, I haven't played it in years).

[Nick]

Originally Posted by Leon Marrick

The second picture shows which direction the character moves in when you press the number key shown. As you can see, the display is rotated by 45 degrees. This solves the vexed problem of displaying walls in a diamond, but may confuse players used to '6' or -> meaning "go right".

If you use mouse control (which seems natural for isometric views - as in the Vulture's <> interfaces to Nethack), this is not a problem.

[andrewdoull]

Originally Posted by Nick

If you use mouse control (which seems natural for isometric views - as in the Vulture's <> interfaces to Nethack), this is not a problem.

Until you figure out that determining which grid is clicked on is in itself a problem.

I've made notes on some isometric resources in the Unangband to do list, which I will advance at some point.

Please note that the Unangband isometric view is really not that smart at all, and refreshes the entire screen for a single update. It should be possible to do a much nicer screen refreshes / scrolling and so on.