diff --git a/templates/template-creation-web/raw-assets/main{m}/ui{tps}/button-large-press.png b/templates/template-creation-web/raw-assets/main{m}/ui{tps}/button-large-press.png deleted file mode 100644 index 71deb76..0000000 Binary files a/templates/template-creation-web/raw-assets/main{m}/ui{tps}/button-large-press.png and /dev/null differ diff --git a/templates/template-creation-web/raw-assets/main{m}/ui{tps}/button-large.png b/templates/template-creation-web/raw-assets/main{m}/ui{tps}/button.png similarity index 100% rename from templates/template-creation-web/raw-assets/main{m}/ui{tps}/button-large.png rename to templates/template-creation-web/raw-assets/main{m}/ui{tps}/button.png diff --git a/templates/template-creation-web/src/app/popups/PausePopup.ts b/templates/template-creation-web/src/app/popups/PausePopup.ts index 52d8bd1..6f1bfc2 100644 --- a/templates/template-creation-web/src/app/popups/PausePopup.ts +++ b/templates/template-creation-web/src/app/popups/PausePopup.ts @@ -2,8 +2,8 @@ import { animate } from "motion"; import { BlurFilter, Container, Sprite, Texture } from "pixi.js"; import { engine } from "../getEngine"; +import { Button } from "../ui/Button"; import { Label } from "../ui/Label"; -import { LargeButton } from "../ui/LargeButton"; import { RoundedBox } from "../ui/RoundedBox"; /** Popup that shows up when gameplay is paused */ @@ -15,7 +15,7 @@ export class PausePopup extends Container { /** The popup title label */ private title: Label; /** Button that closes the popup */ - private doneButton: LargeButton; + private doneButton: Button; /** The panel background */ private panelBase: RoundedBox; @@ -40,7 +40,7 @@ export class PausePopup extends Container { this.title.y = -80; this.panel.addChild(this.title); - this.doneButton = new LargeButton({ text: "Resume" }); + this.doneButton = new Button({ text: "Resume" }); this.doneButton.y = 70; this.doneButton.onPress.connect(() => engine().navigation.dismissPopup()); this.panel.addChild(this.doneButton); diff --git a/templates/template-creation-web/src/app/popups/SettingsPopup.ts b/templates/template-creation-web/src/app/popups/SettingsPopup.ts index d4e6ad7..b85136d 100644 --- a/templates/template-creation-web/src/app/popups/SettingsPopup.ts +++ b/templates/template-creation-web/src/app/popups/SettingsPopup.ts @@ -4,8 +4,8 @@ import type { Text } from "pixi.js"; import { BlurFilter, Container, Sprite, Texture } from "pixi.js"; import { engine } from "../getEngine"; +import { Button } from "../ui/Button"; import { Label } from "../ui/Label"; -import { LargeButton } from "../ui/LargeButton"; import { RoundedBox } from "../ui/RoundedBox"; import { VolumeSlider } from "../ui/VolumeSlider"; import { userSettings } from "../utils/userSettings"; @@ -19,7 +19,7 @@ export class SettingsPopup extends Container { /** The popup title label */ private title: Text; /** Button that closes the popup */ - private doneButton: LargeButton; + private doneButton: Button; /** The panel background */ private panelBase: RoundedBox; /** The build version label */ @@ -57,7 +57,7 @@ export class SettingsPopup extends Container { this.title.y = -this.panelBase.boxHeight * 0.5 + 60; this.panel.addChild(this.title); - this.doneButton = new LargeButton({ text: "OK" }); + this.doneButton = new Button({ text: "OK" }); this.doneButton.y = this.panelBase.boxHeight * 0.5 - 78; this.doneButton.onPress.connect(() => engine().navigation.dismissPopup()); this.panel.addChild(this.doneButton); diff --git a/templates/template-creation-web/src/app/screens/main/MainScreen.ts b/templates/template-creation-web/src/app/screens/main/MainScreen.ts index f412c6b..8043870 100644 --- a/templates/template-creation-web/src/app/screens/main/MainScreen.ts +++ b/templates/template-creation-web/src/app/screens/main/MainScreen.ts @@ -7,7 +7,7 @@ import { Container } from "pixi.js"; import { engine } from "../../getEngine"; import { PausePopup } from "../../popups/PausePopup"; import { SettingsPopup } from "../../popups/SettingsPopup"; -import { LargeButton } from "../../ui/LargeButton"; +import { Button } from "../../ui/Button"; import { Bouncer } from "./Bouncer"; @@ -65,7 +65,7 @@ export class MainScreen extends Container { ); this.addChild(this.settingsButton); - this.addButton = new LargeButton({ + this.addButton = new Button({ text: "Add", width: 175, height: 110, @@ -73,7 +73,7 @@ export class MainScreen extends Container { this.addButton.onPress.connect(() => this.bouncer.add()); this.addChild(this.addButton); - this.removeButton = new LargeButton({ + this.removeButton = new Button({ text: "Remove", width: 175, height: 110, diff --git a/templates/template-creation-web/src/app/ui/LargeButton.ts b/templates/template-creation-web/src/app/ui/Button.ts similarity index 50% rename from templates/template-creation-web/src/app/ui/LargeButton.ts rename to templates/template-creation-web/src/app/ui/Button.ts index fd43118..0ff02d9 100644 --- a/templates/template-creation-web/src/app/ui/LargeButton.ts +++ b/templates/template-creation-web/src/app/ui/Button.ts @@ -1,49 +1,28 @@ import { FancyButton } from "@pixi/ui"; -import { NineSliceSprite, Texture } from "pixi.js"; import { engine } from "../getEngine"; import { Label } from "./Label"; -const defaultLargeButtonOptions = { +const defaultButtonOptions = { text: "", width: 301, height: 112, fontSize: 28, }; -type LargeButtonOptions = typeof defaultLargeButtonOptions; +type ButtonOptions = typeof defaultButtonOptions; /** * The big rectangle button, with a label, idle and pressed states */ -export class LargeButton extends FancyButton { - constructor(options: Partial = {}) { - const opts = { ...defaultLargeButtonOptions, ...options }; - - const defaultView = new NineSliceSprite({ - texture: Texture.from("button-large.png"), - leftWidth: 36, - topHeight: 42, - rightWidth: 36, - bottomHeight: 52, - width: opts.width, - height: opts.height, - }); - - const pressedView = new NineSliceSprite({ - texture: Texture.from("button-large-press.png"), - leftWidth: 36, - topHeight: 42, - rightWidth: 36, - bottomHeight: 52, - width: opts.width, - height: opts.height, - }); +export class Button extends FancyButton { + constructor(options: Partial = {}) { + const opts = { ...defaultButtonOptions, ...options }; super({ - defaultView, - pressedView, + defaultView: "button.png", + nineSliceSprite: [38, 50, 38, 50], anchor: 0.5, text: new Label({ text: opts.text, @@ -60,20 +39,24 @@ export class LargeButton extends FancyButton { hover: { props: { scale: { x: 1.03, y: 1.03 }, + y: 0, }, duration: 100, }, pressed: { props: { - scale: { x: 1.03, y: 1.03 }, + scale: { x: 0.97, y: 0.97 }, + y: 10, }, duration: 100, }, }, }); + this.width = opts.width; + this.height = opts.height; + this.onDown.connect(this.handleDown.bind(this)); - this.onUp.connect(this.handleUp.bind(this)); this.onHover.connect(this.handleHover.bind(this)); } @@ -83,10 +66,5 @@ export class LargeButton extends FancyButton { private handleDown() { engine().audio.sfx.play("main/sounds/sfx-press.wav"); - this.textOffset = { x: 0, y: -7 }; - } - - private handleUp() { - this.textOffset = { x: 0, y: -13 }; } }