Controller Setup
Configure your controls for all games on GameArcade.
Player Setup
Assign controller profiles and input devices to each player.
Controller Profiles
Manage your custom controller mappings. Default profiles cannot be edited.
Configure your controls for all games on GameArcade.
Assign controller profiles and input devices to each player.
Manage your custom controller mappings. Default profiles cannot be edited.
Give your new controller profile a name to get started.
Map controls for your custom profile.
Click on any control and press a key or button to map it. Press Escape to cancel.
Are you sure you want to delete this profile?
Complete guide for integrating ControllerManager into your games
// 1. Include ControllerManager in your game
<script src="ControllerManager.js"></script>
// 2. Listen for controller input
window.addEventListener('controllerinput', (event) => {
const { player, profile, control, value, button, axis } = event.detail;
console.log(`${player} pressed ${control}:`, value);
});
// 3. Start monitoring when ready
document.addEventListener('DOMContentLoaded', () => {
window.ControllerManager.startListening();
});controllerinput
Main event fired when any controller button or stick is used
player - Player name (e.g., "Player 1")profile - Active control profile (e.g., "Classic Controls")control - Control name (e.g., "move_up", "fire", "jump")value - Input value (0-1 for buttons, -1 to 1 for analog)button - Button index (if digital button)axis - Axis index (if analog stick)startListening()
Begin monitoring controller input at 60 FPS
stopListening()
Stop monitoring controller input
getConnectedControllers()
Returns array of currently connected controllers
[{id, name, profile, device}, ...]isPlayerConnected(playerName)
Check if specific player has controller connected
booleangetPlayerController(playerName)
Get controller details for specific player
controller object or undefinedrescanControllers()
Refresh controller connection status
<!-- In your game HTML -->
<script src="ControllerManager.js"></script>
<script>
class MyGame {
constructor() {
this.players = {};
this.setupEventListeners();
}
setupEventListeners() {
// Listen for all controller input
window.addEventListener('controllerinput', (event) => {
this.handleInput(event.detail);
});
// Optional: Listen for connection changes
document.addEventListener('DOMContentLoaded', () => {
window.ControllerManager.startListening();
this.updateConnectedPlayers();
});
}
handleInput(input) {
const { player, control, value } = input;
// Initialize player if needed
if (!this.players[player]) {
this.players[player] = { x: 100, y: 100, score: 0 };
}
// Handle specific controls
switch(control) {
case 'move_left':
if (value > 0) this.players[player].x -= 5;
break;
case 'move_right':
if (value > 0) this.players[player].x += 5;
break;
case 'move_up':
if (value > 0) this.players[player].y -= 5;
break;
case 'move_down':
if (value > 0) this.players[player].y += 5;
break;
case 'fire':
if (value > 0) this.shoot(player);
break;
}
this.render();
}
shoot(player) {
console.log(`${player} fired!`);
// Game-specific shooting logic
}
updateConnectedPlayers() {
const controllers = window.ControllerManager.getConnectedControllers();
console.log('Connected players:', controllers.map(c => c.name));
}
}
// Start the game
const game = new MyGame();
</script>ControllerManager polls at 60 FPS. Only listen to events you need to avoid performance issues.
Each player gets their own events. Use the player property to identify input sources.
Use the profile property to implement different control schemes for the same player.
Buttons: value is 0 or 1. Sticks: value ranges from -1 to 1.
Games automatically redirect to setup if no player configuration exists.
Controllers can be connected/disconnected during gameplay. Check connection status as needed.
console.log(window.ControllerManager)startListening() is calledplayer property in event detailsisPlayerConnected() to verify assignmentsstopListening() when not needed