App input events

Detect global input events in your WADE App

Our app is starting to look a bit more interesting, but it still missing one key aspect: we cannot interact with it. In this chapeter we'll look at doing so by using WADE events.

In general, when something happens (for example when there is some input from the user), WADE will fire an event. Let's look at the most common one to start with: onMouseDown.

We can respond to this event by defining an onMouseDown function in our App:

    App = function()
    {
        this.onMouseDown = function()
        {
            alert("You have clicked somewhere!");
        };
    }

You can try this yourself, and you'll see that whenever you click anywhere in the app's window, an annoying pop-up message will appear.

Note that we're responding to a mouse event here. However, not all devices have a mouse. What happens then, is that WADE will automatcally map the appropriate event to our onMouseDown function. That is, on a touch-screen device, the onMouseDown function will be called when a touchStart event occurs. If the app is executed on an Xbox 360, for example, the onMouseDown function will be called when the user presses the green A button, and so on. The same is true for a touchMove event, that WADE maps to onMouseMove, and touchEnd, that WADE maps to onMouseUp.

But let's get rid of the annoying pop-up straight away. Instead, let's make our scene objects do something when we click.

To do this, first of all we need to be able to access our objects from the onMouseDown function. At the moment this isn't very easy, because our scene objects are local variables in the init function. So let's go back to our init function and declare those objects as members of the App function instead:

    this.init = function()
    {
        // create some text
        var helloText = new TextSprite('Hello World!', '32px Verdana', 'red', 'center');
        this.helloObject = new SceneObject(helloText);
        wade.addSceneObject(this.helloObject);
    
        // create a clubs sprite
        var clubsSprite = new Sprite('data/clubs.png');
        clubsSprite.setSize(64, 64);
        this.clubsObject = new SceneObject(clubsSprite);
        wade.addSceneObject(this.clubsObject);
        this.clubsObject.setPosition(-130, 0);
    }

Note that at lines 5 and 11 now we're doing this.helloObject and this.clubsObject rather than var helloObject and var clubsObject. This makes it easy to access those object from the onMouseDown function, like this:

    this.onMouseDown = function()
    {
        this.clubsObject.moveTo(200, -100, 400);
    };

We are using the moveTo method of SceneObject to move our clubs object to the top-right area of the screen (coordinates 200, -100), with a speed of 400 pixels per second.

Functions that handle WADE events can also accept an argument, which contains some event data. For example, let's use the position that has been clicked to determine the destination of the clubs object:

    this.onMouseDown = function(eventData)
    {
        this.clubsObject.moveTo(eventData.screenPosition.x, eventData.screenPosition.y, 400);
    };

Try it right here

This is looking a bit more like an app: whenever you click (or touch) the screen, an object starts moving. As an exercise, can you make it stop when the user releases the mouse button, or stops touching the screen? (Hint: use the stopMoving method of SceneObject in an onMouseUp function).

App = function() { this.load = function() { wade.loadImage('/assets/tutorial/clubs.png'); }; this.init = function() { // create some text var helloText = new TextSprite('Hello World!', '32px Verdana', 'red', 'center'); this.helloObject = new SceneObject(helloText); wade.addSceneObject(this.helloObject); // create a clubs sprite var clubsSprite = new Sprite('/assets/tutorial/clubs.png'); clubsSprite.setSize(64, 64); this.clubsObject = new SceneObject(clubsSprite); wade.addSceneObject(this.clubsObject); this.clubsObject.setPosition(-130, 0); }; this.onMouseDown = function(eventData) { this.clubsObject.moveTo(eventData.screenPosition.x, eventData.screenPosition.y, 400); }; };