Placing walls in IGE (using Tiled?)

Post your help queries and engine programming questions here

Placing walls in IGE (using Tiled?)

Postby JAM » Wed Jun 11, 2014 9:44 pm

Hi all,

I'm working on a proof of concept to use IGE to develop an isometric game. I was really impressed by example 13.6-texturemaps-load-tiled so I wanted to create a demo to show that the Tiled map editor (http://www.mapeditor.org/) could be used to create a map and import that into IGE. I'm having trouble with adding walls to the map. I made a copy of the DirtSheet.png and increased the height from 50 to 150 pixels to represent some walls:

Image

I created a new "WallLayer" in Tiled and added in a few wall tiles:

Image

When I imported the map into IGE the walls were distorted and out of place:

Image

I realize that this is because the tiles are a different size (height x 3). I added some code to the client.js from example 13.6 to account for the new tile size in the "WallLayer":

Code: Select all
if (layerArray[i].type === 'tilelayer') {
   var tileWidth = 40;
   var tileHeight = 40;
   if (layerArray[i]._id == 'WallLayer') {
      var tileWidth = 40;
      var tileHeight = 120;
   }
   layerArray[i]
      .tileWidth(tileWidth)
      .tileHeight(tileHeight)
...


Now the images are no longer distorted but the positioning is off due to the new tile size as illustrated by the white roll over tile:

Image

So on to my questions...

Am I going about this wrong? Is it possible to import static irregular shaped items from Tiled? Should walls be part of the tile map or should they be entitites?

Any feedback would be much appreciated.

Thanks!
User avatar
JAM
 
Posts: 4
Joined: Wed Jun 11, 2014 9:02 pm
Location: Toronto, ON

Re: Placing walls in IGE (using Tiled?)

Postby robaldred » Wed Jun 11, 2014 11:07 pm

hello. The map layers in ige don't support different sizes like you need there.

My suggestion (this is what I do) put your walls on an object layer in tiled. I name the objects based on their texture name then its easy to grab the object layer and create igeentities and load the texture and translate to the position.

And array of the objects and their geometry is available by doing.... layersById.<layer name>.objects

I use this technique to place any objects that are not tiles. ( not ground) so all my scenery world assets are all image objects on a "scenery" object layer in tiled. Then converted to ige entity in the game. Its relatively simple.

If you still need help I'll drop in an example together when I'm home this weekend.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: Placing walls in IGE (using Tiled?)

Postby JAM » Thu Jun 12, 2014 2:40 pm

Thanks for all the info. The more I thought about it, the less it made sense for the walls to be part of the tilemap. I'll see if I can implement your recommendation of creating entities based on an object layer and post my results.

Thanks again
User avatar
JAM
 
Posts: 4
Joined: Wed Jun 11, 2014 9:02 pm
Location: Toronto, ON

Re: Placing walls in IGE (using Tiled?)

Postby robaldred » Thu Jun 12, 2014 5:27 pm

No worries post back if you need more help I'll have some time at weekend when I'd be able to post up some example code.

Its quite manual but all the data is there in the loadjson callback so its just a matter of manipulating it. A little manual processing is required but its only once when the map loads and the results are good enough.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: Placing walls in IGE (using Tiled?)

Postby JAM » Fri Jun 13, 2014 6:40 pm

So, I've had some success with placing the objects as igeentities. I've run into an issue with positioning. First, I modified my tile image a bit:

Image

Then I created a new object layer in tiled (ObjectLayer1) and dropped in 3 walls:

Image

As you recommended I made the object names match the texture names. I also added a "cell" property to store which tile is used. I noticed that the object returned by layersByID.ObjectLayer1 does not contain the textures so I looked it up in one of the tile layers:

Code: Select all
var layerTextures = layersById.GrassLayer._textureList; //get list of textures in tile layer to be used by object layer
var wallArray = layersById.ObjectLayer1.objects; //get list of walls in the object layer
for (var w = 0; w < wallArray.length; w++) {
   var layerObj = wallArray[w];
   if (layerObj.name == 'wallSheet') {
      var tileX = layerObj.x / 50; //divide by tile size in Tiled
      var tileY = layerObj.y / 50; //divide by tile size in Tiled
      var cell = layerObj.properties.cell; //custom property set in Tiled
      var texture;
      for (var t = 0; t < layerTextures.length; t++) {
         if (layerTextures[t]._id == layerObj.name) {
            texture = layerTextures[t];
         }
      }
      self.obj.push(
      new IgeEntity()
         .id('wall' + w)
         .mount(self.objectLayer)
         .drawBounds(true)
         .drawBoundsData(false)
         .translateToTile(tileX, tileY, 0));
      var newWall = self.obj[self.obj.length - 1];
      newWall.imageEntity = new IgeEntity()
         .texture(texture)
         .cell(cell)
         .drawBounds(false)
         .drawBoundsData(false)
         .dimensionsFromCell()
         .scaleTo(0.8, 0.8, 1)
         .translateTo(0, -15, 0) //push the image up a bit to line up with the tile
         .mount(newWall);
   }
}


The textures are no longer distorted but I'm having issues with the positioning. I'm reading the x/y pixel values from the tiled data and dividing by the tile size so I can use translateToTile. However, the positioning doesn't seem to line up with the tiles on the other layers:

Image

The positioning is way off from where I placed them in Tiled. It doesn't even seem to match other entities in the same layer. The player entity and the walls are mounted to self.objectLayer. If I try translateToTile(0, 0, 0) or translateTo(0,0,0) on the walls they do not match up with 0,0,0 on the tile layer:

Image

I'm still using the code from example 13.6. The only addition is the code block above and of course different map data from Tiled. Do you know what I'm missing in order to get the translations to match between layers?

Thanks again
User avatar
JAM
 
Posts: 4
Joined: Wed Jun 11, 2014 9:02 pm
Location: Toronto, ON

Re: Placing walls in IGE (using Tiled?)

Postby robaldred » Sat Jun 14, 2014 12:36 pm

You may need to adjust the origin of the entities

Try originTo(.5,1,.5)

Also you might need to translate the x/y to ISO.

point = new IgePoint3d(x,y,0).toIso()
X,y being the data from the object layer.

I'll check over my code later and post back.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: Placing walls in IGE (using Tiled?)

Postby JAM » Thu Jun 19, 2014 4:08 pm

Thanks for the tips. originTo(.5,1,.5) got the tiles close to lining up. I haven't had any luck with the placement though. I'm getting an error that IgePoint3d does not exist. I don't see IgePoint3d.js in my engine folder and I ran a search with grepWin for 'IgePoint3d' across my ige folder and it found no results. Do I have to include anything to use Point3D or is it not available in the trial version of the engine?

Thanks,
User avatar
JAM
 
Posts: 4
Joined: Wed Jun 11, 2014 9:02 pm
Location: Toronto, ON

Re: Placing walls in IGE (using Tiled?)

Postby robaldred » Thu Jun 19, 2014 4:35 pm

Ahh you're on the trial sorry, there was a fairly large overhaul before Christmas. IgePoint3d is IgePoint in the free version.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest
cron