Fully switched to Pixi.js

package.json

@@ -155,7 +155,7 @@
  "passport-facebook": "^3.0.0",
  "pathfinding": "^0.4.18",
  "pixi-viewport": "^4.2.1",
- "pixi.js": "^5.1.2",
+ "pixi.js-legacy": "^5.1.2",
  "prisma-client-lib": "^1.33.0",
  "progress": "^2.0.3",
  "qunpack": "^0.5.2",

packages/client/Habbo.ts

@@ -1,5 +1,5 @@
 import { injectable, inject } from 'inversify'
-import * as PIXI from 'pixi.js'
+import * as PIXI from 'pixi.js-legacy'
 import { Viewport } from "pixi-viewport";
 
 import ISocketManager from './communication/ISocketManager';
@@ -36,16 +36,21 @@ export default class Habbo {
  const config = {
  width: window.innerWidth,
  height: window.innerHeight,
- resolution: window.devicePixelRatio,
- resizeTo: parentElement
+ resolution: window.devicePixelRatio || 1,
+ resizeTo: window
  }
 
+ PIXI.settings.ROUND_PIXELS = true
+
  this.viewport = new Viewport()
  this.application = new PIXI.Application(config)
 
  this.application.stage.addChild(this.viewport)
 
- this.viewport.drag()
+ this.viewport.drag({
+ wheel: false,
+ mouseButtons: 'left'
+ })
 
  parentElement.appendChild(this.application.view)
  }

packages/client/assets/IAssetsManager.ts

@@ -1,4 +1,6 @@
+import * as PIXI from "pixi.js-legacy";
+
 export default interface IAssetsManager {
- loadAssets(): void
+ loadAssets(): Promise<Partial<Record<string, PIXI.LoaderResource>>>
 }
 

packages/client/assets/rooms/RoomAssetsManager.ts

@@ -1,4 +1,4 @@
-import * as PIXI from 'pixi.js'
+import * as PIXI from 'pixi.js-legacy'
 
 import IAssetsManager from "../IAssetsManager"
 import Logger from "../../logging/Logger";
@@ -12,11 +12,13 @@ export default class RoomAssetsManager extends Logger implements IAssetsManager
  this.roomLoader = PIXI.Loader.shared
  }
 
- public loadAssets(): void {
+ public loadAssets(): Promise<Partial<Record<string, PIXI.LoaderResource>>> {
  this.initConsoleOutput()
 
- this.roomLoader.add('tile_hover', 'room/tile_hover.png')
- .load()
+ return new Promise(resolve => {
+ this.roomLoader.add('tile_hover', 'room/tile_hover.png')
+ .load((loader, resources) => resolve(resources))
+ })
  }
 
  private initConsoleOutput(): void {

packages/client/rooms/Room.ts

@@ -1,3 +1,5 @@
+import * as PIXI from "pixi.js-legacy"
+
 import RoomScene from './RoomScene'
 import RoomData from './data/RoomData'
 import RoomMap from './map/RoomMap'
@@ -14,6 +16,7 @@ export default class Room extends RoomScene {
  private roomContainer: RoomContainer
  private loader: IAssetsManager
 
+ public resources: Partial<Record<string, PIXI.LoaderResource>>
  public roomData: RoomData
  public map: RoomMap
 
@@ -30,12 +33,16 @@ export default class Room extends RoomScene {
 
  this.map = new RoomMap(this.roomData.map.room)
 
- this.loader = new RoomAssetsManager();
- this.loader.loadAssets()
+ // TODO: Preloader
+
+ this.loader = new RoomAssetsManager()
+ this.loader.loadAssets().then(resources => {
+ this.resources = resources
 
- this.initializeContainers()
+  this.initializeContainers()
 
- this.centerCamera()
+ this.centerCamera()
+ })
  }
 
  private initializeContainers(): void {
@@ -48,9 +55,7 @@ export default class Room extends RoomScene {
  const doorTile = this.roomContainer.tilesContainer.getTileAt(0, 0)
 
  if (doorTile) {
- this.game.viewport.follow(doorTile, {
- speed: 0
- })
+ // this.game.viewport.follow(doorTile)
  }
  }
 }

packages/client/rooms/RoomScene.ts

@@ -1,9 +1,11 @@
-import * as PIXI from 'pixi.js'
+import * as PIXI from 'pixi.js-legacy'
 
 import RoomMap from "./map/RoomMap";
 import RoomData from "./data/RoomData";
 
 export default abstract class RoomScene extends PIXI.Container {
+ public resources: Partial<Record<string, PIXI.LoaderResource>>
+
  public roomData: RoomData
  public map: RoomMap
 }

packages/client/rooms/containers/RoomContainer.ts

@@ -1,4 +1,4 @@
-import * as PIXI from 'pixi.js'
+import * as PIXI from 'pixi.js-legacy'
 
 import RoomScene from "../RoomScene"
 import TilesContainer from "./tiles/TilesContainer"

packages/client/rooms/containers/tiles/TilesContainer.ts

@@ -1,4 +1,4 @@
-import * as PIXI from 'pixi.js'
+import * as PIXI from 'pixi.js-legacy'
 
 import RoomScene from "../../RoomScene";
 import Tile from "../../tiles/Tile";
@@ -24,7 +24,9 @@ export default class TilesContainer extends PIXI.Container {
 
  this.tiles = this.getTilesFromMap()
 
- this.hoverTile = new HoverTile()
+ const hoverTileTexture = this.room.resources['tile_hover'].texture
+
+ this.hoverTile = new HoverTile(hoverTileTexture)
  this.hoverTile.visible = false
 
  this.addChild(...this.tiles)
@@ -74,7 +76,7 @@ export default class TilesContainer extends PIXI.Container {
  )
 
  text.position.set(screenX, screenY)
- text.anchor.set(0.5, 0.25)
+ text.anchor.set(-0.5, -1.5)
 
  texts.push(text)
  }

packages/client/rooms/tiles/HoverTile.ts

@@ -1,12 +1,12 @@
-import * as PIXI from 'pixi.js'
+import * as PIXI from 'pixi.js-legacy'
 
 import { HeightMapPosition } from "../map/HeightMap";
 import TilesContainer from "../containers/tiles/TilesContainer";
 
 export default class HoverTile extends PIXI.Sprite {
 
- public constructor() {
- super(PIXI.Loader.shared.resources['tile_hover'].texture)
+ public constructor(texture: PIXI.Texture) {
+ super(texture)
  }
 
  public setHoverTilePosition(heightMapPosition: HeightMapPosition): void {

packages/client/rooms/tiles/Tile.ts

@@ -1,12 +1,12 @@
-import * as PIXI from 'pixi.js'
+import * as PIXI from 'pixi.js-legacy'
 
 import RoomScene from "../RoomScene";
 import {HeightMapPosition} from '../map/HeightMap';
 import Directions from "../map/directions/Directions";
 import TilesContainer from "../containers/tiles/TilesContainer";
-import Texture = PIXI.Texture;
+import TileGenerator from "./TileGenerator";
 
-export default class Tile extends PIXI.TilingSprite {
+export default class Tile extends PIXI.Sprite {
  public static readonly HEIGHT = 32
  public static readonly WIDTH = 64
 
@@ -18,7 +18,7 @@ export default class Tile extends PIXI.TilingSprite {
  private readonly floorThickness: number
 
  public constructor(room: RoomScene, heightMapPosition: HeightMapPosition) {
- super(Texture.from('tile'), Tile.WIDTH, Tile.HEIGHT + room.roomData.floorThickness)
+ super(undefined)
 
  this.room = room
  this.heightMapPosition = heightMapPosition
@@ -28,10 +28,13 @@ export default class Tile extends PIXI.TilingSprite {
  TilesContainer.getScreenX(heightMapPosition),
  TilesContainer.getScreenY(heightMapPosition)
  ]
+
  this.position.set(x, y)
 
  this.setTileTexture()
+
  this.interactive = true
+ this.hitArea = new PIXI.Polygon(TileGenerator.SURFACE_POINTS)
  }
 
  private setTileTexture() {

packages/client/rooms/tiles/TileGenerator.ts

@@ -1,4 +1,4 @@
-import * as PIXI from 'pixi.js'
+import * as PIXI from 'pixi.js-legacy'
 
 import RoomScene from "../RoomScene";
 import Tile from "./Tile";
@@ -16,32 +16,34 @@ export default class TileGenerator extends PIXI.Graphics {
  this.generateTiles()
  }
 
- private generateTiles(): void {
- const scaleMode = PIXI.SCALE_MODES.LINEAR
- const renderer = PIXI.autoDetectRenderer()
+ // We do it by a Getter cause we need to access
+ // other static properties from Tile class
+ public static get SURFACE_POINTS(): number[] {
+ return [
+ Tile.WIDTH / 2, 0,
+ Tile.WIDTH, Tile.HEIGHT / 2,
+ Tile.WIDTH / 2, Tile.HEIGHT,
+ 0, Tile.HEIGHT / 2,
+ ]
+ }
 
- this.drawSurface()
- const tileSurfaceTexture = renderer.generateTexture(this, scaleMode, 1)
+ private generateTiles(): void {
+ const scaleMode = PIXI.SCALE_MODES.NEAREST
+ const resolution = 1
 
- this.drawRightBorder()
- const tileSurfaceEastTexture = renderer.generateTexture(this, scaleMode, 1)
+ this.generateSurface(scaleMode, resolution)
+ this.clear()
 
- this.drawLeftBorder()
- const tileSurfaceEastSouthTexture = renderer.generateTexture(this, scaleMode, 1)
+ this.generateSurfaceEast(scaleMode, resolution)
+ this.clear()
 
- // We clear cause we don't need right border for tile_l texture
+ this.generateSurfaceSouth(scaleMode, resolution)
  this.clear()
- this.drawSurface()
- this.drawLeftBorder()
- const tileSurfaceSouthTexture = renderer.generateTexture(this, scaleMode, 1)
 
- PIXI.Texture.addToCache(tileSurfaceTexture, 'tile')
- PIXI.Texture.addToCache(tileSurfaceEastTexture, 'tile_e')
- PIXI.Texture.addToCache(tileSurfaceEastSouthTexture, 'tile_es')
- PIXI.Texture.addToCache(tileSurfaceSouthTexture, 'tile_s')
+ this.generateSurfaceEastSouth(scaleMode, resolution)
  }
 
- private drawPoints(points: PIXI.Point[], strokePoints: { x: number, y: number }[]): void {
+ private drawPoints(points: number[], strokePoints: { x: number, y: number }[]): void {
  this.drawPolygon(points)
 
  strokePoints.forEach((point, index) => {
@@ -54,29 +56,24 @@ export default class TileGenerator extends PIXI.Graphics {
  }
 
  private drawSurface(): void {
- const [points, strokePoints] = [[
- new PIXI.Point(Tile.WIDTH / 2, 0),
- new PIXI.Point(Tile.WIDTH, Tile.HEIGHT / 2),
- new PIXI.Point(Tile.WIDTH / 2, Tile.HEIGHT),
- new PIXI.Point(0, Tile.HEIGHT / 2)
- ], [
+ const strokePoints = [
  { x: Tile.WIDTH, y: Tile.HEIGHT / 2 },
  { x: Tile.WIDTH / 2, y: Tile.HEIGHT },
  { x: 0, y: Tile.HEIGHT / 2 }
- ]]
+ ]
 
  this.beginFill(0x989865)
- this.lineStyle(1.5, 0x8e8e5e)
+ this.lineStyle(1, 0x8e8e5e)
 
- this.drawPoints(points, strokePoints)
+ this.drawPoints(TileGenerator.SURFACE_POINTS, strokePoints)
  }
 
  private drawLeftBorder(): void {
  const [points, strokePoints] = [[
- new PIXI.Point(0, Tile.HEIGHT / 2),
- new PIXI.Point(0, Tile.HEIGHT / 2 + this.floorThickness),
- new PIXI.Point(Tile.WIDTH / 2, Tile.HEIGHT + this.floorThickness),
- new PIXI.Point(Tile.WIDTH / 2, Tile.HEIGHT)
+ 0,  Tile.HEIGHT / 2,
+ 0,  Tile.HEIGHT / 2 + this.floorThickness,
+ Tile.WIDTH / 2, Tile.HEIGHT + this.floorThickness,
+ Tile.WIDTH / 2, Tile.HEIGHT
  ], [
  { x: 0, y: Tile.HEIGHT / 2 },
  { x: 0, y: Tile.HEIGHT / 2 + this.floorThickness }
@@ -90,10 +87,10 @@ export default class TileGenerator extends PIXI.Graphics {
 
  private drawRightBorder(): void {
  const [points, strokePoints] = [[
- new PIXI.Point(Tile.WIDTH / 2, Tile.HEIGHT),
- new PIXI.Point(Tile.WIDTH / 2, Tile.HEIGHT + this.floorThickness),
- new PIXI.Point(Tile.WIDTH, Tile.HEIGHT / 2 + this.floorThickness),
- new PIXI.Point(Tile.WIDTH, Tile.HEIGHT / 2)
+ Tile.WIDTH / 2, Tile.HEIGHT,
+ Tile.WIDTH / 2, Tile.HEIGHT + this.floorThickness,
+ Tile.WIDTH,  Tile.HEIGHT / 2 + this.floorThickness,
+ Tile.WIDTH,  Tile.HEIGHT / 2,
  ], [
  { x: Tile.WIDTH, y: Tile.HEIGHT / 2 + this.floorThickness },
  { x: Tile.WIDTH, y: Tile.HEIGHT / 2 }
@@ -105,4 +102,39 @@ export default class TileGenerator extends PIXI.Graphics {
  this.drawPoints(points, strokePoints)
  }
 
+ private generateSurface(scaleMode: PIXI.SCALE_MODES, resolution: number): void {
+ this.drawSurface()
+
+ const texture = this.generateCanvasTexture(scaleMode, resolution)
+
+ PIXI.Texture.addToCache(texture, 'tile')
+ }
+
+ private generateSurfaceEast(scaleMode: PIXI.SCALE_MODES, resolution: number): void {
+ this.drawSurface()
+ this.drawRightBorder()
+
+ const texture = this.generateCanvasTexture(scaleMode, resolution)
+
+ PIXI.Texture.addToCache(texture, 'tile_e')
+ }
+
+ private generateSurfaceSouth(scaleMode: PIXI.SCALE_MODES, resolution: number): void {
+ this.drawSurface()
+ this.drawLeftBorder()
+
+ const texture = this.generateCanvasTexture(scaleMode, resolution)
+
+ PIXI.Texture.addToCache(texture, 'tile_s')
+ }
+
+ private generateSurfaceEastSouth(scaleMode: PIXI.SCALE_MODES, resolution: number): void {
+ this.drawSurface()
+ this.drawRightBorder()
+ this.drawLeftBorder()
+
+ const texture = this.generateCanvasTexture(scaleMode, resolution)
+
+ PIXI.Texture.addToCache(texture, 'tile_es')
+ }
 }