Skip to main content

End Card Builder

The End Card Builder is also available for Luna Elements here.

Overview#

The Interactive End Card Builder is a tool developed by Luna for the Playable plug-in. Game developers can create and customize end cards for their playables instantly in the Unity editor.

Getting Started#

  1. Install Luna Playable into your Unity project.
  2. Download and import the Interactive End Card Builder into your Unity project.

You can now see the Interactive End Card Builder folder in your Unity assets. If you want to test the builder, or have a play around with it, you can select the Scenes folder and open the the Example Scene.

The CanvasWithEndCard prefab can be dragged and dropped into your project hierarchy and integrated with your work. You can find it in the End Card folder, in the prefabs sub-folder.

End Card Call#

It is necessary to call the end card in order for it to appear in the scene. Therefore, you can use the OpenEndCard() method in your script to instantiate the end card.

An example is available in the scripts folder: Example End Card Call.

End Card Configuration#

To configure an end card, you can select the prefab first child LunaEndCardContainer in the hierarchy. In this way the inspector will show you all the fields that can be modified in real time.

images-large


These fields are also divided between Portrait Settings and Landscape Settings according to what orientation is being used. These settings work in a similar way, they are only split in two groups in order to get different behaviors according to the considered orientation.

images-small

End Card Settings#

Use these variables to set your basic end card features (eg. background, icon texture, description, etc.).

images-small

FieldType/OptionsDetails
Always show EndcardBoolean(true/false)Mainly used for testing. Tick this option to make your end card to stay fixed in play mode.
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 you do not need a background you can set the alpha value to 0.
Background TextureImage file(.png, .jpg, .jpeg, etc.)You may upload a custom image to use for the end card. If your image includes text already on it be sure to set the End Card text color to transparent.
Icon TextureImage file(.png, .jpg, .jpeg, etc.)The image used for the icon in the end card.
Icon 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's icon.
Button TextureImage file(.png, .jpg, .jpeg, etc.)The image used for the Button in the end card.
Button ColorClick on the color bar to open the color context menu and begin choosing a color.The background colour for and opacity of the end card's button.
End Card Description TextString (Letters, Numbers and Symbols)The description text displayed under the icon and above the CTA button.
CTA Button TextString (Letters, Numbers and Symbols)The text displayed inside the CTA button.
Use Best Fit On CTABoolean(true/false)Tick this box to automatically resize the button text to the best fit.
CTA Font ColorClick on the color bar to open the color context menu and begin choosing a color.The color and the opacity of the CTA button text. If needed, you can set the opacity to 0 to remove the text.
Description Font ColorClick on the color bar to open the color context menu and begin choosing a color.The color and the opacity of the description text. If needed, you can set the opacity to 0 to remove the text.
CTA FontFont file(.ttf, .otf)Drag & drop a font file in this field to change the font used by the CTA button text.
Description FontFont file(.ttf, .otf)Drag & drop a font file in this field to change the font used by the description text.

Portrait Settings#

Use this settings to edit the appearance of the end card in portrait mode.

images-large

Landscape orientation fields will not update the end card's features while in portrait orientation.

Description and CTA Button#

FieldType/OptionsDetails
CTA Font SizeSlider (which changes a float value)The size of the CTA button text, the larger the value entered the larger the text will be.
Description Font SizeSlider (which changes a float value)The size of the description text, the larger the value entered the larger the text will be.
Center Description XBoolean(true/false)Tick this box to center the description text along the X axis.
When this field is set to true, the description will be fixed in the center of the playable. Setting this back to false will allow this object to be moved along the X axis again.
Center Description YBoolean(true/false)Tick this box to center the description text along the Y axis.
When this field is set to true, the description will be fixed in the center of the playable. Setting this back to false will allow this object to be moved along the Y axis again.
Center Button XBoolean(true/false)Tick this box to center the CTA button along the X axis.
When this field is set to true, the CTA button will be fixed in the center of the playable. Setting this back to false will allow this object to be moved along the X axis again.
Center Button YBoolean(true/false)Tick this box to center the CTA button along the Y axis.
When this field is set to true, the CTA button will be fixed in the center of the playable. Setting this back to false will allow this object to be moved along the Y axis again.
Description Position XSlider (which changes a float value)Use the slider to translate the description text along the X axis.
Description Position YSlider (which changes a float value)Use the slider to translate the description text along the Y axis.
Button Position XSlider (which changes a float value)Use the slider to translate the CTA button along the X axis.
Button Position YSlider (which changes a float value)Use the slider to translate the CTA button along the Y axis.

Icon#

FieldType/OptionsDetails
Center Icon XBoolean(true/false)Tick this box to center the description text along the X axis.
When this field is set to true, the description will be fixed in the center of the playable. Setting this back to false will allow this object to be moved along the X axis again.
Center Icon YBoolean(true/false)Tick this box to center the description text along the Y axis.
When this field is set to true, the description will be fixed in the center of the playable. Setting this back to false will allow this object to be moved along the Y axis again.
Icon Position XSlider (which changes a float value)Use the slider to move the icon along the X axis.
Icon Position YSlider (which changes a float value)Use the slider to move the icon along the Y axis.
Icon SizeSlider (which changes a float value)Move the slider to change the size the icon.
Round Edged On IconBoolean(true/false)Tick this box to round the edges of your icon.

Landscape Settings#

Use this settings to test the landscape orientation of your playable.

These settings function in the same way the The landscape settings are separated from the portrait fields in the inspector. In this way, you are able to create a different behavior for your end card when the user is using landscape orientation.

If you are using a portrait orientation the landscape settings will not update the end card's features.

images-large

Clickable Options#

In this field, you can specify which part of the end card will be clickable and linked to the app store.

OptionsDetails
CTA Button OnlyOnly the CTA button will be clickable in the end card.
FullscreenThe entire screen will be clickable in the end card.
Fire App Stop Click On ShowThis options will automatically click on the end card when it is shown for the first time.

Animation Settings#

The end card builder also provides different animations for the CTA button and the end card entry.

FieldType/OptionsDetails
Button Animation Type- None
- Wobble
- Scale
- Opacity
The animation for the end card button. The default value is Wobble. You can check them here.
End Card Portrait Animation Type- None
- Slide Top To Bottom: The end card enters from the top of the screens going towards the bottom
- Slide Bottom To Top: The end card enters from the bottom of the screens going towards the top
- Scale
: The end card enters in the scene by expanding from the middle of the screen until it reaches the required measurements.
The appearance animation type for the end card in portrait orientation, which controls show the end card arrives on screen. Default value is Slide Top To Bottom. You can check them out here.
End Card Landscape Animation Type- None
- Slide Right To Left: The end card enters from the right of the screens going towards the left side.
- Slide Left To Right: The end card enters from the left of the screens going towards the right side.
- Scale: The end card enters in the scene by expanding from the middle of the screen until it reaches the required measurements.
The appearance animation type for the end card in landscape orientation, which controls show the end card arrives on screen. Default value is Slide Right To Left.

Button Animations#

images-xsmall

End Card Entry Animation#

images-xsmall