FPS drop when loading large number of assets

Phaser 3
1

Hi,

I have many assets that are required to be loaded before the main game scene can be activated. I use a preloader scene which has a circular loading spinner with the game logo at center of it which is rendered all the while till assets are loaded.

Both the spinner and logo are loaded earlier and i am animating them using tween animation. The problem is that whenever assets are being loaded the animation janks and is choppy with very low fps. Once assets loading gets completed the animation is silky smooth and fps are back to above 50.

I profiled for issues using chrome dev tools and i see lot of time being taken up by Image Decoding. I am sharing my code below for reference.

import Images from '../../data/Images'
import Sounds from '../../data/Sounds'
import GameData from '../helpers/GameData'

export default class PreloadScene extends Phaser.Scene {
	constructor() {
		super({ key: 'preload' })
	}

	//load all assets required for our main game screen here
	preload(): void {
		this.renderLoaderUi()
		this.loadAssets()
	}

	//creates loading spinner and logo UI and starts animating them
	private renderLoaderUi(): void {
		const centerX = this.cameras.main.centerX
		const centerY = this.cameras.main.centerY

		const spinner = this.add.image(centerX, centerY - 175, 'loader-spinner')
		this.tweens.add({
			targets: spinner,
			angle: 360,
			duration: 1500,
			ease: 'Linear',
			loop: -1
		})

		const loaderLogo = this.add.image(centerX, centerY - 175, 'loader-logo')
		this.tweens.add({
			targets: loaderLogo,
			scale: 1.1,
			duration: 1500,
			ease: 'Linear',
			loop: -1,
			yoyo: true
		})

		const loadingProgressText = this.add.text(centerX + 10, centerY + 200, '0 %', {
			color: '#fff',
			fontFamily: 'LatoRegular',
			fontSize: '48px',
			shadow: {
				offsetX: 0,
				offsetY: 0,
				color: '#ff2fff',
				stroke: true,
				blur: 16,
				fill: true
			}
		})
		loadingProgressText.setOrigin(0.5)

		const myJackpotLogo = this.add.image(centerX, centerY + 400, 'my-jacpot-logo')

		this.load.on('progress', value => {
			loadingProgressText.setText(`${Math.ceil(value * 100)} %`)
		})
		this.load.on('complete', () => {
			loaderLogo.destroy()
			loadingProgressText.destroy()
			spinner.destroy()
			myJackpotLogo.destroy()
		})
	}

	private loadAssets(): void {
		const scale = GameData.getScale()
		Sounds.list.forEach((assetName: string) => {
			this.load.audio(assetName, ['assets/sounds/' + assetName + '.mp3'])
		})

		Images.list.forEach(item => {
			if (item.f) {
				this.load.spritesheet(item.key, `assets/img/${scale}/${item.path}/${item.key}.png`, {
					frameWidth: item.w as number,
					frameHeight: item.h as number,
					startFrame: 0,
					endFrame: 0
				})
			} else {
				this.load.image(item.key, `assets/img/${scale}/${item.path}/${item.key}.png`)
			}
		})
	}

	//will be called after all assets in preload script have finished loading
	create(): void {
		//disable opacity in background
		const bgElement = document.getElementsByClassName('background-overlay')[0]
		bgElement.setAttribute('style', 'opacity:0')

		this.scene.start('MainScene')
		/**
		 * This is how you would dynamically import the mainScene class (with code splitting),
		 * add the mainScene to the Scene Manager
		 * and start the scene.
		 * The name of the chunk would be 'mainScene.chunk.js
		 * Find more about code splitting here: https://webpack.js.org/guides/code-splitting/
		 */
		// let someCondition = true
		// if (someCondition)
		//   import(/* webpackChunkName: "mainScene" */ './mainScene').then(mainScene => {
		//     this.scene.add('MainScene', mainScene.default, true)
		//   })
		// else console.log('The mainScene class will not even be loaded by the browser')
	}
}

I tried searching for solution to this issue but could not figure out what is going wrong here and what could be done to fix this. Any help will be greatly appreciated. Thanks !