Skip to main content

Sprite

The sprite block is responsible for how your entire tale looks.

Example

Sprites demo

Adding a background or character​

All images are sprites, including backgrounds and characters. First, the sprites must be created. Then there are three methods.

The sprite block is not yet on the canvas:

  • Drag and drop a sprite from the left tab to an empty space on the canvas

The sprite block is already on the canvas:

  • Drag an sprite from the left tab to the desired sprite block
  • Click on the current sprite (default is “No sprite”) and select the one you want in the modal window

Modal window

Sprite control​

Sprite Block Decomposition

  1. Select sprites
  2. Define layer on viewer
  3. Separate preview of the sprite's position on the screen.
  4. Moving the sprite horizontally (X) and vertically (Y) from the center
  5. Reset moves and centering
  6. Stretching at height (H) and in width (W)
  7. Lock Aspect Ratio
  8. Rotation Angle
  9. Opacity
  10. Choosing animations
info

All movement, resizing, rotation and transparency can be changed with gestures. Hold and swipe left or right.

Animations​

Clicking on the “Animations” button will open up a selection of them. At the moment there are only 4 kinds of them:

  • Moving
  • Resizing
  • Rotation
  • Changing opacity

Animations

After selecting an animation, the block will expand. There are 2 types of transitions:

  • Appearance
  • Clearing

Animation Types

Animations specified in the appearance will be played when the player reaches this sprite block.

Clearing means that if the player has reached the clear block - when the sprite is removed these animations will be played.

Animations control:

  • Customize an animation by clicking on it and opening its modal window. Each animation has its own modal window, and these are explained below
  • The ▶ button plays animations in the window, including combined animations
  • + to add animations and combine them

Move

These windows differ only in the element they are responsible for animating. Otherwise, they share common parts:

  • Transition of the animation between appear and clear
  • The ▶ button play only the selected animation
  • Time of animation execution in milliseconds
  • Selects the math function by which the animation is executed
Functions list

Sprites demo

tip

Try experimenting on your own and see how different functions affect the animation.

note

Animations have a beginning point and an end point. The parameters in the animation modal windows are the beginning point. The parameters at the top of the sprite block are the end point.

Combining animations​

Animations Combined

You can combine several types of animations at once. You can combine up to 4 available ones in total.

Want sprites animations for more than just appearing and clearing?

Read the article about modify block.