Legacy ImageMagick Discussions Archive • Create smooth transition between RPG tiles

Page 1 of 1

Create smooth transition between RPG tiles

Posted: 2009-07-19T16:31:55-07:00

by dsavage

Hi everyone,

I've created an RPG from scratch and recently created a map generator. The generator is working fairly good but the problem now is unless I spend a huge amount of time creating all possible combination the maps look relatively poor because there are tons of previously unused groupings.

What I'd love to do is figure out a way to merge together one tile with up to 4 other different ones along the edge so they don't look like blocks.

The tiles are 25x25 and gif, here are a couple examples of the "starting" tiles I'd like to use

- grass

- sand

- forest

And an example of what I am going for

Thanks!

Re: Create smooth transition between RPG tiles

Posted: 2009-07-19T20:26:18-07:00

by anthony

Nice tiles! Do you have more of them?

Okay. You have a rectangular map, and you currently replace each position in the map with a particular tile, but that produces a like or squared rectangles.

Well the solution is relatively simple. Don't generate a rectangular map, but generate it
on a much larger scale.

For example, have a look at...
Dithering with a symbol pattern.
http://www.imagemagick.org/Usage/quantize/#diy_symbols

However if you are stuck with the map scale you are using. what you want to do is smooth the edges of each area. Say you have a map of 3 numbers 1, 2, and 3....

Code: Select all

1 1 1 1 3
1 2 2 1 3
2 2 3 3 3

Obviously if you replace the above as is you will end up with a perfect 25x25 squares.
Which is not what you are after...

Code: Select all

convert null: sand.gif grass.gif tree.gif \
   \( -clone 1,1,1,1,3 +append \) \
   \( -clone 1,2,2,1,3 +append \) \
   \( -clone 2,2,3,3,3 +append \) \
   -delete 0-3  -append  map_direct.gif

Instead of replacing each number directly with a particualr tile, create 3 'region' masks of
ANY COLOR, and transparency each 25x25, (0 = transparency)

For example lets do number 1 as sand (of course your program would generate this...

Code: Select all

convert -size 25x25 xc:none sand.gif \
   \( -clone 1,1,1,1,0 +append \) \
   \( -clone 1,0,0,1,0 +append \) \
   \( -clone 0,0,0,0,0 +append \) \
  -delete 0,1  -append  sand_mask.gif

Repeat for the other two tail patterns 2= grass 3 = forest

Now blur that mask using -channel A -blur 0x12
and threshold it at 50% -threshold 50%
Do not worry about the color of the mask is -- it is not important, the shape is...

Code: Select all

convert sand_mask.gif  -channel A -blur 0x12  \
          -threshold 50% sand_mask_blured.gif

now re-tile the shape masks to correct the colors.
convert sand_mask_blured.gif -size 200x200 tile:sand.gif \
-alpha on -compose Atop -composite sand_mask_tiled.gif

repeat the above for the other parts, and merge them together.
convert {sand,grass,tree}_mask_smooth.gif \
-background red -flatten map_merged.gif

Okay the red area shows that it does not work very well... But it is a start.

A better way may be to blur all the colors as a single color map...

Code: Select all

convert null: -size 25x25 xc:red  xc:lime xc:blue \
   \( -clone 1,1,1,1,3 +append \) \
   \( -clone 1,2,2,1,3 +append \) \
   \( -clone 2,2,3,3,3 +append \) \
   -delete 0-3  -append  map_colormask.gif

then re-map the colors.

Code: Select all

convert map_colormask.gif -blur 0x12 \
        +dither  -map map_colormask.gif \
        map_colormask_smooth.gif

Now you can extract (segment) each colored region, For that you can use my script
http://www.imagemagick.org/Usage/scripts/segment_image
You can then tile (or color replace) them and merge together to form the map.
This command is a little more complex

Code: Select all

   segment_image map_colormask_smooth.gif - |\
     convert - +swap   null: -size 200x200 \
          tile:sand.gif tile:grass.gif tile:tree.gif \
          -compose ATOP -layers composite \
          -background red -flatten map_merge_2.gif

HOWEVER this will likely fail for more than three colors, as you start using non-primary colors!

Does anyone have suggestions for more than three regions?

Another alternative is to generate a VERY small color map (one pixel be region), then use Scale_X2 and similar like to enlarge.
http://scale2x.sourceforge.net/
http://www.hiend3d.com/hq3x.html
This is a special resize method that is designed to preserve colors, but has NOT been incorporated into ImageMagick as yet. It is on a To-Do list though.

However I think it would generate very angled borders, whcih is probably NOT what you want.

Anyone else have ideas on smoothing a colored region map? - it is a great problem!

Fred would you like to try your Morphology Script?

Re: Create smooth transition between RPG tiles

Posted: 2009-07-19T20:55:23-07:00

by anthony

Addundum...

As you are dealing with a square array, you will have at most 4 colors at any one corner. That means that each corner will have a mapping of a limited number of colors in a limmited number of ways.

What you can then then is that you create your map, NOT in squares, but tiled corner images.
(ignoring edges which is a special case)

For example, these are all the corner combinations you can get!

Code: Select all

  1,1       1,1     1,1     1,1     1,2
  1,1       1,2     2,2     2,3     3,4

And variations (rotations, flips) of these 5 tiles.

However if you look at the posibilities, only the second case needs smoothing!!!! All the other cases results in the normal result of a 'square map' join of the regions!

That means, just generate you 'colored regions' map, then go through the original map matrix
looking for a 3:1 corner. You can then overlay a rounded off version of the two colors in that corner, and continue looking.

This by the way is the same technique as used by 'Scale_2X' mentioned above, BUT modified so that it actually works at larger scalings (in this case Scale 25X!!!!) This may be a better way to implement these 'scaling' techniques.

Re: Create smooth transition between RPG tiles

Posted: 2009-07-19T21:09:55-07:00

by anthony

your other problem is to make the edges not so smooth.

All I can say is, create your color map region amd the use Fred Wienhaus's "Dispersion"
script on it. (use interpolate nearest-neightbour setting) that will make it irregular.
http://www.fmwconcepts.com/imagemagick/ ... /index.php

Just don't go overboard on some of the settings.

When the colored regions have been 'dispersed' then tile each region as appropriate.

So the final solution would be..

Map the matrix into a colors regions map.
Go though and round off the special case corners
Run the colored region map though "dispersion"
tile each colored region appropriately.

NOTE: The tiles do NOT need to actually match the grid size of the final map!!!! That is your map may be gridded to 40x40 squares but tiled with 25x25 pixel tiles! Each texture could even be a different tile size!

NOTE: This does not solve the smoothing of a region map for the general case, only the specific case of a rectangular tiled grid.

Re: Create smooth transition between RPG tiles

Posted: 2009-07-19T22:09:14-07:00

by fmw42

I am still trying to figure out what the goal and process is here!!!

RPG - rocket propelled grenade

OH! role playing game

The only thing that I can think of off the top might be to do each tile to create one image surrounded by transparency. Then use Anthony's spread option to morphology to spread the tile into the transparent areas, then composite the different images together.

Or do it on the map where you make one map for each index surrounded by transparency. Then spread the indices. Then blend the index images. Then round to the nearest integer, then fill in the tiles according to the new index map.

None of this is tested - just some possibilities to consider.

Re: Create smooth transition between RPG tiles

Posted: 2009-07-20T09:18:48-07:00

by dsavage

Thanks for all the help!

I've been playing around with the suggestions and I think the disperse is the way to go.

I use the method in the first reply to lay out various combination's then disperse but the problem is tiles like the tree lose their texture. I've been trying to use the color replace script to keep the textures but it doesn't seem to want to work for me so I'm not sure how to get the colors replaced. Is there something else I can try out?

This is the error I'm getting. I'm using cygwin on a windows system.

Code: Select all

$    segment_image map_colormask_smooth.gif - |     convert - +swap   null: -si
ze 200x200           tile:sand.gif tile:grass.gif tile:tree.gif           -comp
ose ATOP -layers composite           -background red -flatten map_merge_2.gif
convert.exe: unable to open image `/tmp/segment_image.7004/working.mpc': No such
 file or directory @ blob.c/OpenBlob/2480.
convert.exe: unable to open image `/tmp/segment_image.7004/working.mpc': No such
 file or directory @ blob.c/OpenBlob/2480.
convert.exe: missing an image filename `txt:-' @ convert.c/ConvertImageCommand/2
800.
convert.exe: Improper image header `-' @ miff.c/ReadMIFFImage/466.
convert.exe: missing an image filename `-' @ convert.c/ConvertImageCommand/2800.

convert.exe: no decode delegate for this image format `C:/Users/D/AppData/Lo
cal/Temp/magick-HhdFJota' @ constitute.c/ReadImage/503.
convert.exe: Missing Null Image List Separator layers Composite @ mogrify.c/Mogr
ifyImageList/7639.

Edit: Just want to say I did really like the curved idea and that plus some disperse would have looked great but my only issue there is there would be a huge number of possible tiles as the "lines" I don't think would easily line up with random patterns. I'll be generating maps often and dealing with creating new tiles every time will cost too much in resources.

I also tried cropping a chunk off the side of a tile then blending that over top another tile, which looked not to bad. To get that to look good I think I could have cropped a couple different spots and blended them each differently and somehow worked in disperse but this might be a bit too advanced for me right now. The water to shore would be ideal for this imo.

Re: Create smooth transition between RPG tiles

Posted: 2009-07-20T10:32:32-07:00

by dsavage

Here are a number of other tiles I did manually. I used some free resources here and there but nothing with any requirements so feel free to use anything you want.

http://www.thefreeroller.com/exampletiles/tiles.rar

Re: Create smooth transition between RPG tiles

Posted: 2009-07-20T20:21:07-07:00

by anthony

They are an interesting set of tiles. Sounds like a great game. What game is it??
I have always liked these thype of plan view role playing games.

Okay first the key to generating maps is -- ignore the tiles!

Generate the map using specific colors for each area. they don't even have to be real colors, just say rgb(1,1,1) for area 1 and rgb(2,2,2) for area 2. These can then be replaced using the dither method mentioned before...
http://www.imagemagick.org/Usage/quantize/#diy_symbols

For testing purposes primary colors works better, but then you can use the color index directly as
a tile reference number to a tile sequence as I do in those examples.

Okay -- forget the tiles, use areas. Map the whole area as we did above..

Now you can round off the corners, as described above by looking though your original map matrix for that special case (and a little more on that below).

ASIDE; can you provide an example of the map matrix and the number to tile correspondance?
The roads and ships don't need to be separate number, but can just be the same number (see next post)

At this point grab Freds disperse script
http://www.fmwconcepts.com/imagemagick/ ... e=disperse
and open it in a text editor. On the last three 'convert' commands add the option -interpolate NearestNeighbor
For example...

Code: Select all

convert $tmp -interpolate NearestNeighbor \

This is important to prevent color mixing from the interpolation. Fred can modify the script to make this option to the script!

Now disperse the colored regions (keep density at 1)

Code: Select all

disperse -s 4 -d 1 -c 10 map_colormask_smooth.gif map_colormask_disperse.gif

Now you can tile the reagions. for example replace red with a tile, using draw.

Code: Select all

   convert xc:red xc:green xc:blue map_colormask_disperse.gif +append \
               -tile ~/tiles/sand.gif -draw 'color 0,0 replace' \
               -tile ~/tiles/grass.gif -draw 'color 1,0 replace \
               -tile ~/tiles/tree.gif -draw 'color 2,0 replace \
               -chop 3,0  map_tiled.gif

For this to work I needed to add some specific colored pixels to one side for draw to use.
The 'dither tiling' method above would work better but only with 'indexed colors'.

For some reason I have not looked at interpolation is still happening along the edges of the tiled areas, thus the slight color distortion from the tiling operations. But it is close, Just a matter of getting "disperse" script fixed to preserve colors.

Re: Create smooth transition between RPG tiles

Posted: 2009-07-20T20:34:31-07:00

by anthony

Going back to rounding of corners.

I forgot one imporant case of corner joins....

Code: Select all

1,2
2,1

The problem here is you either leave it very squareish, OR make a path from 1 to 1 or 2 to 2
Which you should do probably depends on the tiles invoved, or if they can exist in your map.

Can I get an example of your map matrix and the translation table to the tiles? That is the numbers that generate the map, not the map itself

Roads for example should probably be joined, mountains and swamps probably shouldn't as it probably represents a mountain pass. Basicially I think the more commonly traveled surface should join up, and separate the other terrain.

Rivers can be tricky, could it be a ford for land based movement to cross but not river boats?
or only river boats and not land movement, or prehaps it is a bridge to allow for BOTh river and land movement. The same goes if the two tiles are land and sea, though that is not likely to happen.

For the 'corner' tile situation

Code: Select all

1,1
1,2

where you want to round off '2' instead of rounding you could on seeing this arrangenet in the map matrix, just draw a dimonds shaped figure for region one, on the corner. That is when ever a corner has 3 of the same region, draw a diamond of that region on the corner, to smooth it.

The Disperse step should then make the result look quite smooth.

Re: Create smooth transition between RPG tiles

Posted: 2009-07-21T11:56:02-07:00

by dsavage

Here is a sample map, only using 4 tiles in the generator right now to get started:

100=tree
101=sand
102=water
103=grass

it's a bit rough and a little to random but I can easily tweak the settings later on

the rpg is actually a Facebook app so you'll need an account to try it out, http://apps.facebook.com/madventure - it's still in beta

I'll be out of town most of the week so I might be delayed in my replies

Code: Select all

100,100,100,100,100,100,100,103,102,102,102,101,101,100,100,100,100,100,102,100,100,103,100,100,100,100,100,100,100,100,100,100,100,102,102,102,103,103,102,100,100,100,101,100,103,103,102,101,101,100,
100,100,100,100,100,100,100,102,102,102,102,102,101,103,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,103,102,102,100,100,100,100,100,100,103,102,100,100,100,102,103,100,
100,100,100,100,100,100,100,103,102,102,102,103,103,103,103,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,101,101,100,100,
100,100,100,100,100,100,103,102,103,103,103,103,102,102,101,102,103,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,101,100,100,100,100,100,100,100,100,100,100,103,103,103,103,
100,100,100,100,100,103,102,103,102,101,102,101,101,102,100,101,103,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,102,102,100,100,100,100,100,100,100,100,100,100,100,100,100,
100,102,100,100,100,101,103,103,103,103,102,102,102,101,103,103,103,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,103,101,102,103,102,100,100,100,100,100,100,100,102,100,100,100,
103,103,100,103,101,102,102,102,102,101,102,102,102,102,102,102,103,100,100,100,100,100,100,100,100,100,100,100,103,100,102,102,103,103,100,101,102,102,102,102,100,100,100,100,100,100,100,101,100,103,
102,100,100,103,102,102,101,102,102,102,102,102,101,101,102,102,100,103,102,100,100,100,100,100,100,100,100,100,101,102,101,102,101,102,102,102,102,102,102,103,100,100,102,100,100,100,100,101,101,103,
100,100,101,103,102,102,102,102,102,102,102,102,102,102,101,100,100,103,102,102,101,100,103,100,100,100,100,103,102,102,102,102,102,102,102,102,102,101,100,100,100,100,103,100,100,100,100,100,101,102,
100,100,101,102,101,102,102,102,102,102,102,102,101,102,102,103,102,102,102,101,101,102,100,100,100,100,100,101,102,102,102,102,102,102,102,102,102,101,103,100,100,100,100,100,100,100,103,103,103,102,
100,100,101,102,102,102,102,102,102,102,102,102,102,101,101,103,102,101,102,102,103,103,100,100,100,100,100,102,102,102,103,101,102,102,102,102,102,102,100,100,103,100,100,100,100,102,102,103,100,100,
100,100,102,102,102,102,102,102,102,102,102,102,101,103,103,101,102,102,102,102,101,102,102,103,100,100,100,100,100,103,103,100,100,102,102,102,102,102,102,102,103,100,100,101,102,103,102,102,102,101,
100,103,102,102,102,102,102,102,102,101,102,102,102,102,103,102,102,102,102,102,102,102,102,101,103,100,103,100,100,102,101,101,103,102,102,102,102,102,102,101,100,102,102,102,102,102,102,102,102,102,
102,103,102,102,102,102,102,102,102,101,102,102,101,100,101,102,102,102,102,102,102,102,102,101,101,100,103,100,103,103,102,102,102,102,102,102,102,102,102,102,100,100,100,102,102,102,102,102,102,102,
100,103,102,102,102,102,102,102,102,102,102,102,101,100,102,102,102,102,101,102,102,103,102,100,101,103,100,103,100,103,100,101,102,101,102,101,102,102,101,102,102,103,100,103,102,102,102,102,102,102,
100,102,102,102,102,102,102,102,102,102,102,102,102,102,103,102,102,102,102,102,102,103,100,100,103,101,100,100,100,100,100,102,100,100,100,103,103,102,102,103,102,103,100,101,102,102,102,102,102,102,
102,102,102,102,102,102,102,102,102,102,102,100,101,101,102,102,102,102,102,102,103,101,100,100,100,102,102,100,100,100,100,101,103,100,100,100,100,103,102,102,103,100,100,100,103,102,102,102,102,102,
101,102,102,102,102,102,102,102,102,102,101,103,103,102,102,102,102,103,100,103,101,102,103,103,100,100,100,100,100,100,100,100,103,100,100,100,100,103,102,103,101,103,100,100,102,102,102,102,102,102,
102,102,102,102,102,102,102,102,102,103,100,100,102,102,102,102,103,100,100,100,101,102,102,100,100,100,100,100,100,100,100,100,100,100,100,100,100,103,102,103,103,103,103,102,102,102,102,102,102,102,
102,102,102,102,102,102,102,102,102,102,100,100,103,103,103,100,100,102,103,103,100,103,101,100,103,100,100,100,100,100,100,100,100,100,100,100,100,103,101,101,102,102,102,102,102,102,102,102,102,102,
102,103,102,102,102,102,102,102,102,102,101,103,103,103,100,100,100,100,103,103,100,103,102,102,100,100,100,100,102,103,100,100,100,100,100,103,102,103,103,102,102,102,102,102,102,102,102,102,102,103,
102,103,103,102,102,103,102,102,101,103,100,100,102,102,100,100,100,100,100,103,100,103,103,101,102,100,100,103,102,100,100,100,100,100,102,103,101,103,102,102,102,102,102,102,102,102,102,102,102,101,
102,102,102,102,102,102,102,102,102,103,103,100,103,100,100,100,100,100,102,102,103,100,101,101,100,100,103,102,100,100,100,100,100,103,100,100,103,100,103,102,102,102,102,102,102,102,102,102,102,101,
102,102,102,103,102,102,101,102,102,101,100,100,100,100,100,100,100,100,103,102,100,103,102,102,100,100,100,100,100,100,100,100,100,100,100,100,103,100,100,102,102,102,102,102,102,101,102,102,102,102,
102,102,103,103,102,102,102,103,103,102,100,100,100,100,100,100,100,100,100,103,100,102,102,102,103,100,100,100,100,100,100,100,100,100,100,100,100,100,103,102,102,103,102,102,102,102,101,102,102,100,
102,102,100,103,103,102,102,101,100,100,100,100,100,100,103,102,103,100,100,100,103,102,102,102,103,100,100,100,100,100,100,100,100,100,100,100,100,100,100,102,102,102,102,102,102,102,103,100,103,100,
102,103,100,100,100,102,101,101,100,102,103,100,100,102,101,102,101,103,100,101,102,102,102,103,103,100,100,100,100,100,100,100,100,100,100,100,100,100,100,102,102,102,102,102,102,102,102,101,100,100,
102,100,100,100,102,103,103,102,100,103,103,102,100,100,100,100,100,102,100,103,103,102,102,103,103,100,100,100,103,100,100,100,100,100,100,100,100,100,100,100,101,103,102,102,102,102,102,102,100,100,
103,100,103,103,100,100,100,102,100,103,100,100,100,100,100,100,100,100,100,100,100,100,101,101,101,100,100,100,102,102,100,100,100,100,100,100,100,100,100,102,100,101,101,102,102,103,103,100,100,100,
103,102,100,100,100,100,100,100,100,100,103,100,100,100,100,100,100,100,100,100,100,102,102,102,102,100,100,103,101,103,100,100,100,100,100,100,100,100,100,100,100,102,100,101,102,101,102,101,100,100,
100,100,100,100,100,100,100,100,100,100,103,103,102,100,101,101,103,101,101,103,103,102,102,102,101,102,102,101,102,101,100,100,100,100,100,100,100,100,100,100,100,100,100,100,102,100,102,100,102,100,
100,100,100,100,100,100,100,100,100,100,100,100,100,100,103,101,103,101,103,102,102,101,102,102,103,102,102,101,102,103,103,101,100,100,101,100,100,100,100,100,100,100,100,100,103,103,100,100,100,100,
100,100,100,100,100,100,100,100,100,100,100,100,100,100,103,103,102,102,102,102,102,102,102,102,102,102,102,102,102,101,103,102,100,103,101,103,100,100,100,100,100,100,100,100,100,100,100,100,100,100,
100,100,100,100,100,100,100,100,100,100,100,100,103,103,101,100,102,102,102,102,102,102,102,102,102,102,102,102,102,102,101,103,100,101,102,101,102,100,100,100,100,100,100,100,100,100,100,100,100,100,
100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,102,102,102,102,102,102,102,102,102,101,100,101,102,102,102,102,103,102,102,101,100,100,100,100,100,102,100,100,100,100,100,100,100,100,
100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,101,102,103,103,100,100,100,100,100,100,100,100,100,100,100,100,
100,100,103,100,100,100,100,100,100,100,100,100,100,100,100,100,103,102,101,103,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,100,100,100,103,100,100,100,100,100,100,100,100,
100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,103,101,103,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,103,102,101,103,103,101,100,100,100,100,100,100,
100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,103,100,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,101,102,102,103,103,101,103,100,103,101,101,100,100,100,100,
100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,103,103,101,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,103,102,102,102,102,102,103,102,102,100,100,100,100,100,
100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,101,101,101,101,102,102,102,102,102,102,102,102,102,101,102,102,102,102,102,102,102,103,101,102,102,102,102,103,101,103,100,100,100,100,100,
100,100,100,100,100,100,100,103,103,102,100,100,100,100,100,100,103,103,100,101,102,102,102,102,102,102,102,102,100,103,102,102,102,102,102,101,101,102,102,102,102,102,102,102,103,100,100,100,100,100,
100,100,100,100,100,100,100,101,102,102,100,100,100,100,100,100,100,102,103,102,102,102,102,102,102,102,101,103,103,103,102,102,102,102,102,102,102,102,102,102,102,102,103,101,101,102,100,100,100,100,
100,100,100,100,100,100,103,102,102,101,102,100,100,100,100,100,103,102,102,102,102,102,102,102,102,102,102,102,103,102,102,102,102,102,102,102,102,102,102,102,102,102,103,102,102,103,100,100,100,100,
102,103,100,100,100,102,102,102,102,102,102,103,102,100,100,103,102,102,102,102,101,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,100,100,100,100,
100,100,100,100,100,102,102,102,102,102,102,102,102,100,101,103,102,101,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,101,100,100,100,
100,100,100,100,100,102,102,102,102,101,102,103,103,102,102,102,103,101,102,102,102,102,102,102,102,102,102,102,102,103,102,102,102,102,102,102,102,102,102,102,102,102,103,102,102,102,102,100,100,100,
100,100,100,100,103,102,102,102,102,102,102,102,103,103,102,102,102,102,102,102,102,101,101,102,101,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,102,101,102,102,102,102,102,100,100,100,
100,100,100,100,101,102,102,102,102,102,102,102,102,101,101,101,103,101,102,102,102,101,100,103,102,102,102,101,101,102,102,102,102,102,102,102,102,102,101,102,101,101,102,102,102,102,102,101,103,100,
100,100,101,100,100,103,102,102,102,102,102,101,102,102,103,102,103,101,102,102,102,101,100,101,102,101,101,102,103,101,102,102,102,102,102,102,102,102,103,101,103,102,102,102,102,102,102,101,103,100,

Re: Create smooth transition between RPG tiles

Posted: 2009-07-21T18:21:08-07:00

by anthony

Very good, I can work with that...

Just a quick check, the map is one line => one row
making it... 50 by 50 tiles. right!

Okay. Now for some fanciness.

Convert map to a color image (grayscale) one pixel per square...
I am assuming a Q16 version of IM for this.

Code: Select all

( echo "P2 50 50 65535"
  tr ',' ' ' < map_data.txt
) | convert - -level 100,103  -scale 2000% map_data.png

The above adds a NetPBM PGM header, removes the commas, and adds it the end of the PGM image format. IM reads the image, levels it so color values 100=black and 103 = white, then scales it into 20x20 pixel squares (modify to suit).

Now we can smooth any 'corners' and 'crossing points' in the image, by drawing diamonds of the appropriate color at those intersections. Something I will get back to later as it is more program control. For now I will just use the blur method...

Code: Select all

convert map_data.png -blur 0x3 +dither -map map_data.png map_blur.png

It may have been better is water was at one end of the numbers.

If you look at this you can see how 'bluring' fails for grayscale or more than three RGB colors.
The corner rounding method will be best here!

You can do the disperse operation, and as even the odified "disperse" script is currently NOT preserving colors, I remap the colors again. Remember disperse should be able to be fixed in this regard so check with Fred Weinhaus, "fwm42"

Code: Select all

disperse -s 4 -d 1 -c 10 map_blur.png miff:- |\
    convert - +dither -map map_data.png map_disperse.png

Now lets overlay the tiles using the 'tile dither' technique (only works for grayscale images)
Note that FX is slow for this. In large image with few tiles it may be better to do the 'draw' color tile replacement shown earlier.

Code: Select all

convert map_disperse.png     {tree,sand,water,grass}.gif \
  -virtual-pixel tile  -fx 'u[floor(3.9999*u)+1]' \
  map.png

Now we just need to get the corner rounding problem fixed!