Tap to Swipe
Displays an iOS endcard with carousel functionality, allowing users to swipe through multiple images, with effects for edge elements.
When to use it?
Use this template when you want to enhance user engagement with an interactive endcard on iOS. It’s ideal for showcasing multiple images in a swipeable carousel, allowing users to explore different visuals smoothly.
Required assets
The following are the required assets in order to make this template a success.
Background video or image Carousel images Hint image End card icon
Configurable Fields
This template includes a selection of general configurable fields which are all detailed here.
Background
Tap Hint
End Card
App Store Controls
Sound
Advanced Settings
The specific fields which are provided with the Tap To Engage template are listed below.
Content
| Field | Type/Options | Details |
|---|---|---|
| Background (default & landscape) | Video file (.mp4, .wav, .webm, .mkv etc.) Image (.png, .jpg, .jpeg, .gif, etc.) | Video or image will be used throughout the playable experience. Videos or images are uploaded and stored in the Media Library. |
| 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. |
| Video Fit/Fill (default & landscape) | Fit: 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: The video will maintain its aspect ratio and scale to fit in 100% of both the width and 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. |
| Filter Type | No filter Opacity Blur Grayscale | Select the type of filter to apply to the background video or image |
| Filter Strength | Slider (Which changes a float value) | Adjust the intensity of the selected filter on a scale from 0 (no effect) to 1 (maximum effect). |
Carousel
| Field | Type/Options | Details |
|---|---|---|
| Carousel Items Count | Slider (Which changes an int value) | Set up the number of elements in carousel - from 2 to 10. |
| Slide Image | Image (.png, .jpg, .jpeg, .gif, etc.) | Set a image which will be used in carousel. |
| Item Size | A float value | This determines the size of the image, the higher the value the larger the image will be. |
| Space Between Items | A float value | Determines the distance between two adjacent elements. |
| Autoplay | On or Off | Should elements swipe automatically when the user doesn't touch the screen? |
| Disable Autoplay on Interaction | On or Off | Autoplay may continue after user interaction or stop. Option works only if Autoplay enabled. |
| Autoplay Delay | A float value | Configure the interval between swipes. |
| Loop | On or Off | Determines the swiping behavior of elements: if enabled, elements continue swiping infinitely; if disabled, when the last image in the carousel is reached, the focus returns to the first one or goes in opposite direction (if Back and forth enabled). |
| Reverse | On or Off | Enable to swipe elements from right to left, disable to swipe in the opposite direction. |
| Back and forth | On or Off | If enabled, when the last image in the carousel is reached, the focus returns to the first one. If disabled, swiping moves in the opposite direction back to the first image. |
| Carousel Filter | None Opacity Blur Grayscale Scale | The disappearance animation type for images near the focused image. The default value is Scale. |
| Filter strength | Slider (Which changes a float value) | Adjust the intensity of the selected filter on a scale from 0 (no effect) to 1 (maximum effect). |
Title
| Field | Type/Options | Details |
|---|---|---|
| Text (default and landscape) | 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
| Field | Type/Options | Details |
|---|---|---|
| Text (default and landscape) | 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. |
Call to Action
| Field | Type/Options | Details |
|---|---|---|
| Text (default and landscape) | 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. |
| Button Image | Image (.png, .jpg, .jpeg, .gif, etc.) | The button shown in the bottom of the screen, if nothing is chosen the default button image will be displayed. |
| Button Animation | No Animation Pulse Wobble Scale Opacity | The animation type for the button. Default value is No Animation. |
| Button Image Type | 9 Patch Image: Recommended when using one of the 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 colour to be transparent if your image includes text on it already). | The type of button to be used for the call to action. |
| End Card Button Padding | A float value for each box (Number value that allows decimals, negative values) | Left box: Adds padding (space) to the top and bottom of the icon. Right box: Adds padding (space) to the left and right sides of the icon. |
| End Card Icon Corner Radius | A float value (Number value that allows decimals) | The amount of corner radius to apply the icon. This means that if you icon image is square, you can round-off the corners quickly in Editor. |
| End Card Icon Shadow Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the shadow to add behind the button. |
| End Card Icon Shadow Spread | A float value (Number value that allows decimals) | The mount of spread for the icon shadow. |