fixed button bug

wolfie2d wasnt scaling mouseclick position according to zoom
This commit is contained in:
OfficialCHenry 2022-04-13 16:28:09 -04:00
parent 465404afda
commit c0017d66d8
3 changed files with 21 additions and 6 deletions

View File

@ -299,12 +299,14 @@ export default class Input {
return Input.mousePosition.clone().scale(1 / this.viewport.getZoomLevel()).add(Input.viewport.getOrigin()); return Input.mousePosition.clone().scale(1 / this.viewport.getZoomLevel()).add(Input.viewport.getOrigin());
} }
// -- MODIFIED BY HENRY -> added a scaling
/** /**
* Gets the position of the last mouse press * Gets the position of the last mouse press
* @returns The mouse position stored as a Vec2 * @returns The mouse position stored as a Vec2
*/ */
static getMousePressPosition(): Vec2 { static getMousePressPosition(): Vec2 {
return Input.mousePressPosition; return Input.mousePressPosition.scaled(1 / this.viewport.getZoomLevel());
} }
/** /**

View File

@ -84,7 +84,6 @@ export default abstract class UIElement extends CanvasNode {
let clickPos = Input.getMousePressPosition(); let clickPos = Input.getMousePressPosition();
if(this.contains(clickPos.x, clickPos.y) && this.visible && !this.layer.isHidden()){ if(this.contains(clickPos.x, clickPos.y) && this.visible && !this.layer.isHidden()){
this.isClicked = true; this.isClicked = true;
if(this.onClick !== null){ if(this.onClick !== null){
this.onClick(); this.onClick();
} }

View File

@ -28,6 +28,7 @@ import Item from "../GameSystems/items/Item";
import Layer from "../../Wolfie2D/Scene/Layer"; import Layer from "../../Wolfie2D/Scene/Layer";
import Button from "../../Wolfie2D/Nodes/UIElements/Button"; import Button from "../../Wolfie2D/Nodes/UIElements/Button";
import { Buff } from "../Player/PlayerController"; import { Buff } from "../Player/PlayerController";
import CanvasNode from "../../Wolfie2D/Nodes/CanvasNode";
@ -102,9 +103,12 @@ export default class GameLevel extends Scene {
this.load.image("inventorySlot", "shattered_sword_assets/sprites/inventory.png"); this.load.image("inventorySlot", "shattered_sword_assets/sprites/inventory.png");
this.load.spritesheet("test_dummy","shattered_sword_assets/spritesheets/test_dummy.json") this.load.spritesheet("test_dummy","shattered_sword_assets/spritesheets/test_dummy.json")
} }
startScene(): void { startScene(): void {
//call super after extending story with scene //call super after extending story with scene
@ -166,6 +170,9 @@ export default class GameLevel extends Scene {
updateScene(deltaT: number){ updateScene(deltaT: number){
let clickpos = Input.getMousePosition();
if(Input.isMouseJustPressed())
console.log("mouse pos: " +clickpos);
// Handle events and update the UI if needed // Handle events and update the UI if needed
while(this.receiver.hasNextEvent()){ while(this.receiver.hasNextEvent()){
let event = this.receiver.getNextEvent(); let event = this.receiver.getNextEvent();
@ -193,17 +200,14 @@ export default class GameLevel extends Scene {
break; break;
case "buff1": case "buff1":
console.log("button 1 pressed");
(<PlayerController>this.player._ai).addBuff(this.buffs[0]); (<PlayerController>this.player._ai).addBuff(this.buffs[0]);
this.buffLayer.disable(); this.buffLayer.disable();
break; break;
case "buff2": case "buff2":
console.log("button 2 pressed");
(<PlayerController>this.player._ai).addBuff(this.buffs[1]); (<PlayerController>this.player._ai).addBuff(this.buffs[1]);
this.buffLayer.disable(); this.buffLayer.disable();
break; break;
case "buff3": case "buff3":
console.log("button 3 pressed");
(<PlayerController>this.player._ai).addBuff(this.buffs[2]); (<PlayerController>this.player._ai).addBuff(this.buffs[2]);
this.buffLayer.disable(); this.buffLayer.disable();
break; break;
@ -356,15 +360,23 @@ export default class GameLevel extends Scene {
//TODO - //TODO -
//determine button location //determine button location
this.buffButton1 = <Button>this.add.uiElement(UIElementType.BUTTON, "buffLayer", {position: new Vec2(100, 250),text:"buffButton1"}); this.buffButton1 = <Button>this.add.uiElement(UIElementType.BUTTON, "buffLayer", {position: new Vec2(100, 250),text:"buffButton1"});
console.log("buffbutton pos:"+this.buffButton1.position);
//this.buffButton1.position = this.buffButton1.position.clone().scale(this.viewport.getZoomLevel());
this.buffButton1
console.log("buffbutton pos:"+this.buffButton1.position);
this.buffButton1.size.set(180,200); this.buffButton1.size.set(180,200);
this.buffButton1.borderWidth = 2; this.buffButton1.borderWidth = 20;
this.buffButton1.borderColor = Color.RED; this.buffButton1.borderColor = Color.RED;
this.buffButton1.backgroundColor = Color.WHITE; this.buffButton1.backgroundColor = Color.WHITE;
this.buffButton1.textColor = Color.BLACK; this.buffButton1.textColor = Color.BLACK;
this.buffButton1.onClickEventId = "buff1"; this.buffButton1.onClickEventId = "buff1";
this.buffButton1.fontSize = 20; this.buffButton1.fontSize = 20;
this.buffButton2 = <Button>this.add.uiElement(UIElementType.BUTTON, "buffLayer", {position: new Vec2(300, 250),text:"buffButton1"}); this.buffButton2 = <Button>this.add.uiElement(UIElementType.BUTTON, "buffLayer", {position: new Vec2(300, 250),text:"buffButton1"});
//this.buffButton2.setPosition(this.buffButton1.position.clone().scale(this.viewport.getZoomLevel()));
//this.buffButton2.position = this.buffButton2.position.clone().scale(this.viewport.getZoomLevel());
this.buffButton2.size.set(180,200); this.buffButton2.size.set(180,200);
this.buffButton2.borderWidth = 2; this.buffButton2.borderWidth = 2;
this.buffButton2.borderColor = Color.RED; this.buffButton2.borderColor = Color.RED;
@ -374,6 +386,8 @@ export default class GameLevel extends Scene {
this.buffButton2.fontSize = 20; this.buffButton2.fontSize = 20;
this.buffButton3 = <Button>this.add.uiElement(UIElementType.BUTTON, "buffLayer", {position: new Vec2(500, 250),text:"buffButton1"}); this.buffButton3 = <Button>this.add.uiElement(UIElementType.BUTTON, "buffLayer", {position: new Vec2(500, 250),text:"buffButton1"});
//this.buffButton3.setPosition(this.buffButton1.position.clone().scale(this.viewport.getZoomLevel()));
//this.buffButton3.position = this.buffButton3.position.clone().scale(this.viewport.getZoomLevel());
this.buffButton3.size.set(180,200); this.buffButton3.size.set(180,200);
this.buffButton3.borderWidth = 2; this.buffButton3.borderWidth = 2;
this.buffButton3.borderColor = Color.RED; this.buffButton3.borderColor = Color.RED;