Log In  

Hi,
there is a way to set up a controller on the games played in bbs?
I ask this question because with the mobile version of the site i can finally play with my phone, but the touchscreen controls are not for me, and i wanted to know if i can use a BT controller..
Thanks everyone!

P#34830 2017-01-03 08:43 ( Edited 2017-01-04 15:01)

I just tried with an Xbox controller on PC and no dice, so I'm assuming no. I think sometime today I'm going to be adding mobile controls support to my own site for Pico-8, so I'll look into adding gamepads on there as well. I know it's not the BBS, but at least it'll be a place where you can play some games with a controller.

Zep has a function set up in the BBS for hooking into the web player inputs, which he uses for the mobile controls (slightly modified for readability):

function pico8_buttons_event(e, step) {
  pico8_buttons[0] = 0;

  // show buttons as soon as touched
  document.getElementById("touch_controls").style.display="";

  var num = 0;

  if (e.touches) num = e.touches.length;

  for (var i = 0; i < num; i++) {
    var touch = null;

    touch = e.touches[i];
    var x = touch.clientX;
    var y = touch.clientY;
    var w = document.body.clientWidth;
    var h = document.body.clientHeight;

    b = 0;

    // determine mask to clear (mask) and mask to set (b) for button state changes.
    if (x < w/2) {
      var cx = 70;
      var cy = h-70;
      var dx = x - cx;
      var dy = y - cy;

      mask = 0xf; // dpad
      deadzone = 15;

      if (abs(dx) > abs(dy) * 0.8) { // horizontal
        if (dx < -deadzone) b |= 0x1;
        if (dx > deadzone)  b |= 0x2;
      }

      if (abs(dy) > abs(dx) * 0.8) { // vertical
        if (dy < -deadzone) b |= 0x4;
        if (dy > deadzone)  b |= 0x8;
      }
    } else {
      // button; diagonal split from bottom right corner
      mask = 0x30;

      // close to menu?
      dx = x - (w/2);
      dy = y - (h-20);

      if (dx*dx + dy*dy < 50*50) {
        // menu button
        b |= 0x40;
      } else {
        // one or both of [X], [O]
        if ( (h-y) > (w-x) * 0.8) b |= 0x10;
        if ( (w-x) > (h-y) * 0.8) b |= 0x20;
      }
    }

    pico8_buttons[0] |= b;
  }
}

var touch_detected = false;

addEventListener("touchstart", function(event) {
  touch_detected = true;
  pico8_buttons_event(event, 0);
}, false);

addEventListener("touchmove", function(event){ pico8_buttons_event(event, 1);}, false);
addEventListener("touchend", function(event){ pico8_buttons_event(event, 2);}, false);

I'm sure this function could be easily modified to support gamepads.

P#34832 2017-01-03 09:04 ( Edited 2017-01-03 14:04)

Wow, thanks for the fast and precise reply!
I've found the function you attached here, I know some js , i'll start editing it in local as an experiment:)
Link your site ( if is permitted here) so i'll be your tester!

P#34835 2017-01-03 10:45 ( Edited 2017-01-03 15:45)

It's games.clowerweb.com, but I don't have the mobile or gamepad support up yet, so I'll keep you posted.

P#34837 2017-01-03 11:24 ( Edited 2017-01-03 16:24)

Did you know about Gampad API? ( Maybe i'm telling you the obvious) I found it searching for the problem:
https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API

And seems already supported by the major browsers ( minus iOS)
And very simple to implement and adapt! I even tried this site on my android phone:
http://html5gamepad.com/ and it "works like magic" with my 8bitdo zero.

I'll find a way to load the api on the console while i'm on the bbs and map my controllers to the events of the previous function

P#34842 2017-01-03 12:06 ( Edited 2017-01-03 17:06)

I wasn't aware of it, actually, but I have seen JS games that had gamepad support, so I knew it was possible to detect gamepad inputs in a browser. It's just sending those signals to the emscripted Pico-8 web player that would have presented the most challenge, but since the BBS already has a function for hooking into the web player inputs (via that mobile controls function), it would just be a matter of adapting it.

I'll probably make use of that gamepad API, as I still was unsure how to detect gamepad inputs, only that it was possible to. Thanks for doing that legwork for me and answering that question!

P#34844 2017-01-03 12:20 ( Edited 2017-01-03 17:20)

No problem, I help how i can! Thank you for your work on this task!

P#34849 2017-01-03 12:56 ( Edited 2017-01-03 17:56)

This won't help for games on the BBS but you can easily add this JS library to your exported Pico-8 games and it will have gamepad support in-browser.

https://www.lexaloffle.com/bbs/?tid=4100

I've been using various controllers like PS4 and even old NES controllers without any real issues.

P#34864 2017-01-03 15:06 ( Edited 2017-01-03 20:06)

If you're on a Mac you can use Enjoyable (https://yukkurigames.com/enjoyable/) to map the keys to your controller and play all the BBS games.

P#34866 2017-01-03 15:37 ( Edited 2017-01-03 20:37)

At least on android, there are apps that let you map a physical controller to screen coordinates.

I haven't used them myself, so you might need to experiment with different apps to see what allows you to map buttons to a browser.

P#34867 2017-01-03 16:19 ( Edited 2017-01-03 21:19)

@Level27Geek last time i checked root was required..
@EatMoreCheese i'm trying to do that from mobile while i'm on the train:)

After finding the Gamepad API i think the best solution for the problem is to implement the api and porpose to zep that!
It would be cool to not care about mappings, applications, and simply going to lexaloffle and play.. that would be a real fantasy console!

P#34894 2017-01-04 03:09 ( Edited 2017-01-04 08:09)

Added gamepad support to the games on my site, thanks to @morningtoast pointing out @krajzeg's excellent script! Tested with an Xbox 360 controller and it works great!

P#34904 2017-01-04 08:29 ( Edited 2017-01-04 13:29)

@Scathe: that's great!
the pause menu button isn't mapped on the controller though.
( bitmask |= (btn(gp,8) || btn(gp,9)) ? 64 : 0; in gamepad.js )

P#34907 2017-01-04 09:05 ( Edited 2017-01-04 14:05)

@ultrabrite Thanks, added!

P#34908 2017-01-04 09:23 ( Edited 2017-01-04 14:23)

ouch, @morningtoast, i didn't see yout post!thanks!
Btw, I've started working on the same type of script but remaining more similar to the procedure on the MDN:

var haveEvents = 'ongamepadconnected' in window;
var controllers = {};

function connecthandler(e) {
  addgamepad(e.gamepad);
}

function addgamepad(gamepad) {
  controllers[gamepad.index] = gamepad;
  requestAnimationFrame(updateStatus);
}

function disconnecthandler(e) {
  removegamepad(e.gamepad);
}

function removegamepad(gamepad) {
  delete controllers[gamepad.index];
}

function updateStatus() {
  pico8_buttons[0] = 0;

  if (!haveEvents) {
    scangamepads();
  }

  var i = 0;
  var j;

  for (j in controllers) {
    var controller = controllers[j];
    var axp = 0;
    for (i = 0; i < controller.buttons.length; i++) {
      var val = controller.buttons[i];
      var pressed = val == 1.0;
      var btnp = 0;

      if (typeof(val) == "object") {
        pressed = val.pressed;
        val = val.value;
      }
      //Determines which button is pressed

      if (pressed) {

      /*TO EDIT THE BUTTONS:
       *Uncomment the line following this block ( activate the console.log ) 
       *Open a game, copy the script in the console and start pressing the buttons on your joystick: some numbers appear, write them down for each button
       *Change here under the "case" numbers accordingly to your preferences ( es. "case 11:" becomes "case 8:" , changing the button reserved to start)
       *Recomment the console.log
       *Reload the page and copy again the script in the console
       */

       //console.log(i);
        mask = 0x30;
        switch(i) {

            // Start Button
            case 11:
                btnp = 0x40;
                break;
            //Button X
            case 0:
                btnp = 0x20;
                break;
            //Button O
            case 3:
                btnp = 0x10;
                break;
            default:
                btnp = 0;
            }   
        //Pass the command to pico-8
        pico8_buttons[0] |= btnp;
       }
    } 
  }

  mask = 0xf;

  //Determines the direction

  /*TO EDIT THE AXES:
  * Change the numbers contained in the square brackets (es. "axes[0]" becomes "axes[2]")
  * Mind the fact that up/down have the same number, as left/right 
  */ 
  //Up
  if(controller.axes[0] == 1) axp = 0x2;
  //Down
  if(controller.axes[0] == -1) axp = 0x1 ;
  //Left
  if(controller.axes[1] == 1) axp = 0x8 ;
  //Right
  if(controller.axes[1] == -1) axp = 0x4 ;

  pico8_buttons[0] |= axp;  

  requestAnimationFrame(updateStatus);
}

function scangamepads() {
  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
  for (var i = 0; i < gamepads.length; i++) {
    if (gamepads[i]) {
      if (gamepads[i].index in controllers) {
        controllers[gamepads[i].index] = gamepads[i];
      } else {
        addgamepad(gamepads[i]);
      }
    }
  }
}

window.addEventListener("gamepadconnected", connecthandler);
window.addEventListener("gamepaddisconnected", disconnecthandler);

if (!haveEvents) {
  setInterval(scangamepads, 500);
}

for now it's pretty raw ( the buttons mapped are of my controller) but i'll work on:

  • Distinguish between players
  • Open a popup to configure inputs ( " press UP", ecc ecc) and use LocalStorage to save the configuration in order to do the config only one time

I've not tried the other script yet, but ( on a desktop, sadly for now) if you open the js console ( Chrome developer tools) on a BBS game page and paste the script you can play with your controller!

P#34909 2017-01-04 10:01 ( Edited 2017-01-04 17:09)

[Please log in to post a comment]

Follow Lexaloffle:          
Generated 2024-03-28 14:44:57 | 0.031s | Q:31