How to create a Visual Sprite

Introduction

This tutorial will explain all aspects and process of creation of the Visual Sprite. Visual Sprite, as its name hints, represents a 2D object (widget) described by scenario and visualized by Visual Renderer. The most common example would be a character, but it can be anything that appears on the screen: interactable object, visual enhancement, etc. Applications of Visual Sprite are limited to the applications of User Widget.

Setup

First, let's create a blueprint widget that derives from Visual Sprite:

Now the widget itself can be assembled. There is no limitations here - sprite could be built with any combination of widgets, although the usage of dedicated Visual Image class is preferred. For example, let's create a classic character with two Visual Images for body and face expression. Those can be altered by each Scenario independently.

Character's widget hierarchy

• Overlay serves as main panel widget
• Vertical Box provides layout for Visual Images
• Body represents the humanoid body of the character
• Visual Socket helps with different resolutions of the face expression flipbook
• Expression represents the face expression or emotion of the character

Configuration

Visual Images should be left as-is because their content will be overridden dynamically as described in the hosting scenario. That being said, it is fine to set different values for testing purposes.

Visual Socket

Image desired position represents a pixel to which the center of child Visual Image (Expression in this case) will be attached. This is useful in cases where such expressions have different resolutions and need offset to stay in the desired place. Image desired position works only with Visual Images, while the Socket Offset can be used with any widget.