initial gem sell and upg
This commit is contained in:
parent
bfc73d436f
commit
cec7dbb493
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
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 |
@ -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)),
|
||||
|
@ -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();
|
||||
|
59
src/classes/gui/Gemsmith.ts
Normal file
59
src/classes/gui/Gemsmith.ts
Normal 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;
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user