rexrainbow / phaser3-rex-notes Goto Github PK

Good day!
With rollup i get warn:
Circular dependency: node_modules\phaser3-rex-plugins\templates\ui\menu\Menu.js -> node_modules\phaser3-rex-plugins\templates\ui\menu\ExpandSubMenu.js -> node_modules\phaser3-rex-plugins\templates\ui\menu\Menu.js

Is there a way I can destroy a particular area inside a bbcode text object?

I made a small demo: https://codepen.io/alexandernst/pen/LYPobqO?editors=0010

Hey Rex! First of all thanks for this amazing toolset. It does wonders!

I'm curious about commenting this line at TextStyle.buildFont from TextBase:

This works fine when there is not other BBCodeText elements on the same scene, but some weird lineHeight issues arise when adding multiple instances on a scene unless I remove this comment. The lines cover each other and become shorter.

But only uncommenting this brings some jittering when using it alongside TextTyping, because the bold styling usually makes the font a few pixels taller.

I made this shameful ugly hack because I'm short on time to think on an elegant solution, but basically it should only rebuild metrics when the font or its size changes, not the style:

buildFont() {
  const oldFont = this._font;
  const newFont = this.fontStyle + ' ' + this.fontSize + ' ' + this.fontFamily;

  if(newFont !== this._font) {
    this._font = newFont;

    if(!oldFont.match(new RegExp(this.fontSize + ' ' + this.fontFamily))) {
      this.metrics = MeasureText(this);
    }
  }

  return this;
}

What are your thoughts?

don't know why, I have already comment this out in the webpack.plugins.config.js:

but somehow it was still combined into the output.

Hi!

Here is the code to reproduce the issue

import UIPlugin from '../../templates/ui/ui-plugin.js';

// LAYOUT
const SCALE = window.devicePixelRatio
const SCREEN_WIDTH = window.innerWidth*SCALE
const SCREEN_HEIGHT = window.innerHeight*SCALE
const MENU = {
    x: SCREEN_WIDTH/2,
    y: SCREEN_HEIGHT/2,
    w: 775*SCALE,
    h: 531*SCALE,
    border: 115,
    safe: {left: 45, top: 75, right: 55, bottom: 80}, // left, top, right, bottom
    border_scale: 1,
}

// SCENE
class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }

    preload() {
        this.load.image('menu', 'https://i.ibb.co/6gmTJWN/menu.png'); // 775x531
    }

    create() {
        this.addNinePatchFixed(MENU.x, MENU.y, MENU.w, MENU.h, MENU.border)
        this.rexUI.add.roundRectangle(
            MENU.x-MENU.w/2+MENU.safe.left*MENU.border_scale, // x
            MENU.y-MENU.h/2+MENU.safe.top*MENU.border_scale, // y
            MENU.w-MENU.safe.right*MENU.border_scale*2, // w
            MENU.h-MENU.safe.bottom*MENU.border_scale*2, // h
            0,
            0x00ff00, 
            0.4)
            .setDepth(10).setOrigin(0, 0);
    }

    addNinePatchFixed(x, y, w, h, value) {
            return this.rexUI.add.ninePatch({
              x: x, y: y,
              width: w, height: h,
              key: 'menu',
              columns: [value, undefined, value],
              rows: [value, undefined, value],
              stretchMode: 0
          }).setOrigin(0.5, 0.5)
  }
}

// GAME
var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        }]
    },
    scene: Demo,
};
var game = new Phaser.Game(config);

You have to run this code locally, then go to browser and reload page with different DPR settings (1,2,3):

DPR1

DPR2

DPR3

So here is the issue - since I am making responsive games that have to not look blurry on high-dpr (retina) displays my Phaser game width, height should be equal to window.innerWidth*window.devicePixelRation x window.innerHeight*window.devicePixelRation - that means game resizes to fully fit the device screen. Then because of game.config.scale.mode = Phaser.Scale.FIT the canvas will be resized to window.innerWidth x window.innerHeight.

Since the ninepatch border is never scaled and being set as absolute value, its size will be different on screens with different DPR, that's what screenshots prove. Seems like I can not affect this border scale, but I definetely need to do it. For example on DPR=2 screen I want my border to be x2-scaled to visually appear same size as on DPR=1 screen. Same for DPR=3 screen - my border should be scaled x3

there is a way I tried to solve that issue by scaling the ninepatch with setScale(SCALE) after initialization:

import UIPlugin from '../../templates/ui/ui-plugin.js';

// LAYOUT
const SCALE = window.devicePixelRatio
const SCREEN_WIDTH = window.innerWidth*SCALE
const SCREEN_HEIGHT = window.innerHeight*SCALE
const MENU = {
    x: SCREEN_WIDTH/2,
    y: SCREEN_HEIGHT/2,
    w: 775,
    h: 531,
    border: 115,
    safe: {left: 45, top: 75, right: 55, bottom: 80}, // left, top, right, bottom
}

// SCENE
class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }

    preload() {
        this.load.image('menu', 'https://i.ibb.co/6gmTJWN/menu.png'); // 775x531
    }

    create() {
        this.addNinePatchFixed(MENU.x, MENU.y, MENU.w, MENU.h, MENU.border).setScale(SCALE);
        this.rexUI.add.roundRectangle(
            MENU.x-15, // x
            MENU.y-5, // y
            MENU.w-MENU.safe.right-MENU.safe.left, // w
            MENU.h-MENU.safe.bottom-MENU.safe.top, // h
            0,
            0x00ff00, 
            0.4)
            .setDepth(10).setScale(SCALE);
    }

    addNinePatchFixed(x, y, w, h, value) {
            return this.rexUI.add.ninePatch({
              x: x, y: y,
              width: w, height: h,
              key: 'menu',
              columns: [value, undefined, value],
              rows: [value, undefined, value],
              stretchMode: 0
          }).setOrigin(0.5, 0.5)
  }
}

// GAME
var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        }]
    },
    scene: Demo,
};
var game = new Phaser.Game(config);

There is a mess in my head after a long workday so I will try to look into that once again tomorrow. Scenario 2 seems working, but I don't like something about it intuitively but cant figure out what's wrong at the moment.

Any help or ideas in solving that task will be highly appreciated. Thanks in advance!

Hi,

I am running Phaser within a Cordova / Phonegapp application so that I can combine various technologies in my app. Because of this, I am not able to use the import functionality to load the rexplugin, so using a workaround I am doing this:

In my index.html I have the following code (short snippet, not full code)

<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/phaser.min.js"></script>
  <script language="javascript" type="module">
	import * as UIPlugin from '../Objects/rexuiplugin.min.js';
	window.UIPlugin=UIPlugin;
 </script>
</head>
<body>
  <div id="app" class="color-theme-white theme-blue">
        <div class="page-content page_image">
			  			<div id="game" class="row">
			</div>

        </div>
    </div>
  <script src="js/app.js" type=""></script>
</body>
</html>

Then in my app code, which is fully cordova compatible, I use the following code to load rexuiplugin:

function delayedStartActivities(){
    if (!window.plugins) {
        setTimeout(delayedStartActivities, 300);
        return;
    }
    
    appRequestReady();
    //Keep screen awake
    window.plugins.insomnia.keepAwake();
	
	
	//Now load Phaser

	phaserGame = new Phaser.Game(config);
	const model = new Model();
	phaserGame.globals = { model, bgMusic: null };
	phaserGame.scene.add('Boot', BootScene);
	phaserGame.scene.add('Preloader', PreloaderScene);
	phaserGame.scene.add('Title', TitleScene);
	phaserGame.scene.add('Options', OptionsScene);
	phaserGame.scene.add('Credits', CreditsScene);
	phaserGame.scene.add('Transition', TransitionScene);

	phaserGame.plugins.install('rexUI', window.UIPlugin);

	phaserGame.scene.add('Home', HomeScene);
	phaserGame.scene.start('Boot');
}

This results in the message:
Invalid Plugin: rexUI

And phaserGame.plugins gives back 0 plugins, so it is not loaded.

For some reference, please note that I cannot load this in my config.js, as this is not a module file that can be imported and defined globally.

Hope you can explain if this is a bug, or I am doing something wrong here.

https://codepen.io/dranitski/pen/gOOKQvg?editors=0010

https://rexrainbow.github.io/phaser3-rex-notes/docs/site/gridtable/#get-cell gridTable.getCell is not a function, but described in docs.

gridTable.getCellContainer is also not working.

Can you please advice how to get cell and cell container?

Here is an example https://codepen.io/dranitski/pen/oNNOoQY

Click anywhere to trigger game.destroy(true). If nine-patch on screen when game destroys - it causes error

phaser.min.js:1 
Uncaught TypeError: Cannot read property 'removeKey' of null
    at initialize.destroy (phaser.min.js:1)
    at initialize.destroy (phaser.min.js:1)
    at e.preDestroy (phaser.min.js:1)
    at e.value (<anonymous>:1:8929)
    at e.destroy (phaser.min.js:1)
    at initialize.shutdown (phaser.min.js:1)
    at initialize.destroy (phaser.min.js:1)
    at initialize.h.emit (phaser.min.js:1)
    at initialize.destroy (phaser.min.js:1)
    at initialize.destroy (phaser.min.js:1)

in the newest version it seems a mistake caused by code maintainance:
in plugins\input\button\Button.js

class Button {
    ....
    shutdown() {
            super.shutdown();    // error throws: TypeError: (intermediate value).shutdown is not a function

there is no super class.. :)

is it possible to scroll gridTable horizontally in rexUI ?

Hi,

I might be missing something but using latest Phaser (3.17) I've copied rexvirtualjoystickplugin.min.js to a local plugin folder and instantiated it -

    plugins: {
        global: [{
            key: 'rexVirtualJoyStick',
            plugin: VirtualJoyStickPlugin,
            start: true
        }],
    },

but when I try to call it from the scene

    let plugin = this.plugins.get('rexVirtualJoyStick');

it returns null

Hi,

I am trying to use BoardPlugin, but when I add the plugin I get the following error in console.

BasePlugin.js:46 Uncaught TypeError: Cannot read property 'game' of undefined at BoardPlugin.BasePlugin (BasePlugin.js:46) at new ScenePlugin (ScenePlugin.js:34) at new BoardPlugin (board-plugin.js:20) at PluginManager.createEntry (PluginManager.js:591) at PluginManager.start (PluginManager.js:567) at PluginManager.install (PluginManager.js:460) at PluginManager.boot (PluginManager.js:166) at EventEmitter.emit (index.js:201) at Game.boot (Game.js:383) at HTMLDocument.check (DOMContentLoaded.js:38)

I've been debugging and the error is because when you instantiate the BoardPlugin class the builder only passes a pluginManager parameter but not the scene.
Therefore, the scene is of type pluginManager and pluginManager is undefined.

In the imports of the Gashapon file, there is a typo in the import path.
import IsEmpty from 'rexPlugins/utils/Object/IsEmpty.js';
should be:
import IsEmpty from 'rexPlugins/utils/object/IsEmpty.js'

Otherwise you get an error similar to "Module not found Error: can't resolve..." where it specifies the above "Object" path in the Gashapon file.

The links for the source code in docs is not working.

Good day.
I get an error when i slide up the table cells if the height of all cells is less than the height of the gridTable.
For example, if in your simplecode you specify the number of cells equal to 10

https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scenemanager/#start-scene

Phaser v3.15.1, I didn't found launch method, maybe it's deprecated.
scene.scene.launch(key, data);

Hi, your notes and examples is greatly helpful for me, but I tried to use the example of ui-textbox to apply to my game project, I don't know modified the code to make the

1. textbox stop when it comes to last page, and
2. when user click the last page, it will become invisible ?

It always automatically be invisible after showing the last word in last page, but I want player to click the last page make it invisible.

Hello, good work!

you have some mistake in https://rexrainbow.github.io/phaser3-rex-notes/docs/site/arcade/index.html#add-a-game-object-to-physics-world:

scene.physics.existing(gameObject, isStatic);

it have to be

scene.physics.add.existing(gameObject, isStatic);

I need to create the input box only 'number' type in phaser3,
Could you please rply immediately?

If 2 scenes have ScenePlugin (created in preload function) to create some UI elements, then scene A call scene B, it's getting warning Scene Plugin key in use: rexuiplugin, and thrown an error:
Uncaught TypeError: Cannot read property 'add' of undefined.

This 'add' was used as: 'this.rexUI.add.' in scene B.

If I use another key, the UI won't work and stop.

Does the scroller plugin work? I cannot run the example.

when I copy the whole codes into phaser3-example project and run it, when I drag the table on the left, it not work, only mouse on the right-bottom,it works

https://codepen.io/rexrainbow/pen/XyJbWX?editors=0010 or
https://codepen.io/rexrainbow/pen/vPWzBa?editors=1010

UPD: created interactive version for that issue https://codepen.io/dranitski/pen/dyyLNNM

Hi! To reproduce the issue you can include this code:

import NinePatchPlugin from '../../plugins/ninepatch-plugin.js'

class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }

    preload() {
        this.load.image('bg3', 'assets/images/actionbox.png'); // 372 x 561
    }

    create() {

        this.add.rexNinePatch({
            x: 200, y: 430,
            width: 372*2, height: 561/2,
            key: 'bg3',
            columns: [100, undefined, 100],
            rows: [100, undefined, 100],
            stretchMode: 0
        }).setScale(0.5)

        this.add.rexNinePatch({
            x: 200, y: 200,
            width: 372*2, height: 561,
            key: 'bg3',
            columns: [100, undefined, 100],
            rows: [100, undefined, 100],
            stretchMode: 0
        }).setScale(0.5)

        this.add.rexNinePatch({
            x: 500, y: 200,
            width: 372/2, height: 561,
            key: 'bg3',
            columns: [100, undefined, 100],
            rows: [100, undefined, 100],
            stretchMode: 0
        }).setScale(0.5)
    }

    update() {
    }
}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    scene: Demo,
    plugins: {
        global: [{
            key: 'rexNinePatch',
            plugin: NinePatchPlugin,
            start: true
        }]
    }
};

var game = new Phaser.Game(config);

into examples/ninepatch/test.js for example, then download this asset
and save as assets/images/actionbox.png, then run main=./examples/ninepatch/test.js webpack from root of project

here is the problem:

the middle part of image is being scaled and have strange visual artifacts even when I expect rexNinePatch instance to not scale the middle part at all. What I want to do here is just to use my UI element image and scale in not distorting corners.
More - stretchMode seems not affecting the result at all.

I am using Google Chrome Version 78.0.3904.87 (Official Build) (64-bit)
Phaser 3.20.1
latest rexplugins (just pulled, commit a398246)

thank you for your time

this lib looks great and worth to have a try 👍
but before that I have a few of questions:

1. is there .d.ts definition available?
2. is it possible to compile with ES5? (our environment can't fully support es6+ so have to use es5)

thank you~

Hi Rex.
First of all, I'd like to thank you for all the work you're doing. Thanks to you, the lives of thousands of developers around the world have become easier :)
I have a question about your WebFontLoader plugin. Maybe it's not the right place to ask, but still.
I download fonts in the preload() phase. We're talking about the 'Noto Sans' family, but perhaps the same problem is true for other fonts as well.
When I use the usual font "Noto Sans" - everything works as it should.
But the gap occurs when I try to use "Noto Sans Hebrew".

Judging by the Network tab, the font is loaded on time, before the text is initialized, but the first time it is used it does not work. For example, in the create() phase, I'm trying to create text - in Chrome, it will load a standard font for the system instead of special, but in Firefox, for example, it will not appear at all.
If you reload the page (without clearing the cache), it will work. If you clear the cache, the error occurs again.

What do you think may be the problem?
Thanks in advance for the answer.

Links to the demo repo:
https://gitlab.com/ikeba/phaser-typescript-skeleton
pages: https://ikeba.gitlab.io/phaser-typescript-skeleton/

https://codepen.io/dranitski/pen/wvvZgaq here I created an example

I want your test texture middle part (the triangle) to be stretched according to docs:

columns : Configuration of columns.
A number array, like [20, 20, 20], or [20, undefined, 20] : Width of each column. undefined value will be replaced by remainder value from texture width.
Width of odd columns (column 0, column 2, ...) will be origin width.
Width of even columns (column 1, column 3, ...) will be **stretched**.

But whatever stretchMode settings I pass it seems only to copy the middle part instead of stretching it.

Will be glad for any advice!

when got a button.click event, I need to know the click coordinate, so is there a way to retrieve the pointer object generated by Phaser?

ERROR in public/js/bundle.js from Terser
Unexpected token: punc ()) [public/js/bundle.js:180944,8]

the error is solved if I rewrite the function
from

get radius() {
        var radius = this.cornerRadius;
        return Math.max(
            radius.tl.x, radius.tl.y,
            radius.tr.x, radius.tr.y,
            radius.bl.x, radius.bl.y,
            radius.br.x, radius.br.y,
        )
    }

to

get radius() {
        var radius = this.cornerRadius;
        var max = Math.max(
            radius.tl.x,
            radius.tl.y,
            radius.tr.x,
            radius.tr.y,
            radius.bl.x,
            radius.bl.y,
            radius.br.x,
            radius.br.y
        );
        return max;
    }

in ./plugins/gameobjects/shape/roundrectangle/geom/RoundRectangle.js

I don't understand why this happens...

for example https://codepen.io/rexrainbow/pen/YMyBom

can you tell me how to, resize each column each column.. please

Good day!
Is it possible to add 'complete' event for the Scale and Fide clases like MoveTo when property destoy is false?
Thx.

Is there a way to directly call the virtual joystick plugin file?
Because I'm having issues, I can't import it.
I'm new to JavaScript so I don't want to install node.js or other just for making a game.

Using script src doesn't work,
script type="module"
doesn't work too, using the import statement results in error.

Thanks for listening

I am struggling to find the virtual joystick of phaser 3. but I can't find that. Please help me.

See example\ui-textboix\textbox.bat

Please can you provide a demo with sprites (images) rather than game generated graphic objects...

It works fine using the demo, but when I use sprites I have issues clicking on and using the control.

It seems to only trigger if clicked in the top left, and then dragged around. Clicking in top right or bottom half of virtual joystick control does not work.

x: this.cameras.cameras[0].worldView.width - (this.vjRadius * 2),
y: this.cameras.cameras[0].worldView.height - (this.vjRadius * 2),
radius: this.vjRadius,
fixed: true,
base: this.add.sprite(0, 0, 'joystick-bottom'),
thumb: this.add.sprite(0, 0, 'joystick-top'),
enable: true

My English is not good, use google translation for help.
I use GesturesPlugin.press and rexUI.toast.
When I showed taost a second time in pressstart.
Toast will flash.
The code looks like this.

const press = this.rexGestures.add.press(gameObject, { time: 1000 });
press.on('pressstart', (press) => {
  this.rexUI.add.toast({
    x: press.x,
    y: press.y,
    background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 20, '#ABABAB'),
    text: this.add.text(0, 0, '', { fontSize: '24px' }),
    space: {
      left: 20,
      right: 20,
      top: 20,
      bottom: 20,
    },
  }).show('message');
});

Good day! Thx for yor great plugins.

I have a bit problem with TextArea. When scrolling, the bottom strings do arise no smoothly, but sharp. Your demo has the same problem.
Video showing the problem (pay attention to the lower bound of TextArea):
https://youtu.be/koA-c2IH8oQ

Version

• Phaser Version: 3.14 and 3.15.1
• Operating system: Windows 10
• Browser: Google Chrome | 70.0.3538.102 (Official Build) (64-bit) (cohort: Stable)

Description

My game have plugin rexUI from rexUI to create a simple scroll view (use GridTable) in a scene called Menu. Everything works fine, until I click an item view, this call a callback to start a scene (called Game). In console, it showed error and the game got frozen.
Actually, the game got frozen in version 3.14. When I update to version (just downloaded in webs) 3.15.1, it no longer frozen, the Game scene is loaded but the error still thrown.

Code

Import plugin in scene (Menu)

preload() { this.load.scenePlugin({ key: 'rexuiplugin', url: 'assets/libs/rexuiplugin.min.js', sceneKey: 'rexUI' }); }

Event:

// event table.on('cell.click', function (cellContainer, cellIndex) { console.log('Game scene with index ' + cellIndex); this.scene.start('Game'); }, this);

Here is screen shot:

It's linked to issue I post in Phaser Issue

• Mirror method is not worked.
• Add hexagon miniboard testing.

1. https://github.com/rexrainbow/phaser3-rex-notes/blob/a3a27f78b6162a6181ba7569dd79ab200654d4ce/examples/ui-edit/login.js

Am a beginner for phaser 3. I want to user rex textbox(This Plugin only, Dont Need other Plugins). I don't know how install in ES6. Please Guide Me.
I need to install or download your plugin folder and import into my game and use it.

Please give Some instruction to me.

pen: https://codepen.io/dranitski/pen/JjjVgjK

when I resize my game canvas that way my input element not updates its position. Seems like it renders on place it should before the scaling.
I guess that happens because I update canvas style manually via

    game.canvas.style.width = 800 + 'px';
    game.canvas.style.height = 600 + 'px';

Can I update input element somehow to respect new canvas size? Thanks in advance

In the following documentation page:
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/board/#tile-position-world-position

The part about board.forEachTileXY has incorrect definition; it suggests that "order" should somehow be part of the callback, when it really should follow the "scope" as the 3rd argument of forEachTileXY, rather than the third argument of the callback.

board.forEachTileXY(function(tileXY, board, order) {
// var tileX = tileXY.x;
// var tileY = tileXY.y;
}, scopr);

SHOULD BE:

board.forEachTileXY(function( tileXY, board ) {
// var tileX = tileXY.x;
// var tileY = tileXY.y;
}, scope, order );

Please add for this class method of forced cleanup(with/no completion signal) . This is useful when one of the actions may fail and never emit complete signal. Thx.

Hello. When compressing the bundle compiled by rollup, terser throws an error:

Components$1.Alpha,
 Components$1.Flip, );
                  ^ Unexpected token: punc ())

The problem is solved if in module phaser3-rex-notes/plugins/gameobjects/containerlite/ContainerLite.js the last comma in the assigned object is removed.

Object.assign(
ContainerLite.prototype,
....
 Children,

Components.Alpha,
Components.Flip , <------ this comma need to removed
);

Thanks for your great plugins!

How do I keep calling the update method while the thumb is not in the center?

I want to get this listener to also call the update method while the thumb is held in a certain position..

https://codepen.io/rexrainbow/pen/vPWzBa

如图

Hi and thank you for these amazing plugins!

I don't know whether it's a bug or not but playing around with the tabs plugin, if you just want leftButtons for example, removing rightButtons results in grid table not rendering. I've read your notes but they don't say anything about if they are optional parameters. I tried with top or bottom and is the same. You can try it in your fiddle https://codepen.io/rexrainbow/pen/BGKvXK?editors=0010

i use phaser template for typescript Phaser3-Typescript-Template. Your extention was my first extention. But i got error like Property 'rexRoundRectangle' does not exist on type 'GameObjectFactory' How to solve this problem.

"phaser": "^3.21.0",

i just wanted to create a rounded rectangle which i could load a physics body. it is not been with this.add.graphics from Phaser.Scene but your extention

i could create rectangle but i already get error

After running
scene.add.rexBBCodeText(0, 0, 'test text');

get this error

Uncaught TypeError: Cannot read property 'matrix' of undefined
at TextureTintPipeline.batchTexture