Virtual Props

Top  Previous  Next

Virtual props work by detecting faces and overlaying them with an image such as glasses, hats, bunny ears, beards etc. The face detection can detect whether someone is smiling and display a different virtual prop when they are "happy" or "sad".


Virtual props work in both photo mode and burst GIF mode.


Up to 10 different virtual props can be defined and selected using touchscreen actions in the ready or menu screens. A virtual prop is defined by a PNG overlay for "normal" faces and an optional PNG overlay for "smiling" faces. The filename defines the prop number, whether it is for "normal" or "smiling" faces and its placement relative to the person's eyes. The alpha channel of the PNG image is used to specify the opacity of the overlay allowing areas to range from being fully transparent to opaque.







The filename starts with prop2Normal_ which indicates it is the overlay for virtual prop number two to be added to "normal" faces. An optional virtual prop for "smiling" faces would start with prop2Smiling_

The rest of the filename, {w48%h66%}, provides information about where the centers of the prop's eyes are defined within the overlay image. The prop image is resized and rotated so that the centers of the eyes in the prop are placed over the centers of the person's eyes in the photo.


The w48% value indicates that the width between the centers of the eyes is not quite half the width of the overlay image. The h66% value indicates that the centers of the eyes are about 2/3 of the height of the overlay measured from the bottom:


The overlay can be moved up relative to the person's eyes by reducing the h value e.g. h0% would place the bottom of the overlay at the person's eye level.

The overlay can be made larger relative to the person's face by reducing the w setting or smaller by increasing the w setting.


The size and position of the virtual props can also be edited interactively using the virtual prop editor to automatically update the filenames.


Creating Your Own Virtual Props


You can create your own virtual props by simply creating a suitable PNG image file and saving it in the screen folder with a filename indicating the number of the virtual prop with initial settings for its size and position e.g. prop4Normal_{w50%h50%}.png to define virtual prop #4. Then use the virtual prop editor to adjust its size and position.


Example: create a new virtual prop based on the one shown above and darken the glasses.

First copy the PNG image file for prop #2, prop2Normal_{w48%h66%}.png, and name it prop4Normal_{w48%h66%}.png for prop #4.

Then edit it in an image editor such as Photoshop to add a semi-transparent blue layer in the glasses:




Next use the virtual prop editor to adjust its size and position:


virtual prop editor modded


Finally use the Touchscreen Editor to add the touchscreen action "virtualProp4" in the ready screen to select the new prop.


There is also an example of creating a new virtual prop for a hat on the Virtual Prop Editor page.


Selecting Virtual Props


Virtual props can be displayed initially by selecting the virtual props option in the General Settings page in the event editor. You can give the user the option to select a different virtual prop or to disable virtual props by adding touchscreen actions to the ready or menu screens using the Touchscreen Editor.


Touchscreen actions affecting virtual props in the stills ready screen:


virtualPropOff - disable virtual props

virtualProp1 - select virtual prop #1

virtualProp2 - select virtual prop #2

virtualProp3 - select virtual prop #3

virtualProp4 - select virtual prop #4

virtualProp5 - select virtual prop #5

virtualProp6 - select virtual prop #6

virtualProp7 - select virtual prop #7

virtualProp8 - select virtual prop #8

virtualProp9 - select virtual prop #9

virtualProp10 - select virtual prop #10


If virtual props are not selected in the General Settings page they won't be displayed initially but can still be selected using touchscreen actions.