From 84d85814cc54927f4f735a850eb3c1c1cfd52b73 Mon Sep 17 00:00:00 2001 From: koneko <67551503+koneko@users.noreply.github.com> Date: Sun, 17 Nov 2024 16:32:51 +0100 Subject: [PATCH] working on scrolling frame --- public/assets/gui/frame_02.png | Bin 0 -> 6531 bytes src/base/Assets.ts | 4 ++++ src/base/ScrollingFrame.ts | 42 +++++++++++++++++++++++++++++++++ src/components/TowerPicker.ts | 33 ++++++++++++++++++++++++++ src/scenes/GameScene.ts | 8 +++++++ 5 files changed, 87 insertions(+) create mode 100755 public/assets/gui/frame_02.png create mode 100644 src/base/ScrollingFrame.ts create mode 100644 src/components/TowerPicker.ts diff --git a/public/assets/gui/frame_02.png b/public/assets/gui/frame_02.png new file mode 100755 index 0000000000000000000000000000000000000000..d558c03298751b40a0bc86cf178ac2265e0795da GIT binary patch literal 6531 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 this.scrollWheel(e)); + this.draw(); + } + private scrollWheel(e) { + let scrollBy = e.deltaY; + console.log(this.canScroll); + console.log(scrollBy); + } + + protected draw() { + this.container.removeChildren(); + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + this.container.on('mouseentercapture', () => { + console.log('A'); + this.canScroll = true; + }); + this.container.on('mouseleavecapture', () => { + console.log('B'); + this.canScroll = false; + }); + } + public destroy() { + super.destroy(); + document.removeEventListener('wheel', this.scrollWheel); + } +} diff --git a/src/components/TowerPicker.ts b/src/components/TowerPicker.ts new file mode 100644 index 0000000..c6ce642 --- /dev/null +++ b/src/components/TowerPicker.ts @@ -0,0 +1,33 @@ +import * as PIXI from 'pixi.js'; +import GameObject from '../base/GameObject'; +import GameScene from '../scenes/GameScene'; +import Assets from '../base/Assets'; +import { ScrollingFrame } from '../base/ScrollingFrame'; + +export default class TowerPicker extends GameObject { + private gameScene: GameScene; + private scrollingFrame: ScrollingFrame; + constructor(gameScene: GameScene, bounds?: PIXI.Rectangle) { + super(bounds); + this.gameScene = gameScene; + this.scrollingFrame = new ScrollingFrame(null, this.bounds); + } + protected draw() { + this.container.removeChildren(); + const sprite = new PIXI.NineSliceSprite({ + texture: Assets.Frame2Texture, + leftWidth: 100, + topHeight: 100, + rightWidth: 100, + bottomHeight: 100, + }); + + this.scrollingFrame.setBounds(this.bounds); + this.container.addChild(this.scrollingFrame.container); + sprite.width = this.bounds.width; + sprite.height = this.bounds.height; + this.container.addChild(sprite); + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + } +} diff --git a/src/scenes/GameScene.ts b/src/scenes/GameScene.ts index 6db7685..06be50a 100644 --- a/src/scenes/GameScene.ts +++ b/src/scenes/GameScene.ts @@ -4,6 +4,7 @@ import Creep, { CreepEvents } from '../components/Creep'; import { Grid } from '../components/Grid'; import MissionStats from '../components/MissionStats'; import Sidebar from '../components/Sidebar'; +import TowerPicker from '../components/TowerPicker'; import WaveManager, { WaveManagerEvents } from '../components/WaveManager'; import SceneBase from './SceneBase'; import * as PIXI from 'pixi.js'; @@ -19,6 +20,7 @@ export default class GameScene extends SceneBase { private stats: MissionStats; private waveManager: WaveManager; private sidebar: Sidebar; + private towerPicker: TowerPicker; private roundMode = RoundMode.Purchase; private changeRoundButton: Button; private currentRound: number = 0; @@ -39,6 +41,7 @@ export default class GameScene extends SceneBase { this.stats = new MissionStats(100, 200); this.grid = new Grid(mission.gameMap, this); this.sidebar = new Sidebar(this); + this.towerPicker = new TowerPicker(this); this.gridWidth = mission.mapImage.width; this.gridHeight = mission.mapImage.height; this.ticker = new PIXI.Ticker(); @@ -112,9 +115,11 @@ export default class GameScene extends SceneBase { this.stats.setBounds(this.getStatusBounds()); this.grid.setBounds(this.getGridBounds()); this.sidebar.setBounds(this.getSidebarBounds()); + this.towerPicker.setBounds(this.getTowerPickerBounds()); this.changeRoundButton.setBounds(this.getChangeRoundButtonBounds()); this.container.addChild(this.sidebar.container); this.container.addChild(this.stats.container); + this.container.addChild(this.towerPicker.container); this.container.addChild(this.grid.container); this.container.addChild(this.changeRoundButton.container); this.container.x = this.bounds.x; @@ -124,6 +129,9 @@ export default class GameScene extends SceneBase { private getSidebarBounds(): PIXI.Rectangle { return new PIXI.Rectangle(this.bounds.width - 350, 0, 350, this.bounds.height); } + private getTowerPickerBounds(): PIXI.Rectangle { + return new PIXI.Rectangle(this.bounds.width - 350, 100, 350, this.bounds.height - 250); + } private getStatusBounds(): PIXI.Rectangle { // Top / Center return new PIXI.Rectangle(0, 0, this.bounds.width, 100);