Live Demos
Live Demos
Section titled “Live Demos”Touch Required
⚠️ IMPORTANT: Touch simulation must be enabled for the joystick to appear!
The virtual joystick only shows when touch input is detected. If you don’t see the joystick, follow these steps:
How to Enable Touch Simulation in Chrome:
Section titled “How to Enable Touch Simulation in Chrome:”- Right-click anywhere on the page and select “Inspect Element” (or press
F12) - Click the “Toggle device toolbar” icon (📱) in the DevTools toolbar, or press
Ctrl+Shift+M(Windows/Linux) orCmd+Shift+M(Mac) - Refresh the page (
F5orCtrl+R/Cmd+R) after enabling touch simulation - The joystick should now appear and be interactive!
Note: The joystick will automatically appear on real mobile devices without any setup needed.
Experience the virtual joystick in action with these interactive examples. Try them on both desktop and mobile devices to see how the joystick adapts to different screen sizes and input methods.
Default Configuration
Section titled “Default Configuration”This demo shows the virtual joystick with its default settings - clean, simple, and ready to use out of the box.
Features demonstrated:
- Default visual styling
- Smooth joystick following
- Touch and mouse support
- Responsive positioning
- Event handling (move, press, release)
Customized with Phaser Wind
Section titled “Customized with Phaser Wind”This demo showcases a heavily customized virtual joystick using the Phaser Wind library for enhanced visual effects and animations.
Features demonstrated:
- Custom colors and styling
- Animated visual effects
- Particle systems
- Enhanced visual feedback
- Advanced customization options
Try It Yourself
Section titled “Try It Yourself”Want to experiment with your own configurations? You can:
- Fork the demos - Click the “Fork” button in any StackBlitz demo to create your own version
- Modify the code - Change colors, sizes, behaviors, and see the results instantly
- Test on mobile - Use the mobile preview to see how it feels on touch devices
- Share your creations - Share your customized joystick implementations with the community
Mobile Testing
Section titled “Mobile Testing”For the best experience, test these demos on a mobile device or use your browser’s device emulation:
- Chrome DevTools: Press F12 → Toggle device toolbar (Ctrl+Shift+M)
- Firefox DevTools: Press F12 → Responsive Design Mode
- Safari: Develop menu → Enter Responsive Design Mode
The joystick will automatically appear when touch input is detected, providing an authentic mobile gaming experience.