Fixes

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<number>('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

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)
                 {

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;

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<string, string> = new Map();
+
 export interface LayoutAvatarImageViewProps extends BaseProps<HTMLDivElement>
 {
     figure: string;
@@ -49,6 +51,14 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
     {
         if(!isReady) return;
 
+        const figureKey = [ figure, gender, direction, headOnly ].join('-');
+
+        if(AVATAR_IMAGE_CACHE.has(figureKey))
+        {
+            setAvatarUrl(AVATAR_IMAGE_CACHE.get(figureKey));
+        }
+        else
+        {
             const resetFigure = (_figure: string) =>
             {
                 if(isDisposed.current) return;
@@ -61,19 +71,20 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
 
                 avatarImage.setDirection(setType, direction);
 
-            const loadImage = async () =>
+                const imageUrl = avatarImage.processAsImageUrl(setType);
+
+                if(imageUrl && !isDisposed.current)
                 {
-                const imageUrl = await avatarImage.getCroppedImageUrl(setType);
+                    if(!avatarImage.isPlaceholder()) AVATAR_IMAGE_CACHE.set(figureKey, imageUrl);
 
-                if(imageUrl && !isDisposed.current) setAvatarUrl(imageUrl);
+                    setAvatarUrl(imageUrl);
-
-                avatarImage.dispose();
                 }
 
-            loadImage();
+                avatarImage.dispose(true);
             }
 
             resetFigure(figure);
+        }
     }, [ figure, gender, direction, headOnly, isReady ]);
 
     useEffect(() =>

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);