basically rewrite the whole UI to allow better scrolling support

compile-c.hxml

@@ -2,6 +2,7 @@
 -lib heaps
 -lib hlsdl
 -D highDPI
+-D flow_border
 -D hlgen.makefile=vs2019
 -hl native/marblegame.c
 --main Main

compile-js-rel.hxml

@@ -6,6 +6,7 @@
 --js marblegame.js
 -D windowSize=1280x720
 -D js-es=6
+-D flow_border
 -D highDPI
 --dce full
 --main Main

compile-js.hxml

@@ -7,5 +7,6 @@
 -D js-es=6
 -D keep-inline-positions
 -D highDPI
+-D flow_border
 --main Main
 -debug

compile-linux.hxml

@@ -2,5 +2,6 @@
 -lib heaps
 -lib hlsdl
 -D highDPI
+-D flow_border
 -hl native/marblegame.c
 --main Main

compile-macos.hxml

@@ -2,6 +2,7 @@
 -lib heaps
 -lib hlsdl
 -D highDPI
+-D flow_border
 -hl native/marblegame.c
 -D MACOS_BUNDLE
 --main Main

compile.hxml

@@ -5,5 +5,6 @@
 -D windowSize=1280x720
 -D keep-inline-positions
 -D highDPI
+-D flow_border
 --main Main
 -debug

src/gui/ConsoleDlg.hx

@@ -114,8 +114,8 @@ class ConsoleDlg extends GuiControl {
 		Console.removeConsumer(onConsoleEntry);
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
-		super.render(scene2d);
+		super.render(scene2d, parent);
 
 		scroll.setScrollMax(consoleContent.text.textHeight);
 	}

src/gui/GuiAnim.hx

@@ -15,16 +15,27 @@ class GuiAnim extends GuiControl {
 		this.anim = new Anim(textures, 0);
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
+		if (parent != null) {
+			if (parent.contains(this.anim)) {
+				parent.removeChild(this.anim);
+			}
+			parent.addChild(this.anim);
+			var off = this.getOffsetFromParent();
+			var props = parent.getProperties(this.anim);
+			props.isAbsolute = true;
+			this.anim.setPosition(off.x, off.y);
+		}
+
 		var renderRect = this.getRenderRectangle();
-		anim.setPosition(Math.floor(renderRect.position.x), Math.floor(renderRect.position.y));
+		// anim.setPosition(Math.floor(renderRect.position.x), Math.floor(renderRect.position.y));
 		anim.scaleX = renderRect.extent.x / anim.getFrame().width;
 		anim.scaleY = renderRect.extent.y / anim.getFrame().height;
-		if (scene2d.contains(anim)) {
+		// if (scene2d.contains(anim)) {
-			scene2d.removeChild(anim); // Refresh "layer"
+		// 	scene2d.removeChild(anim); // Refresh "layer"
-		}
+		// }
-		scene2d.addChild(anim);
+		// scene2d.addChild(anim);
-		super.render(scene2d);
+		super.render(scene2d, parent);
 	}
 
 	public override function dispose() {
@@ -37,5 +48,6 @@ class GuiAnim extends GuiControl {
 		if (MarbleGame.canvas.scene2d.contains(anim)) {
 			MarbleGame.canvas.scene2d.removeChild(anim); // Refresh "layer"
 		}
+		this.anim.remove();
 	}
 }

src/gui/GuiConsoleScrollCtrl.hx

@@ -136,7 +136,7 @@ class GuiConsoleScrollCtrl extends GuiControl {
 		return rrec;
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
 		this.dirty = true;
 
 		scrollUpButton.position = new Vector(this.extent.x - 18, 0);
@@ -157,7 +157,7 @@ class GuiConsoleScrollCtrl extends GuiControl {
 
 		updateScrollVisual();
 
-		super.render(scene2d);
+		super.render(scene2d, parent);
 	}
 
 	public function updateScrollVisual() {

src/gui/GuiControl.hx

@@ -1,5 +1,6 @@
 package gui;
 
+import h2d.Flow;
 import hxd.res.Image;
 import h2d.Graphics;
 import hxd.Key;
@@ -55,11 +56,42 @@ class GuiControl {
 
 	var _disposed = false;
 
+	var _flow:Flow;
+
 	public function new() {}
 
-	public function render(scene2d:Scene) {
+	public function render(scene2d:Scene, ?parent:Flow) {
+		if (this._flow == null) {
+			this._flow = new Flow(parent != null ? parent : scene2d);
+		}
+		if (parent == null) {
+			if (scene2d.contains(this._flow)) {
+				scene2d.removeChild(this._flow);
+			}
+			scene2d.addChild(this._flow);
+		} else {
+			if (parent.contains(this._flow)) {
+				parent.removeChild(this._flow);
+			}
+			parent.addChild(this._flow);
+		}
+		var rrect = getRenderRectangle();
+		this._flow.maxWidth = cast rrect.extent.x;
+		this._flow.maxHeight = cast rrect.extent.y;
+		this._flow.borderWidth = cast rrect.extent.x;
+		this._flow.borderHeight = cast rrect.extent.y;
+		this._flow.borderRight = cast rrect.extent.x;
+		this._flow.borderBottom = cast rrect.extent.y;
+		this._flow.overflow = Hidden;
+		this._flow.multiline = true;
+		if (parent != null) {
+			var props = parent.getProperties(this._flow);
+			props.isAbsolute = true;
+			var off = this.getOffsetFromParent();
+			this._flow.setPosition(off.x, off.y);
+		}
 		for (c in children) {
-			c.render(scene2d);
+			c.render(scene2d, this._flow);
 		}
 		this._skipNextEvent = true;
 	}
@@ -203,6 +235,59 @@ class GuiControl {
 		}
 	}
 
+	public function getOffsetFromParent() {
+		var rect = new Rect(this.position, this.extent);
+		var parentRect:Rect = null;
+
+		var uiScaleFactor = Settings.uiScale;
+
+		var offset = this.position.clone();
+
+		if (this.parent != null) {
+			parentRect = this.parent.getRenderRectangle();
+			offset = this.position.multiply(uiScaleFactor);
+		}
+
+		var scaleFactor = 1.0 / Window.getInstance().windowToPixelRatio;
+		#if (js || android)
+		scaleFactor = 1 / Settings.zoomRatio; // 768 / js.Browser.window.innerHeight * js.Browser.window.devicePixelRatio; // 0.5; // 768 / js.Browser.window.innerHeight; // js.Browser.window.innerHeight * js.Browser.window.devicePixelRatio / 768;
+		#end
+
+		if (this.horizSizing == HorizSizing.Center) {
+			if (this.parent != null) {
+				offset.x = parentRect.extent.x / 2 - (rect.extent.x * uiScaleFactor) / 2;
+			}
+		}
+		if (this.vertSizing == VertSizing.Center) {
+			if (this.parent != null) {
+				offset.y = parentRect.extent.y / 2 - (rect.extent.y * uiScaleFactor) / 2;
+			}
+		}
+		if (this.horizSizing == HorizSizing.Right) {
+			if (this.parent != null) {
+				offset.x = this.position.x * uiScaleFactor;
+			}
+		}
+		if (this.vertSizing == VertSizing.Bottom) {
+			if (this.parent != null) {
+				offset.y = this.position.y * uiScaleFactor;
+			}
+		}
+		if (this.horizSizing == HorizSizing.Left) {
+			if (this.parent != null) {
+				offset.x = parentRect.extent.x - (parent.extent.x - this.position.x) * uiScaleFactor;
+			}
+		}
+		if (this.vertSizing == VertSizing.Top) {
+			if (this.parent != null) {
+				offset.y = parentRect.extent.y - (parent.extent.y - this.position.y) * uiScaleFactor;
+			}
+		}
+		offset.x = Math.floor(offset.x);
+		offset.y = Math.floor(offset.y);
+		return offset;
+	}
+
 	public function guiToScreen(point:Vector) {
 		var rect = this.getRenderRectangle();
 		return rect.position.add(point);
@@ -261,6 +346,7 @@ class GuiControl {
 	public function onScroll(scrollX:Float, scrollY:Float) {}
 
 	public function onRemove() {
+		this._flow.remove();
 		for (c in this.children) {
 			c.onRemove();
 		}

src/gui/GuiGraphics.hx

@@ -18,7 +18,7 @@ class GuiGraphics extends GuiControl {
 		this.graphics = graphics;
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
 		var renderRect = this.getRenderRectangle();
 		graphics.setPosition(Math.floor(renderRect.position.x), Math.floor(renderRect.position.y));
 		// bmp.scaleX = renderRect.extent.x / bmp.tile.width;

src/gui/GuiImage.hx

@@ -23,38 +23,48 @@ class GuiImage extends GuiControl {
 		this.bmp = new Bitmap(texture);
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
+		if (parent != null) {
+			if (parent.contains(this.bmp)) {
+				parent.removeChild(this.bmp);
+			}
+			parent.addChild(this.bmp);
+			var off = this.getOffsetFromParent();
+			var props = parent.getProperties(this.bmp);
+			props.isAbsolute = true;
+			this.bmp.setPosition(off.x, off.y);
+		}
+		super.render(scene2d, parent);
 		var renderRect = this.getRenderRectangle();
-		var hittestRect = this.getHitTestRect();
+		// var hittestRect = this.getHitTestRect();
 
-		var obj:h2d.Object = bmp;
+		// var obj:h2d.Object = bmp;
-		if (doClipping) {
+		// if (doClipping) {
-			bmpFlow = new Flow();
+		// 	bmpFlow = new Flow();
-			bmpFlow.addChild(bmp);
+		// 	bmpFlow.addChild(bmp);
-			bmpFlow.overflow = FlowOverflow.Hidden;
+		// 	bmpFlow.overflow = FlowOverflow.Hidden;
-			bmpFlow.multiline = true;
+		// 	bmpFlow.multiline = true;
-			bmpFlow.setPosition(hittestRect.position.x, hittestRect.position.y);
+		// 	bmpFlow.setPosition(hittestRect.position.x, hittestRect.position.y);
-			obj = bmpFlow;
+		// 	obj = bmpFlow;
-		}
+		// }
 
-		if (doClipping) {
+		// if (doClipping) {
-			var fp = bmpFlow.getProperties(bmp);
+		// 	var fp = bmpFlow.getProperties(bmp);
-			fp.offsetX = -Std.int(hittestRect.position.x - renderRect.position.x);
+		// 	fp.offsetX = -Std.int(hittestRect.position.x - renderRect.position.x);
-			fp.offsetY = -Std.int(hittestRect.position.y - renderRect.position.y);
+		// 	fp.offsetY = -Std.int(hittestRect.position.y - renderRect.position.y);
-		} else {
+		// } else {
-			bmp.setPosition(Math.floor(renderRect.position.x), Math.floor(renderRect.position.y));
+		// 	bmp.setPosition(Math.floor(renderRect.position.x), Math.floor(renderRect.position.y));
-		}
+		// }
 		bmp.width = renderRect.extent.x;
 		bmp.height = renderRect.extent.y;
-		if (doClipping) {
+		// if (doClipping) {
-			bmpFlow.maxWidth = Std.int(hittestRect.extent.x);
+		// 	bmpFlow.maxWidth = Std.int(hittestRect.extent.x);
-			bmpFlow.maxHeight = Std.int(hittestRect.extent.y);
+		// 	bmpFlow.maxHeight = Std.int(hittestRect.extent.y);
-		}
+		// }
-		if (scene2d.contains(obj)) {
+		// if (scene2d.contains(obj)) {
-			scene2d.removeChild(obj); // Refresh "layer"
+		// 	scene2d.removeChild(obj); // Refresh "layer"
-		}
+		// }
-		scene2d.addChild(obj);
+		// scene2d.addChild(obj);
-		super.render(scene2d);
 	}
 
 	public override function dispose() {
@@ -80,5 +90,6 @@ class GuiImage extends GuiControl {
 		if (MarbleGame.canvas.scene2d.contains(bmp)) {
 			MarbleGame.canvas.scene2d.removeChild(bmp); // Refresh "layer"
 		}
+		this.bmp.remove();
 	}
 }

src/gui/GuiMLText.hx

@@ -30,43 +30,66 @@ class GuiMLText extends GuiControl {
 		this.text.loadFont = loadFontFunc;
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
 		var renderRect = this.getRenderRectangle();
 		text.maxWidth = renderRect.extent.x;
 
-		if (this.scrollable) {
+		if (parent != null) {
-			this.flow = new Flow();
+			if (parent.contains(this.text)) {
-			this.flow.addChild(this.text);
+				parent.removeChild(this.text);
-
-			this.flow.maxWidth = cast renderRect.extent.x;
-			this.flow.maxHeight = cast renderRect.extent.y;
-			this.flow.multiline = true;
-			this.flow.overflow = FlowOverflow.Hidden;
 			}
-
+			parent.addChild(this.text);
-		var obj:h2d.Object = this.scrollable ? flow : text;
+			var off = this.getOffsetFromParent();
+			var props = parent.getProperties(this.text);
+			props.isAbsolute = true;
 
 			if (justify == Left) {
-			obj.setPosition(Math.floor(renderRect.position.x), Math.floor(renderRect.position.y));
+				text.setPosition(Math.floor(off.x), Math.floor(off.y));
 				text.textAlign = Left;
 			}
 			if (justify == Right) {
-			obj.setPosition(Math.floor(renderRect.position.x + renderRect.extent.x), Math.floor(renderRect.position.y));
+				text.setPosition(Math.floor(off.x + renderRect.extent.x), Math.floor(off.y));
 				text.textAlign = Right;
 			}
 			if (justify == Center) {
-			obj.setPosition(Math.floor(renderRect.position.x + renderRect.extent.x / 2), Math.floor(renderRect.position.y));
+				text.setPosition(Math.floor(off.x + renderRect.extent.x / 2), Math.floor(off.y));
 				text.textAlign = Center;
 			}
+		}
 
-		if (scrollable)
+		// if (this.scrollable) {
-			text.setPosition(0, -_scroll);
+		// 	this.flow = new Flow();
+		// 	this.flow.addChild(this.text);
 
-		if (scene2d.contains(obj))
+		// 	this.flow.maxWidth = cast renderRect.extent.x;
-			scene2d.removeChild(obj);
+		// 	this.flow.maxHeight = cast renderRect.extent.y;
+		// 	this.flow.multiline = true;
+		// 	this.flow.overflow = FlowOverflow.Hidden;
+		// }
+		super.render(scene2d, parent);
 
-		scene2d.addChild(obj);
+		// var obj:h2d.Object = this.scrollable ? flow : text;
-		super.render(scene2d);
+
+		// if (justify == Left) {
+		// 	obj.setPosition(Math.floor(renderRect.position.x), Math.floor(renderRect.position.y));
+		// 	text.textAlign = Left;
+		// }
+		// if (justify == Right) {
+		// 	obj.setPosition(Math.floor(renderRect.position.x + renderRect.extent.x), Math.floor(renderRect.position.y));
+		// 	text.textAlign = Right;
+		// }
+		// if (justify == Center) {
+		// 	obj.setPosition(Math.floor(renderRect.position.x + renderRect.extent.x / 2), Math.floor(renderRect.position.y));
+		// 	text.textAlign = Center;
+		// }
+
+		// if (scrollable)
+		// 	text.setPosition(0, -_scroll);
+
+		// if (scene2d.contains(obj))
+		// 	scene2d.removeChild(obj);
+
+		// scene2d.addChild(obj);
 	}
 
 	public override function dispose() {
@@ -76,6 +99,7 @@ class GuiMLText extends GuiControl {
 		} else {
 			this.flow.remove();
 		}
+		this.text.remove();
 	}
 
 	public override function onRemove() {
@@ -86,11 +110,12 @@ class GuiMLText extends GuiControl {
 		if (MarbleGame.canvas.scene2d.contains(text)) {
 			MarbleGame.canvas.scene2d.removeChild(text); // Refresh "layer"
 		}
+		this.text.remove();
 	}
 
 	public override function onScroll(scrollX:Float, scrollY:Float) {
 		_scroll = scrollY;
-		text.setPosition(0, -scrollY);
+		text.setPosition(text.x, -scrollY);
 		if (flow != null)
 			flow.getProperties(text).offsetY = cast - scrollY;
 	}

src/gui/GuiObjectShow.hx

@@ -34,18 +34,32 @@ class GuiObjectShow extends GuiControl {
 		timeState.timeSinceLoad = 0;
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
 		var renderRect = getRenderRectangle();
+
 		init(renderRect);
-		if (scene2d.contains(sceneBitmap))
+
-			scene2d.removeChild(sceneBitmap);
+		if (parent != null) {
-		if (visible)
+			if (parent.contains(this.sceneBitmap)) {
-			scene2d.addChild(sceneBitmap);
+				parent.removeChild(this.sceneBitmap);
-		sceneBitmap.x = renderRect.position.x;
+			}
-		sceneBitmap.y = renderRect.position.y;
+			parent.addChild(this.sceneBitmap);
+			var off = this.getOffsetFromParent();
+			var props = parent.getProperties(this.sceneBitmap);
+			props.isAbsolute = true;
+			this.sceneBitmap.setPosition(off.x, off.y);
+		}
+		super.render(scene2d, parent);
+		var renderRect = this.getRenderRectangle();
+
+		// if (scene2d.contains(sceneBitmap))
+		// 	scene2d.removeChild(sceneBitmap);
+		// if (visible)
+		// 	scene2d.addChild(sceneBitmap);
+		// sceneBitmap.x = renderRect.position.x;
+		// sceneBitmap.y = renderRect.position.y;
 		sceneBitmap.width = renderRect.extent.x;
 		sceneBitmap.height = renderRect.extent.y;
-		super.render(scene2d);
 	}
 
 	public override function update(dt:Float, mouseState:MouseState) {

src/gui/GuiProgress.hx

@@ -17,23 +17,31 @@ class GuiProgress extends GuiControl {
 		super();
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
 		var renderRect = getRenderRectangle();
 		if (this.progressRect == null) {
 			this.progressRect = new Graphics();
 		}
-		if (scene2d.contains(progressRect))
+		if (parent != null) {
-			progressRect.remove();
+			if (parent.contains(this.progressRect)) {
-		scene2d.addChild(progressRect);
+				parent.removeChild(this.progressRect);
+			}
+			parent.addChild(this.progressRect);
+			var off = this.getOffsetFromParent();
+			var props = parent.getProperties(this.progressRect);
+			props.isAbsolute = true;
+			this.progressRect.setPosition(off.x, off.y);
+		}
+		// if (scene2d.contains(progressRect))
+		// 	progressRect.remove();
+		// scene2d.addChild(progressRect);
 		var rgb = progressColor >> 2;
 		var a = progressColor & 0xFF;
 		this.progressRect.clear();
 		this.progressRect.beginFill(rgb, a / 0xFF);
 		this.progressRect.drawRect(0, 0, renderRect.extent.x * progress, renderRect.extent.y);
 		this.progressRect.endFill();
-		this.progressRect.x = renderRect.position.x;
+		super.render(scene2d, parent);
-		this.progressRect.y = renderRect.position.y;
-		super.render(scene2d);
 	}
 
 	public override function dispose() {
@@ -47,6 +55,7 @@ class GuiProgress extends GuiControl {
 		if (MarbleGame.canvas.scene2d.contains(progressRect)) {
 			MarbleGame.canvas.scene2d.removeChild(progressRect); // Refresh "layer"
 		}
+		this.progressRect.remove();
 	}
 
 	function get_progress() {

src/gui/GuiScrollCtrl.hx

@@ -97,7 +97,7 @@ class GuiScrollCtrl extends GuiControl {
 		return rrec;
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
 		this.dirty = true;
 
 		if (scene2d.contains(scrollBarY))
@@ -111,7 +111,7 @@ class GuiScrollCtrl extends GuiControl {
 
 		updateScrollVisual();
 
-		super.render(scene2d);
+		super.render(scene2d, parent);
 	}
 
 	public function updateScrollVisual() {

src/gui/GuiSlider.hx

@@ -29,8 +29,9 @@ class GuiSlider extends GuiImage {
 			}
 		} else if (slidingSound != null)
 			slidingSound.pause = true;
-		this.bmp.x = renderRect.position.x + renderRect.extent.x * sliderValue;
+		var off = getOffsetFromParent();
-		this.bmp.x = Util.clamp(this.bmp.x, renderRect.position.x, renderRect.position.x + renderRect.extent.x - bmp.width / 2);
+		this.bmp.x = off.x + renderRect.extent.x * sliderValue;
+		this.bmp.x = Util.clamp(this.bmp.x, off.x, off.x + renderRect.extent.x - bmp.width / 2);
 		this.bmp.width = this.bmp.tile.width * Settings.uiScale;
 		super.update(dt, mouseState);
 	}

src/gui/GuiText.hx

@@ -23,24 +23,46 @@ class GuiText extends GuiControl {
 		this.text = new Text(font);
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
 		var renderRect = this.getRenderRectangle();
+		if (parent != null) {
+			if (parent.contains(this.text)) {
+				parent.removeChild(this.text);
+			}
+			parent.addChild(this.text);
+			var off = this.getOffsetFromParent();
+			var props = parent.getProperties(this.text);
+			props.isAbsolute = true;
+
 			if (justify == Left) {
-			text.setPosition(Math.floor(renderRect.position.x), Math.floor(renderRect.position.y));
+				text.setPosition(Math.floor(off.x), Math.floor(off.y));
 				text.textAlign = Left;
 			}
 			if (justify == Right) {
-			text.setPosition(Math.floor(renderRect.position.x + renderRect.extent.x), Math.floor(renderRect.position.y));
+				text.setPosition(Math.floor(off.x + renderRect.extent.x), Math.floor(off.y));
 				text.textAlign = Right;
 			}
 			if (justify == Center) {
-			text.setPosition(Math.floor(renderRect.position.x + renderRect.extent.x / 2), Math.floor(renderRect.position.y));
+				text.setPosition(Math.floor(off.x + renderRect.extent.x / 2), Math.floor(off.y));
 				text.textAlign = Center;
 			}
-		if (scene2d.contains(text))
+		}
-			scene2d.removeChild(text);
+		// if (justify == Left) {
-		scene2d.addChild(text);
+		// 	text.setPosition(Math.floor(renderRect.position.x), Math.floor(renderRect.position.y));
-		super.render(scene2d);
+		// 	text.textAlign = Left;
+		// }
+		// if (justify == Right) {
+		// 	text.setPosition(Math.floor(renderRect.position.x + renderRect.extent.x), Math.floor(renderRect.position.y));
+		// 	text.textAlign = Right;
+		// }
+		// if (justify == Center) {
+		// 	text.setPosition(Math.floor(renderRect.position.x + renderRect.extent.x / 2), Math.floor(renderRect.position.y));
+		// 	text.textAlign = Center;
+		// }
+		// if (scene2d.contains(text))
+		// 	scene2d.removeChild(text);
+		// scene2d.addChild(text);
+		super.render(scene2d, parent);
 	}
 
 	public override function dispose() {
@@ -53,5 +75,6 @@ class GuiText extends GuiControl {
 		if (MarbleGame.canvas.scene2d.contains(text)) {
 			MarbleGame.canvas.scene2d.removeChild(text); // Refresh "layer"
 		}
+		this.text.remove();
 	}
 }

src/gui/GuiTextInput.hx

@@ -28,25 +28,32 @@ class GuiTextInput extends GuiControl {
 		};
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
 		var renderRect = this.getRenderRectangle();
+		if (parent != null) {
+			if (parent.contains(this.text)) {
+				parent.removeChild(this.text);
+			}
+			parent.addChild(this.text);
+			var off = this.getOffsetFromParent();
+			var props = parent.getProperties(this.text);
+			props.isAbsolute = true;
+
 			if (justify == Left) {
-			text.setPosition(renderRect.position.x, renderRect.position.y);
+				text.setPosition(Math.floor(off.x), Math.floor(off.y));
 				text.textAlign = Left;
 			}
 			if (justify == Right) {
-			text.setPosition(renderRect.position.x + renderRect.extent.x, renderRect.position.y);
+				text.setPosition(Math.floor(off.x + renderRect.extent.x), Math.floor(off.y));
 				text.textAlign = Right;
 			}
 			if (justify == Center) {
-			text.setPosition(renderRect.position.x + renderRect.extent.x / 2, renderRect.position.y);
+				text.setPosition(Math.floor(off.x + renderRect.extent.x / 2), Math.floor(off.y));
 				text.textAlign = Center;
 			}
-		if (scene2d.contains(text))
+		}
-			scene2d.removeChild(text);
-		scene2d.addChild(text);
 		this.text.inputWidth = cast renderRect.extent.x;
-		super.render(scene2d);
+		super.render(scene2d, parent);
 	}
 
 	public override function dispose() {
@@ -59,6 +66,7 @@ class GuiTextInput extends GuiControl {
 		if (MarbleGame.canvas.scene2d.contains(text)) {
 			MarbleGame.canvas.scene2d.removeChild(text); // Refresh "layer"
 		}
+		text.remove();
 	}
 
 	public override function onMousePress(mouseState:MouseState) {

src/gui/GuiTextListCtrl.hx

@@ -87,14 +87,20 @@ class GuiTextListCtrl extends GuiControl {
 		}
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
 		var renderRect = this.getRenderRectangle();
 		var htr = this.getHitTestRect();
 
-		if (scene2d.contains(g))
+		if (parent != null) {
-			scene2d.removeChild(g);
+			if (parent.contains(g))
-		scene2d.addChild(g);
+				parent.removeChild(g);
-		g.setPosition(renderRect.position.x, renderRect.position.y - this.scroll);
+			parent.addChild(g);
+
+			var off = this.getOffsetFromParent();
+			parent.getProperties(g).isAbsolute = true;
+
+			g.setPosition(off.x, off.y - this.scroll);
+		}
 
 		if (scrollable) {
 			this.flow = new Flow();
@@ -104,12 +110,18 @@ class GuiTextListCtrl extends GuiControl {
 			this.flow.multiline = true;
 			this.flow.layout = Stack;
 			this.flow.overflow = FlowOverflow.Hidden;
-			if (scene2d.contains(this.flow))
-				scene2d.removeChild(this.flow);
 
-			scene2d.addChild(this.flow);
+			if (parent != null) {
+				if (parent.contains(this.flow)) {
+					parent.removeChild(this.flow);
+				}
+				parent.addChild(this.flow);
+				var off = this.getOffsetFromParent();
+				var props = parent.getProperties(this.flow);
+				props.isAbsolute = true;
 
-			this.flow.setPosition(htr.position.x, htr.position.y);
+				this.flow.setPosition(off.x, off.y);
+			}
 		}
 
 		for (i in 0...textObjs.length) {
@@ -135,7 +147,7 @@ class GuiTextListCtrl extends GuiControl {
 		}
 
 		redrawSelectionRect(htr);
-		super.render(scene2d);
+		super.render(scene2d, parent);
 	}
 
 	public function calculateFullHeight() {
@@ -159,9 +171,11 @@ class GuiTextListCtrl extends GuiControl {
 			if (MarbleGame.canvas.scene2d.contains(text)) {
 				MarbleGame.canvas.scene2d.removeChild(text); // Refresh "layer"
 			}
+			text.remove();
 		}
 		if (MarbleGame.canvas.scene2d.contains(g))
 			MarbleGame.canvas.scene2d.removeChild(g);
+		g.remove();
 	}
 
 	public override function onMouseMove(mouseState:MouseState) {
@@ -221,17 +235,18 @@ class GuiTextListCtrl extends GuiControl {
 			g.clear();
 			g.beginFill(selectedFillColor);
 
+			var off = this.getOffsetFromParent();
 			// Check if we are between the top and bottom, render normally in that case
 			var topY = 2 + (_prevSelected * (font.size + 4)) + g.y;
 			var bottomY = 2 + (_prevSelected * (font.size + 4)) + g.y + font.size + 4;
-			var topRectY = renderRect.position.y;
+			var topRectY = off.y;
-			var bottomRectY = renderRect.position.y + renderRect.extent.y;
+			var bottomRectY = off.y + renderRect.extent.y;
 
 			if (topY >= topRectY && bottomY <= bottomRectY)
 				g.drawRect(0, 5 + (_prevSelected * (font.size + 4)) - 3, renderRect.extent.x, font.size + 4);
 			// We need to do math the draw the partially visible top selected
 			if (topY <= topRectY && bottomY >= topRectY) {
-				g.drawRect(0, this.scroll, renderRect.extent.x, topY + font.size + 4 - renderRect.position.y);
+				g.drawRect(0, this.scroll, renderRect.extent.x, topY + font.size + 4 - off.y);
 			}
 			// Same for the bottom
 			if (topY <= bottomRectY && bottomY >= bottomRectY) {
@@ -240,7 +255,7 @@ class GuiTextListCtrl extends GuiControl {
 					- font.size
 					- 4
 					+ (topY + font.size + 4 - bottomRectY), renderRect.extent.x,
-					renderRect.position.y
+					off.y
 					+ renderRect.extent.y
 					- (topY));
 			}
@@ -259,7 +274,7 @@ class GuiTextListCtrl extends GuiControl {
 		for (i in 0...textObjs.length) {
 			var text = textObjs[i];
 			text.y = Math.floor((i * (text.font.size + 4) + 5 + textYOffset * Settings.uiScale - scrollY));
-			g.y = renderRect.position.y - scrollY;
+			g.y = -scrollY;
 		}
 		redrawSelectionRect(hittestrect);
 	}

src/gui/HelpCreditsGui.hx

@@ -130,8 +130,8 @@ class HelpCreditsGui extends GuiImage {
 		};
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
-		super.render(scene2d);
+		super.render(scene2d, parent);
 
 		manualPageList.onSelectedFunc(0);
 	}

src/gui/JukeboxDlg.hx

@@ -108,7 +108,7 @@ class JukeboxDlg extends GuiImage {
 		stopBtn.pressedAction = (e) -> {
 			this.removeChild(stopBtn);
 			this.addChild(playBtn);
-			playBtn.render(MarbleGame.canvas.scene2d);
+			playBtn.render(MarbleGame.canvas.scene2d, @:privateAccess playBtn.parent._flow);
 			playing = false;
 			songStatus.text.text = '<p align="center">${playing ? "Playing" : "Stopped"}</p>';
 			AudioManager.pauseMusic(true);
@@ -117,7 +117,7 @@ class JukeboxDlg extends GuiImage {
 		playBtn.pressedAction = (e) -> {
 			this.removeChild(playBtn);
 			this.addChild(stopBtn);
-			stopBtn.render(MarbleGame.canvas.scene2d);
+			stopBtn.render(MarbleGame.canvas.scene2d, @:privateAccess stopBtn.parent._flow);
 			playing = true;
 			songStatus.text.text = '<p align="center">${playing ? "Playing" : "Stopped"}</p>';
 			if (AudioManager.currentMusicName != songList[selectedIdx]) {

src/gui/OptionsDlg.hx

@@ -164,7 +164,7 @@ class OptionsDlg extends GuiImage {
 			optDropdown.pressedAction = (sender) -> {
 				if (currentDropDown == null) {
 					parent.addChild(optDropdownImg);
-					optDropdownImg.render(MarbleGame.canvas.scene2d);
+					optDropdownImg.render(MarbleGame.canvas.scene2d, @:privateAccess parent._flow);
 					currentDropDown = optDropdownImg;
 					setAllBtnState(false);
 					return;
@@ -187,6 +187,7 @@ class OptionsDlg extends GuiImage {
 				case 'xlarge': 97;
 				default: 0;
 			});
+			// optDropdownList.scrollable = true;
 			optDropdownList.textYOffset = -5;
 			optDropdownList.onSelectedFunc = (idx) -> {
 				onSelect(idx);

src/gui/PlayMissionGui.hx

@@ -821,8 +821,8 @@ class PlayMissionGui extends GuiImage {
 			}
 
 			setSelectedFunc(currentList.length - 1);
-			if (doRender)
+			// if (doRender)
-				this.render(cast(this.parent, Canvas).scene2d);
+			//	this.render(cast(this.parent, Canvas).scene2d);
 		}
 
 		setScoreHover = (isHover) -> {
@@ -1040,8 +1040,8 @@ class PlayMissionGui extends GuiImage {
 		#end
 	}
 
-	public override function render(scene2d:Scene) {
+	public override function render(scene2d:Scene, ?parent:h2d.Flow) {
-		super.render(scene2d);
+		super.render(scene2d, parent);
 		setSelectedFunc(currentSelectionStatic);
 	}