HTML5画布中的碰撞检测.优化也

Question

我正在制作平台游戏,但我的碰撞检测有问题.我已经制作了一个在屏幕/地图上绘制图块的功能.在该功能是我的碰撞检测,它只绘制一个瓷砖时工作正常,但当我用三个瓷砖创建"楼梯"时,第一个瓷砖不起作用.玩家只是被"推"到了瓷砖上.侧面检测不起作用.而其他瓷砖工作正常.

这是碰撞检测和瓷砖绘图的代码:

//Function that allows you to draw a tile
function drawTile(type, x, y, collision){
    var tileImg = new Image();
    tileImg.onload = function(){
        ctx.drawImage(tileImg, x, y)
    };
    tileImg.src = "images/" + type + ".png";

    if (collision){
        //Worst collision detection ever.
        if((player_x + player_width == x) && (player_y + player_height > y)){
            canMoveRight = false;
        }else if((player_x == x + 32) && (player_y + player_height > y)){
            canMoveLeft = false;
        }else if((player_y + player_height > y) && (player_x + player_width >= x) && (player_x + player_width <= x + 64)){
            player_y = y - player_height;
        }else{
            canMoveRight = true;
            canMoveLeft = true;
        }
    }
}

//Draw the map
function drawMap(){
    drawTile("block", 96, 208, true);
    drawTile("block", 128, 208, true);
    drawTile("block", 128, 176, true);
};

如您所见,碰撞检测代码有点糟糕.所以,如果你向我展示了更好的制作方法,那也会很好.

只要说你是否需要了解一些事情.:)

Answer 1

我知道这听起来像是一个可怕的开销,但是您应该考虑使用场景图来处理所有碰撞检测,绘图甚至点击屏幕上的事件.

场景图基本上是表示1父与子关系的树数据结构(注意:每个HTML页面的DOM也是场景图)

因此,为了实现此目的,您将拥有一个名为"node"或类似的基本接口或抽象类,表示sceneGraph中每个节点必须实现的接口.它就像dom中的Elements一样,它们都具有CSS属性,事件处理方法和位置修饰符.

节点:

{
    children: [],

    update: function() {
        for(var i = 0; i < this.children.length; i++) {
            this.children[i].update();
        }
    },

    draw: function() {
        for(var i = 0; i < this.children.length; i++) {
            this.children[i].draw();
        }
    }
}

现在,正如您可能知道的那样,如果您在每个maring,position或者所有的DOM中移动一个元素,所有子元素都会自动转到父级的新位置,这种行为是通过转换继承来实现的,为简单起见我不会显示3D转换矩阵,而只是转换(x,y偏移).

节点:

{
    children: [],
    translation: new Translation(),


    update: function(worldTranslation) {
        worldTranslation.addTranslation(this.translation);

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].update(worldTranslation);
        }

        worldTranslation.removeTranslation(this.translation);
    },

    draw: function() {
        for(var i = 0; i < this.children.length; i++) {
            this.children[i].draw();
        }
    }
}

转型:

{
    x: 0,
    y: 0,

    addTranslation: function(translation) {
        this.x += translation.x;
        this.y += translation.y;
    },

    removeTranslation: function(translation) {
        this.x -= translation.x;
        this.y -= translation.y;
    }
}

(请注意,我们不会实现新的翻译对象,因为在全局翻译中添加/删除值会更便宜)

现在,您的worldTranslation(或globalTranslation)具有节点可以从其父节点继承的所有偏移量.

在进行碰撞检测之前,我将展示如何用这种技术绘制精灵.基本上,您将使用位置图像对在Draw循环中填充数组

节点:

{
    children: [],
    translation: new Translation(),

    image: null, //assume this value is a valid htmlImage or htmlCanvas element, ready to be drawn onto a canvas
    screenPosition: null, //assume this is an object with x and y values like {x: 0, y: 0}

    update: function(worldTranslation) {
        worldTranslation.addTranslation(this.translation);

        this.screenPosition = {x: worldTranslation.x, y: worldTranslation.y};

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].update(worldTranslation);
        }

        worldTranslation.removeTranslation(this.translation);
    },

    draw: function(spriteBatch) {

        spriteBatch.push({
            x: this.screenPosition.x,
            y: this.screenPosition.y,
        });

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].draw(spriteBatch);
        }
    }
}

渲染功能:

function drawScene(rootNode, context) {
    //clear context here

    var spriteBatch = [];
    rootNode.draw(spriteBatch);

    //if you have to, do sorting according to position.x, position.y or some z-value you can set in the draw function

    for(var i = 0; i < spriteBatch.length; i++) {
        var sprite = spriteBatch[i];

        context.drawImage(sprite.image, sprite.position.x, sprite.position.y);
    }
}

现在我们对从sceneGraph中绘制图像有了基本的了解,我们进入碰撞检测:

首先,我们需要我们的节点有BoundryBoxes:

框:

{
    x: 0,
    y: 0,

    width: 0,
    height: 0,

    collides: function(box) {
        return !(
                ((this.y + this.height) < (box.y)) ||
                (this.y > (box.y + box.height)) ||
                ((this.x + this.width) < box.x) ||
                (this.x > (box.x + box.width))
            );
    }
}

在2D游戏中,我更喜欢边界框不在节点的坐标系中,而是让它知道它的绝对值.通过CSS解释:在css中你可以设置边距和填充,这些值不依赖于页面,而是它们只存在于设置了这些值的元素的"坐标系"中.所以它有位置:绝对和左:10px vs margin-left:10px; 2D中的好处是我们不需要一直冒泡场景图形以找到检测并且我们不必从其当前坐标系计算出框 - >进入世界坐标系 - >回到每个节点进行碰撞检测.

节点:

{
    children: [],
    translation: new Translation(),

    image: null,
    screenPosition: null,

    box: null, //the boundry box

    update: function(worldTranslation) {
        worldTranslation.addTranslation(this.translation);

        this.screenPosition = {x: worldTranslation.x, y: worldTranslation.y};

        this.box.x = worldTranslation.x;
        this.box.y = worldTranslation.y;
        this.box.width = this.image.width;
        this.box.height = this.image.height;

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].update(worldTranslation);
        }

        worldTranslation.removeTranslation(this.translation);
    },

    collide: function(box, collisions) {
        if(this.box.collides(box)) {
            collisions.push(this);
        }

        //we will optimize this later, in normal sceneGraphs a boundry box asures that it contains ALL children
        //so we only will go further down the tree if this node collides with the box
        for(var i = 0; i < this.children.length; i++) {
            this.children[i].collide(box, collisions);
        }
    },

    draw: function(spriteBatch) {

        spriteBatch.push({
            x: this.screenPosition.x,
            y: this.screenPosition.y,
            image: this.image,
        });

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].draw(spriteBatch);
        }
    }
}

碰撞功能:

function collideScene(rootNode, box) {
    var hits = [];

    rootNode.collide(box, hits);

    for(var i = 0; i < hits.length; i++) {
        var hit = hits[i];

        //your code for every hit
    }
}

注意: 并非每个节点都必须表示一个图像,您可以创建节点以仅向其子节点添加翻译,例如制作一个没有视觉效果的DIV容器来排列一堆对象,而只需要编辑一个对象的位置.角色可以包括:

CharacterRoot (Translation Only)
    CharacterSprite (Image)
    Weapon (Image)
    Shield (Image)

现在这些只是游戏中使用的场景管理的一些基础知识,你可以谷歌我在这里使用的许多热量,做一些进一步的优化,并随时提出任何问题.