[3.86.0] Resize RenderTexture/dynamicTexture issue

[rexrainbow]

Version

• Phaser Version: 3.86.0
• Operating system: window
• Browser: chrome/firefix

Description

In dynamicTexture's setSize method, it invokes renderTarget.resize method. This renderTarget.resize method will check this.autoResize, but dynamicTexture's autoResize is false. So that the resize action won't run.

[photonstorm]

Hmm - yes. It's half right and half wrong. We don't want them to auto resize at all, because they should remain the same size they were created and shouldn't get changed if the renderer resizes. But equally, the setSize call needs a way to actually resize them. I'll have a think about it.

[Scross086]

Hi @photonstorm ,

Would this also be related? We are using the rope functionality and rendertexture in order to print 'curved text' to our game. In phaser 3.80.0, this works correctly, in 3.86 - we are seeing some kind of distortion with the same code: Many thanks

3.80.0

3.86.0

`import { FontStyleKey } from '../../../config/font_style_key'; import { BaseScene } from '../../phaser_scenes/base_scene'; import { FontFactory } from '../factories/font_factory';

export type ICurvedTextParams = { text: string; textStyleKey: FontStyleKey; getPoints: (textWidth: number) => { x: number; y: number }[]; offsetY: number; };

export class CurvedText extends Phaser.GameObjects.Container { private static id = 0; protected renderTexture: Phaser.GameObjects.RenderTexture; protected text = ''; protected textStyleKey: FontStyleKey; protected tempText: Phaser.GameObjects.Text; protected rope: Phaser.GameObjects.Rope; protected targetTextureId: string; protected getPoints: (textWidth: number) => { x: number; y: number }[]; protected offsetY: number;

constructor(scene: BaseScene, x = 0, y = 0, options: ICurvedTextParams) {
    super(scene, x, y);

    this.targetTextureId = `curved_text_${CurvedText.id}`;
    CurvedText.id += 1;

    this.textStyleKey = options.textStyleKey;
    this.getPoints = options.getPoints;
    this.offsetY = options.offsetY;

    this.renderTexture = scene.add.renderTexture(0, 0);
    this.renderTexture.setOrigin(0, 0);
    this.add(this.renderTexture);

    this.tempText = FontFactory.get.addText(this.textStyleKey, 0, 0, this.text, false, this.scene);
    this.tempText.setResolution(2);
    this.add(this.tempText);

    this.rope = this.scene.add.rope(0, 0, this.targetTextureId, undefined, this.getPoints(this.tempText.width), true);
    this.add(this.rope);

    this.setText(options.text);
}

/**
 * Update text. Please note, this is very expensive!
 * @param text new text
 */
public setText(text: string): void {
    if (text === this.text) {
        return;
    }
    this.text = text;
    this.updateRenderTexture();
}

protected updateRenderTexture(): void {
    this.tempText.text = this.text;
    this.tempText.setVisible(true);
    this.renderTexture.resize(this.tempText.width, this.tempText.height);
    this.renderTexture.clear();
    this.renderTexture.draw(this.tempText);

    this.renderTexture.saveTexture(this.targetTextureId);
    this.rope.setTexture(this.targetTextureId);
    this.rope.width = this.tempText.width;
    this.rope.height = this.tempText.height;
    this.rope.setPoints(this.getPoints(this.tempText.width));

    this.rope.x = 0;
    this.rope.y = this.offsetY;

    this.renderTexture.setVisible(false);
    this.tempText.setVisible(false);
}

protected override preDestroy(): void {
    super.preDestroy();
    this.rope.destroy();
    this.tempText.destroy();
    this.renderTexture.destroy();
}

getCurvedTextWidth() {
    return this.rope.displayWidth;
}
/**
 * Calculates the positions of points on a circle. Can be used to create a curved text as the function in TCurvedTextOptions.
 *
 * @param {number} radius - The radius of the circle.
 * @param {number} pointsNumber - The number of points to be calculated on the circle.
 * @param {boolean} curveUpwards - Optional. Specifies whether the curve should face upwards or downwards. Default is false.
 * @returns {Array} - An array of objects representing the x and y coordinates of the points on the circle.
 */
static getCirclePoints(radius: number, pointsNumber: number, curveUpwards = false) {
    return (textWidth: number) => {
        const step = Math.PI / pointsNumber;
        let ropePoints = pointsNumber - Math.round((textWidth / (radius * Math.PI)) * pointsNumber);
        ropePoints /= 2;
        const points = [];
        for (let i = pointsNumber - ropePoints; i > ropePoints; i--) {
            const x = radius * Math.cos(step * i);
            const y = radius * Math.sin(step * i);
            points.push({ x: x, y: curveUpwards ? y : -y });
        }
        return points;
    };
}

}

`