duckietm/Nitro_Render_V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro_Render_V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Update Deps. + WiP

Browse Source
This commit is contained in:
DuckieTM
2025-03-15 14:54:10 +01:00
parent c6ccfab5f5
commit d864fe3018
17 changed files with 215 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+3 -4
View File
@@ -31,20 +31,19 @@
"howler": "^2.2.4",
"pako": "^2.1.0",
"pixi-filters": "^6.0.5",
"pixi.js": "^8.5.1",
"pixi.js": "^8.8.1",
"clientjs": "^0.2.1"
},
"devDependencies": {
"@eslint/js": "^9.13.0",
"@rollup/plugin-typescript": "^11.1.6",
"@types/eslint__js": "^8.42.3",
"@types/howler": "^2.2.11",
"@types/node": "^20.14.12",
"@types/pako": "^2.0.3",
"eslint": "^9.8.0",
"tslib": "^2.6.3",
"typescript": "~5.5.4",
"typescript-eslint": "^7.17.0",
"typescript": "~5.8.2",
"typescript-eslint": "^8.26.1",
"vite": "^5.4.9"
}
}
packages/api/package.json
+2 -2
View File
@@ -12,9 +12,9 @@
},
"main": "./index",
"dependencies": {
"pixi.js": "^8.5.1"
"pixi.js": "^8.8.1"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/assets/package.json
+2 -2
View File
@@ -15,9 +15,9 @@
"@nitrots/api": "1.0.0",
"@nitrots/utils": "1.0.0",
"@pixi/gif": "^3.0.1",
"pixi.js": "^8.5.1"
"pixi.js": "^8.8.1"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/avatar/package.json
+1 -1
View File
@@ -15,6 +15,6 @@
"@nitrots/utils": "1.0.0"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/camera/package.json
+2 -2
View File
@@ -14,9 +14,9 @@
"@nitrots/configuration": "1.0.0",
"@nitrots/events": "1.0.0",
"@nitrots/utils": "1.0.0",
"pixi.js": "^8.5.1"
"pixi.js": "^8.8.1"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/communication/package.json
+1 -1
View File
@@ -14,6 +14,6 @@
"@nitrots/utils": "1.0.0"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/configuration/package.json
+1 -1
View File
@@ -13,6 +13,6 @@
"@nitrots/utils": "1.0.0"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/events/package.json
+1 -1
View File
@@ -13,6 +13,6 @@
"@nitrots/utils": "1.0.0"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/localization/package.json
+2 -2
View File
@@ -13,9 +13,9 @@
"@nitrots/communication": "1.0.0",
"@nitrots/configuration": "1.0.0",
"@nitrots/events": "1.0.0",
"pixi.js": "^8.5.1"
"pixi.js": "^8.8.1"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/room/package.json
+2 -2
View File
@@ -16,9 +16,9 @@
"@nitrots/configuration": "1.0.0",
"@nitrots/events": "1.0.0",
"@nitrots/session": "1.0.0",
"pixi.js": "^8.5.1"
"pixi.js": "^8.8.1"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/room/src/object/visualization/furniture/FurnitureDynamicThumbnailVisualization.ts
+12 -76
View File
@@ -1,63 +1,24 @@
import { Texture, Graphics } from 'pixi.js';
import { Texture } from 'pixi.js';
import { IsometricImageFurniVisualization } from './IsometricImageFurniVisualization';
export class FurnitureDynamicThumbnailVisualization extends IsometricImageFurniVisualization {
private _cachedUrl: string | null;
private _cachedUrl: string;
constructor() {
super();
this._cachedUrl = null;
this._hasOutline = false; // Disable outline to avoid borders
this._hasOutline = true;
}
protected updateModel(scale: number): boolean {
if (this.object) {
const thumbnailUrl = this.getThumbnailURL();
if (this._cachedUrl !== thumbnailUrl) {
this._cachedUrl = thumbnailUrl;
if (this._cachedUrl && this._cachedUrl !== '') {
const image = new Image();
image.crossOrigin = 'anonymous';
image.onload = () => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const targetWidth = 32;
const targetHeight = 32;
canvas.width = targetWidth;
canvas.height = targetHeight;
context!.fillStyle = '#b0b0b0';
context!.fillRect(0, 0, canvas.width, canvas.height);
const aspectRatio = image.width / image.height;
let drawWidth = targetWidth;
let drawHeight = targetHeight;
if (aspectRatio > 1) {
drawHeight = targetWidth / aspectRatio;
} else {
drawWidth = targetHeight * aspectRatio;
}
const offsetX = (targetWidth - drawWidth) / 2;
const offsetY = (targetHeight - drawHeight) / 2;
context!.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);
const texture = Texture.from(canvas);
texture.source.scaleMode = 'linear';
this.setThumbnailImages(texture, scale);
};
image.onerror = () => {
console.error('Image load failed:', thumbnailUrl);
};
image.crossOrigin = '*';
image.onload = this.onImageLoad.bind(this, image);
image.src = thumbnailUrl;
} else {
this.setThumbnailImages(null);
@@ -67,38 +28,13 @@ export class FurnitureDynamicThumbnailVisualization extends IsometricImageFurniV
return super.updateModel(scale);
}
private onImageLoad(image: HTMLImageElement): void {
const texture = Texture.from(image);
texture.source.scaleMode = 'linear';
this.setThumbnailImages(texture);
}
protected getThumbnailURL(): string {
return
}
protected setThumbnailImages(texture: Texture | null, scale: number = 1): void {
super.setThumbnailImages(texture);
if (texture && this.sprite) {
this.sprite.texture = texture;
this.sprite.width = texture.width * scale;
this.sprite.height = texture.height * scale;
this.sprite.anchor.set(0.5, 0.5);
if (this.sprite.mask) {
this.sprite.mask.destroy();
this.sprite.mask = null;
}
const mask = new Graphics()
.beginFill(0xffffff)
.drawRect(-texture.width / 2, -texture.height / 2, texture.width, texture.height)
.endFill();
this.sprite.addChild(mask);
this.sprite.mask = mask;
console.log('Sprite updated:', this.sprite.width, 'x', this.sprite.height);
} else if (!texture) {
if (this.sprite && this.sprite.mask) {
this.sprite.mask.destroy();
this.sprite.mask = null;
}
console.log('Thumbnail cleared');
}
throw new Error('This method must be overridden!');
}
}
packages/room/src/object/visualization/furniture/IsometricImageFurniVisualization.ts
+115 -95
View File
@@ -1,10 +1,9 @@
import { IGraphicAsset } from '@nitrots/api';
import { TextureUtils } from '@nitrots/utils';
import { Matrix, Sprite, Texture } from 'pixi.js';
import { Container, Matrix, Sprite, Texture } from 'pixi.js';
import { FurnitureAnimatedVisualization } from './FurnitureAnimatedVisualization';
export class IsometricImageFurniVisualization extends FurnitureAnimatedVisualization
{
export class IsometricImageFurniVisualization extends FurnitureAnimatedVisualization {
protected static THUMBNAIL: string = 'THUMBNAIL';
private _thumbnailAssetNameNormal: string;
@@ -13,8 +12,7 @@ export class IsometricImageFurniVisualization extends FurnitureAnimatedVisualiza
private _thumbnailChanged: boolean;
protected _hasOutline: boolean;
constructor()
{
constructor() {
super();
this._thumbnailAssetNameNormal = null;
@@ -24,38 +22,39 @@ export class IsometricImageFurniVisualization extends FurnitureAnimatedVisualiza
this._hasOutline = false;
}
public get hasThumbnailImage(): boolean
{
return !(this._thumbnailImageNormal == null);
public get hasThumbnailImage(): boolean {
return !!this._thumbnailImageNormal;
}
public setThumbnailImages(k: Texture): void
{
public setThumbnailImages(k: Texture): void {
this._thumbnailImageNormal = k;
this._thumbnailChanged = true;
}
protected updateModel(scale: number): boolean
{
protected updateModel(scale: number): boolean {
const flag = super.updateModel(scale);
if(!this._thumbnailChanged && (this._thumbnailDirection === this.direction)) return flag;
// Example: apply color tint for testing.
if (this.object && this.object.model) {
if (this.direction === 2) this.object.model.setValue('furniture_color', 0xFF0000);
else if (this.direction === 4) this.object.model.setValue('furniture_color', 0x0000FF);
}
// Only refresh thumbnail if something changed or the direction changed.
if (!this._thumbnailChanged && (this._thumbnailDirection === this.direction))
return flag;
this.refreshThumbnail();
return true;
}
private refreshThumbnail(): void
{
if(this.asset == null) return;
private refreshThumbnail(): void {
if (!this.asset) return;
if(this._thumbnailImageNormal)
{
if (this._thumbnailImageNormal) {
this.addThumbnailAsset(this._thumbnailImageNormal, 64);
}
else
{
} else {
this.asset.disposeAsset(this.getThumbnailAssetName(64));
}
@@ -63,111 +62,132 @@ export class IsometricImageFurniVisualization extends FurnitureAnimatedVisualiza
this._thumbnailDirection = this.direction;
}
private addThumbnailAsset(k: Texture, scale: number): void
{
let layerId = 0;
while(layerId < this.totalSprites)
{
if(this.getLayerTag(scale, this.direction, layerId) === IsometricImageFurniVisualization.THUMBNAIL)
{
const assetName = (this.cacheSpriteAssetName(scale, layerId, false) + this.getFrameNumber(scale, layerId));
const asset = this.getAsset(assetName, layerId);
if(asset)
{
const _local_6 = this.generateTransformedThumbnail(k, asset);
const _local_7 = this.getThumbnailAssetName(scale);
this.asset.disposeAsset(_local_7);
this.asset.addAsset(_local_7, _local_6, true, asset.offsetX, asset.offsetY, false, false);
}
private addThumbnailAsset(k: Texture, scale: number): void {
if (!k) {
console.warn('addThumbnailAsset called with null/undefined texture. Skipping.');
return;
}
let layerId = 0;
while (layerId < this.totalSprites) {
if (
this.getLayerTag(scale, this.direction, layerId) ===
IsometricImageFurniVisualization.THUMBNAIL
) {
const assetName =
this.cacheSpriteAssetName(scale, layerId, false) + this.getFrameNumber(scale, layerId);
const asset = this.getAsset(assetName, layerId);
if (asset) {
const transformed = this.generateTransformedThumbnail(k, asset);
if (!transformed) return;
const thumbAssetName = this.getThumbnailAssetName(scale);
this.asset.disposeAsset(thumbAssetName);
this.asset.addAsset(
thumbAssetName,
transformed,
true,
asset.offsetX,
asset.offsetY,
false,
false
);
}
return;
}
layerId++;
}
}
protected generateTransformedThumbnail(texture: Texture, asset: IGraphicAsset): Texture
{
if(this._hasOutline)
{
const container = new Sprite();
protected generateTransformedThumbnail(texture: Texture, asset: IGraphicAsset): Texture {
// 1) If an outline is needed, generate it.
if (this._hasOutline) {
const outlineContainer = new Container();
const background = new Sprite(Texture.WHITE);
background.tint = 0x000000;
background.width = (texture.width + 40);
background.height = (texture.height + 40);
background.width = texture.width + 40;
background.height = texture.height + 40;
const sprite = new Sprite(texture);
const offsetX = ((background.width - sprite.width) / 2);
const offsetY = ((background.height - sprite.height) / 2);
sprite.x = (background.width - sprite.width) / 2;
sprite.y = (background.height - sprite.height) / 2;
outlineContainer.addChild(background, sprite);
sprite.x = Math.floor(offsetX);
sprite.y = Math.floor(offsetY);
container.addChild(background, sprite);
texture = TextureUtils.generateTexture(container);
// Generate a new texture that includes the outline.
texture = TextureUtils.generateTexture(outlineContainer);
}
const scale = 1.1;
const matrix = new Matrix();
const difference = (asset.width / texture.width);
// 2) Set the texture's intended dimensions.
texture.orig.width = asset.width;
texture.orig.height = asset.height;
switch(this.direction)
{
// 3) Build the matrix (same as your original logic).
// Default matrix: (a=1, b=0, c=0, d=1, tx=0, ty=0)
const matrix = new Matrix();
switch (this.direction) {
case 2:
matrix.a = difference;
matrix.b = (-0.5 * difference);
matrix.c = 0;
matrix.d = (difference * scale);
matrix.tx = 0;
matrix.ty = ((0.5 * difference) * texture.width);
matrix.b = -0.5; // negative skew
matrix.d /= 1.6; // flatten vertically
matrix.ty = 0.5 * texture.width; // shift downward
break;
case 0:
case 4:
matrix.a = difference;
matrix.b = (0.5 * difference);
matrix.c = 0;
matrix.d = (difference * scale);
matrix.tx = 0;
matrix.ty = 0;
matrix.b = 0.5; // positive skew
matrix.d /= 1.6;
matrix.tx = -0.5; // shift left
break;
default:
matrix.a = difference;
matrix.b = 0;
matrix.c = 0;
matrix.d = difference;
matrix.tx = 0;
matrix.ty = 0;
}
const sprite = new Sprite(texture);
// 4) Decompose the matrix.
const rotation = Math.atan2(matrix.b, matrix.a);
const scaleX = Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b);
const scaleY = matrix.d;
const tx = matrix.tx;
const ty = matrix.ty;
sprite.setFromMatrix(matrix);
// 5) Create a sprite from the texture.
const finalSprite = new Sprite(texture);
// Set the anchor to center to ease flipping.
finalSprite.anchor.set(0.5, 0.5);
return TextureUtils.generateTexture(sprite);
// 6) Apply the decomposed transform.
// Since our anchor is center, add half of the texture's width/height.
finalSprite.x = tx + texture.width / 2;
finalSprite.y = ty + texture.height / 2;
finalSprite.rotation = rotation;
finalSprite.scale.set(scaleX, scaleY);
console.log(
'Manual override: direction', this.direction,
'rotation =', finalSprite.rotation,
'scale =', finalSprite.scale.x, finalSprite.scale.y,
'position =', finalSprite.x, finalSprite.y
);
// 8) Wrap the sprite in a container and generate the final texture.
const container = new Container();
container.addChild(finalSprite);
return TextureUtils.generateTexture(container);
}
protected getSpriteAssetName(scale: number, layerId: number): string
{
if(this._thumbnailImageNormal && (this.getLayerTag(scale, this.direction, layerId) === IsometricImageFurniVisualization.THUMBNAIL)) return this.getThumbnailAssetName(scale);
protected getSpriteAssetName(scale: number, layerId: number): string {
if (
this._thumbnailImageNormal &&
this.getLayerTag(scale, this.direction, layerId) === IsometricImageFurniVisualization.THUMBNAIL
) {
return this.getThumbnailAssetName(scale);
}
return super.getSpriteAssetName(scale, layerId);
}
protected getThumbnailAssetName(scale: number): string
{
this._thumbnailAssetNameNormal = this.getFullThumbnailAssetName(this.object.id, 64);
protected getThumbnailAssetName(scale: number): string {
this._thumbnailAssetNameNormal = [this._type, this.object.id, 'thumb', 64, this.direction].join('_');
return this._thumbnailAssetNameNormal;
}
protected getFullThumbnailAssetName(k: number, _arg_2: number): string
{
return [this._type, k, 'thumb', _arg_2].join('_');
protected getFullThumbnailAssetName(k: number, _arg_2: number): string {
return [this._type, k, 'thumb', _arg_2, this.direction].join('_');
}
}
packages/session/package.json
+2 -2
View File
@@ -15,9 +15,9 @@
"@nitrots/configuration": "1.0.0",
"@nitrots/events": "1.0.0",
"@nitrots/localization": "1.0.0",
"pixi.js": "^8.5.1"
"pixi.js": "^8.8.1"
},
"devDependencies": {
"typescript": "~5.5.4"
"typescript": "~5.8.2"
}
}
packages/sound/package.json
+1 -1
View File
@@ -11,7 +11,7 @@
"dependencies": {
"@nitrots/api": "1.0.0",
"@nitrots/communication": "1.0.0",
"pixi.js": "^8.5.1"
"pixi.js": "^8.8.1"
},
"devDependencies": {
"typescript": "~5.5.4"
packages/utils/package.json
+1 -1
View File
@@ -11,7 +11,7 @@
"dependencies": {
"@nitrots/api": "1.0.0",
"pako": "^2.1.0",
"pixi.js": "^8.5.1"
"pixi.js": "^8.8.1"
},
"devDependencies": {
"@types/pako": "^2.0.3",
packages/utils/src/TexturePool.ts
-2
View File
@@ -90,8 +90,6 @@ export class TexturePool
this._textures[texture.width][texture.height].splice(i, 1);
this._totalTextures--;
NitroLogger.log(`[TexturePool] Texture disposed: ${texture.width}x${texture.height}`);
}
}
}