Creating a Level Up Bar

 

Welcome to another post by Game Building Tools! In today’s post, we will be covering level up bars. In the forums and in other tutorials, I see people using Corona’s newRect to create a rectangle or custom images to handle level up bars. Instead of using these traditional methods, I’m going to show you how to easily create one with Corona’s widgets.

For some of you, widgets are a touchy subject because they don’t do x or they don’t do y. I’m not going to touch on those topics (that should be saved for Corona staff), but I will show you how easy they are to use in game development. So, let’s get started!

Our first step is to declare some variables within our game. We will be setting up three variables – inc, levelUpBar, and player. The variable inc will store the level up bar increment (more on that later) and the levelUpBar and player variables will store the level up bar and player objects.

-- Declare some variables
local inc = 0.0
local levelUpBar, player

Using Corona’s built-in features, we are going to use the Progress View widget for our level up bar. This progress view is exactly what it sounds like, it’s a bar within a bar to show progress. In most cases, this type of view is used to show the progress of some type of process. For example, if you have to download a large file in your app, you may want to show a progress view to visually show the user where the download is at. In our case, we will be using the progress view as a level up bar. Here’s how to set the widget up.

-- Set up the level up bar using a widget
levelUpBar = widget.newProgressView {
   left = display.contentWidth*0.5-100,
   top = 300,
   width = 200,
   isAnimated = true }
levelUpBar:setProgress( 0 )

The widget is fairly simple. We set the top and left location, set the width of the widget, and set isAnimated to be true since we want it to look cool.

Next, we will set up a function to handle when the player gets hit. Since I want to keep things simple, this function will only fire when the user taps the player. In later tutorials, I’ll go into more depth about this and explore how this function can be fired when a player grabs a coin or a star to level up their player. With the progress view widget, Corona has set the progress to be between 0.0 and 1.0 and this is where are inc variable comes into effect. When the function is fired, we increase the inc variable by 0.2 and then update the level up bar to show the latest progress. So, our user only needs to hit the player 5 times before leveling up. On the fifth time, the app will print level up! to the terminal.

-- Create a function to handle the player level up
local function playerHit(event)
	if(event.phase == "began") then
		inc = inc + 0.2
		if(inc >= 1) then
			print('level up!')
		else
			levelUpBar:setProgress( inc )
		end
	end
end

Finally, we add a player to the screen. I know that a circle is unimaginative, but it gets the point across. The feature to remember is to add an event listener to the player object. The event listener tells our app when to fire the playerHit() function and it will only be fired when the player is touched.

-- Add a player to the game
player = display.newCircle(0,0,75)
player.x = display.contentWidth*0.5
player.y = 200
player:setFillColor(0,200,0)
player:addEventListener("touch", playerHit)

And that’s it for creating a level up bar! Pretty simple right? In later tutorials, I will show you how you can use this easy to use code in a game. Since I always like to see all the code at once, here’s the full set of code. If you would like to see more tutorials, please leave a comment or get a hold of me on twitter! Thanks for reading!

-- Declare some variables
local inc = 0.0
local levelUpBar, player

-- Set up the level up bar using a widget
levelUpBar = widget.newProgressView {
   left = display.contentWidth*0.5-100,
   top = 300,
   width = 200,
   isAnimated = true }
levelUpBar:setProgress( 0 )  

-- Create a function to handle the player level up
local function playerHit(event)
	if(event.phase == "began") then
		inc = inc + 0.2
		if(inc >= 1) then
			print('level up!')
		else
			levelUpBar:setProgress( inc )
		end
	end
end

-- Add a player to the game
player = display.newCircle(0,0,75)
player.x = display.contentWidth*0.5
player.y = 200
player:setFillColor(0,200,0)
player:addEventListener("touch", playerHit)
Daniel Williams

Leave a Reply

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