Detecting what texture tile has.

Post your help queries and engine programming questions here

Detecting what texture tile has.

Postby Siruker » Sun Oct 04, 2015 4:42 pm

This is what I have in client.
Code: Select all
var Client = IgeClass.extend({
   classId: 'Client',
   init: function () {
      ige.showStats(1);

      // Enabled texture smoothing when scaling textures
      ige.globalSmoothing(true);

      // Load our textures
      var self = this;





      // Add physics and setup physics world
      ige.addComponent(IgeBox2dComponent)
         .box2d.sleep(true)
         .box2d.gravity(0, 0)
         .box2d.createWorld()
         .box2d.start();

         // Create the HTML canvas
         ige.createFrontBuffer(true);
         ige.viewportDepth(true);

         ige.start(function (success) {
            // Check if the engine started successfully
            if (success) {
               // Create the scene
               self.mainScene = new IgeScene2d()
                  .id('mainScene')
                  .translateTo(0, 0, 0)
                  .drawBounds(false)
                  .drawBoundsData(false);

               self.backScene = new IgeScene2d()
                  .id('backScene')
                  .depth(0)
                  .drawBounds(false)
                  .drawBoundsData(false)
                  .mount(self.mainScene);

               self.objectLayer = new IgeTileMap2d()
                  .addComponent(IgeEntityManager)
                  .id('objectLayer')
                  .depth(1)
                  .isometricMounts(true)
                  .drawBounds(false)
                   
                  .drawBoundsData(false)
                  .tileWidth(40)
                  .tileHeight(40)
                  .mount(self.mainScene);

               // Create the main viewport
               self.vp1 = new IgeViewport()
                  .id('vp1')
                  .depth(1)
                  .autoSize(true)
                  .scene(self.mainScene)
                  .drawBounds(true)
                  .drawBoundsData(true)
                  .mount(ige);

               // Let's create a character, then set the camera to follow him!
               self.player = new Character()
               .id('player')
               .addComponent(PlayerComponent)
                   
               .isometric(true)
               .drawBounds(false)
               .drawBoundsData(false)
               .mount(self.objectLayer);

               // Translate the camera to the initial player position
               self.vp1.camera.lookAt(self.player);

               // Tell the camera to track our player character with some
               // tracking smoothing (set to 20)
               self.vp1.camera.trackTranslate(self.player, 20);
               
               // Set the camera to round it's translate value to avoid sub-pixel rendering
               self.vp1.camera.trackTranslateRounding(true);

               // Load the Tiled map data and handle the return data
               ige.addComponent(IgeTiledComponent)
                  .tiled.loadJson(tiledExample1 /* you can also use a url: 'maps/example.js'*/, function (layerArray, layersById) {
                     // The return data from the tiled component are two arguments,
                     // the first is an array of IgeTextureMap instances, each one
                     // representing one of the Tiled map's layers. The ID of each
                     // instance is the same as the name assigned to the Tiled
                     // layer it represents. The second argument contains the same
                     // instances but each instance is stored in a property that is
                     // named after the layer it represents so instead of having to
                     // loop the array you can simply pick the layer you want via
                     // the name assigned to it like layersById['layer name']

                     // We can add all our layers to our main scene by looping the
                     // array or we can pick a particular layer via the layersById
                     // object. Let's give an example:
                  var i;
                     for (i = 0; i < layerArray.length; i++) {
                        // Check if the layer is a tile layer
                        if (layerArray[i].type === 'tilelayer') {
                           // Before we mount the layer we will adjust the size of
                           // the layer's tiles because Tiled calculates tile width
                           // based on the line from the left-most point to the
                           // right-most point of a tile whereas IGE calculates the
                           // tile width as the length of one side of the tile square.
                           layerArray[i]
                              .tileWidth(40)
                              .tileHeight(40)
                              .drawMouse(true)
                              .hoverColor('#f00')
                              .autoSection(20)
                                        .drawGrid(true)
                                        .gridSize(10,10)
                                   
                              //.isometricMounts(false)
                              .drawBounds(false)
                              .drawBoundsData(false)
                              .mount(self.backScene);
                        }

                        // Check if the layer is an "object" layer
                        if (layerArray[i].type === 'objectlayer') {
                           //layerArray[i].mount(self.backScene);
                        }
                     }

                     // Or if we wanted to only use the "DirtLayer" from the example
                     // map data, we could do this:
                     //layersById.DirtLayer.mount(self.mainScene);

                     // Create static box2d objects from the dirt layer
                     ige.box2d.staticsFromMap(layersById.DirtLayer);

                     // Create a path-finder

                     
                  });
               
               // Add the box2d debug painter entity to the
               // scene to show the box2d body outlines
               //ige.box2d.enableDebug(self.objectLayer);
            }
         });
      
   }
});


This is what I have in map file.
Code: Select all
var tiledExample1 = { "height":100,
 "layers":[
        {
         "data":[1, 1, 1, 1, 1,  ....  1, 1, 1, 1, 1],
         "height":100,
         "name":"GrassLayer",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":100,
         "x":0,
         "y":0
        },
        {
         "data":[0, 0, 7, 7, 0, 0, 0, ....  0, 0, 0, 0, 6, 0],
         "height":100,
         "name":"DirtLayer",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":100,
         "x":0,
         "y":0
        },
        {
         "height":100,
         "name":"ObjectLayer1",
         "objects":[
                {
                 "gid":5,
                 "height":0,
                 "name":"",
                 "properties":
                    {

                    },
                 "type":"",
                 "width":0,
                 "x":0,
                 "y":0
                }],
         "opacity":1,
         "type":"objectgroup",
         "visible":true,
         "width":100,
         "x":0,
         "y":0
        }],
 "orientation":"isometric",
 "properties":
    {

    },
 "tileheight":50,
 "tilesets":[
        {
         "firstgid":1,
         "image":"assets\/textures\/tiles\/grassSheet.png",
         "imageheight":50,
         "imagewidth":400,
         "margin":0,
         "name":"grassSheet",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":50,
         "tilewidth":100
        },
        {
         "firstgid":5,
         "image":"assets\/textures\/tiles\/dirtSheet.png",
         "imageheight":50,
         "imagewidth":400,
         "margin":0,
         "name":"dirtSheet",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":50,
         "tilewidth":100
        }],
 "tilewidth":100,
 "version":1,
 "width":100
};

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = tiledExample1; }


What I want to do is to detect what texture id is on the layer i specify. something like on click.
Siruker
 
Posts: 4
Joined: Fri Oct 02, 2015 5:40 am

Re: Detecting what texture tile has.

Postby Siruker » Sun Oct 04, 2015 5:28 pm

I got it finally -.- console.log(ige.$('GrassLayer').map._mapData[(tilePoint.y-20)/40][(tilePoint.x-20)/40]);
Siruker
 
Posts: 4
Joined: Fri Oct 02, 2015 5:40 am


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest