skytreader Posted June 18, 2021 Share Posted June 18, 2021 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: the circle expands from the center 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 More sharing options...
Recommended Posts