Folders

src/Game/misc/Button.js

@@ -17,15 +17,15 @@ class Button extends PIXI.Sprite{
 
         this.imageURL = image || getParam('imageURL') || DefaultImageUrl;
         if(Gui) {
-            this.Gui = Gui;
-            this.controller = Gui.add(this, 'imageURL').onFinishChange((v) => this.loadImage(v));
+            this.Gui = Gui.addFolder("Button");
+            this.controller = this.Gui.add(this, 'imageURL').onFinishChange((v) => this.loadImage(v));
         }
 
         this.anchor.set(0.5,0.5);
         this.interactive = true;
         this.buttonMode = true;
 
-        this.textNode = new Text(props);
+        this.textNode = new Text({...props, Gui:this.Gui});
         this.addChild(this.textNode);
 
         this.loadImage(this.imageURL);

src/Game/misc/Dialogue.js

@@ -0,0 +1,38 @@
+import * as PIXI from 'pixi.js';
+import Text from './Text.js';
+import { getParam } from '../../helpers/url';
+
+
+const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
+const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
+
+class Dialogue extends PIXI.Sprite{
+    constructor(props) {
+        super(DefaultImage);
+        let {
+            image,
+            text,
+            Gui
+        } = props;
+
+        this.imageURL = image || getParam('imageURL') || DefaultImageUrl;
+        if(Gui) {
+            this.Gui = Gui;
+            let folder = Gui.addFolder("Button");
+            this.controller = folder.add(this, 'imageURL').onFinishChange((v) => this.loadImage(v));
+        }
+
+    }
+
+    _kill() {
+        this.controller.remove();
+        this.textNode._kill();
+        this.destroy();
+    }
+
+    onClick(fn) {
+        this.on('pointerdown', (e) => fn(e));
+    }
+}
+
+export default Dialogue;

src/Game/misc/Text.js

@@ -10,8 +10,8 @@ class Text extends PIXI.Container{
 
 		this.text = text || '';
 		if(Gui) {
-			this.Gui = Gui;
-			this.controller = Gui.add(this, 'text').onFinishChange((v) => this.setText(v));
+			this.Gui = Gui.addFolder("Text");
+			this.controller = this.Gui.add(this, 'text').onFinishChange((v) => this.setText(v));
 		}
 
 		this.textNode = new PIXI.Text(text,{fontFamily : 'Arial', fontSize: 28, fill : 0x000000, align : 'center'});