53
"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
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
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
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
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
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
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
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
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
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
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 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 ...
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
It looks fine. Since an isometric projection is essentially a rotation followed by an orthographic projection there should be no foreshortening - and hence a limited perception of depth etc.
So my take is, keep going.
Put some taller buildings in. Obstruction should help create a sense of depth.
Create shadows if you can (if you use actual 3d models to ...
6
The isometric projection is not so much relevant for the underlying tools you choose, it's just the way (angle, no perspective distortion) you look at things, but that doesn't change the underlying principles of how things behave. That means you don't need to particularly search for isometric tools.
The physics for instance is the same, no matter how you ...
Only top voted, non community-wiki answers of a minimum length are eligible
