keyboard navigation finish

src/MarbleGame.hx

@@ -190,7 +190,6 @@ class MarbleGame {
 			if (((Key.isPressed(Key.ESCAPE) #if js && paused #end) || Gamepad.isPressed(["start"]))
 				&& world.finishTime == null
 				&& world._ready) {
-				paused = !paused;
 				handlePauseGame();
 			}
 		}
@@ -248,19 +247,23 @@ class MarbleGame {
 	}
 
 	public function handlePauseGame() {
-		if (paused && world._ready) {
+		if (!paused && world._ready) {
+			paused = true;
 			Console.log("Game paused");
 			world.setCursorLock(false);
 			@:privateAccess world.playGui.setGuiVisibility(false);
 			showPauseUI();
 		} else {
 			if (world._ready) {
-				Console.log("Game unpaused");
+				if (canvas.children[0] is ExitGameDlg) {
-				if (exitGameDlg != null) {
+					paused = false;
-					canvas.popDialog(exitGameDlg);
+					Console.log("Game unpaused");
-					@:privateAccess world.playGui.setGuiVisibility(true);
+					if (exitGameDlg != null) {
+						canvas.popDialog(exitGameDlg);
+						@:privateAccess world.playGui.setGuiVisibility(true);
+					}
+					world.setCursorLock(true);
 				}
-				world.setCursorLock(true);
 			}
 		}
 	}

src/gui/GuiXboxList.hx

@@ -11,6 +11,8 @@ class GuiXboxList extends GuiControl {
 
 	var buttons:Array<GuiXboxListButton> = [];
 
+	public var active:Bool = true;
+
 	public function new() {
 		super();
 	}
@@ -30,20 +32,29 @@ class GuiXboxList extends GuiControl {
 	override function update(dt:Float, mouseState:MouseState) {
 		super.update(dt, mouseState);
 
-		var prevSelected = selected;
+		if (active) {
-		if (Key.isPressed(Key.DOWN) || Gamepad.isPressed(["dpadDown"]))
+			if (!buttons[selected].selected)
-			selected++;
+				buttons[selected].selected = true;
-		if (Key.isPressed(Key.UP) || Gamepad.isPressed(["dpadUp"]))
+			var prevSelected = selected;
-			selected--;
+			if (Key.isPressed(Key.DOWN) || Gamepad.isPressed(["dpadDown"]))
-		if (selected < 0)
+				selected++;
-			selected = buttons.length - 1;
+			if (Key.isPressed(Key.UP) || Gamepad.isPressed(["dpadUp"]))
-		if (selected >= buttons.length)
+				selected--;
-			selected = 0;
+			if (selected < 0)
-		if (prevSelected != selected) {
+				selected = buttons.length - 1;
-			buttons[prevSelected].selected = false;
+			if (selected >= buttons.length)
-			buttons[selected].selected = true;
+				selected = 0;
+			if (prevSelected != selected) {
+				buttons[prevSelected].selected = false;
+				buttons[selected].selected = true;
+			}
+			if (Key.isPressed(Key.ENTER) || Gamepad.isPressed(["A"]))
+				buttons[selected].pressedAction(new GuiEvent(buttons[selected]));
+		} else {
+			for (b in buttons) {
+				if (b.selected)
+					b.selected = false;
+			}
 		}
-		if (Key.isPressed(Key.ENTER) || Gamepad.isPressed(["A"]))
-			buttons[selected].pressedAction(new GuiEvent(buttons[selected]));
 	}
 }

src/gui/GuiXboxListButton.hx

@@ -88,9 +88,9 @@ class GuiXboxListButton extends GuiControl {
 				}
 				this.selected = true;
 			}
-			if (!renderRect.inRect(mouseState.position) && selected) {
+			// if (!renderRect.inRect(mouseState.position) && selected) {
-				this.selected = false;
+			// 	this.selected = false;
-			}
+			// }
 			_prevMousePos = mouseState.position.clone();
 		}
 		if (selected && !disabled) {

src/gui/GuiXboxOptionsList.hx

@@ -1,5 +1,6 @@
 package gui;
 
+import src.Gamepad;
 import hxd.Key;
 import h3d.Matrix;
 import hxd.res.BitmapFont;
@@ -22,6 +23,12 @@ class GuiXboxOptionsList extends GuiControl {
 
 	var onChangeFunc:Int->Bool = null;
 
+	var _prevMousePos:Vector;
+
+	public var selected:Bool = false;
+
+	public var list:GuiXboxOptionsListCollection;
+
 	public function new(icon:Int, name:String, values:Array<String>, midcolumn:Float = 0.3, textOff = 155.5) {
 		super();
 
@@ -113,7 +120,22 @@ class GuiXboxOptionsList extends GuiControl {
 			var htr = this.getHitTestRect();
 			htr.position = htr.position.add(new Vector(24, 20));
 			htr.extent.set(776, 53);
-			if (htr.inRect(mouseState.position)) {
+
+			if (_prevMousePos == null || !_prevMousePos.equals(mouseState.position)) {
+				if (htr.inRect(mouseState.position) && !selected) {
+					this.selected = true;
+					if (list != null) {
+						list.options[list.selected].selected = false;
+						list.selected = list.options.indexOf(this);
+					}
+				}
+				// if (!htr.inRect(mouseState.position) && selected) {
+				// 	this.selected = false;
+				// }
+				_prevMousePos = mouseState.position.clone();
+			}
+
+			if (selected) {
 				bgFill.anim.currentFrame = 1;
 				optIcon.anim.currentFrame = 1;
 				labelText.text.textColor = 0x101010;
@@ -188,6 +210,34 @@ class GuiXboxOptionsList extends GuiControl {
 			rightButton.anim.currentFrame = 0;
 			rightButton.anim.filter.enable = false;
 		}
+		if (selected || alwaysActive) {
+			if (Key.isPressed(Key.LEFT) || Gamepad.isPressed(['dpadLeft'])) {
+				var newOption = currentOption - 1;
+				if (newOption < 0)
+					newOption = options.length - 1;
+
+				var doChange = true;
+				if (onChangeFunc != null)
+					doChange = onChangeFunc(newOption);
+				if (doChange) {
+					currentOption = newOption;
+					optionText.text.text = options[currentOption];
+				}
+			}
+			if (Key.isPressed(Key.RIGHT) || Gamepad.isPressed(['dpadRight'])) {
+				var newOption = currentOption + 1;
+				if (newOption >= options.length)
+					newOption = 0;
+
+				var doChange = true;
+				if (onChangeFunc != null)
+					doChange = onChangeFunc(newOption);
+				if (doChange) {
+					currentOption = newOption;
+					optionText.text.text = options[currentOption];
+				}
+			}
+		}
 		super.update(dt, mouseState);
 	}
 

src/gui/GuiXboxOptionsListCollection.hx

@@ -0,0 +1,52 @@
+package gui;
+
+import gui.GuiControl.MouseState;
+import h3d.Vector;
+import src.Gamepad;
+import hxd.Key;
+
+class GuiXboxOptionsListCollection extends GuiControl {
+	var offset:Float = 0;
+	var selected:Int = 0;
+
+	var options:Array<GuiXboxOptionsList> = [];
+
+	public function new() {
+		super();
+	}
+
+	public function addOption(icon:Int, name:String, options:Array<String>, onChange:Int->Bool, midColumn:Float = 0.3, textOff = 155.5) {
+		var opt = new GuiXboxOptionsList(icon, name, options, midColumn, textOff);
+		opt.vertSizing = Bottom;
+		opt.horizSizing = Right;
+		opt.position = new Vector(0, offset);
+		offset += 60;
+		opt.extent = new Vector(815, 94);
+		opt.onChangeFunc = onChange;
+		opt.list = this;
+		this.addChild(opt);
+		this.options.push(opt);
+		return opt;
+	}
+
+	override function update(dt:Float, mouseState:MouseState) {
+		super.update(dt, mouseState);
+
+		if (!options[selected].selected)
+			options[selected].selected = true;
+
+		var prevSelected = selected;
+		if (Key.isPressed(Key.DOWN) || Gamepad.isPressed(["dpadDown"]))
+			selected++;
+		if (Key.isPressed(Key.UP) || Gamepad.isPressed(["dpadUp"]))
+			selected--;
+		if (selected < 0)
+			selected = options.length - 1;
+		if (selected >= options.length)
+			selected = 0;
+		if (prevSelected != selected) {
+			options[prevSelected].selected = false;
+			options[selected].selected = true;
+		}
+	}
+}

src/gui/InputOptionsGui.hx

@@ -60,77 +60,43 @@ class InputOptionsGui extends GuiImage {
 			return range;
 		}
 
-		var yPos = 160;
+		var optionCollection = new GuiXboxOptionsListCollection();
+		optionCollection.position = new Vector(380, 160);
+		optionCollection.extent = new Vector(815, 500);
+		innerCtrl.addChild(optionCollection);
 
-		var iyOpt = new GuiXboxOptionsList(1, "Camera Y-Axis", ["Normal", "Inverted"], 0.5, 118);
+		var iyOpt = optionCollection.addOption(1, "Camera Y-Axis", ["Normal", "Inverted"], (idx) -> {
-		iyOpt.vertSizing = Bottom;
-		iyOpt.horizSizing = Right;
-		iyOpt.position = new Vector(380, yPos);
-		iyOpt.extent = new Vector(815, 94);
-		iyOpt.setCurrentOption(Settings.controlsSettings.invertYAxis ? 1 : 0);
-		iyOpt.onChangeFunc = (idx) -> {
 			Settings.controlsSettings.invertYAxis = (idx == 1);
 			return true;
-		}
+		}, 0.5, 118);
-		innerCtrl.addChild(iyOpt);
+		iyOpt.setCurrentOption(Settings.controlsSettings.invertYAxis ? 1 : 0);
 
-		yPos += 60;
+		var musicOpt = optionCollection.addOption(1, "Music Volume", numberRange(0, 100, 5), (idx) -> {
-
-		var musicOpt = new GuiXboxOptionsList(1, "Music Volume", numberRange(0, 100, 5), 0.5, 118);
-
-		musicOpt.vertSizing = Bottom;
-		musicOpt.horizSizing = Right;
-		musicOpt.position = new Vector(380, yPos);
-		musicOpt.extent = new Vector(815, 94);
-		musicOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(Settings.optionsSettings.musicVolume * 20), 0, 20)));
-		musicOpt.onChangeFunc = (idx) -> {
 			Settings.optionsSettings.musicVolume = (idx / 20.0);
 			return true;
-		}
+		}, 0.5, 118);
-		innerCtrl.addChild(musicOpt);
 
-		yPos += 60;
+		musicOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(Settings.optionsSettings.musicVolume * 20), 0, 20)));
 
-		var soundOpt = new GuiXboxOptionsList(1, "Effects Volume", numberRange(0, 100, 5), 0.5, 118);
+		var soundOpt = optionCollection.addOption(1, "Effects Volume", numberRange(0, 100, 5), (idx) -> {
-
-		soundOpt.vertSizing = Bottom;
-		soundOpt.horizSizing = Right;
-		soundOpt.position = new Vector(380, yPos);
-		soundOpt.extent = new Vector(815, 94);
-		soundOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(Settings.optionsSettings.soundVolume * 20), 0, 20)));
-		soundOpt.onChangeFunc = (idx) -> {
 			Settings.optionsSettings.soundVolume = (idx / 20.0);
 			return true;
-		}
+		}, 0.5, 118);
-		innerCtrl.addChild(soundOpt);
 
-		yPos += 60;
+		soundOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(Settings.optionsSettings.soundVolume * 20), 0, 20)));
 
-		var flOpt = new GuiXboxOptionsList(1, "Free-Look", ["Disabled", "Enabled"], 0.5, 118);
+		var flOpt = optionCollection.addOption(1, "Free-Look", ["Disabled", "Enabled"], (idx) -> {
-		flOpt.vertSizing = Bottom;
-		flOpt.horizSizing = Right;
-		flOpt.position = new Vector(380, yPos);
-		flOpt.extent = new Vector(815, 94);
-		flOpt.setCurrentOption(Settings.optionsSettings.vsync ? 1 : 0);
-		flOpt.onChangeFunc = (idx) -> {
 			Settings.controlsSettings.alwaysFreeLook = (idx == 1);
 			return true;
-		}
+		}, 0.5, 118);
-		innerCtrl.addChild(flOpt);
 
-		yPos += 60;
+		flOpt.setCurrentOption(Settings.optionsSettings.vsync ? 1 : 0);
 
-		var msOpt = new GuiXboxOptionsList(1, "Mouse Sensitivity", numberRange(10, 100, 5), 0.5, 118);
+		var msOpt = optionCollection.addOption(1, "Mouse Sensitivity", numberRange(10, 100, 5), (idx) -> {
-		msOpt.vertSizing = Bottom;
-		msOpt.horizSizing = Right;
-		msOpt.position = new Vector(380, yPos);
-		msOpt.extent = new Vector(815, 94);
-		msOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(((Settings.controlsSettings.cameraSensitivity - 0.2) / (3 - 0.2)) * 18), 0, 18)));
-		msOpt.onChangeFunc = (idx) -> {
 			Settings.controlsSettings.cameraSensitivity = cast(0.2 + (idx / 18.0) * (3 - 0.2));
 			return true;
-		}
+		}, 0.5, 118);
-		innerCtrl.addChild(msOpt);
+		msOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(((Settings.controlsSettings.cameraSensitivity - 0.2) / (3 - 0.2)) * 18), 0, 18)));
 
 		var bottomBar = new GuiControl();
 		bottomBar.position = new Vector(0, 590);

src/gui/KeyBindingsGui.hx

@@ -1,5 +1,7 @@
 package gui;
 
+import src.Gamepad;
+import gui.GuiControl.MouseState;
 import hxd.Key;
 import src.MarbleGame;
 import hxd.res.BitmapFont;
@@ -13,6 +15,9 @@ class KeyBindingsGui extends GuiImage {
 	var btnListLeft:GuiXboxList;
 	var btnListRight:GuiXboxList;
 
+	var selectedColumn = 0;
+	var _prevMousePosition:Vector;
+
 	public function new(pauseGui:Bool = false) {
 		var res = ResourceLoader.getImage("data/ui/xbox/BG_fadeOutSoftEdge.png").resource.toTile();
 		super(res);
@@ -111,6 +116,7 @@ class KeyBindingsGui extends GuiImage {
 		btnListLeft.position = new Vector(70 - offsetX, 135);
 		btnListLeft.horizSizing = Left;
 		btnListLeft.extent = new Vector(502, 500);
+		btnListLeft.active = false;
 		innerCtrl.addChild(btnListLeft);
 
 		btnListRight = new GuiXboxList();
@@ -192,6 +198,61 @@ class KeyBindingsGui extends GuiImage {
 		bottomBar.addChild(backButton);
 	}
 
+	override function update(dt:Float, mouseState:MouseState) {
+		super.update(dt, mouseState);
+		var prevSelected = selectedColumn;
+		if (Key.isPressed(Key.RIGHT) || Gamepad.isPressed(["dpadRight"]))
+			selectedColumn++;
+		if (Key.isPressed(Key.LEFT) || Gamepad.isPressed(["dpadLeft"]))
+			selectedColumn++;
+		if (selectedColumn < 0)
+			selectedColumn = 1;
+		if (selectedColumn > 1)
+			selectedColumn = 0;
+		if (selectedColumn == 1) {
+			btnListLeft.active = true;
+			btnListRight.active = false;
+		} else {
+			btnListLeft.active = false;
+			btnListRight.active = true;
+		}
+		if (prevSelected == 0 && selectedColumn == 1) {
+			btnListLeft.selected = btnListRight.selected;
+		}
+		if (prevSelected == 1 && selectedColumn == 0) {
+			btnListRight.selected = btnListLeft.selected;
+		}
+		if (_prevMousePosition == null || !_prevMousePosition.equals(mouseState.position)) {
+			for (i in 0...btnListLeft.buttons.length) {
+				var btn = btnListLeft.buttons[i];
+				var renderRect = btn.getHitTestRect();
+				renderRect.position = renderRect.position.add(new Vector(24, 20)); // Offset
+				renderRect.extent.set(439, 53);
+				if (renderRect.inRect(mouseState.position)) {
+					selectedColumn = 1;
+					btnListLeft.selected = i;
+					btnListLeft.active = true;
+					btnListRight.active = false;
+					break;
+				}
+			}
+			for (i in 0...btnListRight.buttons.length) {
+				var btn = btnListRight.buttons[i];
+				var renderRect = btn.getHitTestRect();
+				renderRect.position = renderRect.position.add(new Vector(24, 20)); // Offset
+				renderRect.extent.set(439, 53);
+				if (renderRect.inRect(mouseState.position)) {
+					selectedColumn = 0;
+					btnListRight.selected = i;
+					btnListRight.active = true;
+					btnListLeft.active = false;
+					break;
+				}
+			}
+			_prevMousePosition = mouseState.position.clone();
+		}
+	}
+
 	override function onResize(width:Int, height:Int) {
 		var offsetX = (width - 1280) / 2;
 		var offsetY = (height - 720) / 2;

src/gui/MiscOptionsGui.hx

@@ -60,36 +60,22 @@ class MiscOptionsGui extends GuiImage {
 			return range;
 		}
 
-		var yPos = 160;
+		var optionCollection = new GuiXboxOptionsListCollection();
+		optionCollection.position = new Vector(380, 160);
+		optionCollection.extent = new Vector(815, 500);
+		innerCtrl.addChild(optionCollection);
 
-		var rwOpt = new GuiXboxOptionsList(1, "Rewind", ["Disabled", "Enabled"], 0.5, 118);
+		var rwOpt = optionCollection.addOption(1, "Rewind", ["Disabled", "Enabled"], (idx) -> {
-		rwOpt.vertSizing = Bottom;
-		rwOpt.horizSizing = Right;
-		rwOpt.position = new Vector(380, yPos);
-		rwOpt.extent = new Vector(815, 94);
-		rwOpt.setCurrentOption(Settings.optionsSettings.rewindEnabled ? 1 : 0);
-		rwOpt.onChangeFunc = (idx) -> {
 			Settings.optionsSettings.rewindEnabled = (idx == 1);
 			return true;
-		}
+		}, 0.5, 118);
-		innerCtrl.addChild(rwOpt);
+		rwOpt.setCurrentOption(Settings.optionsSettings.rewindEnabled ? 1 : 0);
 
-		yPos += 60;
+		var rsOpt = optionCollection.addOption(1, "Rewind Speed", numberRange(10, 100, 5), (idx) -> {
-
-		var rsOpt = new GuiXboxOptionsList(1, "Rewind Speed", numberRange(10, 100, 5), 0.5, 118);
-
-		rsOpt.vertSizing = Bottom;
-		rsOpt.horizSizing = Right;
-		rsOpt.position = new Vector(380, yPos);
-		rsOpt.extent = new Vector(815, 94);
-		rsOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(((Settings.optionsSettings.rewindTimescale - 0.1) / (1 - 0.1)) * 18), 0, 18)));
-		rsOpt.onChangeFunc = (idx) -> {
 			Settings.optionsSettings.rewindTimescale = cast(0.1 + (idx / 18.0) * (1 - 0.1));
 			return true;
-		}
+		}, 0.5, 118);
-		innerCtrl.addChild(rsOpt);
+		rsOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(((Settings.optionsSettings.rewindTimescale - 0.1) / (1 - 0.1)) * 18), 0, 18)));
-
-		yPos += 60;
 
 		var bottomBar = new GuiControl();
 		bottomBar.position = new Vector(0, 590);

src/gui/VideoOptionsGui.hx

@@ -51,28 +51,19 @@ class VideoOptionsGui extends GuiImage {
 		rootTitle.text.alpha = 0.5;
 		innerCtrl.addChild(rootTitle);
 
-		var yPos = 160;
+		var optionCollection = new GuiXboxOptionsListCollection();
+		optionCollection.position = new Vector(380, 160);
+		optionCollection.extent = new Vector(815, 500);
+		innerCtrl.addChild(optionCollection);
 
-		var resolutionOpt = new GuiXboxOptionsList(1, "Fullscreen Res", [
+		var resolutionOpt = optionCollection.addOption(1, "Fullscreen Res", [
 			"1024 x 800",
 			"1280 x 720",
 			"1366 x 768",
 			"1440 x 900",
 			"1600 x 900",
 			"1920 x 1080"
-		], 0.35);
+		], (idx) -> {
-		resolutionOpt.optionText.text.text = '${Settings.optionsSettings.screenWidth} x ${Settings.optionsSettings.screenHeight}';
-		var curOpt = [
-			"1024 x 800",
-			"1280 x 720",
-			"1366 x 768",
-			"1440 x 900",
-			"1600 x 900",
-			"1920 x 1080"
-		].indexOf(resolutionOpt.optionText.text.text);
-		if (curOpt != -1)
-			resolutionOpt.setCurrentOption(curOpt);
-		resolutionOpt.onChangeFunc = (idx) -> {
 			switch (idx) {
 				case 0:
 					Settings.optionsSettings.screenWidth = 1024;
@@ -94,43 +85,31 @@ class VideoOptionsGui extends GuiImage {
 					Settings.optionsSettings.screenHeight = 1080;
 			}
 			return true;
-		}
+		}, 0.35);
 
-		resolutionOpt.vertSizing = Bottom;
+		resolutionOpt.optionText.text.text = '${Settings.optionsSettings.screenWidth} x ${Settings.optionsSettings.screenHeight}';
-		resolutionOpt.horizSizing = Right;
+		var curOpt = [
-		resolutionOpt.position = new Vector(380, yPos);
+			"1024 x 800",
-		resolutionOpt.extent = new Vector(815, 94);
+			"1280 x 720",
-		innerCtrl.addChild(resolutionOpt);
+			"1366 x 768",
+			"1440 x 900",
+			"1600 x 900",
+			"1920 x 1080"
+		].indexOf(resolutionOpt.optionText.text.text);
+		if (curOpt != -1)
+			resolutionOpt.setCurrentOption(curOpt);
 
-		yPos += 60;
+		var displayOpt = optionCollection.addOption(1, "Resolution", ["Fullscreen", "Windowed"], (idx) -> {
-
-		var displayOpt = new GuiXboxOptionsList(1, "Resolution", ["Fullscreen", "Windowed"], 0.35);
-		displayOpt.vertSizing = Bottom;
-		displayOpt.horizSizing = Right;
-		displayOpt.position = new Vector(380, yPos);
-		displayOpt.extent = new Vector(815, 94);
-		displayOpt.setCurrentOption(Settings.optionsSettings.isFullScreen ? 0 : 1);
-		displayOpt.onChangeFunc = (idx) -> {
 			Settings.optionsSettings.isFullScreen = (idx == 0);
 			return true;
-		}
+		}, 0.35);
-		innerCtrl.addChild(displayOpt);
+		displayOpt.setCurrentOption(Settings.optionsSettings.isFullScreen ? 0 : 1);
 
-		yPos += 60;
+		var vsyncOpt = optionCollection.addOption(1, "VSync", ["Disabled", "Enabled"], (idx) -> {
-
-		var vsyncOpt = new GuiXboxOptionsList(1, "VSync", ["Disabled", "Enabled"], 0.35);
-		vsyncOpt.vertSizing = Bottom;
-		vsyncOpt.horizSizing = Right;
-		vsyncOpt.position = new Vector(380, yPos);
-		vsyncOpt.extent = new Vector(815, 94);
-		vsyncOpt.setCurrentOption(Settings.optionsSettings.vsync ? 1 : 0);
-		vsyncOpt.onChangeFunc = (idx) -> {
 			Settings.optionsSettings.vsync = (idx == 1);
 			return true;
-		}
+		}, 0.35);
-		innerCtrl.addChild(vsyncOpt);
+		vsyncOpt.setCurrentOption(Settings.optionsSettings.vsync ? 1 : 0);
-
-		yPos += 60;
 
 		function numberRange(start:Int, stop:Int, step:Int) {
 			var range = [];
@@ -141,37 +120,32 @@ class VideoOptionsGui extends GuiImage {
 			return range;
 		}
 
-		var fovOpt = new GuiXboxOptionsList(1, "Field of Vision", numberRange(60, 140, 5), 0.35);
+		var fovOpt = optionCollection.addOption(1, "Field of Vision", numberRange(60, 140, 5), (idx) -> {
-		fovOpt.vertSizing = Bottom;
-		fovOpt.horizSizing = Right;
-		fovOpt.position = new Vector(380, yPos);
-		fovOpt.extent = new Vector(815, 94);
-		fovOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(((Settings.optionsSettings.fovX - 60) / (140 - 60)) * 16), 0, 16)));
-		fovOpt.onChangeFunc = (idx) -> {
 			Settings.optionsSettings.fovX = cast(60 + (idx / 16.0) * (140 - 60));
 			return true;
-		}
+		}, 0.35);
-		innerCtrl.addChild(fovOpt);
+		fovOpt.setCurrentOption(Std.int(Util.clamp(Math.floor(((Settings.optionsSettings.fovX - 60) / (140 - 60)) * 16), 0, 16)));
 
-		yPos += 60;
+		var rfOpt = optionCollection.addOption(1, "Reflection Detail", ["None", "Sky Only", "Level and Sky", "Level, Sky and Items", "Everything"], (idx) -> {
-
-		var rfOpt = new GuiXboxOptionsList(1, "Reflection Detail", ["None", "Sky Only", "Level and Sky", "Level, Sky and Items", "Everything"], 0.35);
-
-		rfOpt.vertSizing = Bottom;
-		rfOpt.horizSizing = Right;
-		rfOpt.position = new Vector(380, yPos);
-		rfOpt.extent = new Vector(815, 94);
-		rfOpt.setCurrentOption(Settings.optionsSettings.reflectionDetail);
-		rfOpt.onChangeFunc = (idx) -> {
 			Settings.optionsSettings.reflectionDetail = idx;
 			return true;
-		}
+		}, 0.35);
-		innerCtrl.addChild(rfOpt);
+		rfOpt.setCurrentOption(Settings.optionsSettings.reflectionDetail);
-
-		yPos += 60;
 
 		#if js
-		var pxOpt = new GuiXboxOptionsList(1, "Pixel Ratio", ["Max 0.5", "Max 1", "Max 1.5", "Max 2", "Max Infinity"], 0.35);
+		var pxOpt = optionCollection.addOption(1, "Pixel Ratio", ["Max 0.5", "Max 1", "Max 1.5", "Max 2", "Max Infinity"], (idx) -> {
+			if (idx == 0)
+				Settings.optionsSettings.maxPixelRatio = 0.5;
+			else if (idx == 1)
+				Settings.optionsSettings.maxPixelRatio = 1;
+			else if (idx == 2)
+				Settings.optionsSettings.maxPixelRatio = 1.5;
+			else if (idx == 3)
+				Settings.optionsSettings.maxPixelRatio = 2;
+			else if (idx == 4)
+				Settings.optionsSettings.maxPixelRatio = 100;
+			return true;
+		}, 0.35);
 
 		var curPixelRatioIndex = 1;
 		if (Settings.optionsSettings.maxPixelRatio == 0.5)
@@ -184,26 +158,7 @@ class VideoOptionsGui extends GuiImage {
 			curPixelRatioIndex = 3;
 		else if (Settings.optionsSettings.maxPixelRatio == 100)
 			curPixelRatioIndex = 4;
-
-		pxOpt.vertSizing = Bottom;
-		pxOpt.horizSizing = Right;
-		pxOpt.position = new Vector(380, yPos);
-		pxOpt.extent = new Vector(815, 94);
 		pxOpt.setCurrentOption(curPixelRatioIndex);
-		pxOpt.onChangeFunc = (idx) -> {
-			if (idx == 0)
-				Settings.optionsSettings.maxPixelRatio = 0.5;
-			else if (idx == 1)
-				Settings.optionsSettings.maxPixelRatio = 1;
-			else if (idx == 2)
-				Settings.optionsSettings.maxPixelRatio = 1.5;
-			else if (idx == 3)
-				Settings.optionsSettings.maxPixelRatio = 2;
-			else if (idx == 4)
-				Settings.optionsSettings.maxPixelRatio = 100;
-			return true;
-		}
-		innerCtrl.addChild(pxOpt);
 		#end
 
 		var bottomBar = new GuiControl();