|
|
|
# Как создать окно загрузки на Phaser при помощи CSS?
|
|
|
|
|
|
|
|
В Vue секции template примерно такой код:
|
|
|
|
|
|
|
|
```js
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
id="loading-screen"
|
|
|
|
style="
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background: white;
|
|
|
|
z-index: 1000;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<img src="images/logo.png" alt="Loading..." id="loading-logo" />
|
|
|
|
</div>
|
|
|
|
<div id="phaser-container"></div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
```
|
|
|
|
В секции script примерно такой код:
|
|
|
|
|
|
|
|
```js
|
|
|
|
<script lang="ts">
|
|
|
|
import 'phaser';
|
|
|
|
|
|
|
|
create(): void {
|
|
|
|
|
|
|
|
// Скрываем экран загрузки здесь, потому что на этом этапе preload уже завершен
|
|
|
|
|
|
|
|
document.getElementById('loading-screen').style.display = 'none';
|
|
|
|
//...Далее код приложения
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const config: Phaser.Types.Core.GameConfig = {
|
|
|
|
type: Phaser.AUTO,
|
|
|
|
parent: 'phaser-container',
|
|
|
|
width: window.innerWidth,
|
|
|
|
height: window.innerHeight,
|
|
|
|
|
|
|
|
scale: {
|
|
|
|
mode: Phaser.Scale.FIT,
|
|
|
|
autoCenter: Phaser.Scale.CENTER_BOTH,
|
|
|
|
},
|
|
|
|
scene: EndlessCanvas,
|
|
|
|
|
|
|
|
```
|
|
|
|
Таким же образом можно определять и другие свойства элементов, например при монтировании (опция mounted):
|
|
|
|
```js
|
|
|
|
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
|
|
|
|
|
|
|
|
```
|
|
|
|
При уходе со страницы необходимо вернуть свойство в состояние по умолчанию, например в Vue (quasar) в хуке beforeUnmount выполнить:
|
|
|
|
```js
|
|
|
|
document.getElementsByTagName('body')[0].style.overflow = 'auto';
|
|
|
|
``` |
|
|
\ Нет новой строки в конце файла |
