How do I read input from the side buttons on a mouse?

0 favourites
  • 11 posts
From the Asset Store
Total customisation of the input! You can combine inputs from all peripherals. Make your game accessible for everyone!
  • Hey, I'm tryna add keybinds to my game and I think I have the keyboard (and most likely mouse/gamepad) side of things figured out, but I am wondering if I can bind things to the buttons on the side of my mouse. I know that they obviously arent the same between mouses (mice?), but I have seen other games do it so I just want to know if it's possable in C3.

    Tagged:

  • Unfortunately the side buttons are detected as browser back and browser forward not as inputs.

  • Unfortunately the side buttons are detected as browser back and browser forward not as inputs.

    Intresting. If they are detected as forward and backward, does that mean that they may be able to be used in conditions still?

  • As far as I Know the browser detects the side buttons as back and forward and there is no condition to detect it as input within Construct.

    Maybe someone can create a custom script for that.

  • I made a feature request for this a while ago. You can vote for it by adding a thumbs up here:

    github.com/Scirra/Construct-feature-requests/issues/73

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • The problem is that the side buttons are not detected as input

  • If the mouse plugin or the c3 scripting api doesn't provide access to the additional buttons then its simple enough to just hook the mouse events with straight js.

    In general you can add event listeners to the document (or canvas if you know a quick way of accessing it) for the mousedown, mouseup and mousemove events. In the events you can access clientX, clientY (which is the xy in canvas coordinants) and button (0 through 4). To make it usable i'd just have them call some c3 functions with those values. and there you can use the CanvasToLayer expressions to get the mouse position in layout coordinants.

    As an example here is the js to run at the start of the layout.

    document.addEventListener("mousedown", (e) => {e.preventDefault(); runtime.callFunction("mousedown", e.clientX, e.clientY, e.button)};

    And here is what the events would look like:

    var mx=0
    var my=0
    function mousedown(x,y,button)
    -- set mx to CanvasToLayerX(x,y,0)
    -- set my to CanvasToLayerY(x,y,0)
    -- do whatever

    Do the same thing for mouseup and mousemove and that covers about everything. The only thing missing is a condition for "is mouse down". For that you'll have to just update some variables as the buttons are pressed and relased.

    In the js you see it call a function called preventDefault. That should stop those additional buttons from navigating away from the page in theory. It's what c3 already does to keep you from right clicking on a canvas to get a context menu.

  • Good to know there is a work-around, I am just having trouble understanding how to call the function. I need to know when any mouse button is being pressed and which one. I have never used the js feature except for some trivial things.

  • It took me all night to figure out, now I know Js :p

  • It took me all night to figure out, now I know Js :p

    I've tried uh, borrowing your code and I keep getting this error:

    Uncaught ReferenceError: mouse is not defined at HTMLDocument.<anonymous> (main.js:17:69)

    This is the code:

    // Import any other script files here, e.g.:
    // import * as myModule from "./mymodule.js";
    
    runOnStartup(async runtime =>
    {
    	// Code to run on the loading screen.
    	// Note layouts, objects etc. are not yet available.
    	
    	runtime.addEventListener("beforeprojectstart", () => OnBeforeProjectStart(runtime));
    });
    
    async function OnBeforeProjectStart(runtime)
    {
    	// Code to run just before 'On start of layout' on
    	// the first layout. Loading has finished and initial
    	// instances are created and available to use here.
    	document.addEventListener("mousedown", (e) => {e.preventDefault(); mouse(e.clientX, e.clientY, e.button)});
    	
    	
    	runtime.addEventListener("tick", () => Tick(runtime));
    }
    
    function mousedown(x, y, button){
    console.log(button);
    }
    
    function Tick(runtime)
    {
    	// Code to run every tick
    }
    
    
    

    Do you know what this is about?

  • Oh wait i said 'mouse' instead of 'mousedown'. My bad. It works great!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)