@koreez/phaser3-ninepatch/example/index.ts

Phaser3 Nine Patch

/// <reference path="../types/phaser.d.ts" />

import "phaser";
import { NinePatch } from "../src/com/koreez/plugin/ninepatch/NinePatch";
import { NinePatchPlugin } from "../src/com/koreez/plugin/NinePatchPlugin";

export default class Game extends Phaser.Game {
    public centerX: number;
    public centerY: number;
    constructor(config: GameConfig) {
        super(config);
    }
}

function preload() {
    console.log("preload");
    this.load.image("metalPanel_blueCorner", "static/assets/metalPanel_blueCorner.png");
    this.load.image("squareGreen", "static/assets/squareGreen.png");
    this.load.image("squareYellow", "static/assets/squareYellow.png");
}

function create() {
    console.log("create");
    // We specify the x and y position, the width and height and the key for the image of the image.
    // It will be automatically scaled!
    const metalPanel = this.add.ninePatch(200, 200, 300, 300, "metalPanel_blueCorner", null, {
        bottom: 11, // Amount of pixels for bottom
        left: 11, // Amount of pixels for left
        right: 53, // Amount of pixels for right
        top: 32 // Amount of pixels for top
    });
    let metalPanelDir = 0.6;
    metalPanel.setTint(0xff0000);
    this.tweens.add({
        /* tslint:disable */
        targets: metalPanel,
        duration: 3000,
        y: 190,
        onUpdate: (tween: any) => {
            metalPanel.resize(metalPanel.width + metalPanelDir, metalPanel.height + metalPanelDir);
        },
        onYoyo: (tween: any) => {
            metalPanelDir = -1 * metalPanelDir;
        },
        onRepeat: (tween: any) => {
            metalPanelDir = -1 * metalPanelDir;
        },
        repeat: -1,
        yoyo: true
        /* tslint:enable */
    });
    setTimeout(() => {
        metalPanel.setTintFill(0xff0000);
        setTimeout(() => {
            metalPanel.clearTint(0xff0000);
        }, 3000);
    }, 3000);
    let squareGreen = this.make.ninePatch({
        /* tslint:disable */
        key: "squareGreen",
        width: 100,
        height: 50,
        patchesConfig: {
            bottom: 14, // Amount of pixels for bottom
            left: 6, // Amount of pixels for left
            right: 6, // Amount of pixels for right
            top: 10 // Amount of pixels for top
        }
        /* tslint:enable */
    });

    squareGreen.x = 450;
    squareGreen.y = 50;
    this.add.existing(squareGreen);
    let squareGreenDir = 1;
    this.tweens.add({
        /* tslint:disable */
        targets: squareGreen,
        duration: 3000,
        x: 550,
        onUpdate: (tween: any) => {
            squareGreen.resize(squareGreen.width + squareGreenDir, squareGreen.height);
        },
        onYoyo: (tween: any) => {
            squareGreenDir = -1 * squareGreenDir;
        },
        onRepeat: (tween: any) => {
            squareGreenDir = -1 * squareGreenDir;
        },
        repeat: -1,
        yoyo: true
        /* tslint:enable */
    });

    this.cache.custom.ninePatch.add("squareYellow", {
        /* tslint:disable */
        bottom: 14, // Amount of pixels for bottom
        left: 6, // Amount of pixels for left
        right: 6, // Amount of pixels for right
        top: 10 // Amount of pixels for top
        /* tslint:enable */
    });

    const squareYellow = this.add.ninePatch(550, 500, 300, 100, "squareYellow");
    let squareYellowDir = 0.6;
    this.tweens.add({
        /* tslint:disable */
        targets: squareYellow,
        duration: 3000,
        x: 150,
        repeat: -1,
        yoyo: true,
        onUpdate: (tween: any) => {
            squareYellow.resize(squareYellow.width + squareYellowDir, squareYellow.height);
        },
        onYoyo: (tween: any) => {
            squareYellowDir = -1 * squareYellowDir;
        },
        onRepeat: (tween: any) => {
            squareYellowDir = -1 * squareYellowDir;
        }
        /* tslint:enable */
    });

    // Or we use the Constructor
    const newNinePatch = new NinePatch(this, 630, 300, 200, 50, "squareGreen", null, {
        /* tslint:disable */
        bottom: 14, // Amount of pixels for bottom
        left: 6, // Amount of pixels for left
        right: 6, // Amount of pixels for right
        top: 10 // Amount of pixels for top
        /* tslint:enable */
    });
    this.add.existing(newNinePatch);
    let newNinePatchDir = 0.6;
    this.tweens.add({
        /* tslint:disable */
        targets: newNinePatch,
        duration: 3000,
        rotation: Math.PI,
        repeat: -1,
        yoyo: true,
        onUpdate: (tween: any) => {
            newNinePatch.resize(newNinePatch.width + newNinePatchDir, newNinePatch.height);
        },
        onYoyo: (tween: any) => {
            newNinePatchDir = -1 * newNinePatchDir;
        },
        onRepeat: (tween: any) => {
            newNinePatchDir = -1 * newNinePatchDir;
        }
        /* tslint:enable */
    });
    setTimeout(() => {
        newNinePatch.setTexture("squareYellow");
    }, 4000);
}

document.onreadystatechange = () => {
    if (document.readyState === "complete") {
        const config = {
            banner: true,
            height: 600,
            plugins: {
                global: [{ key: "NinePatchPlugin", plugin: NinePatchPlugin, start: true }]
            },
            scene: {
                create,
                preload
            },
            type: Phaser.AUTO,
            width: 800
        };
        (window as any).game = new Game(config);
    }
};