cordova-plugin-canvas-gamepad

#CDVGamepad

So you want to add a gamepad to a html5/canvas based app in cordova

npm i cordova-plugin-canvas-gamepad

##Cordova ###The Basics

install cordova

[sudo] npm install -g cordova

navigate to the directory where you want to create your app

cd [directory]

create an app

cordova create [app-directory] [reverse domain-style identifier] [application display name] && cd [app-directory]

add CDVGamepad plugin

cordova plugin add cordova-plugin-canvas-gamepad

iOS9 long press fix (optional)

this prevents the copy/select bubble from coming up in games where the user needs to press and hold)

cordova plugin add cordova-plugin-ios-longpress-fix

Add some platforms

cordova platform add ios
cordova platform add android
cordova platform add amazon-fireos
cordova platform add blackberry10
cordova platform add firefoxos

Prepare your platforms

prepare platform add ios
prepare platform add android
prepare platform add amazon-fireos
prepare platform add blackberry10
prepare platform add firefoxos

###CDVGamepad setup and configurations

in you cordova index.js add CDVGamepad.setup()

/*
** this is a basic joystick and 1 button setup with start and select buttons
*/
onDeviceReady: function() {
	CDVGamepad.setup();
}

##Configuration options

CDVGamepad is fully customizable, from button names, colors, layout and more.

property	type	value(s)	description	example
debug	boolean	true|false	show or hide event debug info default is false	debug:false
trace	boolean	true|false	show or hide gamepad trace info default is false	trace:false
canvas	string	id of target canvas	if left out, creates a new canvas object	canvas:"game"
buttons	array	[]	collection of button objects	[{name:"x",color:"rgba(255,255,0,0.5)"}]
button	object	{name:string,color:hex|rgb|rgba}	properties for custom buttons	[{name:"x",color:"rgba(255,255,0,0.5)"},{name:"y",color:"rgba(255,0,255,0.5)"}]
layout	string	TOP_LEFT | TOP_RIGHT | BOTTOM_LEFT | BOTTOM_RIGHT	cardinal position of buttons default is BOTTOM_RIGHT	layout:"BOTTOM_RIGHT"
start	boolean	true|false	display start button default is true	start:false
select	boolean	true|false	display select button default is false
joystick	boolean	true|false	display joystick/dpad default is false	debug:false
hidden	boolean	true|false	show or hide the gamepad default is false	this can be used to hide the gamepad if you are doing something else on screen

###Config examples ######default options

CDVGamepad.setup();

######one button, custom name, no start button

CDVGamepad.setup({
	start:false,
	buttons:[
		{name:"jump"}
	]
});

######two buttons, custom names, custom colors, with select button

CDVGamepad.setup({
	select:true,
	buttons:[
		{name:"x",color:"rgba(255,255,0,0.5)"},
		{name:"y",color:"rgba(0,255,255,0.75)"}
	]
});

######target canvas

CDVGamepad.setup({
	canvas:"game"
});

######change layout canvas

CDVGamepad.setup({
	layout:"BOTTOM_LEFT"
});

######show trace & debug info

CDVGamepad.setup({
	trace:true,
	debug:true
});

######all out everything

CDVGamepad.setup({
	select:true,
	trace:true,
	debug:true,
	canvas:"game",
	buttons:[
		{name:"z", color:"#17861c"},
		{name:"y", color:"rgb(134, 83, 23)"},
		{name:"x", color:"rgba(204, 0, 51, 0.5)"},		
	]
});

######hidden gamepad

CDVGamepad.setup({
	hidden:true
});

######real world example

onDeviceReady: function() {
		/*
		** @description start the game
		*/
    game.init();
		/*
		** @description setup gamepad, no stick, no start, one button
		*/    
    CDVGamepad.setup({
    	canvas:"controller",
    	joystick:false,
    	start:false, 
    	buttons:[
    		{name:"jump", color:"rgba(0,0,0,0.25)"}
    	]
    });    
}

###CDVGamepad observable method

CDVGamepad has an observable method that returns the current state map of the gamepad

observe();

CDVGamepad.setup()
/*
** @description the below example simply logs out the observe method return
*/
setInterval(
	function()
	{
		var map = CDVGamepad.observe();
		console.log(new Date() + ":" + JSON.stringify(map))
	}
	,1000
);

/*
** @description additionally, you can throw it into your main loop in canvas
*/
function draw()
{
	if(CDVGamepad)
	{
		gamepad(CDVGamepad.observe())
	}
}