Skip to main content

Luna Elements

Configurable fields are editable items within each Elements template, than allow you to fully customise the content and experience of your playable ad.

Each specific template comes with a number of specific fields which are relevant for that design, and are listed in the page individual template pages.

All of the general fields which exist in all templates are detailed below.

Video#

Video fields enable you control the content as well as size controls of the video.

FieldType/OptionsDetails
VideoVideo file (.mp4, .wav, .webm, .mkv etc.)The video which will be used throughout the playable experience. Videos are uploaded and stored in the Media Library.
Video Anchor (default & landscape)-Top Left
-Top Middle
-Top Right
-Middle
-Middle Left
-Middle Right
-Bottom Left
-Bottom Middle
-Bottom Right
As a single video needs to support multiple resolutions, the anchor control can be used to define how your video scales. For example, if your video has some important gameplay elements at the top of the screen, you may which to choose the Top Middle. The differences can be seen in the examples below.
Video Fit/Fill (default & landscape)-Fit (0): The video will maintain its aspect ratio and scale to fit in 100% of the smallest dimension (width or height) depending on the resolution.
-Fill (1): The video will maintain its aspect ratio and scale to fit in 100% of both the width height of any resolution.
The video fit/fill control is a range from 0-1. You can change your value between 0 and 1 to find the best fit for your game. We recommend using this feature in conjunction with the video anchor settings. You can see examples of this below.

Video Anchor example#

images-small

Video Fit/Fill example#

images-xsmall

Background#

It's likely that your choices for scaling and anchoring your video will leave unfilled edges in some resolutions. The background options allow you to control what is used to fill such areas.

FieldType/OptionsDetails
Video Filler-No filler: No blur applied, background will remain black.
-Blurred 1st frame: The first frame of the video will be chosen, blurred and layered behind the video.
-Blurred video: the video will be blurred and layered behind the video, playing in-sync.
The video filler option allows you to fill these areas with a blurred background, using the video as the content.
Image (default and landscape)Image file (.png, .jpg, .jpeg, etc.)The image option allows you to fill these areas with a specific image background.
Image Scaling (default and landscape)-Keep aspect, fill: Retains the image's aspect ratio and expands it to fill the screen. This may cause clipping, but will render the image large.
-Keep aspect, fit: Retains the aspect ratio and expands the image until it reaches the edge of the screen. This will avoid clipping but the image may appear small.
-Ignore aspect, fill: Will change the image's aspect ratio to match that of the preview screen, and then scale it up so that it fills it entirely. This will likely make the image appear stretched, but there will be no clipping and the image will be rendered large.
The image scaling option allows you to choose how your background image fits the layout. Examples below.

Background Image Scaling example#

images-xsmall

Hint/Tap Hint#

The Hint sections allows you to control image, size and position of the hint or hints to be used. You can also add optional hint text and relevant options (size, color).

NOTE: The hint section will not appear in the Static End Card template. In the Choices template the hint section will not have options for text or offset.
Luna provides a number of tested gestures in the Asset library. Find out more info here.
Sliders can be incremented by 1 at a time; to do so click the slider and then press left or right on your keyboard to begin changing the value.
FieldType/OptionsDetails
ImageImage file (.png, .jpg, .jpeg, etc.)The image to use for each hint. If you are using a custom gesture and not an asset provided in the asset-library, then we recommend the following:
- APNG format
- Ensure the focus-point of the gesture (i.e where to tap) is at the centre of the image (use padding if necessary)
Size (default and landscape)Float value (Number value that allows decimals, negative values will default the value used back to 15)This determines the size of the image, the higher the value the larger the image will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.
Horizontal Offset (default and landscape)Slider (Which changes a float value)Moves the hint image along the x axis (horizontally).
Vertical Offset (default and landscape)Slider (Which changes a float value)Moves the hint image along the y axis (vertically).
TextString (Letters, Numbers and Symbols)The text to use in the hint.
NOTE: The text for the hint is not positioned relative to the hint image.
Text ColorClick on the color bar to open the color context menu and begin choosing a color.The color of the hint text.
Font SizeA float value (Number value that allows decimals, negative values will default the value used back to 1)The size of the text, the larger the value entered the larger the text will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.
Vertical Text Offset (default and landscape)Slider (Which changes a float value)The amount to offset the hint text, as a % of the screen.(There is no horizontal text offset, hint text is aligned in the centre of the screen)
Flip-No Flip
-Flip horizontally
-Flip vertically
-Flip horizontally & vertically
Select which way you wish to flip your hint image.
RotateSlider (Which changes an float value)Move the slider to determine what value in degrees you wish to rotate your hint image by.
Hole SizeA float value (Number value that allows decimals, negative values will default the value used to 0)This will determine how large the circular hole that is cut out of the mask is. The larger the number, the larger the hole.
Horizontal Hole Offset (default and landscape)Slider (Which changes a float value)Moves the mask hole along the x axis (horizontally).
Vertical Hole Offset (default and landscape)Slider (Which changes a float value)Moves the mask hole along the y axis (vertically).
Overlay ColorClick on the color bar to open the color context menu and begin choosing a color.This controls what color is used to overlay on top of the video. A hole will then be cut out of this color overlay to help highlight your hint.

By default this color will have 0 alpha, meaning it won't be visible. If you wish to make use of this mask/hole effect, select a color for the mask and adjust the alpha value to how transparent you wish the overlay to be. (A low alpha value will be highly transparent, and vice versa.)

To see where to set the alpha value in the color bar menu, click on the arrow below.

Click here to see where on the color bar to set the Alpha value (Opacity).
images-small

Overlay Color Opacity example#

images-xsmall

End Card#

This section controls all the major features of the end card, which shows at various stages of the playable depending on your choice of template.

FieldType/OptionsDetails
Type-Icon, Description and Button
-Icon and Button
-Description and Button
-Button only
The type field describes which elements will be included in the end card.
Alignment-Top
-Middle
-Bottom
At what horizontal position on the screen the end card contents are displayed. Examples
IconImage file (.png, .jpg, .jpeg, etc.)The icon shown in the end card, if nothing is chosen the device App Store icon will be displayed.
DescriptionString (Letters, Numbers and Symbols)The description text displayed under the icon and above the CTA button.
Call to ActionString (Letters, Numbers and Symbols)The call to action text (i.e. the button text).
Button Image Type-9 Patch Image: Recommended when using one of our button image we provide in the (asset library)[asset-library] under 'Controls > Buttons'.
-Static Image:Recommended when using your own custom image (set the End Card text color to be transparent if your image includes text on it already)
The type of button to be used for the call to action.
Background ImageImage file (.png, .jpg, .jpeg, etc.)You may upload a custom image to use for the end card. The image scaling will always be set to Keep aspect, fill. As stated in the previous row, if your image includes text already on it be sure to make the End Card text color to be transparent.
Background ColorClick on the color bar to open the color context menu and begin choosing a color.The background colour and opacity of the end card. If using a background image, this color is not used.

End Card Alignment example#

images-xsmall

Banner#

This section controls a marketing banner which can be placed in various position in the playable.

FieldType/OptionsDetails
TextString (Letters, Numbers and Symbols)The text to use in the banner. Leave this blank if you don't wish to use the banner.
Text ColorClick on the color bar to open the color context menu and begin choosing a color.The color of the banner text.
Font SizeA float value (Number value that allows decimals, negative values will default the value used back to 1)The size of the banner text, the larger the value entered the larger the text will be.
Vertical OffsetSlider (Which changes a float value)The position of the banner vertically, from the top (0) to the bottom (1) of the device.
Background ColorClick on the color bar to open the color context menu and begin choosing a color.The background color of the banner.

App Store Controls#

The App Store Controls allow you to customise when the user is directed to the app tore after engaging with your playable.

FieldType/OptionsDetails
Click Number to Open StoreInteger (Negative values and 0 will default to 1)Most template have their own click control clicks are required before the app store is opened.
Open Store With End CardOn or OffThe app store is opened as the end card is displayed. Please note, that it is recommended to make sure that you only choose this option if the end card is displayed within a few seconds of a user interaction.
Whole End Card Is ClickableOn or OffWhether or not the whole end card is clickable. The default behaviour means only the button is clickable.

Advanced Settings#

There are a number of advanced settings which may not be used for every playable version, but provide additional controls which allow you to fine-tune the playable experience.

FieldType/OptionsDetails
Content Filter Type-Opacity
-Blur
-Grayscale
The content filters are a selection of overlays and filters which will be applied to the content (video of image) of the playable. All filters are controlled by the content filter strength).
Content Filter StrengthSlider (Which changes a float value)The higher the value the stronger the content filter becomes.
End Card Button Animation-No Animation
-Pulse
-Wobble
-Scale
-Opacity
The animation for the end card button. The default value is Pusle.
End Card Description Font SizeA float value (Number value that allows decimals)The size of the end card description text, the larger the value entered the larger the text will be.
End Card Description Text ColorClick on the color bar to open the color context menu and begin choosing a color.The color of the end card description text.
End Card Call To Action Text SizeA float value (Number value that allows decimals)The size of the end card call to action text, the larger the value entered the larger the text will be.
End Card Call To Action Font ColorClick on the color bar to open the color context menu and begin choosing a color.The color of the end card call to action text.
End Card Icon Corner RadiusThe amount of corner radius to apply the icon. This means that if you icon is square, you can round-off the corners quickly in Luna Playground.
End Card Icon Shadow ColorClick on the color bar to open the color context menu and begin choosing a color.The color of the shadow to add behind the icon.
End Card Icon Shadow SpreadThe mount of spread for the icon shadow.
End Card Appearance Animation Type-Slide Up
-Slide Down
-Slide Left
-Slide Right
The appearance animation type for the end card, which controls show the end card arrives on screen. Default value is Slide Up.
End Card Appearance Animation DurationThe duration of the end card appearance animation. Default is 0.25s.
Default FontFont file (.ttf, .otf etc.)The default font to be used for all fields

End Card Icon Corner Radius example#

images-xsmall