Its so confusing to me - sorry for that.

There is no referred "Details" in the documentation.

I guess WADE isnt the right engine for my project. It looks so weird, its not pixel exact and it does really strange things.

Maybe I didnt unterstand your explanations in the documentation but why is there a documentation when I have to copy and paste a code from a another example? Also, your tutorial is somekind of missleading to me.

Hi Daniel

I'll try to clear things up:

WADE is an HTML5 engine that you can use to make any type of game, it isn't restricted to a single game type.

WADE Isometric (wade.iso) is a plugin for WADE that makes it easier to make isometric games with WADE.

"Pan and Zoom" is not a specific feature of isometric games, it's a feature that can be used in any game type. As such, it isn't part of the documentation for the isometric plugin. There are examples and snippets that show you how to achieve some simple, common tasks with WADE, and there is an example that shows exactly how to do pan and zoom. Again, it works in any game, not just isometric games, and that's why it's there.

In WADE, you are always looking at your game world through a camera. The camera can be moved on x, y, and z (where z is the depth). Initially, z is set to 1. With these settings, 1 world unit is exactly 1 pixel. When you set the camera's z to 2 for example (moving the camera "away" from the screen), then 2 world units become 1 pixel large. When the camera's z is 0.5, then 0.5 world units are 1 pixel, which means that 1 world units is 2 pixels. And so on.

An isometric tile, by default, is 512x256 world units. If you set the camera's z to 2, then a tile is 256x128 pixels, etc.

A tile is made of multiple cells. You can choose how many cells you want in a tile, by default it's 4x4 cells per tile. You can set an image for the tile using wade.iso.setTile(), and you can also set an image for each cell usnig wade.iso.setDetail(). All the functions that refer to "details" such as wade.iso.getDetailSprite(), wade.iso.getDetailData() and so on, refer to the properties for each cell.

I don't know what you mean it isn't pixel exact - it is very much pixel exact, but maybe I don't understand what you mean by that.

Having said that, if you want to exaplain what exactly you're trying to achieve, or exactly what parts of the tutorial you find confusing, we can try to help.

As I wrote: ...to me! I guess theres a lot of people out there which havent those problems with WADE.

Its simple. I have (feels) 10.000 tiles. I want simple bring them together. The user can simple drag the whole iso-grid (with that tiles of course).

Some tiles are doors and the user can click (or tap) on them to reach another map. No sound, no path finding, no nothing - just dragging and a bit zooming and changing the map.

I placed so tiles which comes in a size of 62 x 31 pixels. In WADE there a not pixel exact. Some of them overlaps, some have a strange border.

Where did you explain how to create a map like in those JSON files (included by the iso-example)?

As I wrote: Maybe I dont understand your documentation...

I think I know what you mean - but I'd be inclined to think that if there are visual problems with the tiles, it's a problem with the source image rather than WADE, as all it does is drawing that image onto the screen, it doesn't do anything special with it in terms of adding borders or resizing it in any clever way  :)

I'm saying this from experience, having tried to create some isometric tiles before - it isn't easy. Depending on the graphics program that you use to create the tiles, it may do strange things with antialiasing on the borders. But there are ways to fix that.

Could you attach some of those tiles to your post (or otherwise send them to us via email), and I will try to create a simple isometric project with them (with a scrollable map) to see if there are any problems? I can then share this project with you so you can use it as a starting point for your own project.

Of course, if there is any problem with the way WADE uses these tiles, we'll try to fix it as soon as possible.

Admittedly the documentation for the JSON file format could be better. However the structure is pretty simple: the "terrain" object contains an array called "tileData". It looks like this:

"tileData":[    {"texture": "textures/water.png"},    {"texture": "textures/grass.png"}]

So it's an array of objects. Each of these objects describes a type of tile, and should have at least a "texture" property that describes which texture you want to use (you can add other properties to your tiles if you like too). In the above example, I have two types of tiles: water (element 0 in the array) and grass (element 1 in the array).

Then there is another property of the terrain, called "tileDataIds". This is a bidimensional array that describes how the tile types described above are laid out on the map. For example, a map with lots of water and some grass in the middle will look like this:

"tileDataIds":[    [0,0,0,0,0,0,0,0],        [0,0,0,0,0,0,0,0],        [0,0,0,1,1,0,0,0],        [0,0,0,1,1,0,0,0],        [0,0,0,0,0,0,0,0],        [0,0,0,0,0,0,0,0]]

The same structure applies to transitions ("transitionData" and "transitionDataIds") and details ("detailData" and "detailDataIds"). For those, you can also use the value -1 to indicate that you want no transitions (or no details) in a particular place.

Anyway, please do send us the tiles that you're trying to use and I'll be able to tell you more about any problems that you're having.