Collage

Operating Summary

Collage is an application where you can create your own collage using your body.

Making use of the following events and sensor functionalities we will fulfill this purpose:

• To indicate the position of the image to be printed on the screen you will use the position of your body.
• To print the image on the screen you will have to raise your right hand.
• To change the image for a new one, you will raise your left hand.

 

Once our collage is created it will be saved as a background in home area, showing the result of the different version of the collages created.

Web

Pressing enter we can simulate the position of our body with the mouse.Clicking we will print the image on the screen.

Pressing “C” we can change from one image to another.

Code

Mainly in this section we will show you how to change the background images and those that we are going to print on screen for those that you want to use.

We will start by going to the Ubox Event tab, there we must look for the setBackgrounds method.

setBackgrounds()
{
    this.backgrounds[0] = new BackgroundImage('{resources:images/cocina1.jpg}',0.2);
    this.backgrounds[1] = new BackgroundImage('{resources:images/cocina2.jpg}',0.2);
    this.backgrounds[2] = new BackgroundImage('{resources:images/cocina3.jpg}',0.2);
}

There we can find the background images that we must replace with the ones we want to use.

The code marked in yellow (in this case 0.2) will be the proportional size of the image, this will affect the size of the images to be printed, you can try changing it (example 0.4).

Just below of setBackgrounds() we have the setImgs() method.

Now we can change the images to be printed on the screen for the ones we want to use.

setImgs()
{
    this.collageImages[0] = new CollageImage('{resources:images/banana2.png}');
    this.collageImages[1] = new CollageImage('{resources:images/apple2.png}');
    this.collageImages[2] = new CollageImage('{resources:images/grape2.png}');
    this.collageImages[3] = new CollageImage('{resources:images/mango2.png}');
    this.collageImages[4] = new CollageImage('{resources:images/orange2.png}');
}

To change the time we will have to make our collage we must look for the gameTimeout variable.

var gameTimeout = 20;

And we will simply change the default number for the seconds we want.