noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added loader logics for assets

Browse Source
This commit is contained in:
Dennis Postma 2024-07-06 19:56:04 +02:00
parent d0fdeebd5d
commit 4d0c1ae77c
1 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/screens/Game.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<div class="game-container"> <div class="game-container">
<GmTools /> <GmTools v-if="isLoaded" />
<GmPanel /> <GmPanel v-if="isLoaded" />
<Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active"> <Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
<Scene name="main" @preload="preloadScene" @create="createScene"> <Scene name="main" @preload="preloadScene" @create="createScene">
<div class="top-ui"> <div class="top-ui" v-if="isLoaded">
<Hud /> <Hud />
</div> </div>
<div class="center-ui"> <div class="center-ui"v-if="isLoaded">
<World /> <World />
</div> </div>
<div class="bottom-ui"> <div class="bottom-ui" v-if="isLoaded">
<Chat /> <Chat />
<Menubar /> <Menubar />
</div> </div>
</Scene> </Scene>
</Game> </Game>
<Game class="game" :config="gameConfig" @create="createGame" v-else> <Game class="game" :config="gameConfig" @create="createGame" v-if="zoneEditorStore.active">
<Scene name="main" @preload="preloadScene" @create="createScene"> <Scene name="main" @preload="preloadScene" @create="createScene">
<ZoneEditor /> <ZoneEditor v-if="isLoaded" />
</Scene> </Scene>
</Game> </Game>
</div> </div>
@ -28,7 +28,7 @@
<script setup lang="ts"> <script setup lang="ts">
import config from '@/config' import config from '@/config'
import 'phaser' import 'phaser'
import { onUnmounted, toRaw, watch } from 'vue' import { onUnmounted, toRaw, watch, ref } from 'vue'
import { Game, Scene } from 'phavuer' import { Game, Scene } from 'phavuer'
import { useSocketStore } from '@/stores/socket' import { useSocketStore } from '@/stores/socket'
import { useZoneEditorStore } from '@/stores/zoneEditor' import { useZoneEditorStore } from '@/stores/zoneEditor'
@ -44,6 +44,7 @@ import GmPanel from '@/components/utilities/GmPanel.vue'
const socket = useSocketStore() const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const assetStore = useAssetStore() const assetStore = useAssetStore()
const isLoaded = ref(false)
onUnmounted(() => { onUnmounted(() => {
socket.disconnectSocket() socket.disconnectSocket()
@ -72,6 +73,41 @@ const createGame = (game: Phaser.Game) => {
} }
const preloadScene = (scene: Phaser.Scene) => { const preloadScene = (scene: Phaser.Scene) => {
/**
* @TODO : Fix the progress bar so its centered correctly
*/
const width = scene.cameras.main.width;
const height = scene.cameras.main.height;
const progressBox = scene.add.graphics();
const progressBar = scene.add.graphics();
progressBox.fillStyle(0x222222, 0.8);
progressBox.fillRect(width / 2 - 180, height / 2, 320, 50);
const loadingText = scene.make.text({
x: width / 2,
y: height / 2 - 50,
text: 'Loading...',
style: {
font: '20px monospace',
fill: '#ffffff'
}
});
loadingText.setOrigin(0.5, 0.5);
scene.load.on('progress', function (value: any) {
progressBar.clear();
progressBar.fillStyle(0x368f8b, 1);
progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30);
});
scene.load.on('complete', function () {
progressBar.destroy();
progressBox.destroy();
loadingText.destroy();
isLoaded.value = true
});
/** /**
* Load the assets into the Phaser scene * Load the assets into the Phaser scene
*/ */