Nice menu background added
This commit is contained in:
parent
a4c90028a9
commit
00c378374f
BIN
public/assets/gui/main_background.jpg
Normal file
BIN
public/assets/gui/main_background.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 112 KiB |
@ -3,6 +3,8 @@ import { CreepDefinition, GemDefinition, MissionDefinition, TowerDefinition } fr
|
||||
import { Engine } from './Bastion';
|
||||
|
||||
export default class GameAssets {
|
||||
public static MainBackground: PIXI.Texture;
|
||||
|
||||
public static Frame01Texture: PIXI.Texture;
|
||||
public static Frame02Texture: PIXI.Texture;
|
||||
public static Frame03Texture: PIXI.Texture;
|
||||
@ -105,6 +107,7 @@ export default class GameAssets {
|
||||
this.Load('./assets/gui/frame_blue.png').then((texture) => (this.BlueBackground = texture)),
|
||||
this.Load('./assets/gui/banner_01.png').then((texture) => (this.BannerGemsmith = texture)),
|
||||
this.Load('./assets/gui/note.png').then((texture) => (this.EndScreenDialog = texture)),
|
||||
this.Load('./assets/gui/main_background.jpg').then((texture) => (this.MainBackground = texture)),
|
||||
|
||||
this.Load('./assets/tutorial/tutorial01.jpg').then((texture) => (this.Tutorial01 = texture)),
|
||||
this.Load('./assets/tutorial/tutorial02.jpg').then((texture) => (this.Tutorial02 = texture)),
|
||||
|
@ -1,3 +1,4 @@
|
||||
import GameAssets from '../classes/Assets';
|
||||
import { Engine } from '../classes/Bastion';
|
||||
import { FadeInOut, Tween } from '../classes/game/AnimationManager';
|
||||
import Button, { ButtonTexture } from '../classes/gui/Button';
|
||||
@ -8,50 +9,27 @@ import * as PIXI from 'pixi.js';
|
||||
|
||||
export class MainScene extends Scene {
|
||||
public init() {
|
||||
// Background
|
||||
this.addMainBackground();
|
||||
|
||||
const NewGameButton = {
|
||||
caption: 'New Game',
|
||||
rect: new PIXI.Rectangle(
|
||||
Engine.app.canvas.width / 2 - 300 / 2,
|
||||
Engine.app.canvas.height / 5 + 2 * 80,
|
||||
300,
|
||||
60
|
||||
),
|
||||
rect: new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + 0 * 70, 300, 60),
|
||||
|
||||
texture: ButtonTexture.Button02,
|
||||
texture: ButtonTexture.Button01,
|
||||
};
|
||||
const TutorialButton = {
|
||||
caption: 'How to play',
|
||||
rect: new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + 1 * 70, 300, 60),
|
||||
texture: ButtonTexture.Button01,
|
||||
};
|
||||
|
||||
const SettingsButton = {
|
||||
caption: 'Settings',
|
||||
rect: new PIXI.Rectangle(
|
||||
Engine.app.canvas.width / 2 - 300 / 2,
|
||||
Engine.app.canvas.height / 5 + 4 * 80,
|
||||
300,
|
||||
60
|
||||
),
|
||||
texture: ButtonTexture.Button02,
|
||||
rect: new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + 2 * 70, 300, 60),
|
||||
texture: ButtonTexture.Button01,
|
||||
};
|
||||
const TutorialButton = {
|
||||
caption: 'How to play',
|
||||
rect: new PIXI.Rectangle(
|
||||
Engine.app.canvas.width / 2 - 300 / 2,
|
||||
Engine.app.canvas.height / 5 + 3 * 80,
|
||||
300,
|
||||
60
|
||||
),
|
||||
texture: ButtonTexture.Button02,
|
||||
};
|
||||
let text = new PIXI.Text({
|
||||
x: Engine.app.canvas.width / 2 - 300 / 2,
|
||||
y: Engine.app.canvas.height / 5 + 20,
|
||||
text: 'BASTION',
|
||||
style: {
|
||||
fill: 0xffaa00,
|
||||
fontFamily: 'Aclonica',
|
||||
fontSize: 100,
|
||||
},
|
||||
});
|
||||
text.x = text.x - text.width / 5;
|
||||
Engine.GameMaster.currentScene.stage.addChild(text);
|
||||
|
||||
let text2 = new PIXI.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -62,11 +40,9 @@ export class MainScene extends Scene {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
Engine.GameMaster.currentScene.stage.addChild(text2);
|
||||
this.stage.addChild(text2);
|
||||
const button01 = new Button(NewGameButton.rect, NewGameButton.caption, NewGameButton.texture, true);
|
||||
button01.onClick = (e) => {
|
||||
Engine.GameMaster.currentScene.stage.removeChild(text);
|
||||
Engine.GameMaster.currentScene.stage.removeChild(text2);
|
||||
Engine.GameMaster.changeScene(new MissionPickerScene());
|
||||
};
|
||||
|
||||
@ -76,8 +52,6 @@ export class MainScene extends Scene {
|
||||
};
|
||||
let b3 = new Button(TutorialButton.rect, TutorialButton.caption, TutorialButton.texture, true);
|
||||
b3.onClick = (e) => {
|
||||
Engine.GameMaster.currentScene.stage.removeChild(text);
|
||||
Engine.GameMaster.currentScene.stage.removeChild(text2);
|
||||
Engine.GameMaster.changeScene(new HowToPlay());
|
||||
};
|
||||
}
|
||||
|
@ -8,18 +8,14 @@ import * as PIXI from 'pixi.js';
|
||||
|
||||
export class MissionPickerScene extends Scene {
|
||||
public init() {
|
||||
const button = new Button(new PIXI.Rectangle(0, 0, 300, 60), 'Back to main', ButtonTexture.Button01);
|
||||
this.addMainBackground();
|
||||
const button = new Button(new PIXI.Rectangle(10, 10, 300, 60), 'Back to main', ButtonTexture.Button01);
|
||||
button.onClick = (e) => {
|
||||
Engine.GameMaster.changeScene(new MainScene());
|
||||
};
|
||||
Assets.Missions.forEach((mission, index) => {
|
||||
const button = new Button(
|
||||
new PIXI.Rectangle(
|
||||
Engine.app.canvas.width / 2 - 300 / 2,
|
||||
Engine.app.canvas.height / 5 + index * 80,
|
||||
300,
|
||||
60
|
||||
),
|
||||
new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + index * 70, 300, 60),
|
||||
mission.name,
|
||||
ButtonTexture.Button01
|
||||
);
|
||||
|
@ -1,3 +1,4 @@
|
||||
import GameAssets from '../classes/Assets';
|
||||
import { Engine } from '../classes/Bastion';
|
||||
import GuiObject from '../classes/GuiObject';
|
||||
import * as PIXI from 'pixi.js';
|
||||
@ -18,6 +19,14 @@ export default class Scene {
|
||||
});
|
||||
}
|
||||
|
||||
public addMainBackground() {
|
||||
// Background
|
||||
const sprite = new PIXI.Sprite(GameAssets.MainBackground);
|
||||
sprite.width = Engine.app.canvas.width;
|
||||
sprite.height = Engine.app.canvas.height;
|
||||
this.stage.addChild(sprite);
|
||||
}
|
||||
|
||||
public get events(): PIXI.EventEmitter {
|
||||
return this._events;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user