koneko/bastion.overflow.fun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add more visual feedback to slotting gems

Browse Source
This commit is contained in:
koneko 2025-02-02 22:35:26 +01:00
parent 5ecec28870
commit 96454a0df0
11 changed files with 87 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/gui/frame_05.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

2
src/classes/Assets.ts
View File

@ -7,6 +7,7 @@ export default class GameAssets {
public static Frame02Texture: PIXI.Texture;
public static Frame03Texture: PIXI.Texture;
public static Frame04Texture: PIXI.Texture;
public static Frame05Texture: PIXI.Texture;
public static FrameInventory: PIXI.Texture;
public static FrameBackground: PIXI.Texture;
public static FrameTowerTab: PIXI.Texture;
@ -86,6 +87,7 @@ export default class GameAssets {
this.Load('./assets/gui/frame_02.png').then((texture) => (this.Frame02Texture = texture)),
this.Load('./assets/gui/frame_03.png').then((texture) => (this.Frame03Texture = texture)),
this.Load('./assets/gui/frame_04.png').then((texture) => (this.Frame04Texture = texture)),
this.Load('./assets/gui/frame_05.png').then((texture) => (this.Frame05Texture = texture)),
this.Load('./assets/gui/frame_inv.png').then((texture) => (this.FrameInventory = texture)),
this.Load('./assets/gui/background_01.png').then((texture) => (this.FrameBackground = texture)),
this.Load('./assets/gui/background_02.png').then((texture) => (this.FrameTowerTab = texture)),

11
src/classes/Bastion.ts
View File

@ -9,6 +9,8 @@ import { GameScene } from '../scenes/Game';
import { AnimationManager } from './game/AnimationManager';
import NotificationManager from './game/NotificationManager';
import Gem from './game/Gem';
import GameAssets from './Assets';
import { GemType } from './Definitions';
export class Engine {
public static app: PIXI.Application;
@ -27,9 +29,12 @@ export class Engine {
public static MouseX: number = 0;
public static MouseY: number = 0;
public static gemTest() {
for (let i = 0; i < 2; i++) {
this.GameScene.MissionStats.giveGem(new Gem(0));
public static TestSuite() {
Engine.NotificationManager.Notify('Loaded testing suite.', 'danger');
Engine.TowerManager.ToggleChoosingTowerLocation('RESET');
Engine.TowerManager.PlaceTower(GameAssets.Towers[1], 10, 15, GameAssets.Towers[0].behaviour, true);
for (let i = 0; i < 16; i++) {
this.GameScene.MissionStats.giveGem(new Gem(GemType.Fire), true);
}
}
}

2
src/classes/game/Gem.ts
View File

@ -8,7 +8,7 @@ export default class Gem {
public texture: PIXI.Texture;
public level: number = 1;
public definition: GemDefinition;
private id;
public id;
constructor(gemType: GemType) {
this.definition = GameAssets.Gems[gemType];
this.texture = this.definition.textures[0];

4
src/classes/game/NotificationManager.ts
View File

@ -55,7 +55,7 @@ export default class NotificationManager extends GameObject {
this.bb.x = Engine.app.canvas.width / 2;
this.bb.y = 40;
this.copyBBToContainer();
this.container.zIndex = 100;
this.container.zIndex = 200;
Engine.app.stage.addChild(this.container);
}
public Notify(text, type: NotificationType) {
@ -74,7 +74,7 @@ export default class NotificationManager extends GameObject {
if (this.ticks >= notif.ticksToFadeAway && !notif.animating) {
notif.animating = true;
Engine.AnimationManager.Animate(
new FadeInOut('out', 240, notif.textObj, () => {
new FadeInOut('out', 300, notif.textObj, () => {
notif.destroy();
})
);

11
src/classes/game/Tower.ts
View File

@ -64,8 +64,15 @@ export class Tower extends GameObject {
public UnslotGem(index) {
const gem = this.slottedGems.splice(index, 1)[0];
Engine.GameScene.MissionStats.giveGem(gem, true);
for (let i = index; i < this.slottedGems.length - 1; i++) {
if (this.slottedGems[i] == null) {
this.slottedGems[i] = this.slottedGems[i + 1];
this.slottedGems[i + 1] = null;
}
}
this.slottedGems = this.slottedGems.filter((gem) => gem != null);
Engine.NotificationManager.Notify(
`Gem Lv. ${gem.level} ${gem.definition.name} unslotted from ${this.name} and placed back in your inventory.`,
`Lv. ${gem.level} ${gem.definition.name} unslotted and placed back in your inventory.`,
'info'
);
}
@ -111,7 +118,7 @@ export class Tower extends GameObject {
}
}
override destroy(): void {
public destroy(): void {
super.destroy();
this.parent.clickDetector.off('pointerenter', this.onParentCellEnter);
this.parent.clickDetector.off('pointerleave', this.onParentCellLeave);

4
src/classes/game/TowerManager.ts
View File

@ -88,7 +88,7 @@ export default class TowerManager {
return returnTower;
}
public PlaceTower(definition: TowerDefinition, row, column, behaviour: string, ignoreCost?) {
const sprite = this.selectedTower.texture;
const sprite = definition.texture;
if (!Engine.GameScene.MissionStats.hasEnoughGold(definition.stats.cost) && !ignoreCost)
return Engine.NotificationManager.Notify('Not enough gold.', 'warn');
if (
@ -96,7 +96,7 @@ export default class TowerManager {
Engine.Grid.getCellByRowAndCol(row, column).type != TerrainType.Path &&
Engine.Grid.getCellByRowAndCol(row, column).type != TerrainType.Restricted
) {
Engine.GameScene.MissionStats.spendGold(definition.stats.cost);
if (!ignoreCost) Engine.GameScene.MissionStats.spendGold(definition.stats.cost);
let tower = new Tower(row, column, sprite, definition, behaviour);
this.towers.push(tower);
this.ToggleChoosingTowerLocation('RESET');

21
src/classes/gui/GemTab.ts
View File

@ -37,12 +37,12 @@ export default class GemTab extends GuiObject {
this.RebuildInventoryVisual();
});
}
// TODO: add more visual clarity
public TowerPanelSelectingGem(gem: Gem, index: number, tower: Tower) {
console.log(this);
if (this.isSelectingGem) {
this.isSelectingGem = false;
this.selectingGemSlotIndex = -1;
} else {
console.log('TOWER PANEL SELECTING GEM ' + index);
if (index < 0) console.error('TOWER PANEL SELECTING GEM INDEX IS LESS THAN 0, ', index);
// index = Engine.GameScene.towerPanel.vGems.indexOf(gem);
if (!this.isSelectingGem) {
this.isSelectingGem = true;
if (gem == null) {
// Want to select gem to slot in, already checked if player has a Gem.
@ -58,6 +58,13 @@ export default class GemTab extends GuiObject {
this.RebuildInventoryVisual();
Engine.GameScene.towerPanel.Hide();
Engine.GameScene.towerPanel.Show(tower);
this.isSelectingGem = false;
this.selectingGemSlotIndex = -1;
this.selectingGemTowerObject = null;
}
} else {
if (gem == null) {
this.isSelectingGem = false;
this.selectingGemSlotIndex = -1;
this.selectingGemTowerObject = null;
}
@ -69,8 +76,8 @@ export default class GemTab extends GuiObject {
Engine.GameScene.MissionStats.getInventory().forEach((gem, index) => {
let vGem = new VisualGemSlot(0, this.container, gem);
let vGemYCoord = 5;
let vGemXCoord = (index % 4) * 64 + 20;
let vGemYCoord = 10;
let vGemXCoord = (index % 4) * 70 + 10;
let vGemYIdx = index;
while (true) {
if (vGemYIdx <= 3) break;

52
src/classes/gui/TowerPanel.ts
View File

@ -11,17 +11,17 @@ import { GemEvents } from '../Events';
export class VisualGemSlot extends GuiObject {
public iconSprite: PIXI.Sprite;
private background: PIXI.Sprite;
private gem: Gem;
private i: number = 0;
private frame: PIXI.Sprite;
public i: number = 0;
constructor(index: number, parent: PIXI.Container, gem: Gem | null) {
super(true);
let gtexture;
this.i = index;
this.container.x = 10;
this.container.y = index * Engine.GridCellSize + 300;
this.container.y = index * (Engine.GridCellSize + 6) + 300;
this.background = new PIXI.Sprite({
texture: GameAssets.FrameInventory,
texture: GameAssets.Frame01Texture,
});
this.gem = gem;
if (gem == null) {
gtexture = GameAssets.PlusIconTexture;
} else {
@ -45,18 +45,47 @@ export class VisualGemSlot extends GuiObject {
this.iconSprite.width = Engine.GridCellSize - 8;
this.iconSprite.height = Engine.GridCellSize - 8;
}
this.frame = new PIXI.Sprite({
texture: GameAssets.Frame05Texture,
width: 64,
height: 64,
});
this.container.addChild(this.background);
this.container.addChild(this.iconSprite);
this.container.addChild(this.frame);
if (Engine.latestCommit == 'DEVELOPMENT') {
let txt = gem ? gem.id : '';
let dbgText = new PIXI.Text({
text: txt,
zIndex: 11,
style: {
fill: 'white',
stroke: {
color: 0x000000,
width: 5,
},
},
});
this.container.addChild(dbgText);
}
parent.addChild(this.container);
}
public onClick(e: PIXI.FederatedPointerEvent): void {}
public setTint(color) {
this.frame.tint = color;
}
public resetTint() {
this.frame.tint = 0xffffff;
}
}
export default class TowerPanel extends GuiObject {
private bounds: PIXI.Rectangle;
private towerPanel: PIXI.NineSliceSprite;
private closeBtn: Button;
private vGems: VisualGemSlot[] = [];
public vGems: VisualGemSlot[] = [];
public isShown: boolean = false;
public titleText: PIXI.Text;
@ -119,10 +148,11 @@ export default class TowerPanel extends GuiObject {
let amount = tower.definition.stats.gemSlotsAmount;
// amount = 6;
for (let i = 0; i < amount; i++) {
console.log('BUILDING TOWER PANEL ' + i);
let gem = tower.slottedGems[i];
console.log(gem);
if (!gem) gem = null;
const vGem = new VisualGemSlot(i, this.container, gem);
vGem.resetTint();
this.vGems.push(vGem);
vGem.container.onpointermove = () => {
if (!gem) return;
@ -134,8 +164,10 @@ export default class TowerPanel extends GuiObject {
};
vGem.onClick = () => {
Engine.GameScene.tooltip.Hide();
console.log('MAKESLOTS ', gem);
Engine.GameScene.events.emit(GemEvents.TowerPanelSelectGem, gem, i, tower);
console.warn('EMITTING TOWER PANEL SELECT GEM', gem, vGem.i, i, tower);
Engine.GameScene.events.emit(GemEvents.TowerPanelSelectGem, gem, vGem.i, tower);
if (!gem && Engine.GameScene.sidebar.gemTab.isSelectingGem) vGem.setTint(0x00ffff);
else vGem.resetTint();
};
}
}

1
src/main.ts
View File

@ -67,4 +67,5 @@ import GameUIConstants from './classes/GameUIConstants';
window.onbeforeunload = () => {
return 'You are about to leave.';
};
else Engine.TestSuite();
})();

10
src/scenes/Game.ts
View File

@ -114,15 +114,17 @@ export class GameScene extends Scene {
'You require atleast 1 Gem in your inventory to slot it in a Gem slot.',
'warn'
);
console.log(gem);
this.sidebar.gemTab.TowerPanelSelectingGem(gem, index, tower);
} else {
this.sidebar.gemTab.TowerPanelSelectingGem(gem, -1, tower);
}
this.sidebar.gemTab.TowerPanelSelectingGem(gem, index, tower);
});
this.ticker = new PIXI.Ticker();
this.ticker.maxFPS = 60;
this.ticker.minFPS = 30;
// fix tooltip behaving weirdly for some reason
this.tooltip.SetContentTower(0, 0, 0, 0);
this.tooltip.Show(Engine.MouseX, Engine.MouseY);
this.tooltip.Hide();
this.ticker.add(() => {
if (this.update) this.update(this.ticker.elapsedMS);
});