Tag Info

46

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

21

You need to determine the transformation matrix from tile-space coordinates to screen-space coordinates, then calculate the inverse matrix for this, which when applied to screen-space coordinates transforms them to tile-space ones. By the way: Your offset is actually pointing to a place which would be (0.0, 1.0) in any sane coordinate system, but that's ...

21

First, here is the code. An explanation will follow: /* * tw, th contain the tile width and height. * * hitTest contains a single channel taken from a tile-shaped hit-test * image. Data was extracted with getImageData() */ worldToTilePos = function(x, y) { var eventilex = Math.floor(x%tw); var eventiley = Math.floor(y%th); if (hitTest[...

20

I believe your intuition was correct, just not your formula. atan(4 / 3) = 53.1301024 degrees This ratio can be useful because it forms a Pythagorean triangle, meaning that the length of the diagonal is an exact integer value.

18

2 options: You could treat it as a 3D game with a fixed orthographic camera. Then you could use any standard 3D games resources / books / tutorials / libraries. Even if it rendered in 2D with sprites, the maths for movement etc would still be 3D behind the scene. This would give you the most accurate results. You could treat it as a top-down 2D game, with ...

18

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

16

As you said, the only ones I have found are either betas or alphas with none seeming to be ready for release. At this point in time it is probably better to roll your own: Better understanding of the internals. Able to tweak the engine to your needs. Develop the features you need to use Skip features of other engines you don't need, reducing code bloat, ...

11

If you're talking a tile-based isometric game, you have a fixed number of different depths that are bounded between some known nearest and farthest depth. In that case, it's a perfect candidate for a pigeonhole sort, which has the best possible algorithmic complexity. Just make an array where each index corresponds to a depth, and each element is a ...

11

There are a lot of ways to compute distances, every dot product can be used: a looot of ways. In your case you surely want to compute the distance between the center of the tiles. I take for granted that you know how to compute the center of a tile. Once you know the position, you can use the Euclidean distance in the canvas' coordinate space (i.e. &...

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.

10

Isometric games are functionally 3D, so internally, you should be storing the 3D coordinates for each entity in the game. The actual coordinates you pick are arbitrary, but let's say X and Y are the two on-the-ground axes, and Z is off the ground up into the air. The renderer then needs to project that into 2D to draw stuff on screen. "Isometric" is one ...

10

Whoever's general consensus you have, is wrong. There is nothing special needed to implement collision detection in an isometric game. It is no different from implementing collision detection in Robotron or even Pitfall. This is a common misconception, and one that often leads to a lot of struggling. On contract recently I met a senior developer who couldn't ...

10

Try highlighting the edges of elevated blocks to illustrate the difference in depth. Like so:

10

First of all I suggest that you change directions from: W - up-left S - down-right A - down-left D - top-right into more intuitive: W - up S - down A - left D - right As for your concern, I suggest that you make two functions, one translating isometric tile coordinates into grid coordinates, and second the other way around. That way you could simply ...

9

Since you presenting the hexmap through an isometric view that shifts things around. Here is the traditional version with horizontal hexes that are effectively squished in the vertical axis to make a pseudo-isometric look. This takes a different approach with the hexes that are rotated to present no vertical or horizontal lines. Either style can work, ...

9

It really is debatable on a few things, for the most part browsers now support hardware, so to some degree your hardware will allow more performance, no chance it'll really perform well on devices/phones as a canvas game, they would be better off as an app than something in a webpage. It is possible to run a good sized canvas game in isometric how ever. But ...

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

8

There are many ways to go depending on exactly how you want it. Here is a rough outline of one way which I think will fit your description: First generate the canals. Then start placing houses randomly, for each house you place, place the road in front of it and draw a road from that piece to the existing road network, if either is not possible or placing ...

8

For each step you make in x direction you will move 35px left and -15px up to your canvas; For each step you make in y direction you will move -35px left and -15px up to your canvas; This means that you can convert your tile coordinate system easely in pixel: (x,y) => (35·x,-15·x) + (-35·y, -15·y) = (35·x - 35·y,...

8

Your technique could work, to some limited extent, but you don't want to apply the same transformations for the objects that are supposed to be standing. For these, make a simple "skew", as illustrated here: The second rotation might not be the inverse of the first as it depends on the scale factor. The important thing is that the vertical lines are ...

8

If your argument against an array is "The world will be huge", then it's not about the data-structure, but rather about memory constraints. If your world is so large, that it doesn't fit into memory with a 2D array, then it won't fit into any other data-structure. Instead you would have to implement a (file-)format, that allows loading chunks (or sectors) ...

8

Short answer? Dont combine sprites. That is, if you combine, you'll have to have the animation for every single combination. Seems strange if you just want one chair. But lets pretend your office could be expanded in the middle game, where the chairs now have a sprite nicer. Would you just add a chair sprite, or will you recombine and add all the animation ...

8

This is actually very simple if your objects match up with your isometric tiles. Take a look at this image: You should first draw the object at the red position, then objects at blue, then green, then yellow, then magenta, and so on... It should be fairly obvious how to implement this if your board has objects in it instead of objects having position as ...

8

You don't need to change the parser, just the renderer. The tiles will be at the 'same' place, except the projection is different. The good news is that the good context 2d can do isometric just by setting the right isometric transform. Once you set it, just draw in a regular way (including drawImage), and all will be drawn in the isometric way !!! magic !!!...

7

You need to check out cellular automata, and possibly fluid dynamics. Tarn Adams implemented a cell based fluids system in Dwarf Fortress, and those are the tools he claimed to use in an interview I read some time back (and also in 3 dimensions as per your use case). I think for your purposes, cellular automata (self-replication/propagation of water cells) ...

7

From the image you posted it looks like the only thing you did wrong was the order in which you applied the scale and rotation to your transformation. I don't have any experience with Cocos2D but I just mocked it up in XNA and here are the results: And here's the transformation matrix I used in XNA. See if you can find any correlation to your code: ...

7

I don't know about jQuery but in general terms I can think of a few alternatives. Use isometric tiles to create the background. It's very similar to creating a top-down tile based map but with tiles being offset a little. You can find more information here. Also check this answer for a side-by-side comparison between isometric and top-down. Turn a top-...

7

After a few days of researching, I found a solution to this particular transform. This is much more mathematical than program-oriented. Therefore, I will be using pseudo code. Now, given a screen coordinate (x,y), we first want to represent (x,y) respected, or fixed, to the world, not the screen. For example, my game use the top-left most corner of ...

7

A possible solution is to use a heightmap of the usa, for example: OpenTTD Heightmaps However this may be a little big anyway you could then read this image pixel by pixel creating a tile with that relative height for that shade of color.. so say White (highest) and black is 0 (Lowest / Sea level) producing an accurate height listing of usa. since you ...

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