Coding with Hype

Tumult Hype is a great tool to design timeline-based HTML5 animations.

Hype allows for basic interactivity by adding predefined behaviors, and by transitioning between scenes.

But what if you want to create a game using Hype? Maybe you need to keep track of a value, or need some randomness in your animations? You’ll need to code some custom javascript!

Attaching a script to a timeline or button

Use the inspector to display your scene or your visual element (an image or shape). Select “add javascript” as the action. Then add a new javascript function to the selected scene / element. Hype will create a new javascript file for you. You can also add javascript to a timeline.

Adding a global variable

If you need a variable that is available across all of your scenes and elements, you can make it global. You need to define global variables when the main timeline starts, so add a script to the main timeline of your first scene. Inside the script you can define your variables. You can put your variables straight into HTML’s document window. If you want to keep your variables safe from other scripts (page scripts that may be running outside of your own animation), you can add a namespace object and store your values inside that object:

function initGame(hypeDocument, element, event){
    // basic global variables
    window.score = 0;
    window.name = "erik";
    // creating a namespace object that holds our variables
    window.MyData = {score:0, name:"erik"};
}

Adding randomness to a timeline element

By positioning elements on a timeline with a random value, we can add some variation to our animation. We’ll use javascript’s random function with our Hype elements!

To be able to find our elements by javascript, we need to give them an id. Click on your element and add an id in the inspector as follows:

Next, we’ll add a script to the timeline, this will get triggered every time the timeline reaches this point.

Add a new javascript file. We will name our custom script ‘randomPosition’. In this file, we can find and reposition our elements with the following code:

function randomPosition(hypeDocument, element, event){
    // first we'll cook up a random value:
    var myRandomPosition = Math.round(100 + Math.random() * 700);
    // then we will find our element by the id we just used, and reset the position:
    hypeDocument.getElementById('bubGroup1').style.left = myRandomPosition + 'px';
}

Keeping track of variables

Let’s say we want a transition to the next scene to happen only after a certain number of items has been clicked, or a certain score has been reached. To achieve this, we’ll start by adding a script to a button that we have on stage. Check the screenshot at the top of this tutorial to see how to add a script to a button. Name the script “checkValues”.

function checkValues(hypeDocument, element, event){ 
    // add a value to a score
    window.MyGame.score++;
    // check if a certain score is reached
    if(window.MyGame.score > 10) {
        // this code will jump to a named scene in our hype animation
        // using a crossfade animation
        hypeDocument.showSceneNamed('scoreScreen', hypeDocument.kSceneTransitionCrossfade, 1.0);
    }
}

Adding random images to the stage

This code will get a random image from your documents folder and place this on stage. To achieve this, we’ll start by adding an empty container to the stage and giving this an id:

Next we will add the images that we want to use in our empty container element. We need to add them manually because they are not visible on the stage when we export our project. Click the + sign in the resource library to add media.

All we have to do now is place the image in our empty container using code! The advantage of this is that you can have random images, or different images depending on the user’s progress. You could also use this to replace one image when another image has been clicked.

function initScene(hypeDocument, element, event){ 
    // get the empty container that we created above:
    var empty_element = hypeDocument.getElementById("emptyContainer5");
    // the image that we want to load
    var image = "myfile.png";
    // we need to include the Hype project folder
    var url = hypeDocument.resourcesFolderURL() + "/" + image;
    // now we can replace the inner HTML of the empty container:
    empty_element.innerHTML = '';
}