Isometri c позиция сортировки многомерного массива, где свойство z ​​определяет, сколько пикселей должно быть поднято вверх - PullRequest
Новая
       32

Isometri c позиция сортировки многомерного массива, где свойство z ​​определяет, сколько пикселей должно быть поднято вверх

1 голос
/ 19 апреля 2020

У меня есть массив изометрий c объектов, которые имеют свойства x, y, z. Я пытаюсь отсортировать массив для целей рендеринга (первый индекс отображается первым). Я попытался отсортировать массив с помощью приведенного ниже кода, но он неточен. 

this.objects.sort((a,b) => {
    return ((a.x + a.y) / 2) - ((b.x + b.y) / 2)
});
this.objects.sort((a,b) => {
    return a.z - b.z
})

screenshot

и при попытке этого кода 

this.objects.sort((a,b) => {
    if(a.z > b.z) return 1;
    if(((a.x + a.y) / 2) > ((b.x + b.y) / 2)) return 1;
    return -1
});

это происходит:

enter image description here

Есть ли способ сортировки массива, чтобы он правильно отображался? 

for(var obj of this.objects) {
    if(!this.sprites[obj.sprite] || !this.sprites[obj.sprite].loaded) {
        continue;
    }
    var centralPoint = obj.centralPoint();
    this.ctx.drawImage(this.sprites[obj.sprite].image,centralPoint.x - this.sprites[obj.sprite].offset[0], centralPoint.y - this.sprites[obj.sprite].offset[1]);
}

My Isometri c Объект: 

    function IsoObject(main,sprite,x,y,z = 0,height = 0, scale = 1,onClick = function() {}) {
        this.main = main;
        if(!main.sprites[sprite]) main.addSprite(sprite,sprite);
        this.sprite = sprite;
        this.x = x;
        this.y = y;
        this.z = z;
        this.scale = scale;
        this.height = height;
        this.onclick = onClick;
        return this;
    }

    IsoObject.prototype.centralPoint = function() {
        var x = this.x * this.main.increment.x - (this.y * this.main.increment.x);
        var y = this.y * this.main.increment.y - this.z + (this.x * this.main.increment.y);
        return {
            x: x,
            y: y
        }
    }

this.main.increment: 

this.increment = {
    x: this.tileSize * Math.sin(this.angle * (Math.PI / 180)),
    y: this.tileSize * Math.cos(this.angle * (Math.PI / 180))
}

Позиции объектов: 

0: "x:4.999000000000007,y:4.136499999999993,z:0"
1: "x:1,y:3,z:0"
2: "x:4,y:3,z:-1"
3: "x:2,y:4,z:-1"
4: "x:1,y:3,z:39"
5: "x:1,y:3,z:40"

, если вы видите, свойство z ​​не является Так же, как x и y, свойство z ​​определяет, сколько пикселей должно быть изображением, переведенным вверх.

EDIT

Эта сортировка вроде работает, но все еще неточна

enter image description here

this.objects.sort((a,b) => {
    var ac = a.centralPoint();
    var bc = b.centralPoint();
    return (ac.x + ac.y + a.z) - (bc.x + bc.y + b.z)
}

1 Ответ

1 голос
/ 19 апреля 2020

Сначала вы можете взять z, затем y и, наконец, x. 

this.objects.sort((a, b) =>
    a.z - b.z ||
    a.y - b.y ||
    a.x - b.x
);
...