Hot answers tagged

87

Here's one rather clever way that uses 4D Perlin noise. Basically, map the X coordinate of your pixel to a 2D circle, and the Y coordinate of your pixel to a second 2D circle, and place those two circles orthogonal to each other in 4D space. The resulting texture is tileable, has no obvious distortion, and doesn't repeat in the way that a mirrored texture ...


80

There's two parts to making seamlessly tileable fBm noise like this. First, you need to make the Perlin noise function itself tileable. Here's some Python code for a simple Perlin noise function that works with any period up to 256 (you can trivially extend it as much as you like by modifying the first section): import random import math from PIL import ...


68

Among the many other related questions on the site, there's an often linked article for map generation: Polygonal Map Generation for Games you can glean some good strategies from that article, but it can't really be used as is. While not a tutorial, there's an article on how Dwarf fortress world maps are generated. Basically you generate multiple layers of ...


61

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 ...


52

"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 notice the ...


50

My suggestion Too many small PNGs will add a lot of network overhead (because of the size of the HTTP requests, but also the PNG header, and, probably even more importantly, the inability to compress efficently). On the other hand, one very large PNG has the drawbacks that it takes some time to load, and needs to stay permanently in memory (40 megabytes for ...


42

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


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.


39

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.


34

Your question leads you into the field of procedural content generation. Tile-based world generation derived from continuous/analog methods By continuous, I means something that is not tiles, something that is analog, an example being a vectorised map. You can use any continuous technique for generation, and then quantise it. For example generate a high ...


33

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.


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 ...


31

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 ...


29

While the other answers here are really good for generating the kinds of static landscapes that would work for this specific need. There are other methods that people coming across this question might be looking for if they want to create landscapes that change over time or appear much more realistic you can follow this technique. Unlike the other answers ...


23

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

As usual I'll just throw a few ideas to the table. There are certainly several ways you can approach this problem. I'll describe the three I managed to remember, and it's up to you to decide which (if any) of these approaches is good for your project. Idea 1: Repeatable patterns in your tiles Does your system need to be flexible enough to support any ...


22

Ok, I got it. The answer is to walk in a torus in 3D noise, generating a 2D texture out of it. Code: Color Sky( double x, double y, double z ) { // Calling PerlinNoise3( x,y,z ), // x, y, z _Must be_ between 0 and 1 // for this to tile correctly double c=4, a=1; // torus parameters (controlling size) double xt = (c+a*cos(2*PI*y))*cos(2*PI*x); ...


21

Based on your comment, here's the code I'm using to convert tile x,y values to on screen coordinates. Now, it doesn't take into account "3d tiles", everything is considered as being on the same plane, so if you're writing a game where that matters, this code will not work. //this converts a map x/y coordinate into screen coordinates //public, static method,...


20

I have been working on a hex tile game and found these tutorials useful: Coordinates in Hexagon-Based Tile Maps Isometric 'n Hexogonal Maps Part I Isometric 'n Hexogonal Maps Part II Drawing a Hex Grid in Illustrator (for designing maps) Good luck with your project!


20

Disclaimer: I'm not an artist so this is just programmer's art knowledge. You're having the grid effect in your example mostly because of that lighter patch of grass on the bottom edge of the tile: Details like that that are easily recognizable instantly give it away that you're just repeating the same tile. Check this article which has a lot of useful ...


20

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.


19

There are two standard ways of doing this. Break up your non-standard tile sizes into standard tile sizes. So those strips of walls become a "stack" of square tiles that you just know to place together in your level editor. Games like the early Final Fantasy games worked this way. Let any tile piece be taller than your standard tile height. Align tiles ...


19

I assume that although your tile positions are defined in integers, your camera position may not be. So if you are trying to render pixel-perfect positions from a non-pixel-perfect position then the sampling may be off and cause lines between the tiles. In your SpriteBatch.Draw calls, I would suggesting changing the SamplerState to PointClamp to ensure that ...


19

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 ...


18

First off, let me say that 2D RPGs are near and dear to my heart and working with old DX7 VB6 MORPG engines (don't laugh, it was 8 years ago, now :-) ) is what first got me interested in game development. More recently, I started converting a game I worked on in one of those engines to use XNA. That said, my recommendation is that you use a tile-based ...


17

You could use an algorithm that checks near blocks, and varies the probability depending on what is there - but I think it's largely the wrong approach. What you want to be looking at is fractal noise types - in this case, perlin or simplex noise. If you generate noise, you'll get values from -1 to 1. http://en.wikipedia.org/wiki/Perlin_noise You can then ...


16

One simple way I can think of would be to take the output of the noise function and mirror/flip it into an image that's twice the size. It's difficult to explain so here's an image: Now, in this case, it's pretty obvious what you did when you look at this. I can think of two ways to (possibly :-) ) resolve this: You could take that larger image and then ...


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

I'm no expert, but appart from having more than one type of grass tile (not completely different so people realize, but different enough), one trick could be having "transition tiles" between 2 different types of tiles. Using the example image you showed, having a half-green, half-grey tile between the completely grey and the completely green tile can help ...


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