PixiJs 4 скорость вращения и определение места остановки / оси - PullRequest
Новая
       33

PixiJs 4 скорость вращения и определение места остановки / оси

0 голосов
/ 09 июля 2019

Я начал работать с 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

1 Ответ

0 голосов
/ 09 июля 2019

Элемент rotation спрайта является мерой радиан, на которые он вращается.В полном круге 2*Math.PI радиан .Вы можете использовать эту информацию для вычисления желаемых значений:

  1. При первом щелчке спрайта сохраните originalRotation = bunny.rotation;
  2. При повторном нажатии на спрайт вычислите angleRotated = Math.abs(bunny.rotation - originalRotation);
  3. Тогда numCycles = Math.floor(angleRotated / (2*Math.PI));
  4. И radiansUntilNextCycle = 2*Math.PI - (angleRotated % (2*Math.PI));

Если вы более знакомы с степенями, вы можете использовать их вместо.Обмен:

IЯ предполагаю, что под «циклом» вы подразумеваете один поворот на 360 градусов.Тем не менее, ваш вопрос трудно понять, потому что каждый раз, когда вы используете слово «вращение», оно, кажется, имеет другое значение.Так что это не совсем имеет смысла.

Это также может помочь объяснить , почему вам нужны эти значения;что вы будете с ними делать?

И pixiplayground.com - отличное место для обмена живым, функциональным кодом.

...