A spritesheet is a .png or .jpg media. It is composed of several images that follow one after the other to create a sensation of movement.
To add a spritesheet to the panorama, click on the Spritesheet element and drop it onto the scene.
The spritesheet element appears on the scene as a pictogram:
In the Elements column, rename the element.
To define the aspects and the states of the element, click on the Properties icon in the Elements
A window will open. Click on the “Add a spritesheet” button to select a media to associate to the element.
Choose a spritesheet that is not in the project yet, or on the contrary, choose one that is already present.
When a media is inserted, it is visible within the Properties window. You can replace it using the corresponding button or delete it.
A spritesheet element can have several aspects and several states. A section of the window is dedicated to each of them. You can also apply animations to the element using the “ANIMATIONS” tab.
An aspect can, for example, represent a character who does not speak at the beginning of the experience (but it moves slightly). To get the aspect of the character who speaks, it is necessary to add an aspect that will enable you to import a new spritesheet or reuse an existing one. To do this, click on the "+" symbol in the "element aspects" section.
As explained above, a spritesheet is a sequence of pictures as shown in the picture below. On the same image, four images of a character were drawn, with different movements of the mouth (effect of speaking).
You can adjust the number and speed of the sequence of images on the spritesheet to set the effect of movement:
Number of images (image column)
Each image on a spritesheet is considered an image column. You can increase or decrease it depending on the expected effect.
Time per image (ms)
You can adjust how long each image is displayed in milliseconds.
Total time (ms)
The total time allows you to set the total duration of the sequence of all images in milliseconds. As much as you decrease this time, the expected movement will be slower and conversely by increasing it.
A state defines a spritesheet element in three ways:
- Its visibility
- Its interactivity
- Its playback
To meet the needs of your interactive scenario, the visibility and interactivity of your element can be multiple.
States can be added and edited through the “Element states” section. To add a state, click on the + symbol.
The yellow flag, as for the panoramas, indicate which the initial state of the element is.
Animations are created in the Properties window, in the “ANIMATIONS” tab. To add animations, simply click on the “+” symbol.
Rename the animation you just added. Now you can define it by giving a destination to your element and, if planned, interpolating the movement for this animation.
To learn more about animations, have a look at our article on the topic.