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

0

上記のjohntraverの回答を見つけて、物理エンジンの実装に関する私のすべての質問に答えました。1 つの小さな問題は、それが機能しなかったことです (0.2.0)。これは、contextSize が [0,0] に設定されたため、すべての壁が画面の中央に配置されたためです。これにより、壁のセットアップを関数に変換し、Engine.nextTick() で呼び出すようになりました。このように、壁が配置されたときにコンテキストにサイズがあります。次に、キックのために、エンジンのサイズ変更で同じ関数に別の呼び出しを追加しました。また、フィールドが小さくなるだけで無数の壁を作成することを避けるために、再作成する前に壁を取り外す必要がありました。

上記の答えの私の微調整は次のとおりです。

/* 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 に答える