included bitmap fonts

UberScore – A Score Counter Module for Corona SDK

René Free, Tutorial Leave a Comment

Maybe you know the situation: your game project is nearly finished and now you just want to add a score counter with some nice animation. And maybe particle effects to give feedback to the player. And maybe when a level is finished a small stats screen with animated counters would be fine.

The list of features for a nice score counter gets longer and longer …

This where my new UberScore module for Corona SDK comes in handy. It helps you to create a simple score counter with one line of code. Or a complex one with animated digits, particle effects, callback actions and so on (with slightly more lines of code).

UberScore contains the following features

  • simple to setup
  • animated counting
  • two different animation styles
  • animations are customizable with Corona tweening
  • comes with 9 different bitmap fonts
  • use your own bitmap fonts
  • custom number of digits and leading zeros
  • use custom actions to fire your own callback functions on a certain score value or score changing
  • 2 builtin particle effects you can use for custom actions

How does it work

Let me tell you how the score counter works behind the scenes so you better understand some concepts of UberScore.

To create animated score counting I implemented a score buffer. This means everytime you add a value to UberScore it first gets saved in a buffer.

When the animation is slower than the player gains points, no score points get lost because they are buffered.

You can decide if the buffered points get animated step by step from buffer to the display or in custom sized steps (to work of the buffer faster) or you can process the whole buffer at once.

And if you do not need animations, just a simple counter that immediately displays the score, you can do it. It is all customizable.

Installation

Download the UberScore module in your Download section. The UberScore module is available to all members of the free Basic membership and above. If you are not a member can sign up here for free.

Holy Squid!

Not a Member?

Get tons of useful files, articles and tutorials for free!


Creating a simple Score Counter

local UberScore = require( "devilsquid.uberscore.uberscore" )

-- create the UberScore counter and position in top left corner

local score = UberScore:new({
	fontName = "font01",
	fontSize = 128
})

The above code creates a simple score counter. Now to add some points you must use the Add() method like this:

-- add 15 points
score:Add(15)

This moves 15 Points into the buffer and displays them visually with the next update cycle.

If you just want a score counter as simple as it can be, then your journey ends here.

If you want to add some more eye candy, read on.

Animations

Add the following parameter to the UberScore:new()
animation = 1
like this:

local score = UberScore:new({
	fontName = "font01",
	fontSize = 128,
	animation = 1
})

This creates an animated counter. I have built in two animation styles. Set animation = 2 to activate the second style. See the animated GIF. If you set animation = 0 then the animation is off (this is the default value).

uberscore-intro-snippet1

You can customize the animations with custom transitions like this:

local score1 = UberScore:new({
	fontName = "font01",
	fontSize = 128,
	maxDigits = 4,
	x = _W2 - 200,
	y = _H2 + 200,
	animation = 1,
	transitionIn = easing.inOutElastic,
	transitionOut = easing.inOutElastic,
	animationSpeed = 1100
})

transitionIn is the animation for the new incoming digit. In animation style 1 this would be the new digit that comes in from below.

transitionOut is the transition for the old digit that moves up.

animationSpeed is the length of the transition in millisecs.

Bitmap Fonts

The UberScore module comes with 9 different bitmap fonts you can freely use in your projects.

Of course you can also use you own bitmap fonts. Here is how to do that:

The UberScore module does have a certain directory where to look for bitmap fonts. This is ROOT/devilsquid/uberscore/fonts/

Just copy your bitmap .fnt and .png file into that folder.

Then you can use the parameters fontName, fontSize and tracking to use it:

local score = UberScore:new({
	fontName = "myBitmapFont",
	fontSize = 128,
	tracking = 80,
})

The fontName must be the name of your .fnt file without the .fnt suffix.

Use fontSize to change the size of the font.

If the single digits are too close together or if the space in-between is too big, you can use the tracking value. It’s a value for the distance between the single digits.

Create Actions

Now lets say we want to fire a text message when a certain score is reached. Or lets fire a sound every time when 500 points or more are added to the score counter. Here the custom actions feature comes in handy.

The simplest custom action can be created like the following code, after you have initialized a UberScore counter like in the examples above.

score:CreateAction({ value=100 })

In this case if at least 75 points gets added to the score the built-in particle effect called „hearts“ get fired. You can use „stars“ for the other built-in particle effect.

The following triggers are possible:

  • match = exactly match the value
  • above = exactly match or above the value
  • below = exactly match or below the value (for negative score counter)
  • add = if an exact value gets added
  • addAtLast = if an exact or bigger as value gets added
  • sub = if an exact value gets subtracted
  • subAtLast = if an exact or bigger as value gets subtracted

If you are using Particle Designer you can use you own particle effects files. Just copy them the ROOT/devilsquid/uberscore/pfx/ folder. Then use the name of the .json file without the .json suffix.

Using Custom Callback Functions

If you use a different particle system or want to fire anything else, here is how to use a custom callback function:

-- create a custom particle effect when more than 75 points gets added to the score

local function MyCustomFunction()
	-- get the position and the width of the score counter
	local px = score.x
	local py = score.y
	local width = score:GetWidth()
	print("do my custom stuff here")
end

score:CreateAction({ value=75, trigger="addAtLast", callback=MyCustomFunction })

As you can see, it works like always with Lua closures.

Conclusion

The UberScore module brings a lot of eye candy to your score counter and it brings builtin methods to give feedback to the player. The setup is quite easy. And best of all – it is complete free!

Just signup to a free Basic membership and download it from your download section.

Thank you for reading and let the digits fly!
– René

  • Dear Fellow!

    Please consider to say Thank you
    by liking our Facebook page.


Links & Resources

Related Posts

  • How to write a concept to finally finish your game

    How to write a concept to finally finish your game

  • How to finish a game

    How to finish a game

Leave a Reply

Your email address will not be published. Required fields are marked *