initial gem sell and upg

This commit is contained in:
koneko 2025-02-04 22:48:51 +01:00
parent bfc73d436f
commit cec7dbb493
9 changed files with 93 additions and 7 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 244 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

BIN
public/assets/gui/banner_03.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

View File

@ -23,7 +23,7 @@ export default class GameAssets {
public static WaveTexture: PIXI.Texture;
public static SwordsTexture: PIXI.Texture;
public static TitleTexture: PIXI.Texture;
public static GemFrame: PIXI.Texture;
public static BannerGemsmith: PIXI.Texture;
public static PlayIconTexture: PIXI.Texture;
public static PauseIconTexture: PIXI.Texture;
@ -95,7 +95,7 @@ export default class GameAssets {
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/gem_frame.png').then((texture) => (this.GemFrame = texture)),
this.Load('./assets/gui/banner_01.png').then((texture) => (this.BannerGemsmith = 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)),

View File

@ -32,7 +32,7 @@ export default class GemTab extends GuiObject {
this.gemTabSprite.x = 0;
this.gemTabSprite.y = 0;
this.gemTabSprite.width = this.bounds.width;
this.gemTabSprite.height = this.bounds.height - 255;
this.gemTabSprite.height = this.bounds.height;
this.container.addChild(this.gemTabSprite);
Engine.app.canvas.addEventListener('pointermove', () => {
this.pointerMoveEvent();

View File

@ -0,0 +1,59 @@
import * as PIXI from 'pixi.js';
import GuiObject from '../GuiObject';
import GameAssets from '../Assets';
import { VisualGemSlot } from './TowerPanel';
export default class Gemsmith extends GuiObject {
private bounds: PIXI.Rectangle;
public sellVGem: VisualGemSlot;
public upgradeVGem: VisualGemSlot;
constructor(bounds: PIXI.Rectangle) {
super(false);
this.bounds = bounds;
this.container.x = this.bounds.x;
this.container.y = this.bounds.y;
let background = new PIXI.Sprite({
x: 0,
y: 0,
width: this.bounds.width,
height: this.bounds.height,
texture: GameAssets.BannerGemsmith,
});
this.container.addChild(background);
let sellLabel = new PIXI.Text({
x: 40,
y: this.bounds.height / 6.5,
text: 'Sell gem',
style: new PIXI.TextStyle({
fill: 0xffdb00, // orange color
fontSize: 18,
stroke: {
color: 0x000000,
width: 2,
},
}),
});
this.container.addChild(sellLabel);
let upgradeLabel = new PIXI.Text({
x: 155,
y: this.bounds.height / 6.5,
text: 'Upgrade gem',
style: new PIXI.TextStyle({
fill: 0x2df937,
fontSize: 18,
stroke: {
color: 0x000000,
width: 2,
},
}),
});
this.container.addChild(upgradeLabel);
this.sellVGem = new VisualGemSlot(0, this.container, null, 'SELL');
this.sellVGem.container.x = 45;
this.sellVGem.container.y = this.bounds.height / 4;
this.upgradeVGem = new VisualGemSlot(0, this.container, null, 'UPGRADE');
this.upgradeVGem.container.x = 180;
this.upgradeVGem.container.y = this.bounds.height / 4;
}
}

View File

@ -3,10 +3,12 @@ import GuiObject from '../GuiObject';
import GameAssets from '../Assets';
import TowerTab from './TowerTab';
import GemTab from './GemTab';
import Gemsmith from './Gemsmith';
export default class Sidebar extends GuiObject {
public towerTab: TowerTab;
public gemTab: GemTab;
public gemsmith: Gemsmith;
private bounds: PIXI.Rectangle;
private sidebarSprite: PIXI.NineSliceSprite;
@ -33,8 +35,17 @@ export default class Sidebar extends GuiObject {
this.towerTab = new TowerTab(towerTabRect);
this.container.addChild(this.towerTab.container);
const gemTabRect = new PIXI.Rectangle(60, 180, this.bounds.width - 65, this.bounds.height - 280);
const gemTabRect = new PIXI.Rectangle(60, 180, this.bounds.width - 65, this.bounds.height - 280 - 255);
this.gemTab = new GemTab(gemTabRect);
this.container.addChild(this.gemTab.container);
const gemSmithRect = new PIXI.Rectangle(
60,
185 + gemTabRect.height,
this.bounds.width - 65,
this.bounds.height - 840
);
this.gemsmith = new Gemsmith(gemSmithRect);
this.container.addChild(this.gemsmith.container);
}
}

View File

@ -15,7 +15,7 @@ export class VisualGemSlot extends GuiObject {
private frame: PIXI.Sprite;
public i: number = 0;
public gem: Gem = null;
constructor(index: number, parent: PIXI.Container, gem: Gem | null) {
constructor(index: number, parent: PIXI.Container, gem: Gem | null, extra?) {
super(true);
let gtexture;
this.i = index;
@ -24,7 +24,11 @@ export class VisualGemSlot extends GuiObject {
this.background = new PIXI.Sprite({
texture: GameAssets.Frame01Texture,
});
if (gem == null) {
if (gem == null && !extra) {
gtexture = GameAssets.PlusIconTexture;
} else if (extra == 'SELL') {
gtexture = GameAssets.GoldTexture;
} else if (extra == 'UPGRADE') {
gtexture = GameAssets.PlusIconTexture;
} else {
gtexture = gem.texture;
@ -36,12 +40,24 @@ export class VisualGemSlot extends GuiObject {
});
this.background.width = Engine.GridCellSize;
this.background.height = Engine.GridCellSize;
if (gem == null) {
if (gem == null && !extra) {
this.iconSprite.x = Engine.GridCellSize / 2;
this.iconSprite.y = Engine.GridCellSize / 2;
this.iconSprite.width = Engine.GridCellSize / 2;
this.iconSprite.height = Engine.GridCellSize / 2;
this.iconSprite.anchor.set(0.5, 0.5);
} else if (extra == 'SELL') {
this.iconSprite.x = 4;
this.iconSprite.y = 4;
this.iconSprite.width = Engine.GridCellSize - 8;
this.iconSprite.height = Engine.GridCellSize - 8;
} else if (extra == 'UPGRADE') {
this.iconSprite.x = Engine.GridCellSize / 2;
this.iconSprite.y = Engine.GridCellSize / 2;
this.iconSprite.width = Engine.GridCellSize / 2;
this.iconSprite.height = Engine.GridCellSize / 2;
this.iconSprite.tint = 0x2df937;
this.iconSprite.anchor.set(0.5, 0.5);
} else {
this.iconSprite.x = 4;
this.iconSprite.y = 4;