Node Copied to Clipboard!

Hit Point Designer

The Hit Point Designer, introduced in version 2.2.2, empowers users to create, customize, and manage reusable Hit Point templates for lessons. These templates can be tailored using a 2D canvas Style Editor, allowing the combination of text and image layers to design intricate, interactive Hit Points. Templates can be exported as asset packages for use across projects, set as defaults for new Hit Points and Labels, or updated dynamically to reflect changes across all instances. Additional features like auto-scaling text and images, interactive layer properties, and keyboard shortcuts streamline the design process, ensuring flexibility and efficiency.

Purpose

The Hit Point Designer enables lesson creators to build visually consistent, professional, and interactive Hit Points that enhance lesson engagement. By supporting reusable templates, customizable layers, and auto-scaling for variable text lengths, this feature simplifies the creation of adaptive designs, especially for multilingual lessons. It provides a robust workflow for designers and lesson creators to craft, apply, and update Hit Points efficiently, ensuring seamless integration and scalability across projects.

Templates

From version 2.2.2+ you can create custom Hit Point templates that can be reused through out your lessons. Hit Point templates can also be exported as an asset package and copied into other projects.

To create a new Hit Point template:

  1. Go to the Lesson Ribbon
  2. Under the Templates section click Hit Points
  3. Click + New Template to create a new template based off of the default Hit Point

Using the Style Editor

The Hit Point style editor is a 2D canvas for customizing your Hit Point. Here you can combine text and image layers to create an intricate Hit Point.

By Default a Hit Point will start with 1 text layer and 1 image layer.

Making Hit Point Layers Interactive

You can make any layer of the Hit Point interactive by toggling on the Interactive property on that layer. This makes the whole area of the layer clickable by a user. After making the layer interactive the On Click properties will be visible in the Properties tab under the layer when the Hit Point is selected. Here you can assign the type of interaction. This means that you can have interactions attached to any or all of your Hit Point layers. Each Layer will have their properties exposed for editing on each Hit Point instance sorted by text and images. The order the layers appear in the style editor is the order the layers will appear in the properties tab with the Hit Point selected.

Auto Scaling Text and Images

In order to make it easier to design Hit Points that work with variable lengths of text there are some auto scaling properties that can be utilized. The text layers have Auto Scale Text, this property makes it so the text font size will grow or shrink depending on the text length to always fit within the defined text box area. This way the text will never overflow or be truncated within the designated area.

Images have Auto Scale to text, this property will allow you to reference a text layer that the image will grow or shrink to match. So if the text is long the background will grow to contain it with the specified space between the text box and edge of image.

Note: Auto scaling properties are not compatible with the overflow properties.

Auto scaling is particularly useful when your lesson will be translated into multiple languages. Setting text or images to auto scale will ensure the lesson looks clean and professional no matter the text length.

Keyboard Shortcuts

Keyboard Shortcut Description
Tab Cycle layer selection
v Toggle layer visibility
t Change selected layer type to text
i Change selected layer type to image
Ctrl + t Create new text layer
Ctrl + i Create new image layer
Arrow keys Position layer on canvas
Ctrl + z Undo
Ctrl + Shift + z Redo
Ctrl + d Duplicate selected layer
Ctrl + c Copy
Ctrl + v Paste
del delete selected layer

Applying Templates

Set the Default Hit Point and Label

You can change the default template for new Hit Point and label by:

  1. Go to the Lesson Ribbon
  2. Under Default Styles section change the template for Hit Point and Labels with the template dropdown

All new Hit Points or Labels created will now use the new default template

Apply a Template to a Hit Point

  1. Go to the Home Ribbon
  2. Under Tools Section click Hit Point
  3. Click the Viewport the newly created Hit Point should be selected
  4. In the Properties tab under Main click the Template property
  5. Select a template

Updating Templates

There are two ways to update a template.

From the Template Editor

  1. Go to the Lesson Ribbon
  2. Under the Templates section click Hit Points
  3. Click on the existing template you wish to update
  4. Make updates and save the changes

From a Hit Point Instance

  1. Click on a Hit Point with a template already applied in the viewport
  2. In the Properties Tab click Edit Style
  3. Make updates to the style and click Update Template
  4. All Hit Points referencing that template should be updated to reflect the changes made to the template