2

私は PhysicsJS で簡単な「アニメーション」を作成しました。

                balon = Physics.body('circle', {
                    x: 50,
                    y: random(20, 350),
                    vx: 0.45,
                    angle: random(0,360),
                    angularVelocity:-0.005,
                    radius: 60,
                    mass: 1,
                    fixed: true
                });
                    balon.view = new Image();
                    balon.view.src = 'ballon.png';

すべてうまくいきますが、「ボール」の影を追加する必要があります。これは、「ballon.png」という 2 つの画像を使用する必要があり、2 番目の画像 (影) を最初の画像の上に固定する必要があることを意味します (don'体と一緒に回転します）。

これを行うためのアイデアはありますか？

前もって感謝します ！

4

1 に答える 1

3

画像の 1 つを別の動作にする必要がある場合は、自分でレンダリングを処理する必要があります。

影用に別のレンダリング レイヤーを追加できます。影の画像を に格納すると、body.shadowこのようなことができます。

var shd = renderer.addLayer('shadows');
var bodies = [balon];
// draw the provided shadow view
shd.drawShadow = function( body, view ){
    var pos = body.state.pos
        ,v = body.state.vel
        ,t = renderer._interpolateTime || 0
        ,x
        ,y
        ,aabb
        ,ctx = shd.ctx;
        ;

    // interpolate positions
    x = pos.x + v.x * t;
    y = pos.y + + v.y * t;

    ctx.save();
    ctx.translate( x, y );
    ctx.drawImage(view, -view.width/2, -view.height/2, view.width, view.height);
    ctx.restore();
}
shd.render = function(){
    var body;

    for (var i = 0, l = bodies.length; i < l; i++){
        body = bodies[ i ];
        if ( body.shadow ){
            shd.drawShadow( body, body.shadow );
        }
    }
};
于 2014-06-12T18:25:32.867 に答える