Question

我正在使用Typescript使用PIXI.js为圆圈设置动画。目前，圆圈从底部边界反弹，然后从右边界反弹。我还需要它从顶部和左侧反弹。

我对这门语言很陌生，我很难理解，大部分都是。我尝试过偎依＆＃39;其他＆＃39;陈述，但我不确定是否甚至假设在这种情况下被纳入。

＆＃39; main.ts＆＃39;

///<reference path="PIXI.d.ts"/>
///<reference path="setup.ts"/>

var drawing:PIXI.Graphics = new PIXI.Graphics();
stage.addChild(drawing);

animate();
function animate() {
    renderer.render(stage);
    draw();
    requestAnimationFrame(animate);
}

var x:number = 0;
var y:number = 0;

var xspeed:number = 2;
var yspeed:number = 2;

// MY CODE

function draw(){

    // clear drawing
    drawing.clear();

    // draw circle
    drawing.beginFill(0x999999);
    drawing.drawCircle(x,y,100);

    // move circle down and to the right for the next frame
    x += xspeed;
    y += yspeed;

    // set boundary for circle to bounce from y
    if(y > 600){
        // bounce the circle
        yspeed *= -1;
        // affix to the bottom of the stage
        y = 600;
    }

    // set boundary for circle to bounce from x
    if(x > 800){
        xspeed *= -1;
        x = 800;
    }

}

HTML

    <script src="src/pixi.js"></script>
    <script src="src/setup.js"></script>
    <script src="src/main.js"></script>
</body>
</html>

Answer 1

我认为你到目前为止所做的一切都很好。您只需要添加零边界检查：

// set boundaries for circle to bounce from y
if(y > 600){
    // bounce the circle
    yspeed *= -1;
    // affix to the bottom of the stage
    y = 600;
}
else if(y < 0) {
    // bounce the circle
    yspeed *= -1;
    // affix to the top of the stage
    y = 0;
}

// set boundaries for circle to bounce from x
if(x > 800){
    xspeed *= -1;
    x = 800;
}
else if(x < 0){
    xspeed *= -1;
    x = 0;
}

您可能想尝试的另一件事是绘制圆圈一次，并设置其x和y属性，而不是每帧重绘一次：

var drawing:PIXI.Graphics = new PIXI.Graphics();
drawing.beginFill(0x999999);
drawing.drawCircle(0,0,100);
stage.addChild(drawing);


function draw(){

    // move circle
    drawing.x = x;
    drawing.y = y;

    // move circle down and to the right for the next frame
    x += xspeed;
    y += yspeed;

使用带有Typescript的PIXI.js为圆圈设置动画

1 个答案: