Question

我已经开始与PixiJs合作开发一个简单的游戏。我试图基于按钮的单击来旋转精灵，然后允许用户顶部通过单击另一个按钮来停止旋转。

我无法实现的是确定旋转将执行多少次“循环”，例如，如果图像进行了3次，4次完整旋转，其停止位置确定了另一个旋转需要多少次剩余旋转全周期。是否有可以轻松检索的内容？

到目前为止，我的代码非常基本和简单：

    initGameLayout() {
        const top = new PIXI.Graphics();
        top.beginFill(0x2185c7);
        top.drawRect(0, 0, this.app.screen.width, this.margin);

        const headerStyle = new PIXI.TextStyle({
            fontSize: 24,
            fontStyle: 'italic',
            fontWeight: 'bold',
        });

        const headerText = new PIXI.Text('', headerStyle);
        headerText.x = Math.round((top.width - headerText.width) / 2);
        headerText.y = Math.round((this.margin - headerText.height) / 2);
        top.addChild(headerText);

        const spinButton = new PIXI.Graphics();
        spinButton.beginFill(0x2185c7);
        spinButton.drawRect(0, 0, this.app.screen.width, this.margin);
        spinButton.width = 150;
        spinButton.height = 100;
        spinButton.x = 620
        spinButton.y = 500
        spinButton.buttonMode = true;
        spinButton.interactive = true;
        spinButton.on('pointerdown', this.spinWheel);

        const spinButton2 = new PIXI.Graphics();
        spinButton2.beginFill(0x2185c3);
        spinButton2.drawRect(0, 0, this.app.screen.width, this.margin);
        spinButton2.width = 150;
        spinButton2.height = 100;
        spinButton2.x = 420
        spinButton2.y = 500
        spinButton2.buttonMode = true;
        spinButton2.interactive = true;
        spinButton2.on('pointerdown', this.stopWheel);

        this.bunny = new PIXI.Sprite.from('https://pixijs.io/examples-v4/examples/assets/bunny.png');
        this.bunny.width = 50;
        this.bunny.height = 50;
        this.bunny.anchor.set(0.5);
        this.bunny.x = this.app.screen.width / 2;
        this.bunny.y = this.app.screen.height / 2;

        this.bunny.rotate += 0.1;

        this.app.stage.addChild(top);
        this.app.stage.addChild(spinButton);
        this.app.stage.addChild(spinButton2);
        this.app.stage.addChild(this.bunny);

    }

    spinWheel() {
        if (!this.running)
        {
            this.running = true;
            this.app.ticker.add((delta: any) => {
                this.bunny.rotation += 0.1;
            });
        } else {
            this.running = false;
            this.bunny.rotation -= -0.1;
        }

    }

    stopWheel() {
        this.bunny.rotation -= -0.1;
        this.running = false;
    }

感谢任何人在上述问题上可以提供的帮助

-Jes

Answer 1

精灵的rotation成员是旋转弧度的度量。一整圈有2*Math.PI radians。您可以使用此信息来计算所需的值：

第一次单击精灵时，存储originalRotation = bunny.rotation;
再次单击精灵时，计算angleRotated = Math.abs(bunny.rotation - originalRotation);
然后numCycles = Math.floor(angleRotated / (2*Math.PI));
还有radiansUntilNextCycle = 2*Math.PI - (angleRotated % (2*Math.PI));

如果您更熟悉学位，则可以改用那些学位。交换：

bunny.rotation与bunny.angle
2*Math.PI与360

我假设“循环”是指360度的单次旋转。但是，您的问题很难理解，因为每次您使用“旋转”一词时，它似乎都有不同的含义。因此，这没有任何意义。

这也许也有助于解释为什么要使用这些值。您将如何处理他们？

pixiplayground.com是共享实时功能代码的好地方。

PixiJs 4转速并确定停止位置/轴

1 个答案: