From 382cb665d8d1e1708568ca357375be0b8231ef56 Mon Sep 17 00:00:00 2001 From: billsonnn Date: Sat, 30 Mar 2024 22:51:51 -0400 Subject: [PATCH] Fixes --- src/App.tsx | 11 +++-- src/api/avatar/BodyModel.ts | 2 +- src/api/room/widgets/ChatBubbleUtilities.ts | 2 +- src/common/layout/LayoutAvatarImageView.tsx | 47 +++++++++++++-------- src/hooks/rooms/useRoom.ts | 3 +- 5 files changed, 39 insertions(+), 26 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 4b2d8be5..1c8e72cc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer'; +import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomCameraWidgetManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { GetUIVersion } from './api'; import { Base } from './common'; @@ -38,8 +38,6 @@ export const App: FC<{}> = props => resolution: window.devicePixelRatio }); - GetTicker().add(ticker => renderer.render(GetStage())); - await GetConfiguration().init(); GetTicker().maxFPS = GetConfiguration().getValue('system.fps.max', 24); @@ -58,7 +56,8 @@ export const App: FC<{}> = props => GetAvatarRenderManager().init(), GetSoundManager().init(), GetSessionDataManager().init(), - GetRoomSessionManager().init() + GetRoomSessionManager().init(), + GetRoomCameraWidgetManager().init() ] ); @@ -73,6 +72,10 @@ export const App: FC<{}> = props => setInterval(() => HabboWebTools.sendHeartBeat(), 10000); + GetTicker().add(ticker => GetRoomEngine().update(ticker)); + GetTicker().add(ticker => renderer.render(GetStage())); + GetTicker().add(ticker => GetTexturePool().run()); + setIsReady(true); // handle socket close diff --git a/src/api/avatar/BodyModel.ts b/src/api/avatar/BodyModel.ts index 95a01a97..d2cf7e4c 100644 --- a/src/api/avatar/BodyModel.ts +++ b/src/api/avatar/BodyModel.ts @@ -47,7 +47,7 @@ export class BodyModel extends CategoryBaseModel const figureString = AvatarEditorUtilities.CURRENT_FIGURE.getFigureStringWithFace(part.id); const avatarImage = GetAvatarRenderManager().createAvatarImage(figureString, AvatarScaleType.LARGE, null, { resetFigure, dispose: null, disposed: false }); - const sprite = avatarImage.getImageAsSprite(AvatarSetType.HEAD); + const sprite = avatarImage.processAsContainer(AvatarSetType.HEAD); if(sprite) { diff --git a/src/api/room/widgets/ChatBubbleUtilities.ts b/src/api/room/widgets/ChatBubbleUtilities.ts index 9e1df0f4..0ccbb144 100644 --- a/src/api/room/widgets/ChatBubbleUtilities.ts +++ b/src/api/room/widgets/ChatBubbleUtilities.ts @@ -25,7 +25,7 @@ export class ChatBubbleUtilities figure = avatarImage.getFigure().getFigureString(); - const imageUrl = await avatarImage.getCroppedImageUrl(AvatarSetType.HEAD); + const imageUrl = avatarImage.processAsImageUrl(AvatarSetType.HEAD); const color = avatarImage.getPartColor(AvatarFigurePartType.CHEST); if(isPlaceholder) this.placeHolderImageUrl = imageUrl; diff --git a/src/common/layout/LayoutAvatarImageView.tsx b/src/common/layout/LayoutAvatarImageView.tsx index d3902769..6ff0a5fa 100644 --- a/src/common/layout/LayoutAvatarImageView.tsx +++ b/src/common/layout/LayoutAvatarImageView.tsx @@ -2,6 +2,8 @@ import { AvatarScaleType, AvatarSetType, GetAvatarRenderManager } from '@nitrots import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react'; import { Base, BaseProps } from '../Base'; +const AVATAR_IMAGE_CACHE: Map = new Map(); + export interface LayoutAvatarImageViewProps extends BaseProps { figure: string; @@ -49,31 +51,40 @@ export const LayoutAvatarImageView: FC = props => { if(!isReady) return; - const resetFigure = (_figure: string) => + const figureKey = [ figure, gender, direction, headOnly ].join('-'); + + if(AVATAR_IMAGE_CACHE.has(figureKey)) { - if(isDisposed.current) return; - - const avatarImage = GetAvatarRenderManager().createAvatarImage(_figure, AvatarScaleType.LARGE, gender, { resetFigure: (figure: string) => resetFigure(figure), dispose: null, disposed: false }); - - let setType = AvatarSetType.FULL; - - if(headOnly) setType = AvatarSetType.HEAD; - - avatarImage.setDirection(setType, direction); - - const loadImage = async () => + setAvatarUrl(AVATAR_IMAGE_CACHE.get(figureKey)); + } + else + { + const resetFigure = (_figure: string) => { - const imageUrl = await avatarImage.getCroppedImageUrl(setType); + if(isDisposed.current) return; + + const avatarImage = GetAvatarRenderManager().createAvatarImage(_figure, AvatarScaleType.LARGE, gender, { resetFigure: (figure: string) => resetFigure(figure), dispose: null, disposed: false }); - if(imageUrl && !isDisposed.current) setAvatarUrl(imageUrl); + let setType = AvatarSetType.FULL; - avatarImage.dispose(); + if(headOnly) setType = AvatarSetType.HEAD; + + avatarImage.setDirection(setType, direction); + + const imageUrl = avatarImage.processAsImageUrl(setType); + + if(imageUrl && !isDisposed.current) + { + if(!avatarImage.isPlaceholder()) AVATAR_IMAGE_CACHE.set(figureKey, imageUrl); + + setAvatarUrl(imageUrl); + } + + avatarImage.dispose(true); } - loadImage(); + resetFigure(figure); } - - resetFigure(figure); }, [ figure, gender, direction, headOnly, isReady ]); useEffect(() => diff --git a/src/hooks/rooms/useRoom.ts b/src/hooks/rooms/useRoom.ts index 666121b3..0ad1732d 100644 --- a/src/hooks/rooms/useRoom.ts +++ b/src/hooks/rooms/useRoom.ts @@ -256,14 +256,13 @@ const useRoomState = () => const width = Math.floor(window.innerWidth); const height = Math.floor(window.innerHeight); + renderer.resolution = window.devicePixelRatio; renderer.resize(width, height); background.width = width; background.height = height; InitializeRoomInstanceRenderingCanvas(width, height, 1); - - renderer.render(GetStage()); } window.addEventListener('resize', resize);