Сбой при столкновении с Chipmunk JS

http://videobin.org/+70a/8wi.html

Вы можете увидеть, что там происходит, и попробовать демо здесь: http://student.dei.uc.pt/~drgomes/carry/index.html.

Итак, я использую демонстрации Chipmunk JS, чтобы понять, как это работает (см. https://github.com/josephg/Chipmunk-js). Простая демонстрация начинается хорошо, но затем все начинает прыгать как сумасшедшее, и я пока безуспешно пытался понять это.

var radToDeg = 180 / Math.PI;

function PlayState() {
  this.blocks = [];

  this.setup = function() {
    space.iterations = 100;
    space.gravity = new cp.Vect(0, 150);
    space.game = this;

    this.ground = space.addShape(new cp.SegmentShape(space.staticBody, new cp.v(0, 480), new cp.v(640, 480), 0));
    this.ground.setElasticity(0);
    this.ground.setFriction(1);
  };

  this.update = function() {
    space.step(this.dt);

    for (var i = 0; i < this.blocks.length; i++) {
      var block = this.blocks[i];
      block.sprite.x = block.body.p.x;
      block.sprite.y = block.body.p.y;
      block.sprite.angle = block.body.a * radToDeg;
    }

    if (isMouseDown("left")) {
      if (this.canAddBlock) {
        this.canAddBlock = false;
        this.addBlock(mouseX, mouseY);
      }
    } else {
      this.canAddBlock = true;
    }
  };

  this.draw = function() {
    clearCanvas();

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

    // this.ground.sprite.draw();
  };

  this.addBlock = function(x, y) {
    width = 64;
    height = 64;

    var newBlock = new Block(x, y, width, height);

    newBlock.body = space.addBody(new cp.Body(1, cp.momentForBox(1, width, height)));
    newBlock.body.setPos(new cp.v(x, y));
    newBlock.shape = space.addShape(new cp.BoxShape(newBlock.body, width, height));
    newBlock.shape.setElasticity(0);
    newBlock.shape.setFriction(1);
    this.blocks.push(newBlock);
  };
}

desiredFPS = 60;
switchState(new PlayState());

Исходный код довольно прост, у меня есть сомнения по поводу того, как я создаю землю, поскольку я не могу точно сказать, в каком положении она находится на самом деле. Кубики, кажется, находят его и сталкиваются с ним.

Другой исходный файл — это небольшой класс Block, который помогает мне упорядочить вещи:

Block = (function() {
  function constructor(x, y, width, height) {
    this.sprite = new Sprite("res/block.png", x, y);

    this.width = width;
    this.height = height;

  }

  constructor.prototype = {
    update: function() {

    }
  };

  return constructor;
})();

javascript html game-physics physics-engine chipmunk
person David Gomes    schedule 25.10.2013    source источник
comment
Я бы включил инспектор холста инструментов веб-разработчика Chrome и посмотрел, что происходит: html5rocks .com/en/tutorials/canvas/inspection, так как я боюсь, что не смог воспроизвести проблему   -  person silicakes    schedule 10.11.2013
comment
Можете ли вы разместить свою демонстрацию на jsfiddle.net?   -  person net.uk.sweet    schedule 13.11.2013
comment
Где ты застрял? Человек, я не нахожу здесь никаких проблем   -  person Just code    schedule 14.11.2013

Ответы (2)


arrow_upward
1
arrow_downward

Наблюдая за поведением, я думаю, что это так же просто, как спрайты и тела бурундуков, которые не вращаются вокруг одной и той же точки. Я считаю, что бурундук вращается вокруг центра масс. Похоже, спрайты вращаются вокруг верхнего левого угла. На самом деле, они могут рисовать и из этого угла, что объясняет, почему они забавно складываются и пересекают нижнюю плоскость.

Я думаю, вам нужно что-то подобное в функции update. (псевдокод):

offset = Vector(-width/2,-height/2) 
offset.rotate_by(block.body.a)

block.sprite.x = block.body.p.x + offset.x
block.sprite.y = block.body.p.y + offset.y
person AShelly    schedule 14.11.2013
comment
На самом деле, это отличная теория, я должен попробовать, я почти уверен, что это может быть так. - person David Gomes; 15.11.2013

arrow_upward
0
arrow_downward

Я совсем не знаком с бурундуком, но поигравшись с вашей демонстрацией, кажется, что физика вообще не подходит (для меня с самого начала). Просто догадка, глядя на ваш код, но мне кажется, что вы должны устанавливать размеры для экземпляра Sprite в своем классе Block, а не для самого экземпляра Block.

Block = (function() {
  function constructor(x, y, width, height) {
    this.sprite = new Sprite("res/block.png", x, y);

    // Do you mean to set the width and height of the sprite?
    this.sprite.width = width;
    this.sprite.height = height;

  }

  constructor.prototype = {
    update: function() {

    }
  };

  return constructor;
})();
person net.uk.sweet    schedule 10.11.2013