Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including html5-plugin-canvas-gamepad with all npm packages installed. Try it out:

html5-plugin-canvas-gamepad lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("html5-plugin-canvas-gamepad/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

html5-plugin-canvas-gamepad v0.1.2

html5 Canvas Gamepad Plugin

#CanvasGamepad

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

npm i html5-plugin-canvas-gamepad

###CanvasGamepad setup and configurations

in you html file add CanvasGamepad.setup()

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

##Configuration options

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

propertytypevalue(s)descriptionexample
debugbooleantrue|falseshow or hide event debug info
default is false
debug:false
tracebooleantrue|falseshow or hide gamepad trace info
default is false
trace:false
canvasstringid of target canvasif left out, creates a new canvas objectcanvas:"game"
buttonsarray[]collection of button objects[{name:"x",color:"rgba(255,255,0,0.5)"}]
buttonobject{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)"}]
layoutstringTOP_LEFT | TOP_RIGHT | BOTTOM_LEFT | BOTTOM_RIGHTcardinal position of buttons
default is BOTTOM_RIGHT
layout:"BOTTOM_RIGHT"
startbooleantrue|falsedisplay start button
default is true
start:false
selectbooleantrue|falsedisplay select button
default is false
select:false
joystickbooleantrue|falsedisplay joystick/dpad
default is false
debug:false
hiddenbooleantrue|falseshow or hide the gamepad
default is false

this can be used to hide the gamepad if you are doing something else on screen

if you are using multikey.js to extend the CanvasGamepad for keyboard access

propertytypevalue(s)descriptionexample
buttonsarray[]collection of button objects[{name:"x",color:"rgba(255,255,0,0.5)", key:"[keyboard letter]"}]
buttonobject{name:string,color:hex|rgb|rgba}properties for custom buttons[{name:"x",color:"rgba(255,255,0,0.5)", key:"w"},{name:"y",color:"rgba(255,0,255,0.5)", key:"q"}]
hintbooleantrue|falseshow or hidekeyboard hint
default is false
hint:true

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

default options

CanvasGamepad.setup();

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

default options

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

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

default options

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

######target canvas

default options

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

######change layout canvas

default options

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

######show trace & debug info

default options

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

######all out everything

default options

CanvasGamepad.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

default options

CanvasGamepad.setup({
    hidden:true
});

######real world example

default options

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

######example using key binding with multikey.js

default options

CanvasGamepad.setup(
  {
    canvas:"controller",
    start:{name:"start", key:"b"},
    select:{name:"select", key:"v"},
    trace:true,
    debug:true,
    hint:true,
    buttons:[
      {name:"a", "key":"s"},
      {name:"b", "key":"a"},
      {name:"x", "key":"w"},
      {name:"y", "key":"q"}
    ]      
  }
);
multikey.setup(CanvasGamepad.events, "qwasbv", true);

the above code is running in this example

###CanvasGamepad observable method

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

observe();

CanvasGamepad.setup()
/*
** @description the below example simply logs out the observe method return
*/
setInterval(
    function()
    {
        var map = CanvasGamepad.observe();
        console.log(new Date() + ":" + JSON.stringify(map))
    }
    ,1000
);
/*
** @description additionally, you can throw it into your main loop in canvas
*/
function draw()
{
    if(CanvasGamepad)
    {
        gamepad(CanvasGamepad.observe())
    }
}

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free