Wade and really large isometric game map.
mafi.rus

Hay all,

 

nice engine do u have there, i have a question about an isometric game map.

 

we need to create a very large isometric game map with tilesets and objects on it ( like your game zirma ).

We think the best way to do it is to use canvas and to load only the visible part of the map in the browser.

 

Now we found this really nice framework that have all the future for the ui that we would have in our game;

 

https://github.com/zynga/scroller

 

Demo: http://qwan.org/scroller/demo/canvas.html

 

Can we use wade as game engine and this zynga framework for our game ?

 

Have u any snippets for us, how to create an isometric map with ur engine ?

 

Thanks

Mafi

All 9 Comments
Gio
Hi

We have an isometric plugin for wade that we used for Zirma among other things. We are in the process of cleaning it up, writing the documentation and getting it ready for release sometime in January (together with some other plugins). This will probably happen towards the end of the month.

We have a prototype of an isometric map editor too, but that is nowhere near ready to be released (it will be at some point, but later on).

Having said that, I am sure you could use any editor to create maps that would work with our iso plugin: it loads maps in a simple json format, so all you have to do is convert your map data.

To answer your question directly: I don't think you need to worry about loading only portions of the map. Assuming that you want to use tiles for your background (as opposed to a large background picture), it's ok to load it all at once. Wade doesn't even try to draw things that aren't on the screen, and thanks to its quadtree system, things that are off screen don't have any impact on performance.

Memory usage shouldn't be too bad either (if two tiles use the same image, the image isn't loaded twice).

These are general considerations about wade, and hold true even if you want to use your own isometric implementation rather than waiting for our plugin.
mafi.rus

Hey,

 

thanks for the iso plugin, its really nice.

i have one question about the performance and size of a map.

 

If my map will be loaded via json and it will be 200x200 tiles big. each tile have 3x3 cells.

does this crash the performace ? or how big will be the json file ( i think near 5 mb with all the info ) ?

 

There will be 5000 Player per Map - with each player can build up to 10 buildings.

 

Can i use the isometric plugin for load the whole map ? or shoud i load only a part of the map and than load the other if the player scrolls there ?

 

Thanks :)

Mafi

Gio

The JSON file should be a bit smaller probably, but what's more important is the compressed size of your JSON file. I assume this will be running on a web server? If so, make sure that gzip is enabled when you transfer your files. The uncompressed JSON may be a few megabytes, but the compressed version is going to be a just a few kilobytes - a lot of the data in there is very repetitive, it's going to compress extremely well. I'd be surprised if it's ever more than 100KB when zipped.

 

The size, in memory, of each cell and tile is really small, it's just a few bytes. Even if you have lots of them, it's going to be a few megabytes of RAM. I'll make an example. Say that you use N different types of sprites for your tiles, internally wade.iso creates an array with N entries a bit like this:

[     {texture: 'myImage.png', size: .... },     {texture: 'myOtherImage.png', size: .... },     .....]

Then for each cell (or tile), it just stores the index into that array. So if you have 600x600 cells (360K cells) it's just going to be an array with 360K numbers in it, it isn't a big deal in terms of memory. It may take a while to load, but once loaded it should be fine.

 

The real problem may be the graphics... if you're using several different images, then that may be a problem, since each image may take up several kilobytes if not megabytes of RAM. In that case it may be worth loading only the images that are visible at any one time, and unloading the rest. But be aware that some browsers (mainly Safari) are terrible at unloading things, and tend to keep them in memory until they crash. Chrome, Firefox and even IE are much better in that respect.

 

But if you have a large map, and less than 100 megapixels for your sprites, I think you could load it all in one go and not worry about memory usage. This really depends on your target platforms, but most modern mobiles can cope with 100 megapixels of image data.

 

Like I said above, performance is an entirely different matter, but things that aren't visible won't be drawn, so wade.iso should be able to deal with lots and lots of objects provided that they aren't all visible at the same time.

 

As a personal suggestion (which isn't related to any technical issues), I would suggest that you try your game with fewer players first and then expand it. There are always issues with big numbers of players, mainly on the server side, and solving these issues costs money. I wouldn't spend lots of money on the server infrastructure unless I'm 100% sure that I'm going to hit my 5,000 players target. I'd start with maps for 100 players. But like I said, this is just a personal suggestion and feel free to ignore it :)

mafi.rus

Thanks for ur replay.

 

we have big server, thats not the problem.

5.000 players is the maximum that we would support for one map.

we will start with 10 maps(towns) with 1.000 players per map.

 

gzip is a good advice, thanks for that.

we will have 40 different buildings with 4 upgrade per building, it will be 160 different images of buildings. ( ~ 1mb )

and we will have 2 tilesets for the background ( size ~ 2mb )

 

if our map is ready, can we show it to you ? than can u see it and gime us a good advice to change somethink to get the best performance :)

 

thanks

Mafi

Gio

Yeah, in fact I'd love to see it. It sounds like a really exciting project. What is your target platform?

mafi.rus

Thanks :)

 

we will release this game as an browsergame with mobile support and later as an facebook app.

 

Some question about your framwork:

 

1. How can i select an object and "highlight" it? like this :http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

    -> Is there an option to get the current objekt on the position for the onclick event ?

2. How can i highlight a cell or an objekt if i hover it with the mouse ?

3. Can u show me an example how to load map data from a json file ?

 

Big thanks for the excellent support :)

Gio
  1. I think the best way to do this is to draw the sprite twice, i.e. create another sprite (you can use sprite.clone() to do that easily), then you make your clone larger and make sure to draw it behind the original sprite. You would also draw it with a composite_ draw function (as documented here). You can have both sprites as part of the same SceneObject, so they will automatically move together. In an isometric world, it may be important to set the sort point of the cloned sprite so it appears correctly behind the original sprite.
    To select an object, I'd make it clickable, i.e. something like this (right after creating the object):
    object.onClick = function(){    // do something};wade.addEventListener(object, 'onClick');

    However if you want to get an object at a specific cell where the user is clicking, just add an onClick function to your main App object and get any objects that are occupying the cell that is being clicked:
     

    this.onClick = function(eventData){    // calculate world-space coordinates for the click event (this takes into account camera movement and zoom)    var worldPosition = wade.screenPositionToWorld(wade.iso.getTerrainLayerId(), eventData.screenPosition);        // which cell is at the current coordinates?    var cell = wade.iso.getCellCoordinates(worldPosition.x, worldPosition.y);    // which objects are in the cell? There may be more than one if they don't have collisions    if (cell.valid)    {        var objects = wade.iso.getObjectsInCell(cell.x, cell.z);    }};
  2. To highlight a cell on the terrain where the mouse is moving there is a helper function called wade.iso.setHighlight() which is documented here
  3. To load a map from a JSON file you just pass a map parameter to wade.iso.init like this:
    wade.iso.init({map: 'myMap.json', callback: myFunction});

    where you can use the callback parameter to specify a function to execute when it's finished loading the map and all the resources (sprites and animations) that are used in the map. For the format of the map, have a look at the step-by-step guide of the example isometric game.

I hope this helps :)

mafi.rus

Nice thanks :)

 

some more questions:

 

is it possible to make a staggered map ? ( see here http://legendofmazzeroth.wdfiles.com/local--files/staggered-isometric-maps/diamond_staggered.png )

if not, how can i get the camera to not scrolling in the are where arent tiles (blank page) ?

 

if i try load a map from the example ( wade.iso.init({map: 'map.json'}); ) it show the error:

TypeError: b is undefined on wade.iso.js line 31

Gio

Staggered maps aren't currently supported, but you could make your map slightly larger than the actual area that you are going to use, then to force the camera to never show anything outside the map area you can simply do

wade.iso.constrainCamera();

Which map are you trying to load? Do you have all the resources it references in the right places? If you want to send it to me I'll try to see if I can replicate the problem and fix it.

Post a reply
Add Attachment
Submit Reply
Login to Reply