An input controller canvas example
Todays canvas example post is on something that I started working on that can be though of as an input controller for various input devices that might be on a range of client systems. This input controller would help with abstracting mouse, touch, and keyboard events into a single input state object that I can pull values from within a loop, or attach events to. At times it seems that doing something like this is necessary because of all kinds of problems that come up with trying to get control of something to work nice with a range of options for doing so.
The motivation for this is that when making a canvas project I want to make use of input from an array of sources, and a quick and simple process for this would be nice as I find myself wasting time writing the same code over and over again for this part of the process of making a project.
1 - The utility lib
Here I have the utils library for this canvas example of an input controller. This library often contains methods that I might use across many canvas examples, but might also change from one canvas example to the next.
In this utils.js file for this canvas example I have a isMouse method that will just return true if the given event object is a mouse event, after that there is a more complex method that will return an array of point objects from an event object where each object contains canvas relative rather than window relative x and y values.
For this canvas example I did not go with my usual get canvas relative method, but worked out a get canvas relative array method that will allow for me to do things with multi touch. When it comes to touch events I went with using the targetTouches touch list property of the touch event object rather than the other options. The reason why is because I have found that the targetTouches touch list array contains the touch objects that I want for making this abstraction. In other examples I might want to use changedTouches or the touches properties in place of this, but not here.
1 - The controller module With mouse, touch, and keyboard support
So first off lets go over the control.js module that I worked out for this. The control.js module will create just one global variable that contains and object with two public methods, one for creating an input object, and then another that is just a convenience methods for attaching events. I might get around to expanding this example more when and if I get additional time as I am sure many features are still missing. I have come to fine that what I really truly need to add to something like this will pop up as I start to use it with some projects.
1.1 - The start of the module
In the module everything is wrapped up into an IIFE or Immediately Invoked Function Expression where the public API is what will be returned by the function expression and thus be the value of the global variable.
I then have a fill array helper, and a helper that will be used to create the input object that the main public method will return. The fill method is just a pony fill for Array.fill, the only reason why it is here is because I would like to push IE support as far back as IE9 although I have not tested this to work on that.
I then have a create input state object helper that will be used to create and return a main input state object for this module. The input state object contains references to the canvas, and the window object that was given when it is called. This method is not called directly, but inside the body of the public API method that is returned later on in this module. The pointer down property will be set to true when a mouse button is down, or when a touch surface is being pressed. The keys array will contain boolean values for each key code from 0 to 255. I also then have a user handlers prop that can be used to set handlers for for each built in pointer event.
1.2 - call user handlers helper, and the handlers object
I have a helper that is used to call all user defined event handlers in the input object that is used in all the private handers that are attached to dom events such as the canvas and window object. I then also have a handlers object that contains functions that are called for mouse or touch events. The idea here is to create a single pointer event that can be the result of mouse, touch, or some other action that has to do with automation or using the keyboard to emulate pointer movement.
1.4 - Set handers
Here are the methods that actually attach the handers to the dom elements they are used in the public api method. I have one for pointer events and another for keyboard events.
1.5 - The Public API
Now for the public API that consists of a single function with one static method attached.
The main function is used to create an input state object. When called the input object is created with the private create input state method that I went over earlier, and as such the given canvas and window object are pases to that method here. The input state object that is created is then what is returned, but not before handlers are attached to it. I do so by calling the other private methods that I went over for each event that I want handers attached for, in this module I want mouse, touch, and keyboard support.
2 - Simple demo
2.1 - The html of the demo
In th html file of the demo I link to the control.js file of course, and then a draw.js, and main.js file that I will be getting to in this section.
2.2 - The draw.js file
Here I have a draw.js file for this demo of the control module. For now I just need method to draw a background to a canvas, and to draw current debug info for the state of an input object.
2.3 - The main.js file
Now for the main.js file where I get references to the canvas element that I have in the html, create an input state for that canvas, attach some events, and draw the status in a loop.
When this module is up and running so far things seem to work as i would expect. When I click the canvas I have just a single pos object in the input.pos array, when I touch the surface of my touch screen I get an array of pos objects. The events, and everything with keyboard keys seems to work as I would want it to also.
3 - Conclusion
Depending on the nature of the project I would want to hack over this a little, add things to it, or remove code or change code that will not be used depending on the nature of the project. In time I might have this as part of some kind of canvas framework, or custom game framework actually. I think I might like to make some kind of hyper casual game framework and make a few games on top of that framework, but that is just an idea at this time that I may or may not get to. These days I world like to spend more time making actual games and less time making things like this.
Working out these things takes time and doing so often leads to me spending more time making things like this rather than making an actual project. However the whole point of doing something like this is to have something that is custom cut to the project, if I want to save time maybe it would be best to not bother with something like this at all and just use a framework.
If I get to it I might expand this post with some simple games examples to further test out if this control module works okay or not. For now I am still torn between just using a framework like phaser, and doing this kind of thing. I like the idea of writing everything from the ground up, but this is time consuming.