Mobile UI: 3D navigation with binary D-pad
Current mobile devices usually have binary cursor controllers (D-pad, direction buttons, etc.). If the D-pad's direction resolution is so low (typically 4 directions for cell phones, sometimes 8 as for the Game Boy Advance), how can a binary D-pad be used to navigate smoothly through 2D or 3D space? This page describes an interaction pattern suitable for running through a 2D or 3D game level with one thumb (on a D-pad).
|
Virtual Thumb: The figure on the left is interactive. Use your mouse or keyboard to make the character travel through virtual space. Mouse: The virtual D-pad (underneath character) can be pressed in 8 different directions by pointing (within D-pad circle) with your mouse cursor and pressing the left mouse button. Keyboard: The direction keys (Left, Right, Up and Down arrows) can be pressed one or two at a time to point in 8 different directions when the applet has focus. To swerve (virtually) left, press the Up and Left (arrow) keys together. To swerve right, press Up and Right together. To side-step left or right, press the Down key together with either Left or Right. Green brackets Visual Feedback: Check or uncheck the checkboxes to change the visual information. If all options are checked, the display is in the style of "Third Person" action games. If "character" and "camera lag" are unchecked then the display is in the style of "First Person Shooters". Note: This demonstration is a work-in-progress. (1) Proper animations have not been included [yet] for backing up and lateral movement. (2) 4-direction and 360-direction interactions will be added. (3) Obstacle course? Platform jumping? |
|||||||||||||||
vizmo.com |