After a relatively easy code clean up, it was time for some user input. This is relatively strain forward event based Javascript, so going into detail isn't necessary. For testing purposes, I use the arrow keys to move around the main character all over the screen. This is quite simple to do as the position of the character in the scene is an attribute of said object. As the render engine chooches along, the screen get updated instantaneously.

This of course has little to do with animating the objects, but that is a subject for another blog. Point is that I can now kick around my main antagonist on screen to test the alpha masking. I'm not sure if the way I implemented the meta image file is the most elegant and perhaps I'll change this in the future as I suspect it is not necessary and a bit convoluted.

<asset>
    <name>scene</name>
    <mediaType>image</mediaType>
    <assetType>scene</assetType>
    <file>./assets/scenes/cave1.png</file>
    <metaFile>./assets/scenes/cave1alpha.png</metaFile>
</asset> 

Essentially, the meta-data file is just another graphic, so perhaps loading it as a separate asset would have been cleaner and easier as it would not have needed the loader to handle this. On the scene data side it really does not matter much as all that is needed for the render engine to use this data is to have the pointer to the graphic.

Each object now has a mask attribute that, when set true, checks every pixel position of the object against the mask data and the Y position of the object in the scene. This works a bit like this.
The object neatly disappears behind the rocky ledge. It can now also walk in "circles" around the pillar. At this point objects are drawn in the order in which they are loaded, so between objects there is no adapting draw depth, but this isn't the hardest thing to implement later on.

I also implemented mouse events for extra clicky-ness which helps with the whole effort! The mouse cursor is just another object just like the sticks and figure with some extra attributes and options. One option is that the graphic for the cursor can be changes at any time.

For example, here the cursor uses the bag icon. This means that I can use the actual graphics in the game when the player wants to use it. If you pick up the stick, you carry it and click the bolder. This is a simple visual dynamic that feels quite natural.

Some smaller features I make this session were the scrolling scene which just proportionately sets an offset based off of the characters position on screen. This was trivial to implement and because I redraw everything 30 times a second, this scrolling is very smooth. I have yet to see any flickering or shearing as I will demonstrate in a demo video as soon as the next set of functions have been build.

These functions will be the pointy clicky interface to move the character, the path system and a way to animate the movement.