Update pixijs to v6

package.json

@@ -6,20 +6,20 @@
   },
   "private": true,
   "dependencies": {
-    "@pixi/filter-adjustment": "^3.1.1",
+    "@pixi/filter-adjustment": "^4.1.3",
     "events": "^3.3.0",
     "pako": "^2.0.3",
-    "pixi.js": "^5.3.3",
+    "pixi.js": "^6.0.4",
-    "tslib": "^2.0.0",
+    "tslib": "^2.3.0",
     "xml2js": "^0.4.23"
   },
   "devDependencies": {
-    "@types/node": "^14.14.35",
+    "@types/node": "^14.17.5",
-    "@types/pako": "^1.0.1",
+    "@types/pako": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.15.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.3",
-    "@typescript-eslint/parser": "^4.15.0",
+    "@typescript-eslint/parser": "^4.28.3",
     "create-ts-index": "^1.13.6",
-    "eslint": "^7.29.0",
+    "eslint": "^7.30.0",
-    "typescript": "~4.2.3"
+    "typescript": "^4.3.5"
   }
 }

src/core/asset/AssetManager.ts

@@ -1,4 +1,4 @@
-import { BaseTexture, ILoaderOptions, Loader, LoaderResource, Spritesheet, Texture } from 'pixi.js';
+import { BaseTexture, ILoaderResource, Loader, LoaderResource, Spritesheet, Texture } from 'pixi.js';
 import { GraphicAssetCollection } from '../../room/object/visualization/utils/GraphicAssetCollection';
 import { IGraphicAsset } from '../../room/object/visualization/utils/IGraphicAsset';
 import { IGraphicAssetCollection } from '../../room/object/visualization/utils/IGraphicAssetCollection';
@@ -13,8 +13,7 @@ export class AssetManager extends Disposable implements IAssetManager
 {
     private _logger: INitroLogger;
     private _textures: Map<string, Texture>;
-    private _collections: Map<string, GraphicAssetCollection>;
+    private _collections: Map<string, IGraphicAssetCollection>;
-    private _pendingUrls: Map<string, Function[]>;
 
     constructor()
     {
@@ -23,7 +22,6 @@ export class AssetManager extends Disposable implements IAssetManager
         this._logger        = new NitroLogger(this.constructor.name);
         this._textures      = new Map();
         this._collections   = new Map();
-        this._pendingUrls   = new Map();
     }
 
     public static removeFileExtension(name: string): string
@@ -90,6 +88,8 @@ export class AssetManager extends Disposable implements IAssetManager
 
             this._collections.set(collection.name, collection);
         }
+
+        return collection;
     }
 
     public downloadAsset(assetUrl: string, cb: Function): boolean
@@ -110,7 +110,7 @@ export class AssetManager extends Disposable implements IAssetManager
 
         let totalDownloaded = 0;
 
-        const onDownloaded = (loader: Loader, resource: LoaderResource, flag: boolean) =>
+        const onDownloaded = (loader: Loader, resource: ILoaderResource, flag: boolean) =>
         {
             if(loader) loader.destroy();
 
@@ -134,21 +134,25 @@ export class AssetManager extends Disposable implements IAssetManager
 
             const loader = new Loader();
 
-            const options: ILoaderOptions = {
-                crossOrigin: false,
-                xhrType: url.endsWith('.nitro') ? 'arraybuffer' : 'json'
-            };
-
             loader
-                .use((resource: LoaderResource, next: Function) => this.assetLoader(loader, resource, next, onDownloaded))
+                .add({
-                .add(url, options)
+                    url,
+                    crossOrigin: 'anonymous',
+                    xhrType: url.endsWith('.nitro') ? LoaderResource.XHR_RESPONSE_TYPE.BUFFER : LoaderResource.XHR_RESPONSE_TYPE.JSON
+                })
+                .use((resource: ILoaderResource, next: Function) =>
+                {
+                    this.assetLoader(loader, resource, onDownloaded);
+
+                    next();
+                })
                 .load();
         }
 
         return true;
     }
 
-    private assetLoader(loader: Loader, resource: LoaderResource, next: Function, onDownloaded: Function): void
+    private assetLoader(loader: Loader, resource: ILoaderResource, onDownloaded: Function): void
     {
         if(!resource || resource.error)
         {
@@ -186,7 +190,7 @@ export class AssetManager extends Disposable implements IAssetManager
                 {
                     const spritesheet = new Spritesheet(baseTexture, assetData.spritesheet);
 
-                    spritesheet.parse(textures =>
+                    spritesheet.parse(() =>
                     {
                         this.createCollection(assetData, spritesheet);
 
@@ -201,7 +205,7 @@ export class AssetManager extends Disposable implements IAssetManager
 
                         const spritesheet = new Spritesheet(baseTexture, assetData.spritesheet);
 
-                        spritesheet.parse(textures =>
+                        spritesheet.parse(() =>
                         {
                             this.createCollection(assetData, spritesheet);
 
@@ -254,7 +258,7 @@ export class AssetManager extends Disposable implements IAssetManager
                 {
                     const spritesheet = new Spritesheet(baseTexture, assetData.spritesheet);
 
-                    spritesheet.parse(textures =>
+                    spritesheet.parse(() =>
                     {
                         this.createCollection(assetData, spritesheet);
 
@@ -269,7 +273,7 @@ export class AssetManager extends Disposable implements IAssetManager
 
                         const spritesheet = new Spritesheet(baseTexture, assetData.spritesheet);
 
-                        spritesheet.parse(textures =>
+                        spritesheet.parse(() =>
                         {
                             this.createCollection(assetData, spritesheet);
 
@@ -312,7 +316,7 @@ export class AssetManager extends Disposable implements IAssetManager
         }
     }
 
-    public get collections(): Map<string, GraphicAssetCollection>
+    public get collections(): Map<string, IGraphicAssetCollection>
     {
         return this._collections;
     }

src/core/asset/IAssetManager.ts

@@ -1,6 +1,5 @@
 
 import { Spritesheet, Texture } from 'pixi.js';
-import { GraphicAssetCollection } from '../../room/object/visualization/utils/GraphicAssetCollection';
 import { IGraphicAsset } from '../../room/object/visualization/utils/IGraphicAsset';
 import { IGraphicAssetCollection } from '../../room/object/visualization/utils/IGraphicAssetCollection';
 import { IAssetData } from './interfaces';
@@ -15,5 +14,5 @@ export interface IAssetManager
     createCollection(data: IAssetData, spritesheet: Spritesheet): IGraphicAssetCollection;
     downloadAssets(urls: string[], cb: Function): void;
     downloadAsset(url: string, cb: Function): void;
-    collections: Map<string, GraphicAssetCollection>;
+    collections: Map<string, IGraphicAssetCollection>;
 }

src/core/asset/interfaces/IAssetData.ts

@@ -3,7 +3,7 @@ import { IAsset } from './IAsset';
 import { IAssetAlias } from './IAssetAlias';
 import { IAssetDimension } from './IAssetDimension';
 import { IAssetPalette } from './IAssetPalette';
-import { ISpritesheetData } from './spritesheet';
+import { ISpritesheet } from './spritesheet';
 import { IAssetVisualizationData } from './visualization';
 
 export interface IAssetData {
@@ -15,7 +15,7 @@ export interface IAssetData {
     credits?: string;
     soundSample?: number;
     action?: { link?: string, startState?: number };
-    spritesheet?: ISpritesheetData;
+    spritesheet?: ISpritesheet;
     dimensions?: IAssetDimension;
     directions?: number[];
     assets?: { [index: string]: IAsset };

src/core/asset/interfaces/spritesheet/ISpritesheet.ts

@@ -0,0 +1,7 @@
+import { ISpritesheetData } from '@pixi/spritesheet';
+import { ISpritesheetMeta } from './ISpritesheetMeta';
+
+export interface ISpritesheet extends ISpritesheetData
+{
+    meta: ISpritesheetMeta;
+}

src/core/asset/interfaces/spritesheet/ISpritesheetData.ts

@@ -1,8 +0,0 @@
-import { ISpritesheetFrame } from './ISpritesheetFrame';
-import { ISpritesheetMeta } from './ISpritesheetMeta';
-
-export interface ISpritesheetData
-{
-    meta?: ISpritesheetMeta;
-    frames?: { [index: string]: ISpritesheetFrame };
-}

src/core/asset/interfaces/spritesheet/ISpritesheetFrame.ts

@@ -1,25 +0,0 @@
-export interface ISpritesheetFrame
-{
-    frame: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-    };
-    rotated: boolean;
-    trimmed: boolean;
-    spriteSourceSize: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-    };
-    sourceSize: {
-        w: number;
-        h: number;
-    };
-    pivot: {
-        x: number;
-        y: number;
-    };
-}

src/core/asset/interfaces/spritesheet/index.ts

@@ -1,3 +1,2 @@
-export * from './ISpritesheetData';
+export * from './ISpritesheet';
-export * from './ISpritesheetFrame';
 export * from './ISpritesheetMeta';

src/nitro/Nitro.ts

@@ -1,4 +1,4 @@
-import { Application, SCALE_MODES, settings } from 'pixi.js';
+import { Application, IApplicationOptions, SCALE_MODES, settings } from 'pixi.js';
 import { INitroManager } from '..';
 import { ConfigurationEvent } from '../core/configuration/ConfigurationEvent';
 import { EventDispatcher } from '../core/events/EventDispatcher';
@@ -34,7 +34,6 @@ import { HabboWebTools } from './utils/HabboWebTools';
 
 LegacyExternalInterface.available;
 
-settings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT = false;
 settings.SCALE_MODE = SCALE_MODES.NEAREST;
 settings.ROUND_PIXELS = true;
 
@@ -42,10 +41,10 @@ export class Nitro extends Application implements INitro
 {
     public static WEBGL_CONTEXT_LOST: string    = 'NE_WEBGL_CONTEXT_LOST';
     public static WEBGL_UNAVAILABLE: string     = 'NE_WEBGL_UNAVAILABLE';
-    public static RELEASE_VERSION: string       = 'NITRO-0-4-0';
+    public static RELEASE_VERSION: string       = 'NITRO-2-0-0';
     public static READY: string                 = 'NE_READY';
 
-    private static INSTANCE: INitro         = null;
+    private static INSTANCE: INitro = null;
 
     private _nitroTimer: NitroTimer;
     private _worker: Worker;
@@ -66,24 +65,7 @@ export class Nitro extends Application implements INitro
     private _isReady: boolean;
     private _isDisposed: boolean;
 
-    constructor(core: INitroCore, options?: {
+    constructor(core: INitroCore, options?: IApplicationOptions)
-        autoStart?: boolean;
-        width?: number;
-        height?: number;
-        view?: HTMLCanvasElement;
-        transparent?: boolean;
-        autoDensity?: boolean;
-        antialias?: boolean;
-        preserveDrawingBuffer?: boolean;
-        resolution?: number;
-        forceCanvas?: boolean;
-        backgroundColor?: number;
-        clearBeforeRender?: boolean;
-        powerPreference?: string;
-        sharedTicker?: boolean;
-        sharedLoader?: boolean;
-        resizeTo?: Window | HTMLElement;
-    })
     {
         super(options);
 
@@ -129,7 +111,6 @@ export class Nitro extends Application implements INitro
         canvas.className    = 'client-canvas';
 
         const instance = new this(new NitroCore(), {
-            transparent: true,
             autoDensity: true,
             resolution: window.devicePixelRatio,
             width: window.innerWidth,

src/nitro/avatar/AvatarImage.ts

@@ -395,7 +395,10 @@ export class AvatarImage implements IAvatarImage, IAvatarEffectListener
 
         if(this._reusableTexture)
         {
-            Nitro.instance.renderer.render(container, this._reusableTexture, true);
+            Nitro.instance.renderer.render(container, {
+                renderTexture: this._reusableTexture,
+                clear: true
+            });
         }
         else
         {
@@ -568,7 +571,7 @@ export class AvatarImage implements IAvatarImage, IAvatarEffectListener
             partCount--;
         }
 
-        const image = Nitro.instance.renderer.extract.image(container);
+        const image = TextureUtils.generateImage(container);
 
         if(!image) return null;
 

src/nitro/camera/IRoomCameraWidgetEffect.ts

@@ -1,3 +1,4 @@
+import { ColorMatrix } from '@pixi/filter-color-matrix';
 import { Texture } from 'pixi.js';
 
 export interface IRoomCameraWidgetEffect
@@ -5,6 +6,6 @@ export interface IRoomCameraWidgetEffect
     name: string;
     minLevel: number;
     texture: Texture;
-    colorMatrix: number[];
+    colorMatrix: ColorMatrix;
     blendMode: number;
 }

src/nitro/camera/RoomCameraWidgetEffect.ts

@@ -1,3 +1,4 @@
+import { ColorMatrix } from '@pixi/filter-color-matrix';
 import { Texture } from 'pixi.js';
 import { IRoomCameraWidgetEffect } from './IRoomCameraWidgetEffect';
 
@@ -6,10 +7,10 @@ export class RoomCameraWidgetEffect implements IRoomCameraWidgetEffect
     private _name: string;
     private _minLevel: number = -1;
     private _texture: Texture = null;
-    private _colorMatrix: number[] = null;
+    private _colorMatrix: ColorMatrix = null;
     private _blendMode: number = null;
 
-    constructor(name: string, minLevel: number = -1, texture: Texture = null, colorMatrix: number[] = null, blendMode: number = null)
+    constructor(name: string, minLevel: number = -1, texture: Texture = null, colorMatrix: ColorMatrix = null, blendMode: number = null)
     {
         this._name          = name;
         this._minLevel      = minLevel;
@@ -33,12 +34,12 @@ export class RoomCameraWidgetEffect implements IRoomCameraWidgetEffect
         this._texture = texture;
     }
 
-    public get colorMatrix(): number[]
+    public get colorMatrix(): ColorMatrix
     {
         return this._colorMatrix;
     }
 
-    public set colorMatrix(colorMatrix: number[])
+    public set colorMatrix(colorMatrix: ColorMatrix)
     {
         this._colorMatrix = colorMatrix;
     }

src/nitro/camera/RoomCameraWidgetManager.ts

@@ -1,3 +1,4 @@
+import { ColorMatrix } from '@pixi/filter-color-matrix';
 import { Container, filters, Sprite, Texture } from 'pixi.js';
 import { EventDispatcher, IEventDispatcher } from '../../core';
 import { TextureUtils } from '../../room';
@@ -28,7 +29,7 @@ export class RoomCameraWidgetManager implements IRoomCameraWidgetManager
         this._isLoaded = true;
 
         const imagesUrl = Nitro.instance.getConfiguration<string>('image.library.url') + 'Habbo-Stories/';
-        const effects   = Nitro.instance.getConfiguration<{ name: string, colorMatrix?: number[], minLevel: number, blendMode?: number, enabled: boolean }[]>('camera.available.effects');
+        const effects   = Nitro.instance.getConfiguration<{ name: string, colorMatrix?: ColorMatrix, minLevel: number, blendMode?: number, enabled: boolean }[]>('camera.available.effects');
 
         for(const effect of effects)
         {

src/nitro/room/RoomContentLoader.ts

@@ -1,4 +1,4 @@
-import { BaseTexture, ILoaderOptions, Loader, LoaderResource, Spritesheet, Texture } from 'pixi.js';
+import { BaseTexture, ILoaderResource, Loader, LoaderResource, Spritesheet, Texture } from 'pixi.js';
 import { IAssetData } from '../../core/asset/interfaces';
 import { NitroBundle } from '../../core/asset/NitroBundle';
 import { INitroLogger } from '../../core/common/logger/INitroLogger';
@@ -483,7 +483,7 @@ export class RoomContentLoader implements IFurnitureDataListener
         const totalToDownload = assetUrls.length;
         let totalDownloaded = 0;
 
-        const onDownloaded = (loader: Loader, resource: LoaderResource, flag: boolean) =>
+        const onDownloaded = (loader: Loader, resource: ILoaderResource, flag: boolean) =>
         {
             if(loader) loader.destroy();
 
@@ -514,21 +514,25 @@ export class RoomContentLoader implements IFurnitureDataListener
 
             const loader = new Loader();
 
-            const options: ILoaderOptions = {
-                crossOrigin: false,
-                xhrType: url.endsWith('.nitro') ? 'arraybuffer' : 'json'
-            };
-
             loader
-                .use((resource: LoaderResource, next: Function) => this.assetLoader(loader, resource, next, onDownloaded))
+                .add({
-                .add(url, options)
+                    url,
+                    crossOrigin: 'anonymous',
+                    xhrType: url.endsWith('.nitro') ? LoaderResource.XHR_RESPONSE_TYPE.BUFFER : LoaderResource.XHR_RESPONSE_TYPE.JSON
+                })
+                .use((resource: ILoaderResource, next: Function) =>
+                {
+                    this.assetLoader(loader, resource, onDownloaded);
+
+                    next();
+                })
                 .load();
         }
 
         return true;
     }
 
-    private assetLoader(loader: Loader, resource: LoaderResource, next: Function, onDownloaded: Function): void
+    private assetLoader(loader: Loader, resource: ILoaderResource, onDownloaded: Function): void
     {
         if(!resource || resource.error)
         {
@@ -566,7 +570,7 @@ export class RoomContentLoader implements IFurnitureDataListener
                 {
                     const spritesheet = new Spritesheet(baseTexture, assetData.spritesheet);
 
-                    spritesheet.parse(textures =>
+                    spritesheet.parse(() =>
                     {
                         this.createCollection(assetData, spritesheet);
 
@@ -581,7 +585,7 @@ export class RoomContentLoader implements IFurnitureDataListener
 
                         const spritesheet = new Spritesheet(baseTexture, assetData.spritesheet);
 
-                        spritesheet.parse(textures =>
+                        spritesheet.parse(() =>
                         {
                             this.createCollection(assetData, spritesheet);
 
@@ -634,7 +638,7 @@ export class RoomContentLoader implements IFurnitureDataListener
                 {
                     const spritesheet = new Spritesheet(baseTexture, assetData.spritesheet);
 
-                    spritesheet.parse(textures =>
+                    spritesheet.parse(() =>
                     {
                         this.createCollection(assetData, spritesheet);
 
@@ -649,7 +653,7 @@ export class RoomContentLoader implements IFurnitureDataListener
 
                         const spritesheet = new Spritesheet(baseTexture, assetData.spritesheet);
 
-                        spritesheet.parse(textures =>
+                        spritesheet.parse(() =>
                         {
                             this.createCollection(assetData, spritesheet);
 

src/nitro/room/RoomEngine.ts

@@ -1829,7 +1829,7 @@ export class RoomEngine extends NitroManager implements IRoomEngine, IRoomCreato
 
                         if(icon)
                         {
-                            const image = Nitro.instance.renderer.extract.image(icon);
+                            const image = TextureUtils.generateImage(icon);
 
                             if(this.events)
                             {
@@ -1874,7 +1874,7 @@ export class RoomEngine extends NitroManager implements IRoomEngine, IRoomCreato
 
                     if(icon)
                     {
-                        const image = Nitro.instance.renderer.extract.image(icon);
+                        const image = TextureUtils.generateImage(icon);
 
                         if(this.events)
                         {

src/nitro/room/object/visualization/room/RoomPlane.ts

@@ -4,7 +4,6 @@ import { IRoomGeometry } from '../../../../../room/utils/IRoomGeometry';
 import { IVector3D } from '../../../../../room/utils/IVector3D';
 import { TextureUtils } from '../../../../../room/utils/TextureUtils';
 import { Vector3d } from '../../../../../room/utils/Vector3d';
-import { Nitro } from '../../../../Nitro';
 import { PlaneMaskManager } from './mask/PlaneMaskManager';
 import { PlaneDrawingData } from './PlaneDrawingData';
 import { PlaneVisualizationLayer } from './rasterizer/basic/PlaneVisualizationLayer';
@@ -987,8 +986,8 @@ export class RoomPlane implements IRoomPlane
     {
         if(!texture || !mask) return;
 
-        const maskCanvas    = Nitro.instance.renderer.extract.canvas(mask);
+        const maskCanvas    = TextureUtils.generateCanvas(mask);
-        const textureCanvas = Nitro.instance.renderer.extract.canvas(texture);
+        const textureCanvas = TextureUtils.generateCanvas(texture);
         const textureCtx    = textureCanvas.getContext('2d');
 
         textureCtx.drawImage(maskCanvas, 0, 0);

src/room/floorplan/pixi-tilemap/CanvasTileRenderer.ts

@@ -1,21 +1,22 @@
-import * as PIXI from 'pixi.js';
+import { CanvasRenderer } from '@pixi/canvas-renderer';
-window.PIXI = PIXI;
+import { IRendererPlugin } from '@pixi/core';
 
-export class CanvasTileRenderer
+export class CanvasTileRenderer implements IRendererPlugin
 {
-    renderer: PIXI.Renderer;
+    renderer: CanvasRenderer;
     tileAnim = [0, 0];
     dontUseTransform = false;
 
-    constructor(renderer: PIXI.Renderer)
+    constructor(renderer: CanvasRenderer, options: any = null)
     {
         this.renderer = renderer;
         this.tileAnim = [0, 0];
     }
+
+    public destroy(): void
+    {
+
+    }
 }
-const cr = (window.PIXI as any).CanvasRenderer;
+
-if(cr)
+CanvasRenderer.registerPlugin('tilemap', CanvasTileRenderer);
-{
-    console.warn('REGISTER');
-    cr.registerPlugin('tilemap', CanvasTileRenderer);
-}

src/room/floorplan/pixi-tilemap/CompositeRectTileLayer.ts

@@ -12,7 +12,6 @@ export class CompositeRectTileLayer extends Container
     }
 
     z: number;
-    zIndex: number;
     modificationMarker = 0;
     shadowColor = new Float32Array([0.0, 0.0, 0.0, 0.5]);
     _globalMat: Matrix = null;

src/room/floorplan/pixi-tilemap/MultiTextureResource.ts

@@ -1,5 +1,4 @@
-import { resources } from '@pixi/core';
+import { BaseTexture, GLTexture, IAutoDetectOptions, Renderer, Resource, Sprite, Texture } from 'pixi.js';
-import { BaseTexture, Sprite, Texture } from 'pixi.js';
 
 export interface IMultiTextureOptions {
     boundCountPerBuffer: number;
@@ -8,7 +7,7 @@ export interface IMultiTextureOptions {
     DO_CLEAR?: boolean;
 }
 
-export class MultiTextureResource extends resources.Resource
+export class MultiTextureResource extends Resource
 {
     constructor(options: IMultiTextureOptions)
     {
@@ -58,4 +57,10 @@ export class MultiTextureResource extends resources.Resource
         this.dirties[ind] = (this.baseTex as any).dirtyId;
     }
 
+    // required ???
+    public upload(renderer: Renderer, baseTexture: BaseTexture<Resource, IAutoDetectOptions>, glTexture: GLTexture): boolean
+    {
+        return false;
+    }
+
 }

src/room/floorplan/pixi-tilemap/RectTileLayer.ts

@@ -1,4 +1,4 @@
-import { Container, DRAW_MODES, groupD8, Matrix, Renderer, Texture } from 'pixi.js';
+import { Bounds, Container, DRAW_MODES, groupD8, Matrix, Rectangle, Renderer, Texture } from 'pixi.js';
 import { Constant } from './Constant';
 import { RectTileGeom } from './RectTileShader';
 import { TileRenderer } from './TileRenderer';
@@ -30,9 +30,9 @@ export class RectTileLayer extends Container
         this.initialize(zIndex, texture);
     }
 
-    zIndex = 0;
+    //zIndex = 0;
     modificationMarker = 0;
-    _$_localBounds = new PIXI.Bounds();
+    _$_localBounds = new Bounds();
     shadowColor = new Float32Array([0.0, 0.0, 0.0, 0.5]);
     _globalMat: Matrix = null;
 
@@ -472,7 +472,7 @@ export class RectTileLayer extends Container
         this._bounds.addFrame(this.transform, minX, minY, maxX, maxY);
     }
 
-    public getLocalBounds(rect?: PIXI.Rectangle): PIXI.Rectangle
+    public getLocalBounds(rect?: Rectangle): Rectangle
     {
         // we can do a fast local bounds if the sprite has no children!
         if(this.children.length === 0)

src/room/floorplan/pixi-tilemap/RectTileShader.ts

@@ -1,4 +1,4 @@
-import { Buffer, Geometry, Matrix, Shader } from 'pixi.js';
+import { Buffer, Geometry, Matrix, Program, Shader } from 'pixi.js';
 import * as shaderGenerator from './shaderGenerator';
 
 const rectShaderFrag = `
@@ -58,7 +58,7 @@ export abstract class TilemapShader extends Shader
     constructor(maxTextures: number, shaderVert: string, shaderFrag: string)
     {
         super(
-            new PIXI.Program(
+            new Program(
                 shaderVert,
                 shaderFrag),
             {
@@ -92,6 +92,7 @@ export class RectTileGeom extends Geometry
     vertPerQuad = 4;
     stride = this.vertSize * 4;
     lastTimeAccess = 0;
+    buf: Buffer;
 
     constructor()
     {
@@ -105,6 +106,4 @@ export class RectTileGeom extends Geometry
             .addAttribute('aTextureId', buf, 0, false, 0, this.stride, 10 * 4)
             .addAttribute('aAlpha', buf, 0, false, 0, this.stride, 11 * 4);
     }
-
-    buf: PIXI.Buffer;
 }

src/room/floorplan/pixi-tilemap/TileRenderer.ts

@@ -1,3 +1,4 @@
+import { createIndicesForQuads } from '@pixi/utils';
 import { BaseTexture, Buffer, ObjectRenderer, Renderer, Texture, WRAP_MODES } from 'pixi.js';
 import { Constant } from './Constant';
 import { MultiTextureResource } from './MultiTextureResource';
@@ -12,7 +13,7 @@ export class TileRenderer extends ObjectRenderer
     renderer: Renderer;
     gl: WebGLRenderingContext;
     sn: number = -1;
-    indexBuffer: PIXI.Buffer = null;
+    indexBuffer: Buffer = null;
     ibLen: number = 0;
     tileAnim = [0, 0];
     texLoc: Array<number> = [];
@@ -127,8 +128,7 @@ export class TileRenderer extends ObjectRenderer
         }
 
         this.ibLen = totalIndices;
-        this.indexBuffer.update((PIXI as any).utils.createIndicesForQuads(size,
+        this.indexBuffer.update(createIndicesForQuads(size, Constant.use32bitIndex ? new Uint32Array(size * 6) : undefined));
-            Constant.use32bitIndex ? new Uint32Array(size * 6) : undefined));
 
         // 	TODO: create new index buffer instead?
         // if (vb) {

src/room/object/visualization/utils/GraphicAssetCollection.ts

@@ -1,4 +1,5 @@
-import { Spritesheet, Texture } from 'pixi.js';
+import { Dict } from '@pixi/utils';
+import { Resource, Spritesheet, Texture } from 'pixi.js';
 import { AssetManager } from '../../../../core/asset/AssetManager';
 import { IAsset, IAssetData, IAssetPalette } from '../../../../core/asset/interfaces';
 import { Nitro } from '../../../../nitro/Nitro';
@@ -313,7 +314,7 @@ export class GraphicAssetCollection implements IGraphicAssetCollection
         return texture;
     }
 
-    private addLibraryAsset(textures: Texture[]): void
+    private addLibraryAsset(textures: Dict<Texture<Resource>>): void
     {
         if(!textures) return;
 

src/room/object/visualization/utils/GraphicAssetPalette.ts

@@ -1,5 +1,5 @@
 import { Sprite, Texture } from 'pixi.js';
-import { Nitro } from '../../../../nitro/Nitro';
+import { TextureUtils } from '../../../utils';
 
 export class GraphicAssetPalette
 {
@@ -25,7 +25,7 @@ export class GraphicAssetPalette
     public applyPalette(texture: Texture): Texture
     {
         const sprite            = Sprite.from(texture);
-        const textureCanvas     = Nitro.instance.renderer.extract.canvas(sprite);
+        const textureCanvas     = TextureUtils.generateCanvas(sprite);
         const textureCtx        = textureCanvas.getContext('2d');
         const textureImageData  = textureCtx.getImageData(0, 0, textureCanvas.width, textureCanvas.height);
         const data              = textureImageData.data;

src/room/renderer/RoomSpriteCanvas.ts

@@ -1014,7 +1014,11 @@ export class RoomSpriteCanvas implements IRoomRenderingCanvas
             height: this._display.height
         });
 
-        Nitro.instance.renderer.render(this._display, renderTexture, true, new Matrix(1, 0, 0, 1, -(bounds.x), -(bounds.y)));
+        Nitro.instance.renderer.render(this._display, {
+            renderTexture,
+            clear: true,
+            transform: new Matrix(1, 0, 0, 1, -(bounds.x), -(bounds.y))
+        });
 
         this._noSpriteVisibilityChecking = false;
         this.setScale(k, null, null, true);

src/room/renderer/utils/ExtendedSprite.ts

@@ -1,5 +1,5 @@
 import { BaseTexture, BLEND_MODES, Point, RenderTexture, Sprite, Texture } from 'pixi.js';
-import { Nitro } from '../../../nitro/Nitro';
+import { TextureUtils } from '../../utils';
 
 export class ExtendedSprite extends Sprite
 {
@@ -95,13 +95,13 @@ export class ExtendedSprite extends Sprite
                 {
                     const tempSprite = Sprite.from(texture);
 
-                    canvas = Nitro.instance.renderer.extract.canvas(tempSprite);
+                    canvas = TextureUtils.generateCanvas(tempSprite);
 
                     tempSprite.destroy();
                 }
                 else
                 {
-                    canvas = Nitro.instance.renderer.extract.canvas(texture as RenderTexture);
+                    canvas = TextureUtils.generateCanvas(texture as RenderTexture);
                 }
             }
 

src/room/utils/TextureUtils.ts

@@ -1,4 +1,5 @@
-import { DisplayObject, Rectangle, Renderer, RenderTexture, SCALE_MODES, Texture } from 'pixi.js';
+import { Extract } from '@pixi/extract';
+import { AbstractRenderer, DisplayObject, Rectangle, Renderer, RenderTexture, SCALE_MODES, Texture } from 'pixi.js';
 import { Nitro } from '../../nitro/Nitro';
 
 export class TextureUtils
@@ -23,17 +24,30 @@ export class TextureUtils
     {
         if(!target) return null;
 
-        return TextureUtils.getRenderer().extract.image(target);
+        const extract = (TextureUtils.getRenderer().plugins.extract as Extract);
+
+        return extract.image(target);
     }
 
     public static generateImageUrl(target: DisplayObject | RenderTexture): string
     {
         if(!target) return null;
 
-        return TextureUtils.getRenderer().extract.base64(target);
+        const extract = (TextureUtils.getRenderer().plugins.extract as Extract);
+
+        return extract.base64(target);
     }
 
-    public static getRenderer(): Renderer
+    public static generateCanvas(target: DisplayObject | RenderTexture): HTMLCanvasElement
+    {
+        if(!target) return null;
+
+        const extract = (TextureUtils.getRenderer().plugins.extract as Extract);
+
+        return extract.canvas(target);
+    }
+
+    public static getRenderer(): Renderer | AbstractRenderer
     {
         if(!TextureUtils._renderer) return Nitro.instance.renderer;
 

tsconfig.json

@@ -7,6 +7,7 @@
     "declaration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
+    "esModuleInterop": true,
     "importHelpers": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
@@ -15,6 +16,11 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+      "mini-signals": [
+        "node_modules/resource-loader/typings/mini-signals.d.ts"
+      ]
+    },
   }
 }