tooltips final
This commit is contained in:
parent
0f1c32e868
commit
56137fa3c0
@ -13,6 +13,7 @@ export default class GameAssets {
|
||||
public static VioletBackground: PIXI.Texture;
|
||||
public static RedBackground: PIXI.Texture;
|
||||
public static GreenBackground: PIXI.Texture;
|
||||
public static BlueBackground: PIXI.Texture;
|
||||
public static Button01Texture: PIXI.Texture;
|
||||
public static Button02Texture: PIXI.Texture;
|
||||
public static ButtonSmallTexture: PIXI.Texture;
|
||||
@ -20,6 +21,7 @@ export default class GameAssets {
|
||||
public static GoldTexture: PIXI.Texture;
|
||||
public static WaveTexture: PIXI.Texture;
|
||||
public static SwordsTexture: PIXI.Texture;
|
||||
public static TitleTexture: PIXI.Texture;
|
||||
|
||||
public static PlayIconTexture: PIXI.Texture;
|
||||
public static PauseIconTexture: PIXI.Texture;
|
||||
@ -86,10 +88,12 @@ export default class GameAssets {
|
||||
this.Load('/assets/gui/frame_violet.png').then((texture) => (this.VioletBackground = texture)),
|
||||
this.Load('/assets/gui/frame_red.png').then((texture) => (this.RedBackground = texture)),
|
||||
this.Load('/assets/gui/frame_green.png').then((texture) => (this.GreenBackground = texture)),
|
||||
this.Load('/assets/gui/frame_blue.png').then((texture) => (this.BlueBackground = texture)),
|
||||
this.Load('/assets/gui/heart.png').then((texture) => (this.HealthTexture = texture)),
|
||||
this.Load('/assets/gui/money.png').then((texture) => (this.GoldTexture = texture)),
|
||||
this.Load('/assets/gui/wave.png').then((texture) => (this.WaveTexture = texture)),
|
||||
this.Load('/assets/gui/sword_02.png').then((texture) => (this.SwordsTexture = texture)),
|
||||
this.Load('/assets/gui/title01.png').then((texture) => (this.TitleTexture = texture)),
|
||||
this.Load('/assets/gui/icons/play.png').then((texture) => (this.PlayIconTexture = texture)),
|
||||
this.Load('/assets/gui/icons/pause.png').then((texture) => (this.PauseIconTexture = texture)),
|
||||
this.Load('/assets/gui/icons/exclamation.png').then((texture) => (this.ExclamationIconTexture = texture)),
|
||||
|
||||
@ -9,9 +9,10 @@ export default class Tooltip extends GuiObject {
|
||||
private bounds: PIXI.Rectangle;
|
||||
private tooltipSprite: PIXI.NineSliceSprite;
|
||||
|
||||
public titleText: PIXI.Text;
|
||||
public costText: PIXI.Text;
|
||||
public previewSprite: PIXI.Sprite;
|
||||
private titleText: PIXI.Text;
|
||||
private costText: PIXI.Text;
|
||||
private damageText: PIXI.Text;
|
||||
private gemAmount: PIXI.Text;
|
||||
private gemAmountSprite: PIXI.Sprite;
|
||||
|
||||
constructor(bounds: PIXI.Rectangle) {
|
||||
@ -28,80 +29,113 @@ export default class Tooltip extends GuiObject {
|
||||
});
|
||||
this.tooltipSprite.width = this.bounds.width;
|
||||
this.tooltipSprite.height = this.bounds.height;
|
||||
this.container.addChild(this.tooltipSprite);
|
||||
|
||||
this.titleText = new PIXI.Text({
|
||||
x: 87,
|
||||
y: 34,
|
||||
text: 'Something went wrong if you see this.',
|
||||
style: {
|
||||
x: this.tooltipSprite.width / 2,
|
||||
y: -20,
|
||||
zIndex: 5,
|
||||
style: new PIXI.TextStyle({
|
||||
fill: 0xffffff,
|
||||
dropShadow: true,
|
||||
},
|
||||
stroke: {
|
||||
color: 0x000000,
|
||||
width: 2,
|
||||
},
|
||||
}),
|
||||
});
|
||||
this.titleText.anchor.set(0, 0.5);
|
||||
this.container.addChild(this.titleText);
|
||||
this.titleText.anchor.set(0.5, 0);
|
||||
let title = new PIXI.Sprite({
|
||||
x: this.tooltipSprite.width / 2,
|
||||
y: -20,
|
||||
width: 250,
|
||||
height: 40,
|
||||
texture: GameAssets.TitleTexture,
|
||||
});
|
||||
title.anchor.set(0.5, 0);
|
||||
|
||||
this.previewSprite = new PIXI.Sprite({
|
||||
x: 27,
|
||||
y: 30,
|
||||
width: 50,
|
||||
const costSprite = new PIXI.Sprite({
|
||||
texture: GameAssets.GoldTexture,
|
||||
x: 10,
|
||||
y: 20,
|
||||
width: 56,
|
||||
height: 50,
|
||||
});
|
||||
|
||||
this.container.addChild(this.previewSprite);
|
||||
let frameSprite = new PIXI.NineSliceSprite({
|
||||
texture: GameAssets.Frame02Texture,
|
||||
leftWidth: 150,
|
||||
topHeight: 150,
|
||||
rightWidth: 150,
|
||||
bottomHeight: 150,
|
||||
roundPixels: true,
|
||||
height: 64,
|
||||
width: 64,
|
||||
x: 20,
|
||||
y: 20,
|
||||
});
|
||||
this.container.addChild(frameSprite);
|
||||
|
||||
this.costText = new PIXI.Text({
|
||||
x: 113,
|
||||
y: 40,
|
||||
x: 54,
|
||||
y: 26,
|
||||
zIndex: 5,
|
||||
text: 'Something went wrong if you see this.',
|
||||
style: {
|
||||
fill: 'gold',
|
||||
fontWeight: 'bold',
|
||||
dropShadow: true,
|
||||
stroke: {
|
||||
color: 0x000000,
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
});
|
||||
this.container.addChild(this.costText);
|
||||
const goldSprite = new PIXI.Sprite({
|
||||
texture: GameAssets.GoldTexture,
|
||||
x: 82,
|
||||
y: 40,
|
||||
width: 36,
|
||||
height: 34,
|
||||
});
|
||||
|
||||
this.container.addChild(goldSprite);
|
||||
this.damageText = new PIXI.Text({
|
||||
x: 54,
|
||||
y: 65,
|
||||
zIndex: 5,
|
||||
text: 'Something went wrong if you see this.',
|
||||
style: {
|
||||
fill: 'red',
|
||||
fontWeight: 'bold',
|
||||
stroke: {
|
||||
color: 0x000000,
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
});
|
||||
const damageSprite = new PIXI.Sprite({
|
||||
texture: GameAssets.SwordsTexture,
|
||||
x: 22,
|
||||
y: 70,
|
||||
width: 32,
|
||||
height: 32,
|
||||
});
|
||||
|
||||
this.gemAmountSprite = new PIXI.Sprite({
|
||||
texture: GameAssets.GemAmountIcons[0],
|
||||
x: 300,
|
||||
y: 20,
|
||||
width: 64,
|
||||
height: 64,
|
||||
x: 22,
|
||||
y: 110,
|
||||
width: 32,
|
||||
height: 32,
|
||||
});
|
||||
this.gemAmount = new PIXI.Text({
|
||||
x: 54,
|
||||
y: 108,
|
||||
zIndex: 5,
|
||||
text: 'Something went wrong if you see this.',
|
||||
style: {
|
||||
fill: 'white',
|
||||
fontWeight: 'bold',
|
||||
stroke: {
|
||||
color: 0x000000,
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
this.container.addChild(this.tooltipSprite);
|
||||
this.container.addChild(title);
|
||||
this.container.addChild(costSprite);
|
||||
this.container.addChild(damageSprite);
|
||||
this.container.addChild(this.gemAmountSprite);
|
||||
this.container.addChild(this.costText);
|
||||
this.container.addChild(this.titleText);
|
||||
this.container.addChild(this.damageText);
|
||||
this.container.addChild(this.gemAmount);
|
||||
|
||||
Engine.GameMaster.currentScene.stage.addChild(this.container);
|
||||
}
|
||||
public SetContent(title, spriteTexture, damage: number, cost: number, gemSlotsAmount: number) {
|
||||
public SetContent(title, damage: number, cost: number, gemSlotsAmount: number) {
|
||||
this.titleText.text = title;
|
||||
this.previewSprite.texture = spriteTexture;
|
||||
this.gemAmount.text = `Has ${gemSlotsAmount} Gem slots.`;
|
||||
this.gemAmountSprite.texture = GameAssets.GemAmountIcons[gemSlotsAmount];
|
||||
this.costText.text = cost;
|
||||
this.costText.text = `Costs ${cost} gold.`;
|
||||
this.damageText.text = `Deals ${damage} base damage.`;
|
||||
}
|
||||
public Show(x, y) {
|
||||
this.container.alpha = 1;
|
||||
|
||||
@ -49,34 +49,39 @@ class TowerButton extends GuiObject {
|
||||
});
|
||||
this.container.onmousemove = (e) => {
|
||||
if (Engine.TowerManager.isPlacingTower) return;
|
||||
let definition: TowerDefinition;
|
||||
GameAssets.Towers.forEach((item) => {
|
||||
if (item.name == towerName) {
|
||||
definition = item;
|
||||
}
|
||||
});
|
||||
Engine.GameScene.tooltip.SetContent(
|
||||
this.towerName,
|
||||
definition.texture,
|
||||
definition.stats.damage,
|
||||
definition.stats.cost,
|
||||
definition.stats.gemSlotsAmount
|
||||
);
|
||||
Engine.GameScene.tooltip.Show(Engine.MouseX, Engine.MouseY);
|
||||
this.ShowTooltip();
|
||||
};
|
||||
|
||||
this.container.onpointerleave = (e) => {
|
||||
Engine.GameScene.tooltip.Hide();
|
||||
};
|
||||
}
|
||||
private ShowTooltip() {
|
||||
let definition: TowerDefinition;
|
||||
GameAssets.Towers.forEach((item) => {
|
||||
if (item.name == this.towerName) {
|
||||
definition = item;
|
||||
}
|
||||
});
|
||||
Engine.GameScene.tooltip.SetContent(
|
||||
this.towerName,
|
||||
definition.stats.damage,
|
||||
definition.stats.cost,
|
||||
definition.stats.gemSlotsAmount
|
||||
);
|
||||
Engine.GameScene.tooltip.Show(Engine.MouseX, Engine.MouseY);
|
||||
}
|
||||
public onClick(e: PIXI.FederatedPointerEvent): void {
|
||||
if (Engine.TowerManager.isPlacingTower && Engine.TowerManager.selectedTower.name != this.towerName) {
|
||||
Engine.GameScene.sidebar.towerTab.resetTint();
|
||||
Engine.TowerManager.ResetChooseTower();
|
||||
}
|
||||
if (this.frameSprite.tint == 0x00ff00) this.frameSprite.tint = 0xffffff;
|
||||
else this.frameSprite.tint = 0x00ff00;
|
||||
Engine.GameScene.tooltip.Hide();
|
||||
if (this.frameSprite.tint == 0x00ff00) {
|
||||
this.frameSprite.tint = 0xffffff;
|
||||
this.ShowTooltip();
|
||||
} else this.frameSprite.tint = 0x00ff00;
|
||||
|
||||
Engine.TowerManager.ToggleChoosingTowerLocation(this.towerName);
|
||||
}
|
||||
public resetTint() {
|
||||
@ -115,7 +120,7 @@ export default class TowerTab extends GuiObject {
|
||||
this.container,
|
||||
GameAssets.RedBackground,
|
||||
'Basic Tower',
|
||||
GameAssets.HammerIconTexture
|
||||
GameAssets.Towers[0].texture
|
||||
)
|
||||
);
|
||||
this.towerButtons.push(
|
||||
@ -127,7 +132,7 @@ export default class TowerTab extends GuiObject {
|
||||
this.container,
|
||||
GameAssets.GreenBackground,
|
||||
'Circle Tower',
|
||||
GameAssets.HomeIconTexture
|
||||
GameAssets.Towers[1].texture
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@ export class GameScene extends Scene {
|
||||
this.MissionStats.earnGold(playerAward);
|
||||
});
|
||||
this.sidebar = new Sidebar(GameUIConstants.SidebarRect);
|
||||
this.tooltip = new Tooltip(new PIXI.Rectangle(0, 0, 400, 200));
|
||||
this.tooltip = new Tooltip(new PIXI.Rectangle(0, 0, 350, 160));
|
||||
this.changeRoundButton = new Button(GameUIConstants.ChangeRoundButtonRect, '', ButtonTexture.Button01, true);
|
||||
this.changeRoundButton.container.removeFromParent();
|
||||
this.sidebar.container.addChild(this.changeRoundButton.container);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user