0

我有一个带有一些弹跳球的简单物理模拟。我正在尝试添加一个“墙”的边界框，但有问题。

任何例子都会很棒:) 同时

在这里查看很酷的 ascii 艺术文档

 *    (wall)
 *      |
 *      | (normal)     (origin)
 *      | --->            *
 *      |
 *      |    (distance)
 *      ...................
 *            (100px)
 *
 *      e.g., Wall({normal : [1,0,0], distance : 100})

我的猜测是添加一堵墙

@walls.push = new Wall({normal : [1,0,0], distance : 5})

应该是距离原点仅 5 个像素的墙。

我的问题是： - 我们如何设置物理引擎的原点？我在 PhysicsEngine 中看不到 origin 属性， 我应该为其附加修饰符吗？

  • 发动机坐标是否在 0~1 范围内？即0.5？还是屏幕像素？

  • 因为墙壁只需要一个距离（实际上就像一个半径），方向由法线设定，它们是否总是向内朝向原点？即你不能有一面朝外的墙？

  • 默认 Walls() 查看源这应该创建一个视口大小的边界框，但似乎不起作用......

  • 到目前为止，这是一个带有代码/演示的公共回购

  • 这是一个没有墙的正在运行的演示:(
4

2 回答 2

2

物理引擎默认以原点为中心，并且必须使用上下文大小相对于中心定义墙壁。我没有尝试更改 PhysicsEngine 本身的起源，但无论如何它都会与表面上的修改器相关。

这是一个工作墙示例..只需单击球给它一些初始速度！

希望你能从这个例子中得到一些帮助！

祝你好运！

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var EventHandler    = require('famous/core/EventHandler');
var View            = require('famous/core/View');
var Transform       = require('famous/core/Transform');

var StateModifier   = require('famous/modifiers/StateModifier');

var PhysicsEngine   = require('famous/physics/PhysicsEngine');
var Body            = require('famous/physics/bodies/Body');
var Circle          = require('famous/physics/bodies/Circle');
var Wall            = require('famous/physics/constraints/Wall');

var context = Engine.createContext();

var handler = new EventHandler();

var physicsEngine = new PhysicsEngine();

var ball = new Surface ({
  size: [200,200],
  properties: {
    backgroundColor: 'red',
    borderRadius: '100px'
  }
})

ball.state = new StateModifier({origin:[0.5,0.5]});

ball.particle = new Circle({radius:100});

physicsEngine.addBody(ball.particle);

ball.on("click",function(){
  ball.particle.setVelocity([1,1,0]);
});

context.add(ball.state).add(ball)

var leftWall    = new Wall({normal : [1,0,0],  distance : window.innerWidth/2.0, restitution : 0.5});
var rightWall   = new Wall({normal : [-1,0,0], distance : window.innerWidth/2.0, restitution : 0.5});
var topWall     = new Wall({normal : [0,1,0],  distance : window.innerHeight/2.0, restitution : 0.5});
var bottomWall  = new Wall({normal : [0,-1,0], distance : window.innerHeight/2.0, restitution : 0.5});

physicsEngine.attach( leftWall,  [ball.particle]);
physicsEngine.attach( rightWall, [ball.particle]);
physicsEngine.attach( topWall,   [ball.particle]);
physicsEngine.attach( bottomWall,[ball.particle]);

Engine.on('prerender', function(){
  ball.state.setTransform(ball.particle.getTransform())
});
于 2014-04-30T23:07:27.810 回答
0

我在上面找到了 johntraver 的答案，它回答了我所有的问题：实现物理引擎。一个小问题是它对我不起作用（0.2.0）。这是因为 contextSize 被设置为 [0,0]，所以所有的墙都位于屏幕的中心。这导致我将墙设置变成一个函数并使用 Engine.nextTick() 调用它。这样，当墙壁就位时，上下文就具有大小。然后只是为了踢球，我在 Engine resize 上添加了对同一函数的另一个调用。这还要求在重新创建之前将墙壁分离，以避免创建无限数量的墙壁，而这些墙壁只会变得更小。

这是我对上述答案的调整：

/* globals define */
define(function(require, exports, module) {
    'use strict';
    // import dependencies
var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var EventHandler    = require('famous/core/EventHandler');
var View            = require('famous/core/View');
var Transform       = require('famous/core/Transform');

var StateModifier   = require('famous/modifiers/StateModifier');

var PhysicsEngine   = require('famous/physics/PhysicsEngine');
var Body            = require('famous/physics/bodies/Body');
var Circle          = require('famous/physics/bodies/Circle');
var Wall            = require('famous/physics/constraints/Wall');


    function wallBounce() {
        var context = Engine.createContext();

        var contextSize;// = context.getSize();

        var handler = new EventHandler();

        var physicsEngine = new PhysicsEngine();

        var ball = new Surface ({
          size: [200,200],
          properties: {
            backgroundColor: 'red',
            borderRadius: '100px'
          }
        })

        ball.state = new StateModifier({origin:[0.5,0.5]});

        ball.particle = new Circle({radius:100});

        physicsEngine.addBody(ball.particle);

        ball.on("click",function(){
          ball.particle.setVelocity([.1,.13,0]);
        });

        context.add(ball.state).add(ball);
        function setWalls() {
            //console.log(contextSize[0]);
            contextSize = context.getSize();
            var leftWall    = new Wall({normal : [1,0,0],  distance : contextSize[0]/2.0, restitution : .5});
            var rightWall   = new Wall({normal : [-1,0,0], distance : contextSize[0]/2.0, restitution : .5});
            var topWall     = new Wall({normal : [0,1,0],  distance : contextSize[1]/2.0, restitution : .5});
            var bottomWall  = new Wall({normal : [0,-1,0], distance : contextSize[1]/2.0, restitution : .5});

            physicsEngine.detachAll();
            physicsEngine.attach( leftWall,  [ball.particle]);
            physicsEngine.attach( rightWall, [ball.particle]);
            physicsEngine.attach( topWall,   [ball.particle]);
            physicsEngine.attach( bottomWall,[ball.particle]);
        };
        Engine.nextTick(setWalls);
        Engine.on('resize',setWalls);

        Engine.on('prerender', function(){
          ball.state.setTransform(ball.particle.getTransform())
        });
    };

    new wallBounce();

});
于 2014-06-02T22:22:54.133 回答