JPEG End Card
Paola Croce avatar
Written by Paola Croce
Updated over a week ago

JPEG End Card

The JPEG End Card template, has the same functionality as the End Card Overlay template, but it offers a static background rather than a video.

When to use it?​

This template is great if you want to add a CTA animation and further text descriptions to your static end cards. It lets you ultimately create something more eye-grabbing for the user.

Required assets​

The following are the required assets in order to make this template a success.

  • Background image

  • Game icon

  • Eye-catching description

Configurable Fields​

This template includes a selection of general configurable fields which are all detailed here.

The specific fields which are provided with the End Card Overlay template are listed below.

Static Content

Field

Type/Options

Details

Image

Image file (.png, .jpg, .jpeg, etc.)

This image will stay the same in both portrait and landscape, meaning that is locked in both positions and you do not need to create

Image Anchor (Default and Landscape)

  • Top Left

  • Top Middle

  • Top Right

  • Middle

  • Middle Left

  • Middle Right

  • Bottom Left

  • Bottom Middle

  • Bottom Right

As a single image needs to support multiple resolutions, the anchor control can be used to define how your image scales. For example, if your image has some important elements at the top of the screen, you may which to choose the Top Middle.

Image Fit/Fill (Default and Landscape)

  • Fit (0): The image 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 image will maintain its aspect ratio and scale to fit in 100% of both the width height of any resolution.

The image 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.

Image Filler

  • No filler: No blur applied, background will remain black.

  • Blurred frame: the image will be blurred and layered behind.

The image filler option allows you to fill these areas with a blurred background, using the original image as the content.

Background Image (Default and Landscape)

Image file (.png, .jpg, .jpeg, etc.)

The image option allows you to fill these areas with a specific image background, specifically for portrait and landscape

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.

Images Section​

Field

Type/Options

Details

App Icon

Image file (.png, .jpg, .jpeg, etc.)

The icon shown in the middle of the screen, if nothing is chosen the device App Store icon will be displayed.

App Banner

Image file (.png, .jpg, .jpeg, etc.)

The banner shown below the app icon, if nothing is chosen then the placeholder image will disappear on the live version.

Icon Size (default and landscape)

Float value (Number value that allows decimals, negative values not allowed)

This determines the size of the icon 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.

Banner Size (default and landscape)

Float value (Number value that allows decimals, negative values not allowed)

This determines the size of the banner 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.

Show Icon (default and landscape)

On or Off

Toggle whether the App Icon should be displayed or not.

Show Banner (default and landscape)

On or Off

Toggle whether the App Banner should be displayed or not.

Overlay Background

Click on the color bar to open the color context menu and begin choosing a color.

The color behind the end card portion of the template (the lower half).

Title Section​

Field

Type/Options

Details

Text

String (Letters, Numbers and Symbols)

The title text that will appear below the App Icon and App Banner.

Font Size (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The size of the title 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.

Text Color (default and landscape)

Click on the color bar to open the color context menu and begin choosing a color.

The color of the title text.

Description Section​

Field

Type/Options

Details

Text

String (Letters, Numbers and Symbols)

The description text that will appear below the title text.

Font Size (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The size of the description 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.

Text Color (default and landscape)

Click on the color bar to open the color context menu and begin choosing a color.

The color of the description text.

Call To Action Section​

Field

Type/Options

Details

Text

String (Letters, Numbers and Symbols)

The text that will appear over the CTA button.

Font Size (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The size of the button 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.

Text Color (default and landscape)

Click on the color bar to open the color context menu and begin choosing a color.

The color of the button text.

Footer Section​

Field

Type/Options

Details

Text

String (Letters, Numbers and Symbols)

The text that will appear below the CTA button.

Font Size (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The size of the footer 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.

Text Color (default and landscape)

Click on the color bar to open the color context menu and begin choosing a color.

The color of the footer text.

Advanced Settings Section​

Whilst the Advanced Settings section is universal, this template contains unique settings listed below.

Field

Type/Options

Details

Element Spacing (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The amount of space between fields in the end card section of the template. Increasing the amount of space will enlarge the end card as a whole to accommodate.

Landscape Alignment

Left or Right

Decides whether the end card portion of the template will position itself on the left or right of the screen in landscape mode.

Overlay Layout

-Normal: The video will be resized to fit the portion of the screen that isn't occupied by the end card.
-Overlay: The video will fill to fit the screen, including the space behind the end card segment.

Decides how the gameplay video should fit into the template.

Landscape Content Alignment

Center, Left or Right

Decides how the fields within the end card segment are aligned horizontally.

Landscape Content Spread

-No Spread: Default layout.
-Spread Evenly: Evenly spaces the fields apart.
-Spread Evenly (except header & footer): Even spacing except for header and footer.
-Center Description: Ensures the Title and Description occupy the center area (vertically).

Decides how the fields within the end card are positioned vertically. Examples below.

Footer Font

Font file (.ttf only)

The font to be used for the footer text.

Landscape Content Spread example

Spread Mode

Example

No Spread

Spread Evenly

Spread Evenly (except header & footer)

Center Description

Did this answer your question?