Hot answers tagged

63

I'd disagree with the accepted answer here. I'd call this an autotile, and not a 9-slice "9-Slice" (or 9-patch) is usually used to refer to a system where the content creator slices the image along 4 lines (not necessarily equally-spaced tiles). When rendering a rectangle, the corner slices are displayed at their native size, and the edges/center are ...


56

"Staggered" refers to the jagged edges of isometric maps that have an overall rectangular shape. These maps emphasize the north/south and west/east axes, and often have North up (example: Civilization 2). Diamond maps on the other hand emphasize the diagonal orientation and movement. North is often at the top right (example: Simcity 2000). Also ...


43

This guide didn't exist when the question was asked, but here's my guide to hex grid math: Hexagonal Grids


40

The most elegant way I can think of, given that you have the row and column indices, is the following: bool isLight = (row % 2) == (column % 2); or, conversely: bool isDark = (row % 2) != (column % 2); Basically, a tile on a chessboard is light wherever both the column and row are mutually odd or even, and is dark otherwise.


40

A name that will give you actual results in Google is 9-slice. Another way to call it and ask Google about it is 9-patch. As per this chat discussion, 9-pane seems to also be used, but the almighty Google will not show you what you need, unless you're into windows or something. Thanks to Kevin and Josh in chat for that.


34

bool isLight = ((row ^ column) & 1) == 0; XOR together the row and column indices and look at the least-significant bit. Changing the row or column index by one will invert the result, hence it generates a checker pattern.


32

There's a solid overview of different popular tile combination patterns put together by Boris the Brave, building on some earlier work by Sean Howard. I'll briefly summarize the main categories these authors identify in case the links break in future, along with a few additions of my own. I recommend you read the original articles for the full details. Rug ...


31

Yes, the Manhattan distance between two points is always the same, just like the regular distance between them. You can think of the Manhattan distance being the X and Y components of a line running between the two points. This image (from Wikipedia) illustrates this well: The green line is the actual distance. The blue, red and yellow lines all represent ...


24

You could use perlin noise, which is normaly used for heightmap generation. Perlin noise in games Then you could use the heights as an adviser, how high the chance of grass/dirt occuring in one region of the map is. Example (Perlin noise values from 0-256): If the value is over 200 the chance that grass is placed is 80% (dirt 20%). If the value is between ...


22

Another suggestion, very straightforward: isLight = (row + column) % 2 == 0; Adding the row and column gives the number of horizontal and vertical steps away from the top-left tile. Even number of steps gives light colour. Odd numbers of steps gives dark colour.


22

What you could do is randomly generate a Voronoi map like this: Picking random center points (see the black dots) and randomly decide if they are grass or dirt. Then for over all tiles, check if it's closest to a center point of dirt or a grass. Done! If what you did previously is "flip a coin" for each tile (noise), generating a Voronoi diagram will ...


16

Layers are needed not only the most basic use of a tile map, but also allow more artistic expression and play features. Layers define the draw order of the sprites used in your world. They're simply a way to say, "Draw sprite X after sprite Y, so that sprite X will appear on top of sprite Y". They're typically generalized into layers so you don't need to ...


15

Let's start with the array. Don't think about it as tridimensional. Indeed, if you want to have stackable units there, it makes sense at first sight: first dimension is collumns of rows of tiles second dimension is rows of tiles third dimensions is tiles, i.e. arrays of units. But this third dimension won't be consistent, as you will store there not only ...


13

You want to set the texture's TextureWrap setting to Repeat. See the documentation for more information, and the texture method. Specifically: setWrap(Repeat, Repeat);


12

Most simple (and probably most naive) approach I can think of right now: Start at your character and mark all surrounding fields as steps - 1. Iterate over all newly marked fields and once again mark their surrounding fields as steps - 1 where steps would be the current field's step number, unless the new field has an already higher number. Repeat the last ...


12

One thing I've done in the past for island shapes is to use perlin noise minus a circular shape. It usually produces one big island and some little things off on the side. You can use flood fill or smoothing to remove any small noise. Here's a demo (flash) that I wrote for this question. For each location (x, y) in the noise bitmap, compute the distance ...


12

Going to try and doodle up what I mean here as soon as I finish typing this, but: What about merging the two? Use the second (occlude by base) for everything that isn't a wall and the first (occlude by tops) for lighting the walls? You actually did this by accident in your second example, with the wall that goes off the bottom of the image. Extending ...


11

Using transparency (alpha channel) is the way to go, I recommend. This means that when you want a vertical object on the tile like this: Then you can do it easily if your renderer draws the tiles back-to-front i.e. painters algorithm. IMAGE CREDIT: Reiner's tileset.


11

To actually answer your question: the manhatten distance is consistent when you're constrained to moving vertically/horizonally along an unweighted grid (this can be easily shown by the definition on wikipedia). So yes, in your case you can avoid rechecking nodes in the closed set. However, once you allow diagonal or any-angle movement, manhatten distance ...


10

I've used A Bitwise Method For Applying Tilemaps and found it to be a very elegant solution. The article provides a concrete example and discusses how to extend the algorithm to handle multiple terrain types.


9

While the method described by sws and MarkR is also what I prefer, I would like to present an alternative approach. A hackish option for creating an isometric look with minimal effort is to actually use orthogonal tiles, and use context.transform to set a projection matrix which makes the map look isometric (or a combination of context.rotate and context....


9

A simple flood fill algorithm will suit you just fine. Have it make a list of tiles as it progresses. If a neighboring tile is outside the bounds of your grid, then that entire region is not bounded by the brown tiles, and can be ignored.


9

When you have mobile objects and you want to get their draw order, there are two possible approaches how you can preprocess them before drawing: Add a list of objects to each map tile. Iterate all objects and add them to the object list of the tile they are on. When you draw each tile, you first draw the tile itself, then sort its object list, then draw the ...


9

Go to piskelapp.com , then choose 'Create new Piskel'. Click the menu on the right, and choose import your own image; select it, then put the number of size of each tile. After you are done editing, choose Export in separate images. Done!


9

Tiles and icons (even in UIs like window systems) are often in a size like 16x16 or 24x24 to make it easier to modify the tiles. Most times the tile size is a multiple of 8 because of the folowing reasons. It is relatively easy to shrink a tile with the size 32x32 to 16x16 by simply putting 4 pixels together (e.g. create the median/average of the 4 pixels). ...


8

Renderer apart, consider reading the following articles to understand how older systems implemented optimal tile-based map traversal: Tile-Based Games FAQ version 1.2, and Tile Graphics Techniques 1.0 They're indispensable guides for implementing tile based games on systems which may have limited resources. In terms of today's technology, HTML5-based ...


8

You can create tiled maps on without using .tmx. TiledMap map = new TileMap(); MapLayers layers = map.getLayers(); TiledMapTileLayer layer1 = new TiledMapTileLayer(width, height, tile_width, tile_height); Cell cell = new Cell(); cell.setTile(new StaticTiledMapTile(texture_region)); layer1.setCell(x, y, cell); layers.addLayer(layer1); Each of these ...


8

I'd consider a Square-based grid as a "base" type of tiles in any game. Such grid is simple to imagine and moves over this grid are simple to understand. It's also very simple to implement "under the hood". Those are few reasons why even the Chess game uses it :). Additionally, this grid helps you make "regular" levels, because Vertical and Horizontal are ...


8

http://gamedevelopment.tutsplus.com/tutorials/generate-random-cave-levels-using-cellular-automata--gamedev-9664 here is my version of the cellular automata method start by filling the grid with random then run these cullular automata rules on it a couple times If a living cell has less than two living neighbours, it dies. If a living cell has two or three ...


8

This is a basic connected components problem, and can be solved with a single invocation of breadth-first or depth-first search, or any flood-fill algorithm. bool IsOneSolidShape(TileCollection tiles) { // Clear visited flags on all tiles. // (This can also be implemented as a temporary set/map or parallel array, // if you prefer not to clutter ...


Only top voted, non community-wiki answers of a minimum length are eligible