55
"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 ...
25
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 ...
23
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[...
23
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.
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
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
The camera angle used by most "isometric" games is actually 30 degrees (a true isometric view where the x, y, and z axis have the same length is 35.264 degrees). The reason for this angle is so that the width of the tile ends up being twice its height. This way you can get an even 2:1 ratio when drawing the diagonals so the tiles line up neatly without any ...
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
I think this might be easier with a visual aide. Here are some different things we might mean when we ask for "tiles within a given radius"
From the OP's responses above, it sounds like the top-left version is desired (Euclidean - screen space). That seems to have generated a bit of confusion since most tile-based games consider ranges in tile space.
No ...
8
What you need is some good old fashioned matrix math.
Let's say you have two spaces:
World space - where the tiles reside
Screen space - where the mouse pointer is
You want to check the mouse coordinates against the tiles. But first, you will have to convert your mouse coordinates from screen coordinates to world coordinates.
That sounds harder than it ...
8
var screenToIso = function(screenX, screenY)
{
var isoX = screenY / tileH + screenX / (2*tileW)
var isoY = screenY / tileH - screenX / (2*tileW)
return [isoX, isoY];
}
To get this function you need to rewrite the original math
screenX = (isoX - isoY) * tileW
screenY = (isoX + isoY) * tileH / 2
Starting with the first line you get the following:
...
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
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 ...
7
To move smoother, change
scrollPosition.x -= Math.round((dragHelper.x - x) / 28)
scrollPosition.y -= Math.round((dragHelper.y - y) / 28)
to
scrollPosition.x = Math.round((x - dragHelper.x))
scrollPosition.y = Math.round((y - dragHelper.y))
To prevent jumping when first clicking on it, change
dragHelper.x = x
dragHelper.y = y
to
dragHelper.x = x - ...
7
I think that layering is the way to go. Layer 0 would be the ground, then layer 1 would include everything that is on the ground, and finally layer 2 would be anything above the ground (blimps, clouds, etc.). Add/remove layers as needed. Each layer would be painted in order, and a painting algorithm would be used to order the entities within each layer. ...
7
You can always just use 3d models instead of 2d art (3d models don't neccessarily mean a 3d game). Apart from that, not much. You could mirror half of the sprites, but that may interfere with the lighting a bit.
6
Take a look at Tiled. It has support for Isometric maps and stores them as XML.
6
I will dare say that you should not do this. I have two main reasons for this.
1) Most objects cannot be mirrored. A person cannot. Maybe if the person is just standing. But if the person is holding something in its hand, if you mirror it, it will seems that he has changed hands, which in many cases is not what you want.
2) Isometric projection is meant to ...
6
You can't simply use the same drawing code for walls as for floors because walls and floors are not in the same plane: floors are flat (horizontal) while walls are vertical. So you have to draw them slightly differently.
Your x and y coordinates in the floor case mean something like "left/right" and "forward/backward" in terms of the placement of the tiles. ...
6
I need vector in iso coordinates that leads outside the monitor (is normal to a monitor screen).
It's two rotations. Your tiles are half as high as they are wide. Projection/dot product is proportional to cosine, and arccosine(1/2) == 60 degrees, which means that's your first rotation. It is followed by a 45-degree rotation.
You start with unit-z, 0, 0, ...
5
(migrated from comments) This is kind of a duplicate of a previous answer I gave to How do I find which isometric tiles are inside the camera's current View.
The way I handle this is by iterating over horizontal/vertical rows and columns. I'll call these axes A/B instead of X/Y (which you're already using for the diagonal axes in your isometric view).
...
5
You can use CCTMXTiledMap: http://www.cocos2d-x.org/reference/native-cpp/da/d68/classcocos2d_1_1_c_c_t_m_x_tiled_map.html
It supports isometric, hexagonal and orthogonal tiles.
5
Z-sorting or depth-sorting in as3isolib is calculated (by default) in the following class:
public class DefaultSceneLayoutRenderer implements ISceneLayoutRenderer
that can be found in:
package as3isolib.display.renderers
The code inside DefaultSceneLayoutRenderer itself is actually not too long (only 200 hundred lines of code w/comments and all) but ...
5
As a side-note, these coordinates make more sense if you interpret them as (Y, X).
You can define a 'vertical line' (from bottom to right) as y = -0.5x + a
And you can define a 'horizontal line' (from top to right) as y = 0.5x + b
What you need is an algorithm to calculate A. You can obtain it from a grid drawing function - if you draw a line every 50 ...
5
The "isometric plane" is just the normal 2D plane, and every algorithm which procedurally generates roads on a 2D grid will do.
There's a nice overview of possible methods available online; just quoting relevant parts of the reference list off "A Survey of Procedural Techniques for City Generation" (2006) by George Kelly and Hugh McCabe (Google it if you ...
5
First off, you should be storing all the tiles in a normal square grid. This will make tasks like this a no-brainer. The only place your tiles should actually be diamond shaped is on screen. Any selections on screen utilize a screenToWorld(x,y) function and any world drawing uses a worldToScreen(x,y) function. Then you can easily take your two points from ...
5
Pretty sure the easiest way to do rotation like this is to actually hard-code a simple rotation of the underlying array representing the isometric world.
Say you have a small array representing tiles, something like this (9 tiles total):
[0 2 0]
[1 0 4]
[1 0 1]
Rotate 90 degrees clockwise could be done by swapping the numbers in the array around:
[1 1 0]
...
5
You could look at Theta* - it's invented for exactly that purpose.
Pretty much like A*, except when adding a node it tests if the new node can be reached directly from the active node's parent, and if so from that node's parent, and so on. It produces very-nearly-perfect paths in most conditions.
Image is the output of my very, vey buggy C++ implementation....
Only top voted, non community-wiki answers of a minimum length are eligible
