138 lines
3.7 KiB
JavaScript
138 lines
3.7 KiB
JavaScript
import 'phaser';
|
|
// import Phaser from '../phaser.min';
|
|
import config from '../Config/config';
|
|
|
|
export default class PreloaderScene extends Phaser.Scene {
|
|
constructor () {
|
|
super('Preloader');
|
|
}
|
|
|
|
init () {
|
|
this.readyCount = 0;
|
|
}
|
|
|
|
preload () {
|
|
|
|
// var width = this.cameras.main.width;
|
|
// var height = this.cameras.main.height;
|
|
|
|
var width = config.width;
|
|
var height = config.height;
|
|
|
|
|
|
this.titleText = this.add.text(config.width/2, 250, "IPv6 Penguin", {
|
|
font: "68px Arial Black",
|
|
wordWrap: { width: 820, useAdvancedWrap: true },
|
|
color: '#4AB6F5',
|
|
align: 'center'
|
|
}).setOrigin(.5);
|
|
this.titleText.setStroke('#ffffff', 23);
|
|
|
|
// display progress bar
|
|
var progressBar = this.add.graphics().setDepth(10);
|
|
var progressBox = this.add.graphics();
|
|
progressBox.fillStyle(0x222222, 0.8);
|
|
progressBox.fillRect(225, config.height/2 + 200, (width / 2) + 10, 50);
|
|
|
|
var loadingText = this.make.text({
|
|
x: width / 2,
|
|
y: height / 2 + 50,
|
|
text: 'Loading...',
|
|
style: {
|
|
font: '60px monospace',
|
|
fill: '#ffffff'
|
|
}
|
|
});
|
|
loadingText.setOrigin(0.5, 0.5);
|
|
|
|
var percentText = this.make.text({
|
|
x: width / 2,
|
|
y: height / 2 + 140,
|
|
text: '0%',
|
|
style: {
|
|
font: '38px monospace',
|
|
fill: '#ffffff'
|
|
}
|
|
});
|
|
percentText.setOrigin(0.5, 0.5);
|
|
|
|
// update progress bar
|
|
this.load.on('progress', function (value) {
|
|
percentText.setText(parseInt(value * 100) + '%');
|
|
progressBar.clear();
|
|
progressBar.fillStyle(0xffffff, 1);
|
|
progressBar.fillRect(225 + 5, config.height/2 + 205, (width / 2) * value, 40);
|
|
});
|
|
|
|
|
|
// remove progress bar when complete
|
|
this.load.on('complete', function () {
|
|
progressBar.destroy();
|
|
progressBox.destroy();
|
|
loadingText.destroy();
|
|
percentText.destroy();
|
|
this.ready();
|
|
}.bind(this));
|
|
|
|
|
|
console.log('preloading game...');
|
|
|
|
this.load.image("bg", "assets/bg.png");
|
|
this.load.image("btn", "assets/btn.png");
|
|
this.load.image("hand", "assets/hand.png");
|
|
this.load.image("ocean", "assets/ocean.png");
|
|
this.load.image("title", "assets/title.png");
|
|
|
|
this.load.image("cloud1", "assets/cloud1.png");
|
|
this.load.image("cloud2", "assets/cloud2.png");
|
|
this.load.image("cloud3", "assets/cloud3.png");
|
|
this.load.image("cloud4", "assets/cloud4.png");
|
|
this.load.image("cloud5", "assets/cloud5.png");
|
|
|
|
this.load.image("platform", "assets/platform.png");
|
|
|
|
// player is a sprite sheet made by 24x48 pixels
|
|
this.load.spritesheet("player", "assets/player.png", {
|
|
frameWidth: 60,
|
|
frameHeight: 65
|
|
});
|
|
|
|
// mountains are a sprite sheet made by 512x512 pixels
|
|
this.load.spritesheet("mountain", "assets/mountain.png", {
|
|
frameWidth: 720,
|
|
frameHeight: 660
|
|
});
|
|
// mountains are a sprite sheet made by 512x512 pixels
|
|
// this.load.spritesheet("platform", "assets/platform.png", {
|
|
// frameWidth: 400,
|
|
// frameHeight: 200
|
|
// });
|
|
this.load.audio("jump", ["assets/jump.ogg","assets/jump.mp3"]);
|
|
this.load.audio('bgMusic', ['assets/bg_music.ogg','assets/bg_music.mp3']);
|
|
|
|
|
|
}
|
|
|
|
create () {
|
|
|
|
|
|
// setting player animation
|
|
this.anims.create({
|
|
key: "run",
|
|
frames: this.anims.generateFrameNumbers("player", {
|
|
start: 0,
|
|
end: 10
|
|
}),
|
|
frameRate: 20,
|
|
repeat: -1
|
|
});
|
|
|
|
this.scene.start('Title');
|
|
}
|
|
|
|
ready () {
|
|
// this.scene.start('Result',{ point : 10, mistake : 1});
|
|
// this.scene.start('Title');
|
|
}
|
|
};
|