Nice menu background added

This commit is contained in:
Dalibor Čarapić 2025-02-10 18:10:02 +01:00
parent a4c90028a9
commit 00c378374f
5 changed files with 30 additions and 48 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

View File

@ -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)),

View File

@ -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());
};
}

View File

@ -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
);

View File

@ -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;
}