143 lines
5.9 KiB
JavaScript
143 lines
5.9 KiB
JavaScript
/*
|
|
* Copyright (c) 2020. Antonio Martinez Casadesus and Pascal Syma.
|
|
* All rights reserved.
|
|
*/
|
|
|
|
import logoImg from "../../public/favicon.png";
|
|
import map from "../assets/lvl1.json";
|
|
import menu from "../assets/menu.json";
|
|
import skeletonAtlas from "../assets/skeleton.json";
|
|
import skeletonSprite from "../assets/skeleton.png";
|
|
import charA from "../assets/char_a/spritesheet.png";
|
|
import charB from "../assets/char_b/spritesheet.png";
|
|
import charC from "../assets/char_c/spritesheet.png";
|
|
import charD from "../assets/char_d/spritesheet.png";
|
|
import zombie from "../assets/zombie/zombie.png";
|
|
import tiles from "../assets/newtiles.png";
|
|
import menutiles from "../assets/menu.png";
|
|
import buttontiles from "../assets/buttons.png";
|
|
import batFly from "../assets/BatFly.png";
|
|
import batDie from "../assets/BatDie.png";
|
|
import item_01 from "../assets/items/itemshard_01.png";
|
|
import item_02 from "../assets/items/itemshard_02.png";
|
|
import item_03 from "../assets/items/itemshard_03.png";
|
|
import heal from "../assets/items/heal.png";
|
|
import slow from "../assets/items/slow.png";
|
|
import speed from "../assets/items/speed.png";
|
|
import storm from "../assets/items/storm.png";
|
|
import heart from "../assets/heart.png";
|
|
import chest from "../assets/chest.png";
|
|
|
|
import menu_click from "../assets/audio/menu_click.wav";
|
|
import menu_hover from "../assets/audio/menu_hover.wav";
|
|
import background_start from "../assets/audio/background_start.wav";
|
|
import background_loop from "../assets/audio/background_loop.wav";
|
|
import attack_a from "../assets/audio/attack_a.wav";
|
|
import attack_b from "../assets/audio/attack_b.wav";
|
|
|
|
export default class Preload extends Phaser.Scene {
|
|
|
|
constructor() {
|
|
super('Loading');
|
|
}
|
|
|
|
preload() {
|
|
this.loadingScreen();
|
|
this.load.image("logo", logoImg);
|
|
this.load.image("item_01", item_01);
|
|
this.load.image("item_02", item_02);
|
|
this.load.image("item_03", item_03);
|
|
this.load.image("heart", heart);
|
|
this.load.spritesheet('charA', charA, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
|
|
this.load.spritesheet('charB', charB, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
|
|
this.load.spritesheet('charC', charC, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
|
|
this.load.spritesheet('charD', charD, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
|
|
this.load.spritesheet('zombie', zombie, {frameWidth: 43, frameHeight: 55, margin: 1, spacing: 2});
|
|
this.load.spritesheet('tiles', tiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
|
|
this.load.spritesheet('menutiles', menutiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
|
|
this.load.spritesheet('buttontiles', buttontiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
|
|
this.load.spritesheet('batFly', batFly, {frameWidth: 48, frameHeight: 32/*, margin: 1, spacing: 2*/});
|
|
this.load.spritesheet('batDie', batDie, {frameWidth: 48, frameHeight: 32/*, margin: 1, spacing: 2*/});
|
|
this.load.spritesheet('chest', chest, {frameWidth: 32, frameHeight: 32, margin: 1, spacing: 2});
|
|
this.load.spritesheet('heal', heal, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
|
|
this.load.spritesheet('storm', storm, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
|
|
this.load.spritesheet('speed', speed, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
|
|
this.load.spritesheet('slow', slow, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
|
|
this.load.tilemapTiledJSON("map", map);
|
|
this.load.tilemapTiledJSON("menu", menu);
|
|
|
|
this.load.atlas({key: 'skeleton', textureURL: skeletonSprite, atlasURL: skeletonAtlas});
|
|
|
|
this.load.audio('menu_click', menu_click);
|
|
this.load.audio('menu_hover', menu_hover);
|
|
this.load.audio('background_start', background_start);
|
|
this.load.audio('background_loop', background_loop);
|
|
this.load.audio('attack_a', attack_a);
|
|
this.load.audio('attack_b', attack_b);
|
|
|
|
}
|
|
|
|
create() {
|
|
this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, 'logo').setOrigin(0.5, 0.5).setDisplaySize(this.cameras.main.centerX, this.cameras.main.centerX);
|
|
setTimeout(() => {
|
|
// this.scene.start('Menu');
|
|
this.scene.start('GUI', {key: 'MainMenu'});
|
|
}, 2 * 1000)
|
|
|
|
this.anims.create({
|
|
key: 'idle',
|
|
frames: this.anims.generateFrameNumbers('charA', {start: 126, end: 131}),
|
|
frameRate: 10,
|
|
repeat: -1
|
|
});
|
|
}
|
|
|
|
loadingScreen() {
|
|
const progressBar = this.add.graphics();
|
|
const progressBox = this.add.graphics();
|
|
const width = this.cameras.main.width;
|
|
const height = this.cameras.main.height;
|
|
|
|
progressBox.fillStyle(0x222222, 0.8);
|
|
progressBox.fillRect(width / 4, height / 2 - 25, width / 2, 50);
|
|
|
|
const loadingText = this.make.text({
|
|
x: width / 2,
|
|
y: height / 2 - 25 - 20,
|
|
text: 'Loading...',
|
|
style: {
|
|
font: '20px monospace',
|
|
fill: '#ffffff'
|
|
}
|
|
});
|
|
loadingText.setOrigin(0.5, 1);
|
|
|
|
const percentText = this.make.text({
|
|
x: width / 2,
|
|
y: height / 2,
|
|
text: '0%',
|
|
style: {
|
|
font: '18px monospace',
|
|
fill: '#ffffff'
|
|
}
|
|
});
|
|
percentText.setOrigin(0.5, 0.5);
|
|
|
|
this.load.on('progress', (value) => {
|
|
percentText.setText(parseInt(value * 100) + '%');
|
|
progressBar.clear();
|
|
progressBar.fillStyle(0xffffff, 1);
|
|
progressBar.fillRect(width / 4 + 10, height / 2 - 25 + 10, (width / 2 - 20) * value, 50 - 20);
|
|
});
|
|
|
|
this.load.on('complete', () => {
|
|
progressBar.destroy();
|
|
progressBox.destroy();
|
|
loadingText.destroy();
|
|
percentText.destroy();
|
|
|
|
});
|
|
}
|
|
|
|
}
|