Skip to content

Building Advanced AUXL Objects : Menu

Jump to bottom
Minty Crisp (Justin E.) edited this page Mar 23, 2023 · 3 revisions

AUXL Engine v0.2 : Web XR Scenario, Object Generator Engine & Universal Controller System

Wiki Sections

Building AUXL Scenarios, Zones and Scenes

Building Basic AUXL Objects

Building Advanced AUXL Objects

Using Special AUXL Objects

Demo & Examples

Building Advanced AUXL Objects : Menu

Menu is a support object used within other AUXL objects. You can utilize this object within your own object generators though to spawn a set of options that will run that object's method you define using the input result of element selected.

Defining a Menu Data & Menu Object :

Inside a custom object generator you can build a menu with a list of text to display to the user and a list of text that is read from the method you specify along with a general prompt to describe the choice. You must have a matching number of options and actions as options are the display text and the actions are the code read text. You can also currently select 2 different types of layouts, either Vertical or Horizontal as well as use a custom Core Data to build the Menu with. The menu will pass along which ever action is associated with the option selected allowing you to accept that value with another method and perform logic based on that selection.

const auxl = document.querySelector('a-scene').systems.auxl;

auxl.CustomObject = (id) => {

	let objectCore = {};
	objectCore.id = id;

	const SpawnMenu = () => {
		objectCore.testMenuData = {
			id: 'testMenu',
			prompt: 'Menu Prompt',
			options: {option0: 'Select 0', option1: 'Select 1', option2: 'Select 2'},
			actions: {action0: 'select0', action1: 'select1', action2: 'select2'},
			layout: 'vertical',
			data: auxl.menuBaseData,
			cursorObj: objectCore.id,
			method: 'MenuClick',
			pos: new THREE.Vector3(1,1.5,-1),
		}
		objectCore.testMenu = auxl.Menu(objectCore.testMenuData);
		objectCore.testMenu.SpawnMenu();
	}

	const MenuClick = (el) => {
		let result = el.getAttribute('result');
		//result is select0, select1 or select2
		//Do something with result
	}

	return {objectCore, SpawnMenu, MenuClick}

}
auxl.testObject = CustomObject('testObject');

The example above is a custom object which has a 2 methods inside that perform the menu spawning from SpawnMenu() and the method that runs on click MenuClick(el). When you initiate this menu creation, it will build a single prompt with the text 'Menu Prompt' and 3 additional options all labeled 'Select 0', 'Select 1' & 'Select 2' to the right of the prompt in a vertically centered layout. When the user clicks one of those 3 options, the method named 'MenuClick' inside of this custom object generator's named 'testObject' which will run with that returned result. Use that result to determine the logic that is associated with the selection.

Each paramter description :

  • id : Name must match named Menu object generated

  • prompt: Text to display for what the choice is in regards to.

  • options: An object of display names values starting from the key option0 upward.

  • actions: An object of code strings values starting from the key action0 upward.

  • layout: vertical/horizontal layout of options at position provided.

  • data: Core Data object used as a template for Prompt and Options.

  • cursorObj: The custom objects string name attached to AUXL (auxl.name) which has the below method to run on selection.

  • method: The name of the method attached to the cursorObj of your choice.

  • pos: A Vec3 position to spawn the menu at.

Menu Methods :

SpawnMenu

  • Spawns the Menu into the environment. When the menu selection is completed it will be removed from the scene, but in the mean time will not be tracked. Either ensure that this menu is despawned when your custom object is despawned or extend your object into the AUXL scene tracker and use the AddToParentSpawnTracker() method. Alternatively you could add the object's Despawning method to the Exit section of the same Instruction.

It does not accept any parameters.

SpawnMenu()

objectCore.testMenu.SpawnMenu();

DespawnMenu

  • Despawns the Menu from the environment. Happens automatically upon selection of an option. Otherwise, will persist unless added to the AUXL scene tracker and amended with this custom object with the AddToParentSpawnTracker() method ran.

It does not accept any parameters.

DespawnMenu()

objectCore.testMenu.DespawnMenu();

AddToParentSpawnTracker

  • The AUXL scene tracker is updated when a Scenario, Zone, Scene or Book load up a Spawn() function, so when an item is spawned outside of those objects it is not tracked. To workaround this you need to append 3 AUXL functions named spawnTracker, clearSpawned & RemoveFromTracker to read and use the custom object methods. Future updates will make this process easier. This will then add the menu to the parent object's tracker, so if parent object spawns at the Zone level then it will stay up if not clicked until the user moves Zones.

It accepts 2 any parameters.

AddToParentSpawnTracker(obj, parent)

'obj' is the Menu Core

'parent' is the custom object Core

objectCore.testMenu.AddToParentSpawnTracker(object.menu, object);

RemoveMenuFromSceneTracker

  • Removed the Menu from the tracker that it was added to with AddToParentSpawnTracker() if you are manually despawning the menu.

It does not accept any parameters.

RemoveMenuFromSceneTracker()

objectCore.testMenu.RemoveMenuFromSceneTracker();
Clone this wiki locally