I am in the process of migrating a word game from Pixi.js version 6.5.9 to 7.2.3:
https://i.sstatic.net/aurP5.png
Within the game, I utilize a custom class called Tile.js to depict the yellow draggable letter tiles:
'use strict';
function Tile(letter, value) {
PIXI.Container.call(this);
this.col = NaN;
this.row = NaN;
this.letter = letter;
this.value = value;
this.drag = false;
this.graph = new PIXI.Graphics();
this.addChild(this.graph);
this.letterText = new PIXI.Text('', {fontFamily: 'Arial', fontSize: 40, fill: 0x000000});
this.letterText.anchor.set(0.5);
this.addChild(this.letterText);
this.indexText = new PIXI.Text('', {fontFamily: 'Arial', fontSize: 20, fill: 0x000000});
this.indexText.anchor.set(1);
this.addChild(this.indexText);
this.setLetter(letter);
this.setValue(value);
}
This class extends the PIXI.Container class using the following code snippet:
Tile.prototype = Object.create(PIXI.Container.prototype);
Tile.prototype.constructor = Tile;
Additionally, to enable dragging functionality, I have incorporated the following methods:
Tile.prototype.setIteractive = function(onDragStart, onDragMove, onDragEnd) {
this.eventMode = 'static';
this.buttonMode = true;
this.hitArea = new PIXI.Rectangle(0, 0, Tile.WIDTH, Tile.HEIGHT);
this.on('pointerdown', onDragStart)
.on('pointermove', onDragMove)
.on('pointerup', onDragEnd);
};
Tile.prototype.startDragging = function() {
this.drag = true;
this.scale.x = 1.4;
this.scale.y = 1.4;
this.alpha = 0.9;
};
Tile.prototype.stopDragging = function() {
this.drag = false;
this.scale.x = 1;
this.scale.y = 1;
this.alpha = 1;
};
Upon upgrading from Pixi.js version 6.5.9 to 7.2.3, an error is encountered in the Edge browser console:
Uncaught TypeError: Class constructor _Container cannot be invoked without 'new'
https://i.sstatic.net/ROduR.png
Has the method I used for extending the Container class been deprecated?
I have delved into the source code available at Github in an attempt to grasp the correct approach for extending classes in PixiJS v7... I have tried to comprehend how Container inherits from DisplayObject, but the syntax seems quite different (potentially due to it being written in TypeScript?)...
UPDATE:
Pursuing the suggestion by @domis86, I have refactored my custom Tile.js class to incorporate a PIXI.Container member:
function Tile(letter, value) {
var _col = NaN;
var _row = NaN;
var _letter = letter;
var _value = value;
var _drag = false;
var _cont = new PIXI.Container();
_cont.eventMode = 'static';
_cont.buttonMode = true;
_graph
...and more functions...
// return the public methods
return {
getContainer: getContainer,
setIteractive: setIteractive,
startDragging: startDragging,
stopDragging: stopDragging,
...
redraw: redraw
};
}