ComboMeter - Unreal Plugin
Quick Overview - Video
ComboMeter is a Unreal plugin, I've developed for my own game. It's similar to many of our combo counter/guage we have seen in our favourite action games.
It's designed to be extensible and event driven, so that you can easily customize it to fit the needs of your game. A well designed API so that you never have to look at the C++ code if you don't want and if the need arises you can easily extend the functionality by extending necessary methods to fit your game.
Before we get started, I want to thank Pobrenerd for releasing the font Nebulous to public domain which is used for creating the Rank texture.
@Pobrenerd, I am unable to contact you on Fontspace. Please DM me on YouTube from your official channel as this is the only way to verify your identity as per your account.
Getting Started - Installation and initial setup
Once you have created a C++ unreal project and added the ComboMeter Plugin to your game restart the editor if necessary.
If you have created a Blueprint project, you need to at least create a C++ class for a PlayerController. This is required by the Unreal engine in order to compile the source code of the ComboMeter plugin in the shipping build due to some weird requirement which may not be necessary by the time you read this. But just to be on the safer side, go ahead and create the PlayerController class and add the below code in the construct of your PlayerController class. This adds the ComboMeter plugin to the PlayerController class.
Don't forget to add CA_ComboMeter to the list of PublicDependencyModuleNames of your game build.cs file and include the Components/CA_ComboMeterComponent.h . Once the above changes are completed, you should be able to successfully compile the code.
Adding ComboMeter to Your Game
If you followed the above steps, now you should be able to add ComboMeter functionality to your game. For this you need to create a PlayerController Blueprint inheriting the C++ PlayerController you just created.
If you open your PlayerController Blueprint class, you now see a ComboMeter component added in the components list. If you click on it, you will see the properties you can customize.
The ComboMeter plugin comes with two items -
ComboMeter Component
ComboMeterWidget
The ComboMeter Component is what you just created on the PlayerController. It handles the typical logic of the ComboMeter.
The ComboMeter Widget is what you actully visible on the UI(The quick look).
This seperation is done so that if you need to roll out your own widget you can easily do it.
With that said, the plugin already comes with a fairly fully featured example of the ComboMeterWidget that you can customize and readily use.
To use the ComboMeterWidget provided with the plugin, create a Widget inheriting from the ComboMeterWidget and add it to the screen, perhaps as the child of another widget to easily set the position of the ComboMeterWidget, as shown in the video below. Don't hit play yet as we still have some setup to do.
You may have noticed that the ComboMeterWidget doesn't render anything when you added to the container canvas. This is because, right now the widget is in the ZERO combo level which shows a blank texture. In order for the ComboMeterWidget to show Combo Levels/Ranks during gameplay, you need to specify what ranks you have in your game.
You specify the rank details, go back to your PlayerController Blueprint and click on the ComboMeter Component to open the properties section.
In the properties section, under the ComboMeter section, click on the + icon to add the ComboLevel Details. You should see that in the drop down there is already ranks available which have already textures to render the Rank details. When you want create custom ranks or textures for these rank you will create these ComboLevel Blueprints which I will show later. But for now add the ranks already available.
And finally, you need to tell how the ComboMeter should decay the points. As this is specific to your game, you need to create a Curve blueprint to tell how it should decay depending on how much the ComboMeter is currently full. After creating the Curve asset add it to the Combo Decay Curve property.
And finally, create a GameMode Blueprint so that we can actually use the PlayerController BP we just created. While you are at it, go ahead and create a Character Blueprint as well so that we can actually add some fake logic of doing some combos and see the ComboMeter in action.
Make sure that you have added the PlayerController Blueprint to the game mode as this Blueprint is the one that has the ComboLevelDetails and the ComboDecayCurve Asset. The Widget you added for ComboMeter will look for these two to initialize itself when added to viewport. If not found, the widget will assert throwing an error.
Unfortunately, you don't see anything right away as the ComboMeter is in decativated state and not keeping any score.
To show the ComboMeter functionality I will create a fake game. In this game, which will be really stupid simple, pressing each of the number keys on the keyboard is considered as performing a particual move like may be a melee attack or an air attack. This is done by calling AddComboPoints on your ComboMeter Component. Let's call this method from the PlayerCharacter Blueprint as that is the Blueprint that will primarily handle the user inputs. But before calling AddComboPoints, we also need to activate the ComboMeter. You do this by calling StartScoring on the ComboMeter.
You will notice that the AddComboPoints takes Points as input. This is the points you will see filling up the ComboMeter. But how should you calculate the points? The points should be calculated based on the variations in the moves the user makes and punished for repeating the same moves over a short period of time. Luckily, the plugin alread has a default implementation of this logic that you can customize from the property values. To calculate the points on user executing a move successfully, call the CalculatePoints on the ComboMeter passing it a MoveId and the Weight of the move. The ComboMeter uses this MoveId to keep track of the moves the user has executed. The Weight parameter can be used to indicate the weight of the move. It can be anthing above 0. For example, a light melee attack can have a Weight of 0.7 and an explosion that hit multiple enemies can have a Weight of, say 10. The ComboMeter will be maxed depending on the number of Ranks/Levels you have provided in the ComboDetails property.
Once you have done this, hit play and start pressing the number keys to see the ComboMeter in action.
As you will see in the first video near the end, executing the same moves(forgot to update the MovesId :)), determined by the MoveId, I couldn't bring the ComboMeter Rank up. Once variation are added by calculating the points by providing different MoveId's, depending on the combo executed and the variations the ComboMeter lit up.
You also saw a number of properties for the ComboMeter. The default values should provide a good starting point for any game. You can hover over the properties to see what exactly they do. Below I show a simple example of customizing a few properties and how the affect the ComboMeter.
Rank Screen
Rank Screen Widget has been added to the Combometer Plugin. Here is a quick demo. This feature will be coming along with the 5.2.0 update. As usual, the animations, texture and ranked stats will be fully customizable. Documentation.
Save Function
Save function is provided with the latest version of the plugin. Find the documentation here.
Quick Tutorials
Customizing Ranks
To customize ranks, you need to create -
ComboLevel Blueprint - You can store any data in this blueprint then when this combo is reached you can listen to OnComboLevelUpdate event and retrive this data as shown in the video.
Textures - If you want to customize the appearance of how the rank is shown on the screen. You need atleast the MainTextTexutre, FillTexture and DamageIndicatorFillTexture in order to achieve the result of the default implementation. Customizing Rank - Youtube
Blueprint Events
The ComboMeter Component triggers a number of events such as when the rank level changes, ApplyDamage is called etc. You can use these events to do various cosmetic changes like playing animations, material parameter updates etc. The ComboMeterWidget provided with the plugin is a good example you can use as a reference. Here's a quick video of showing score - Blueprint Events - YouTube
Creating Your Own Materials for the ComboMeterWidget
You can create your own material, of course. Once you created your UI material, you can set the FIllMaterial property of the ComboMeterWidget you created.
The ComboMeterWidget C++ code, uses this Material to instantiate a dynamic material and sets below Parameters on it during the lifetime of the Widget. The names of these parameters are listed in the Property section as shown below. If you want to write your own material, you can depend on the parameters to update your material as per the score.
Again, you can use the ComboWidgetUIDefaultMat provided in the content folders of the plugin as a reference to write your own.
Pausing, Resuming and Calculating Ranking
You can Pause and Resume the ComboMeter whenever required. Once you call StartScoring on the ComboMeter the score is kept depending on the Rank the user has currently acheived. Of course, you want to keep score during combat. To do this, once you call StartScoring, outside of combat call PauseScoring to, well pause scoring the player. And to resume scoring, call ResumeScoring.
To calculate the Ranking, say at the end of the current level, you can call the CalculateRankingAvergate to get the Rank. This Rank will be between 0 and the total number of ComboLevels you have provided. This YouTube Video show a simplified example.
Support for Plugins
Discord
Dedicated support will be provided on Discord. Please leave a comment in the comment section of the ComboMeter plugin, if you want to be added to the discord server.
As this plugin is something I'm developing for my own games as well, continuous updates and fixes will be provided. Please report any bugs and reports in the Discord server for WorldMatrixGames. You should be getting the invite once you have purchased the plugin in the Epic Games Store.
Examples
To make things easier, the examples are now directly included in the plugins.
You can find the examples under the plugin folder at the below locations -
Phew! That was a lot...
Let's make great games! See you soon :)
