The StageClearWidget Is the widget that actually manages all the functionality of the Ranking Screen.

It takes care of adding the StageClearWidgetItems to the screen, manages their lifecycle animations etc.

You need to configure two canvas panels in the StageClearWidget - one to display your main stats and one to display any bonus and penalties.

Important: You need to name the CanvasPanels you have added for holding the main stats as Root and the one used to hold the bonus and penalties as BonusAndPenalty. The StageClearWidget looks for these to panels to add the widgets on the screen.

The StageClearItemWidget is the widget that displays your individual Stat or BonusAndPenalty items you want for your game. For eg. You can have stats such as clear time, score achieved and BonusAndPenalty such as number of deaths, retries for Penalties and Headshots, no items used for bonuses. Technically, there is difference between stats or bonus and penalties other than penalties will have most likely negative score where the stats and bonuses will have postive socre.

Since the Stats and BonusAndPenalties will look very similar, to reduce the amount of work, I recommend to create a base StageClearItemWidget with all the structure and style you need for your individual items with variables exposed to customize your individual items.

To facilitate this there is already a sample StageClearItemWidget provided in the plugin that you can extend as per your needs.

In the demo video, I extend the StageClearItemBaseBP provided along with the plugin to create my own ClearTimeStageClearItemBP widget. I also override the GetStatText BP function to convert the score that will be in seconds to display time in the format HH:MM:SS.

In a similar fasion, you can create StageClearItemWidgets for other stats such as Score Achieved, Enemies Killed etc

As mentioned above, Rankers actually determine how a score should be ranked from D-SSS(or whathever the ranks you have for your game).

For the ClearTimeStageClearItemBP I just created, I will create a CurveBasedRanker that uses the CurveFloat provided to it to rank the score achieved. I'm going to use the curve already provided in the plugin for a similar example StageClearItemBP in the examples provided along with the plugin.

Similarly, I created a LinearRanker for enemies killed and LogarithmicRanker for score achieved. You can find the details on how these work below.

Now you have all the individual parts to put together a ranking screen. 

Let's assume you have varialbes setup in your PlayerController for each of the stat you want to rank your player on. When you want to show the rank screens, let's say at the end of your level, you will need to - 

1. Create an instance of your StageClearWidget

2. Add the stats to the Stats variable on the StageClearWidget

• Each stat needs to be suppied with - The StageClearItemWidgetBP, a Ranker and the Score the player achieved

3. Add the created instance of the StageClearWidget to the viewport by calling AddToViewport.

4. Finally, when you want to kickoff the process, call Activate on the instance of the StageClearWidget

Once all the Stats are displayed, then the StageClearWidget emits the final Rank computed based on the provided Stats. Again, you can customize the final rank in a few ways

1. Computing the final rank based on the total score

This is suitable when you have items in your stat that aren't ranked(e.g, a negative stat for using revival items). To used this method, check the Compute the final rank based on the total score flag on the StageClearWidget and provide a suitable Ranker for computing the rank based on the total score(sum of all the indivual Stats)

2. Computing the final rank as the average of the individual ranks

This is suitable if all the stats and bonus and penalties you have for your game can be ranked. Then, the final rank will be the average of the individual ranks. To use this method, uncheck the Compute the final rank based on the total score flag on the StageClearWidget

3. Overriding the ComputeFinalRank on the StageClearWidget

Override the ComputeFinalRank on your StageClearWidget to provide custom ranking strategy.

See the implementation details in the demo

If you look at the example Ranking widget provided in the plugins directory, you will see that there are three ways in which you can incorporate animations thoroughout the lifecycle of the Ranking widget.

1. Lifecycle animations of StageClearWidget

The lifecycle animations of the StageClearWidget is useful for showing titles or any other effects on the main screen before showing the individual stats

All you have to do is create animations for the StageClearWidget and set the StageClearWidgetLifecycleAnimations to a struct containing these animations and the StageClearWidget will automatically play these animations before showing any of the stats.

2. Lifecycle animations of the individual StageClearWidgetItems

Each StageClearWidgetItem for the player stats, have thier own lifecycle animations that are played when the StageClearItemWidget is added/removed to the screen.

To avoid duplication of work creating the same animations for every StageClearItemWidget corresponding to the individual Stat, the best way is to create a base StageClearItemWidget and create the animations for this base widget alone, and create subclass of this base widget for each stat you plan to have for your game. Once you add the Init, Ranked and Exit animations to the corresponding properties of the LifecyleAnimations variable of the StageClearItemWidget, these animations will be automatically played when you Activate the StageClearWidget.

3. Custom Animations

There are many instances where you need to add your own animations in response to the events emitted by the StageClearWidget and StageClearItemWidgets. For eg, when the final rank of the player is calculated based on the individual stats, you would want to animate the final rank by animating gradually the image on the widget. You do this by initially setting the Render Opacity of the image for the rank in the StageClearWidget  to 0 and when the OnFinalPlayerRankComputed event is emitted, you can play an animation that animates this value to 1.