Temple of The Roguelike Forums

Development => Programming => Topic started by: stefoid on July 18, 2015, 01:22:59 AM

Title: well well well - three holes in the ground. How to combine tile graphics?
Post by: stefoid on July 18, 2015, 01:22:59 AM
Hey.  In Dungeon Bash, I have various terrain that overlays tiles and his different effects.  One of these is a hole.  i.e.  you can see past the tile, but it only counts as moveable to a flying creature.  To non-flyers it is impassable.

Currently when there are a bunch of tiles next to each other that are holes, the game just shows a single hole for each tile.  What Id like to do is show one big hole in an area where there are multiple tiles next to each other that are of type 'hole'  this would look much more impressive.

(https://dungeonbash.files.wordpress.com/2015/04/s1.png)

In this example, there are two tiles next to each other and I show two holes.  Id rather show one bigger hole across both tiles.  In some areas I have much larger hole areas and some areas have randomly placed holes.

I sat down to draw some pictures of different configurations and realized it was a lot of work - there are a LOT of configurations.

So I was just wondering if anyone had already done this work for me?  IS there some thread or images out there that are related to solving this problem that I can fastrack, or am I on my own?

cheers

Title: Re: well well well - three holes in the ground. How to combine tile graphics?
Post by: Krice on July 18, 2015, 07:09:47 AM
You could follow the style of those walls (in reverse way). One "end piece" for pit in top of the hole and other just darker color to show there is a hole or lower area. It makes holes rectangular, but I guess it's ok for a tile based game anyway. It's possible to make rounded edges, but it requires more tiles and more complex rules to find proper tiles in all situations.
Title: Re: well well well - three holes in the ground. How to combine tile graphics?
Post by: stefoid on July 22, 2015, 11:46:03 AM
Hi Krice.

huh, yeah, I didnt think of that.  Make the hole tiles totally black you mean, and then change the floor tiles around the hole tiles to include edging.

hmmmm.  thanks!  Ill look into that.  It doesnt sound any more complex than the wall code, in theory.

Title: Re: well well well - three holes in the ground. How to combine tile graphics?
Post by: pol on July 23, 2015, 01:36:24 AM
If you draw a connection from each of the cardinal directions and diagonals to each of the others, including their opposites and a tile with no neighbors, it is 49 tiles. Mine are for water, so you would put your hole graphic on the opposite side and have the edge of the hole occupy more of the square. Or leave it that way and use the graphics as walkable lip surrounding the actual pit.

(http://i.imgur.com/1ncc4Zl.png)
Title: Re: well well well - three holes in the ground. How to combine tile graphics?
Post by: stefoid on July 23, 2015, 10:47:19 AM
Hi Pol - so you just went and drew 46 tiles.  impressive.

What is the algorithm for working out what tile to show? 

I thought of assigning a number or 'weight' to each tile surrounding the tile to be identified:

1       3     5
10     -     50
100 300 500

and for each tile that is a hole, add its number to a unique total and have a hashmap of totals to tileIds.

i.e. if   tiles   1, 5, 50, 100 and 300  were holes, the total is 456   which would be one of the keys in map which would return the correct tileId.

Simple to code, the pain is just creting the 46 key/value pairs in the map by hand .  ugh.
Title: Re: well well well - three holes in the ground. How to combine tile graphics?
Post by: devilbuddy on July 26, 2015, 08:09:50 AM
This is a method I have used in the past:

http://www.saltgames.com/2010/a-bitwise-method-for-applying-tilemaps/ (http://www.saltgames.com/2010/a-bitwise-method-for-applying-tilemaps/)

Title: Re: well well well - three holes in the ground. How to combine tile graphics?
Post by: Tzan on July 27, 2015, 05:02:57 PM
Thanks for posting that, you saved me a lot of writing  :)
I used the bitwise tiles method back in the late 80's.
Just 16 tiles each for roads, rivers, forest and mountains.

You just need to make the tile graphic go into the corners.
Not sure if you mentioned that part.

( long time lurker, first time poster )
Title: Re: well well well - three holes in the ground. How to combine tile graphics?
Post by: Skullcoder on August 04, 2015, 09:14:45 AM
I've used Marching Squares (http://blog.project-retrograde.com/2013/05/marching-squares) to solve this issue before.  It can still be done in 16 tiles per transition (can look better with a few more for transition, even support diagonals).

The trick is sampling tiles at the corners, or rather that a # for a wall would be sampled at its centre, and thus it contributes to 4 different corners of tiles (tiles are offset 1/2 a tile diagonally from the "grid").  So, it becomes 4 tiles (all corners).  In the data format the method uses two map values per ID (0,1 = 1; 2,3 = 2; etc. basically shift down by 1 bit to get the tile type).  The article explains the sampling method and has a link to a web demo.

So, when you "lower" the terrain value it could create two different types of holes, like how the demo has either diamonds and squares as the smallest road piece depending on the average height of the tiles.  Holes could be like that, but in reverse.  A tiny hole, then a bigger hole.  Make enough tiles and the above could even give you cracks (long holes).

To make the example code work with 16 tiles per transition (no "saddle point" bits) change the last tile mapping to this:

// Samples without extra "saddle" resolution have shape data encoded in the lowest bit.
shape = (sTL & 1) | (sTR & 1) << 1 | (sBL & 1) << 2 | (sBR & 1) << 3; // 4 samples: T = top, B = bottom, L = left, R = right
ring = ( sTL + sTR + sBL + sBR ) >> 2; // Average of samples w/o remainder.
row = ring; // could just use 'row' up there, but included here for clarity in comparison to example code.
col = shape - (ring & 1); // Same as in example.
Title: Re: well well well - three holes in the ground. How to combine tile graphics?
Post by: stefoid on August 05, 2015, 12:21:12 AM
Good discussion. 

Ill have to think harder about marching squares.  I tried a method of dividing the tile into quadrants and considering each of the neighbours to those quadrants and then programmatically assembling each tile from different quadrants.  But I started to go insane, so I stopped short.  But maybe Marching Squares is what I may have been reaching for?

My artist simply proposed that I make a dozen or so pre-fab areas of various sizes and shapes and he would make beautiful unique images for each one that I could simply slap down in the right random locations.  Along with randomly sprinkled single holes.  This idea also has its appeal.  If I have enough pre-fab shapes, it will be random enough to provide the tactical variety I require, and also some visual variety as each image will be unique.
Title: Re: well well well - three holes in the ground. How to combine tile graphics?
Post by: pol on August 13, 2015, 07:29:09 PM
(http://i.imgur.com/dimnAGL.png)

I'll post the actual algorithm as soon as I have access. But I do not use any marching squares etc.just a recursive post processing that checks/ updates in the four cardinal directions.

In the image above (done in paint, so excuse the lack of completeness etc) there are three "holes"or water tiles that are not directly adjacent (the black squares outlined in red) on a 3x3 grid with most of their corresponding shore tiles. You can see they ignore the diagonals unless there are other hole/water tiles adjacent to that diagonal tile.