AkiMouse: An Akihabara Mouse Control Library

I often see mouse control as a requested Akihabara feature, so I decided to write a JS file that you can include in any Akihabara project to add mouse control to your game.

First, download mouse.js and save it in the directory where your Akihabara project is. Then in your main game code, include mouse.js after all the Akihabara includes.

Next, add the special addMouseControl() function to your maingame.initialize function where all the other game objects are initialized. This creates an invisible object in your game that handles all the mouse control stuff.

  maingame.initializeGame = function() {
    addMouseControl();
    ...
   };

Finally, create a ‘mouse’ group for the mouse object to live in by adding it to your gbox.setGroups declaration.

function main() {
  gbox.setGroups(['mouse', 'object', 'game']);
  ...
}

And that’s it! AkiMouse is now running inside your game.

AkiMouse creates some global variables that you have access to at all times. It also provides some helper functions.

Variables

• mouse.x: Current mouse x coordinate, relative to your game map. This works even with a scrolling camera implementation.
• mouse.y: Current mouse y coordinate, relative to your game map. This works even with a scrolling camera implementation.
• mouse.isDown: This is true whenever the mouse button is held down on the canvas.
• mouse.isClicked: This is true for exactly 1 step after the mouse button transitions from down to up. You can use this to trigger code that fires once after a mouse click.
• mouse.isDragging: This is true whenever an object is being dragged (see the dragCheck() helper function for more)
• mouse.dragObject: This contains whatever object is being dragged right now. It is null if there is no object being dragged. You can use this to, for example, test for collisions with the object that is being dragged. (see the dragCheck() helper function for more)

Functions

• mouse.dragCheck(): This should be placed in the first function of any Akihabara object (where all your step code goes). When this is inside the first function, the object can now be clicked and dragged. While the object is being dragged, mouse.dragObject contains a reference to this object and mouse.isDragging is true.
• mouse.isColliding(object): Pass any object to this function and it will return true if the mouse is currently on top of the object.

Examples

You can see an example of the code in action. The left object can be clicked and dragged. The right object changes color when you click on it.

Here’s an example of a first function for an object that will be destroyed when you click on it.

    first: function() {
      if (mouse.isClicked && mouse.isColliding(this))
        gbox.trashObject(this); // an Akihabara function that destroys an object
      },

Here’s an example where the object is draggable:

    first: function() {
      mouse.dragCheck();
      },

Here’s an example where an object is destroyed if it touches the object that is currently being dragged:

    first: function() {
      if (mouse.dragObject != null) // first make sure there IS an object being dragged
        if (gbox.collides(this, mouse.dragObject)) // check if we collide with it
          gbox.trashObject(this); //destroy ourselves if we do
      },

If you want to spawn something where the mouse is, just create the object and set its x,y coordinates to mouse.x,mouse.y.

Update:
I added an object to demonstrate the destroy-on-touch-with-dragged-object behavior that Darius described above. ~Darren