54
"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 ...
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
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
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....
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 an ...
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
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
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
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
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-down ...
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:
Matrix ...
7
2D isometric is just a 3D orthographic projection, with a little camera work you could use almost any 3D engine really. The screenshots that I find of Bastion look like they are 3D rendered, but built simply and angular like it was built on a 2D grid.
Note that similar games like Diablo3 or Wakfu that look like they are 2D are really built and rendered in ...
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
First, You've got your rows and columns backwards:
row = Math.ceil(height / tile.height); //number of rows
column = Math.ceil(width / tile.width); //number of columns
Then, there's a couple different ways to cycle through the tiles, depending on how you want the spaces to be indexed (if this is merely for background purposes, then it's not that important, ...
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
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 ...
Only top voted, non community-wiki answers of a minimum length are eligible
