Jump to content

How do I scale a line using a Tween?


skytreader
 Share

Recommended Posts

I think I'm missing something very basic about how Phaser Tweens operate but I just can't get this simple thing to work.

Imagine a very simple scene:

  • canvas of 800x640
  • red circle in the center
  • two blue lines in a 9:00 position
    private create(): void {
        const circ = this.add.circle(
            400, 320, 200, 0xff0000
        );

        const l1 = this.add.line(
            0, 0, 400, 320, 400, 100, 0x0000ff
        ).setOrigin(0);

        const l2 = this.add.line(
            0, 0, 400, 320, 200, 320, 0x0000ff
        ).setOrigin(0);
    }

So far so good.

Now I want to scale this simple figure, same config 1.5x its current size:

    private create(): void {
        const circ = this.add.circle(
            400, 320, 200, 0xff0000
        );

        const l1 = this.add.line(
            0, 0, 400, 320, 400, 100, 0x0000ff
        ).setOrigin(0);

        const l2 = this.add.line(
            0, 0, 400, 320, 200, 320, 0x0000ff
        ).setOrigin(0);

        this.tweens.add({
            targets: [circ, l1, l2],
            scale: 1.5,
            yoyo: false,
            duration: 2000,
            ease: 'Sine.easeInOut'
        });
    }

Expected behavior:

  1. the circle expands from the center
  2. the lines expand as well, ideally where they meet

Actual behavior:

As things stand, only #1 fit my expectations. The lines, however, translate as opposed to merely scaling. And the translation seems affected by the scale parameter passed to tweens.add. What gives? What am I missing here?

Given the various configurations for "origin" wrt lines in Phaser 3, the worst I was expecting was that the lines would emanate/grow differently than the circle (which emanates from the center/origin). But I definitely expect the lines to stay still/keep their intersection at the circle's center.

Can you explain what exactly Phaser is doing here and what might I do to get my desired effect?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...