Table of Contents
Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds
Open Demo >
Open JS File >
Summary
The scene is split into 2 halves and configured for Isometric view only. 1 with the 3D Iso world and the other with the HTML player controller. Use the controller in blue to move your cube avatar from the starting point around the field.
Controls
Avatar Movement
- Desktop
- Mobile
- Use the player controller to move Up Left, Up Right, Down Left or Down Right within the connected nodes.
Player Controller
- Desktop - Click & Drag from the center circle to 1 of the 4 directional options.
- Mobile - Swipe from the center circle to 1 of the 4 directional options.
Only the movement options are active.
What to Do
Using the player controller, select a direction in which your avatar would be able to travel on the node map. Avatar Travel requires a lined connection and cooresponds to the directions of Up Left, Up Right, Down Left and Down Right based on the user's location to the connected node.
Components
Built
- node-grid-gen : Generates the numbered grid, lines, colors, positions, layout and animation stack for each node. Every node that has a line connecting to 1 of it's 4 sides generates an animation to that line's end position which activates from an event naming scheme of node#to-node#. As well as an accompanying entity with it's own reveal and hide animation when the user moves to and from that node specifically.
- player-travel : Hardwired logic for traversing the node map in it's current form, animation event timings, the player controller inputs as well as event emitters for all possible movements that activate the avatar's position animation./li>
Public
Favorites
If you are a quick swiper you can move quite fast and even off the line animation grid to kind of fly through to your destination. This is an interesting side effect of the current implementation which simply animates the user to the node's current position and that animation being updated on each subsequent directional input. Otherwise it seems that you would have to create an animation queue to cycle through the selected list in a a-timeline as animations will conflict with each other if they share the same properties at the same time.
Difficulties
The player controller is built out of another dev's great work to recreate the Android lock screen in javascript they shared. While it provided in HTML what I had envisioned, I could not seem to integrate those functions within the XR scene to allow the same drag style in the 3D world. To many wide differences with how they utilized classes and svg's to create the effects for use with the default code. Also very helpful when I am ready to recreate it within XR too.
What I want to build upon this, in the future...
This effect in VR finally and support the normal click / swipe to start a drag, click to stop drag or drag to option for selection which seems to cover Desktop, Mobile and VR controller. Or instant / activated hover select dragging with additional control selections similar to the locomotion belt controller in the Hub scene. And allow the user to travel this node map with the teleportation mode types as well.
Thank you for your time!
- Minty Crisp ^-^
Top comments (0)