hg

hud-gamepad

Do you need a HUD (Head Up Display) Gamepad for your Web Site / App... ...Look No Further. This is your all in one solution.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

20

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

21.3KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

File Size npm GitHub stars

GamePad

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

npm i hud-gamepad

GamePad setup and configurations

In your html file add GamePad.setup()

/*
** this is a basic joystick and 1 button setup with start and select buttons
*/
GamePad.setup();

Checkout the working React Example

Configuration options

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

propertytypevalue(s)descriptionexample
debugbooleantrue|falseshow or hide event debug info default is falsedebug:false
tracebooleantrue|falseshow or hide gamepad trace info default is falsetrace: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_RIGHT
cardinal position of buttons *default is BOTTOM_RIGHT*layout:"BOTTOM_RIGHT"
startbooleantrue|falsedisplay start button default is truestart:false
selectbooleantrue|falsedisplay select button default is falseselect:false
joystickbooleantrue|falsedisplay joystick/dpad default is falsedebug:false
hiddenbooleantrue|falseshow or hide the gamepad default is falsethis can be used to hide the gamepad if you are doing something else on screen

if you are using multikey.js to extend the GamePad 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 falsehint:true

Config examples

default options

default options

GamePad.setup();
one button, custom name, no start button

default options

GamePad.setup({
  start:false,
  buttons:[
    {name:"jump"}
  ]
});
two buttons, custom names, custom colors, with select button

default options

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

GamePad.setup({
  canvas:"game"
});
change layout canvas

default options

GamePad.setup({
  layout:"BOTTOM_LEFT"
});
show trace & debug info

default options

GamePad.setup({
  trace:true,
  debug:true
});
all out everything

default options

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

GamePad.setup({
  hidden:true
});
real world example

default options

/*
** @description start the game
*/
game.init();
/*
** @description setup gamepad, no stick, no start, one button
*/
GamePad.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

GamePad.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(GamePad.events, "qwasbv", true);

the above code is running in this example

GamePad observable method


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

observe();

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial