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

🆙 Added animated gif to badge_display

Browse Source 
Display Container
├── Furniture Container (renders 1st - back)
│   └── All furniture sprites sorted by z-depth
├── Avatar Container (renders 2nd - middle)
│   └── All avatar sprites sorted by z-depth
└── Badge Container (renders 3rd - front)
    └── All badge sprites sorted by z-depth

✅ Badges render on top of their furniture
✅ Avatars respect proper 3D depth (in front when in front, behind when behind)
✅ Animated GIFs work beautifully
✅ Clean, maintainable code with just a tiny z-offset
This commit is contained in:
duckietm
2026-01-30 09:59:04 +01:00
parent 866449efca
commit e263ce59bf
4 changed files with 192 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/room/src/object/visualization/furniture/FurnitureBadgeDisplayVisualization.ts
+154 -38
View File
@@ -2,6 +2,7 @@ import { IGraphicAsset, IRoomObjectSprite, RoomObjectVariable } from '@nitrots/a
import { GetConfiguration } from '@nitrots/configuration';
import { GetSessionDataManager } from '@nitrots/session';
import { Texture } from 'pixi.js';
import { parseGIF, decompressFrames } from 'gifuct-js';
import { FurnitureAnimatedVisualization } from './FurnitureAnimatedVisualization';
export class FurnitureBadgeDisplayVisualization extends FurnitureAnimatedVisualization
@@ -13,28 +14,67 @@ export class FurnitureBadgeDisplayVisualization extends FurnitureAnimatedVisuali
private _badgeAssetNameNormalScale = '';
private _badgeAssetNameSmallScale = '';
private _badgeVisibleInState = -1;
private _gifFrames: ImageData[] = null;
private _frameDelays: number[] = null;
private _currentFrame = 0;
private _lastFrameTime = 0;
public getTexture(scale: number, layerId: number, asset: IGraphicAsset): Texture
{
return super.getTexture(scale, layerId, asset);
}
public get sprites(): IRoomObjectSprite[]
{
const sprites = super.sprites;
for(const sprite of sprites)
public update(geometry: any, time: number, update: boolean, skipUpdate: boolean): void
{
if(!sprite) continue;
if(sprite.name === this._badgeAssetNameNormalScale || sprite.name === this._badgeAssetNameSmallScale)
super.update(geometry, time, update, skipUpdate);
// Update animated GIF
if(this._gifFrames && this._gifFrames.length > 1)
{
sprite.relativeDepth = 0.01;
const sessionDataManager = GetSessionDataManager();
let tex = sessionDataManager.getBadgeImage(this._badgeId);
if (!tex) tex = sessionDataManager.getGroupBadgeImage(this._badgeId);
if(!tex)
{
console.warn('⚠️ No texture found for badge:', this._badgeId);
return;
}
const badgeCanvas = (tex.source as any).resource as HTMLCanvasElement;
const now = performance.now();
const elapsed = now - this._lastFrameTime;
const frameDelay = (this._frameDelays[this._currentFrame] || 10) * 10;
if(elapsed >= frameDelay)
{
this._lastFrameTime = now;
const oldFrame = this._currentFrame;
this._currentFrame = (this._currentFrame + 1) % this._gifFrames.length;
const ctx = badgeCanvas.getContext('2d', { willReadFrequently: true });
const frame = this._gifFrames[this._currentFrame];
if(frame)
{
ctx.putImageData(frame, 0, 0);
tex.source.update();
const assetName = this._badgeAssetNameNormalScale;
if(this.asset && assetName)
{
const asset = this.getAsset(assetName, FurnitureBadgeDisplayVisualization.BADGE_LAYER_ID);
if(asset && asset.texture)
{
asset.texture.source.update();
}
}
}
}
}
}
return sprites;
}
protected updateModel(scale: number): boolean
{
@@ -49,6 +89,8 @@ export class FurnitureBadgeDisplayVisualization extends FurnitureAnimatedVisuali
this._badgeAssetNameNormalScale = '';
this._badgeAssetNameSmallScale = '';
this._badgeVisibleInState = -1;
this._gifFrames = null;
this._frameDelays = null;
return needsUpdate;
}
@@ -62,6 +104,11 @@ export class FurnitureBadgeDisplayVisualization extends FurnitureAnimatedVisuali
const visibleInState = this.object.model.getValue<number>(RoomObjectVariable.FURNITURE_BADGE_VISIBLE_IN_STATE);
this._badgeVisibleInState = isNaN(visibleInState) ? -1 : visibleInState;
this._gifFrames = null;
this._frameDelays = null;
this._currentFrame = 0;
this._lastFrameTime = 0;
this.addBadgeToAssetCollection(badgeId);
const layerId = FurnitureBadgeDisplayVisualization.BADGE_LAYER_ID;
@@ -151,33 +198,102 @@ export class FurnitureBadgeDisplayVisualization extends FurnitureAnimatedVisuali
return offset;
}
private addBadgeToAssetCollection(badgeId: string): void
{
const sessionDataManager = GetSessionDataManager();
private async addBadgeToAssetCollection(badgeId: string): Promise<void>
{
const sessionDataManager = GetSessionDataManager();
let tex = sessionDataManager.getBadgeImage(badgeId);
if (!tex) tex = sessionDataManager.getGroupBadgeImage(badgeId);
let tex = sessionDataManager.getBadgeImage(badgeId);
if (!tex) tex = sessionDataManager.getGroupBadgeImage(badgeId);
if (!tex || !this.asset) return;
if (!tex || !this.asset) return;
const canvas = (tex.source as any).resource as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, 1, 1);
const isEmpty = imageData.data[3] === 0;
const badgeCanvas = (tex.source as any).resource as HTMLCanvasElement;
const ctx = badgeCanvas.getContext('2d', { willReadFrequently: true });
const imageData = ctx.getImageData(0, 0, 1, 1);
const isEmpty = imageData.data[3] === 0;
if (isEmpty) {
const badgeUrl = GetConfiguration().getValue<string>('badge.asset.url', '').replace('%badgename%', badgeId);
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
tex.source.update();
};
img.src = badgeUrl;
}
if (isEmpty || !this._gifFrames)
{
const badgeUrl = GetConfiguration().getValue<string>('badge.asset.url', '').replace('%badgename%', badgeId);
try
{
const response = await fetch(badgeUrl);
const arrayBuffer = await response.arrayBuffer();
const gif = parseGIF(arrayBuffer);
const frames = decompressFrames(gif, true);
if(frames && frames.length > 0)
{
this._gifFrames = [];
this._frameDelays = [];
const accCanvas = document.createElement('canvas');
accCanvas.width = gif.lsd.width;
accCanvas.height = gif.lsd.height;
const accCtx = accCanvas.getContext('2d', { willReadFrequently: true });
for(let i = 0; i < frames.length; i++)
{
const frame = frames[i];
this.asset.addAsset(badgeId, tex, true, 0, 0, false, false);
}
}
if(i > 0)
{
const prevDisposal = frames[i - 1].disposalType;
if(prevDisposal === 2)
{
accCtx.clearRect(0, 0, gif.lsd.width, gif.lsd.height);
}
}
const tempCanvas = document.createElement('canvas');
tempCanvas.width = frame.dims.width;
tempCanvas.height = frame.dims.height;
const tempCtx = tempCanvas.getContext('2d');
const patchData = new ImageData(
new Uint8ClampedArray(frame.patch),
frame.dims.width,
frame.dims.height
);
tempCtx.putImageData(patchData, 0, 0);
accCtx.drawImage(tempCanvas, frame.dims.left, frame.dims.top);
const fullFrame = accCtx.getImageData(0, 0, gif.lsd.width, gif.lsd.height);
this._gifFrames.push(fullFrame);
this._frameDelays.push(frame.delay || 10);
}
this._currentFrame = 0;
this._lastFrameTime = performance.now();
const avgDelay = this._frameDelays.reduce((a, b) => a + b, 0) / this._frameDelays.length;
if(avgDelay > 50)
{
this._frameDelays = this._frameDelays.map(() => 10);
}
ctx.putImageData(this._gifFrames[0], 0, 0);
tex.source.update();
}
}
catch(err)
{
console.error('Failed to parse GIF, using static image:', err);
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () =>
{
ctx.clearRect(0, 0, badgeCanvas.width, badgeCanvas.height);
ctx.drawImage(img, 0, 0, badgeCanvas.width, badgeCanvas.height);
tex.source.update();
};
img.src = badgeUrl;
}
}
this.asset.addAsset(badgeId, tex, true, 0, 0, false, false);
}
}