Jump to content

Steps in making an isometric map?


Batzi
 Share

Recommended Posts

So I am new to isometric and I have been looking into the isometric plugin recently and I was wondering several things regarding the map.

 

So how do you go about building the map? Do you load a map image then add the grid to it or do you build the grid and add the map on top?

 

Let's take this image as an example

 

isometric_map_small_town_by_jongart.jpg

 

So if someone gives me this image, can I add a grid on top of it?

Link to comment
Share on other sites

There's some good points here... http://evilmousestudios.com/optimizing-javascript-games/

If you scroll down you'll note I've left a comment about further optimization. It runs well in desktop, but like a dog on iPad (although it might not be in canvas mode).

It doesn't actually answer your question specifically, although some of the design choices are covered

And no generally you would make it out of hexagonal sprites. See the demos on the isometric plugin site.

That said you could use a single artwork, but you'd have to add your own grid maths , as I don't think this is covered by the plugin

Link to comment
Share on other sites

That said you could use a single artwork, but you'd have to add your own grid maths , as I don't think this is covered by the plugin

 

Yes that's what I am looking for. I have the artwork (1 map) and I want to add my own grid onto it. Do you start with the grid or you load the map first or it doesn't really matter?

Link to comment
Share on other sites

so your artwork looks nothing like the picture you supplied?

 

in your initial example... how would you place your player behind the bus? you'd either need an invisible mask the same shape as the bus or a duplicate sprite of just the bus (same for the lampposts, buildings, signposts, reeds, flowers, powerlines etc). but if you have the latter, why are you trying to create the map out of flat artwork?

Link to comment
Share on other sites

so your artwork looks nothing like the picture you supplied?

 

in your initial example... how would you place your player behind the bus? you'd either need an invisible mask the same shape as the bus or a duplicate sprite of just the bus (same for the lampposts, buildings, signposts, reeds, flowers, powerlines etc). but if you have the latter, why are you trying to create the map out of flat artwork?

Some of the things on the flat map should not be reachable for the player that's why I am using a flat map cause it looks pretty. However, like you said, if I pass behind that bus, that bus should be a tile on its own in order to hide my moving character.

 

My questioin is, given a flat map, can I put an iso grid (invisible) on it to limit the movement of my character? and it is on that grid that I will add other tiles/sprites. Anything outside that grid should not be reachable something like grid.setBounds or something.

Link to comment
Share on other sites

As far as I can tell the Iso plugin only understands 2D world bounds. http://rotates.org/phaser/iso/examples/character_camera_follow.htm

It should provide grid coordinates though so you can probably do the checks yourself. Ie the player can't move below (0,0) grid position into negative numbers

Sorry not used it .

Ok thank you :) I will see what I can do.

Link to comment
Share on other sites

Even with 2D map you can order layers by putting them in a group. This way it's really easy to have things behind and in front of the character.

I usually move around the priotity of sprites back and forth in an attempt to achieve that. In other words, I load sprites before others to make it work.

What do you mean putting them in a group? I would love to know.

 

 

Just wondering what the maximum size single graphic a mobile GPU will display. You should be ok then http://www.williammalone.com/articles/html5-javascript-ios-maximum-image-size/

Ah I see, thanks for the heads up! :)

Link to comment
Share on other sites

Put the layers (background, ground, foreground etc.) of your map and the objects into a group using the addAt() method, which asks for the index.

 

If you play with indexes you can control the order of the objects. It's more convenient than you method because you can create new sprites and directly place them into the group at given index, and have them over/behind the correct map layers.

 

Doc : http://phaser.io/docs/2.3/Phaser.Group.html#addAt

Link to comment
Share on other sites

Put the layers (background, ground, foreground etc.) of your map and the objects into a group using the addAt() method, which asks for the index.

 

If you play with indexes you can control the order of the objects. It's more convenient than you method because you can create new sprites and directly place them into the group at given index, and have them over/behind the correct map layers.

 

Doc : http://phaser.io/docs/2.3/Phaser.Group.html#addAt

Perfect! Thank you! :D

Link to comment
Share on other sites

Even with 2D map you can order layers by putting them in a group. This way it's really easy to have things behind and in front of the character.

 

I was specifically referring to the original image posted. if that's the supplied 'flat' graphic for the world, then depth placing would be extremely awkward!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...