rexrainbow / phaser3-rex-notes

Notes of phaser3 engine
MIT License
1.2k stars 260 forks source link

NinePatch: Is it possible to scale edges only? #294

Closed zpxp closed 2 years ago

zpxp commented 2 years ago

Is it possible to scale the edges of a 3x3 nine patch while maintaining the width and height of the center section? Is it also possible to do it with a 3x1 nine patch. We need to stretch the edges of a long image but maintain the width of some graphics in the center of it.

My code looks like this

this.rexUI.add
.label({
    height: 42,
    anchor: {
        width: "70%",
        centerY: "100%-200",
        left: "18%"
    },
    background: this.rexUI.add.ninePatch({
        x: 0,
        y: 0,
        key: "phasedivider",
        columns: [187, 1310 - 187 - 187, 187],
        rows: [42],
        stretchMode: {
            edge: "scale",
            // tried removing this but it still scales
            internal: "scale"
        }
    })
})
.setOrigin(0, 0)
.layout();
zpxp commented 2 years ago

I can add a zero as the first column and this appears to make it work, wondering if theres an official way to do it.

columns: [0, 187, 1310 - 187 - 187, 187]
rexrainbow commented 2 years ago

Here is a demo of scale/stretch corners in a 3x1 nine patch game object, see line 20-27.

            columns: [
                { width: 80, stretch: 1 },
                { width: 80, stretch: 0 },
                { width: 80, stretch: 1 },
            ],
            rows: [
                { height: 80, stretch: 1 }
            ],

Part with stretch: 0 won't be stretched.

Since stretch edges and center areas is the general use case. I did not release this internal parameter on document.

zpxp commented 2 years ago

Thank you that will work perfectly