How to implement collisions without phisics, in isometric game?

[jumpjack]

I modified isometric example as follows; it works fine, but there is no collision detection; how can I prevent the player from walking over tiles? I think I cannot us physics engine in an isometric world. To test my example, just paste it into the editor.

var cursors;
var mySkeleton;

var directions = {
    west: { offset: 0, x: -2, y: 0, opposite: 'east' },
    northWest: { offset: 32, x: -2, y: -1, opposite: 'southEast' },
    north: { offset: 64, x: 0, y: -2, opposite: 'south' },
    northEast: { offset: 96, x: 2, y: -1, opposite: 'southWest' },
    east: { offset: 128, x: 2, y: 0, opposite: 'west' },
    southEast: { offset: 160, x: 2, y: 1, opposite: 'northWest' },
    south: { offset: 192, x: 0, y: 2, opposite: 'north' },
    southWest: { offset: 224, x: -2, y: 1, opposite: 'northEast' }
};

var anims = {
    idle: {
        startFrame: 0,
        endFrame: 4,
        speed: 0.15
    },
    walk: {
        startFrame: 4,
        endFrame: 12,
        speed: 0.15
    },
    attack: {
        startFrame: 12,
        endFrame: 20,
        speed: 0.11
    },
    die: {
        startFrame: 20,
        endFrame: 28,
        speed: 0.2
    },
    shoot: {
        startFrame: 28,
        endFrame: 32,
        speed: 0.1
    }
};


var skeletons = [];

var tileWidthHalf;
var tileHeightHalf;

var d = 0;

var scene;

// GameObject Skeleton
class Skeleton extends Phaser.GameObjects.Image {
    constructor(scene, x, y, motion, direction, distance) {
        super(scene, x, y, 'skeleton', direction.offset);

        this.startX = x;
        this.startY = y;
        this.distance = distance;

        this.motion = motion;
        this.anim = anims[motion];
        this.direction = directions[direction];
        this.speed = 0.15;
        this.f = this.anim.startFrame;

        this.depth = y + 64;

        scene.time.delayedCall(this.anim.speed * 1000, this.changeFrame, [], this);
    }

    changeFrame ()    {
    if (this.motion === "idle") {
       this.f++;
 //       console.log("animo da fermo con animazione " , mySkeleton.anim.startFrame, mySkeleton.anim.endFrame);
    } else {
 //       console.log("animo in movimento con animazione " , mySkeleton.anim.startFrame, mySkeleton.anim.endFrame);
         this.f++;
  }

//console.log("Frame n.", this.f);   

        var delay = this.anim.speed;
        this.anim=anims[this.motion];

       if (this.f === this.anim.endFrame)        {
           this.f = this.anim.startFrame;
        }

  //      if (this.f === this.anim.endFrame)        {
            switch (this.motion)            {
                case 'walk':
                     this.frame = this.texture.get(this.direction.offset + this.f);
                    scene.time.delayedCall(delay * 1000, this.changeFrame, [], this);
                    break;

                case 'idle':
                     this.frame = this.texture.get(this.direction.offset + this.f);
 //                   delay = 0.5 + Math.random();
                    scene.time.delayedCall(delay * 1000, this.resetAnimation, [], this);
                    break;

            }
 //       }  else   {
 //           this.frame = this.texture.get(this.direction.offset + this.f);
         
 //           scene.time.delayedCall(delay * 1000, this.changeFrame, [], this);
 //       }
    }

    resetAnimation ()   {
        this.f = this.anim.startFrame;
        this.frame = this.texture.get(this.direction.offset + this.f);
        scene.time.delayedCall(this.anim.speed * 1000, this.changeFrame, [], this);
    }

    update()  { // skeleton update
        if (this.motion === 'walk')   {
            this.x += this.direction.x * this.speed;

            if (this.direction.y !== 0)  {
                this.y += this.direction.y * this.speed;
                this.depth = this.y + 64;
            }
        }
    }
}

class Example extends Phaser.Scene{
    constructor ()    {
        super();
    }

    preload ()    {
        this.load.json('map', 'https://raw.githubusercontent.com/jumpjack/melonJS_isometric_example/master/isometric_rpg/data/map/isometric-mio.json');//assets/tests/iso/isometric-grass-and-water.json');
        this.load.spritesheet('tiles', 'https://raw.githubusercontent.com/jumpjack/melonJS_isometric_example/master/isometric_rpg/data/img/single.png', { frameWidth: 24, frameHeight:40 });//assets/tests/iso/isometric-grass-and-water.png', { frameWidth: 64, frameHeight: 64 });
        this.load.spritesheet('skeleton', 'assets/tests/iso/skeleton8.png', { frameWidth: 128, frameHeight: 128 });
        this.load.image('house', 'assets/tests/iso/rem_0002.png');
    }

    create ()    {
        scene = this;

        this.buildMap();
        this.placeHouses();

        // create skeleton:
        mySkeleton = new Skeleton(this, 20, 20, 'walk', 'southEast', 100);

        // Add skeleton to map:
        this.add.existing(mySkeleton);

        this.cameras.main.setSize(1600, 600);

        cursors = this.input.keyboard.createCursorKeys();

    }

    update () { // phaser scene update

        if (cursors.left.isDown) {
            mySkeleton.direction = directions["northWest"];
            mySkeleton.motion = "walk"
            mySkeleton.anim=anims["walk"];
         }   else if (cursors.right.isDown) {
            mySkeleton.direction = directions["southEast"];
            mySkeleton.motion = "walk"
            mySkeleton.anim=anims["walk"];
        }   else if (cursors.up.isDown) {
            mySkeleton.direction = directions["northEast"];
            mySkeleton.motion = "walk"
            mySkeleton.anim=anims["walk"];
        }   else if (cursors.down.isDown) {
            mySkeleton.direction = directions["southWest"];
            mySkeleton.motion = "walk"
            mySkeleton.anim=anims["walk"];
        } else {
            mySkeleton.motion = "idle"
            mySkeleton.anim=anims["idle"];
 //           console.log("fermo");
        }

mySkeleton.frame = mySkeleton.texture.get(mySkeleton.direction.offset + mySkeleton.f);
       
        mySkeleton.update();
    }


    buildMap ()    {
console.log(scene.cache.json)
        //  Parse the data out of the map
        const data = scene.cache.json.get('map');

        const tilewidth = data.tilewidth;
        const tileheight = data.tileheight;

        tileWidthHalf = tilewidth / 2;
        tileHeightHalf = tileheight / 2;

    var layer;
        for (var layerIndex=0; layerIndex<data.layers.length; layerIndex++) {
            layer = data.layers[layerIndex].data;
            const mapwidth = data.layers[layerIndex].width;
            const mapheight = data.layers[layerIndex].height;

            const centerX = mapwidth * tileWidthHalf;
            const centerY = 16;

            let i = 0;

            for (let y = 0; y < mapheight; y++)        {
                for (let x = 0; x < mapwidth; x++)            {
                    const id = layer[i] - 1;

                    const tx = (x - y) * tileWidthHalf;
                    const ty = (x + y) * tileHeightHalf;
                    if ((id >=0 ) &&  (id<100)) { // debug mettere vero valore ultima tile
 console.log( x, y," = ", id)    
                        const tile = scene.add.image(centerX + tx, centerY + ty - layerIndex*7, 'tiles', id);
                        tile.depth = centerY + ty- layerIndex*7 + 50;// debug - perche'?
                    } else {
                    //    console.log("Salto tile in ", x, y, " perchè = ", id)
                    }
                    i++;
                }// x
            } //y 
        } // layerIndex
    }

    placeHouses ()
    {
        const house_1 = scene.add.image(240, 370, 'house');
        house_1.depth = house_1.y + 86;

        const house_2 = scene.add.image(1300, 290, 'house');
        house_2.depth = house_2.y + 86;
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#ababab',
    parent: 'phaser-example',
    scene: [ Example ]
};

const game = new Phaser.Game(config);