Algorithm for generating a game card from individual images

Question

I am creating a game for the browser.

The game is a space theme and I need to generate a galaxy map.

The main idea of ​​the map is here:

game map http://www.oglehq.com/map.png

A map is a grid, and each sector of the grid can contain a planet / system, and each of them has links to several neighboring grids.

To create the maps, I decided that I would have a collection of images representing the elements of the grid. Thus, in the example above, each square is a separate graphic.

To create a new map, I would "weave" the images together. Images of map elements will have planets and their links already to them, and therefore I need to stitch the map so that each image is located with the corresponding analogues =>, so the image in the lower corner should have images on the left and diagonally on the left that are associated with it correctly.

How would you go about creating code to know where to place the images? Is there a better way than using images?

At the moment, performance and / or load should not be considered (if I need to generate cards for preliminary configuration, and not in real time, I do not mind).

If something changes, I will use HTML, CSS and JavaScript and will be supported by the Ruby on Rails application.

Answer 1

/javascript- , : SVG VML. .

SVG firefox, opera, safari chrome - , , . w3schools / svg.

VML - Microsoft SVG, () IE, SVG - . Msdn vml.

, / . , -, - , 99,9% .

, , , ( SVG/VML). / , , (, ), , , .

canvas , IE. html.

: Opera | Mozilla | canvas-in-IE

Answer 2

. 8 , 2 ^ 8 = 256 . , .

, 8 char filename:

11000010.jpeg

196.jpg

. , . - . . , .

2D-. , , 8 . , , . , .

Answer 3

.

- , / . , (NW, N, NE, W, E, SW, S, SE), . , , / , , , , .

, , , . , , , , , .

, 3x3 :

 Tile   Connections
        nw  n ne  w  e sw  s se
 nw      0  0  0  0  0  0  0  0 
 n       0  0  0  0  1  0  1  0
 ne      0  0  0  1  0  0  0  0
 w       0  0  0  0  0  0  0  0
 center  0  1  0  0  0  0  1  1
 e       0  0  0  0  0  0  0  0
 se      0  0  0  0  0  0  0  0
 s       0  1  0  0  1  0  0  0
 sw      1  0  0  1  0  0  0  0

.

( ), . , , , "Bitmap01000011.png" ( ) , , "Bitmap43.png" ( , ).

256 , 256 .

/ , , , "" , "" , , , .

() ( + ) . .png, . , ( ). .

.

:

draw_map(connection_map):
    For each grid_square in connection_map
        connection_data = connection_map[grid_square]
        filenames = bitmap_filenames_from(connection_data)
        insert_image_references_into_table(grid_square,filenames)

# For each square having one of 256 bitmaps:
bitmap_filenames_from(connection_data):
    filename="Bitmap"
    for each bit in connection_data:
      filename += bit ? "1" : 0
    return [filename,]

# For each square having zero through nine bitmaps:
bitmap_filename_from(connection_data):
    # Special case - square is empty
    if 1 not in connection_data:
        return []
    filenames=[]
    for i in 0..7:
        if connection_data[i]:
            filenames.append("Bitmap"+i)
    filenames.append("BitmapSystem");
    return filenames

Answer 4

. , , / . : SVG, Canvas flash/flex.

Answer 5

, . , , , , , .

, , .

Answer 6

, png piling css- div, , , .

, , IE . - , ?

Answer 7

, , . . , , .

Bit 0 : Has planet
Bit 1 : Has line from planet going north
Bit 2 : Has line from planet going northwest
...
Bit 8 : Has line from planet going northeast

, 512 . , . Ruby, : http://raa.ruby-lang.org/project/ruby-gd

, , . , . html ( 2x2):

<table border="0" cellspace="0" cellpadding="0">
<tr>
<td><img src="cell_X.gif"></td>
<td><img src="cell_X.gif"></td>
</tr>
<tr>
<td><img src="cell_X.gif"></td>
<td><img src="cell_X.gif"></td>
</tr>
</table>

Of course, replace each X with the corresponding number corresponding to the combination of bits that describe the appearance of the cell. If you use an adjacency matrix, combining bits together is pretty simple - just look at the cells around the “current” cell.