Category: Uncategorized

Posted on

Dream Build Play – Graphical Updates

There’s only a little more than two weeks left in the Dream Build Play 2017 competition.  I’ve been really busy between work, the Ludum Dare 40 competition, hosting and editing the Knoxville Game Design podcast, and visiting fellow game developers in Lexington, Kentucky.  However, I did manage to find some time tonight to spend working on my Dream Build Play entry called Turn Back the Clocks 4.

I really didn’t update any of the gameplay tonight, and I solely focused on making the graphical user interface stand out.  The first thing on the laundry list in my head was to display the individual points scored for each clock hit.  This is the ball score (5 points for blue, 10 points for red, and 25 points for yellow) multiplied by the current combo.  I really need to add a screen which explains the points system.  Now whenever a clock is hit, the associated score is displayed below the total score and scrolls downward and fades out.  The score text is also the same color as the ball which hit it, so the player can see the score made from one of the bonus (red or yellow) balls.

One problem that I noticed was that the blue text was too difficult to read.  I ended up picking a lighter shade of blue on the Shades of Blue Wikipedia page called Crayon blue, which is #1F75FE in hex or (31, 117, 254) in RGB.  The Unity color selector for the Text component accepted the hex value, but I had to remember to divide those three values by 255 to set the light color in code in Unity, because the Color object expects the RGB values to be floats in the range of 0f to 1f.  I also updated the blue in the clock texture to match accordingly.  I made constant Color variables in my Ball class to hold the red, blue, and yellow ball colors.  This way if I ever need to change the color again, I’m only need to update the color in the Ball constant.

Another change was making the board color lighter.  This made the balls and activated clocks stand out better, but I also had to darken the color of the inactive clocks which were already light gray.  Since the board used the same material as the title text, I duplicated that material.  I haven’t found a way to duplicate materials in the Unity editor, so I just have to select the material and display in explorer, and then copy and paste the material.  Now the title screen has a copy of the material, which I made a golden color.  I disabled the material normal map for the title text, because it looked too gritty.  I also updated the title mesh in Blender, and lined up the Y coordinates of the front vertices of the mesh.  I could see artifacts of the triangles in the light which looked bad.  Lining up the vertices can be done in Blender by scaling by zero on the Y axis.  It still really didn’t look the way I wanted, so I selected the front faces and turned off smooth shading, which fixed the problem.

Turn Back the Clocks 4

Going back to the graphical user interface, I thought that the “PERFECT” display looked really plain.  I ended up writing a simple script which scaled the text in and out on the X axis.  I set variables to track if the scale is expanding or contracting along with the rate, minimum, and maximum scale values.  Once the scale value hits one of those boundaries, I flip the sign of the rate value which is multiplied by Time.deltaTime.  I also made the perfect text green, so it stands out from everything else on the screen.  When all of the clocks are enabled, I also added a 20000 score display in green to the the scrolling score values.  There is a slight problem in that the 20000 score displays at the same time as the score of the last clock hit, so it overlaps it.  However, I think that is fine as long as the 20000 score is on top, which is more significant.

The last interface change I made was to the combo display.  I broke the word “Combo” and the multiplier display into two separate text objects.  That way I could keep the size of the “Combo” text the same and scale the size of the multiplier text.  Using some math, I made it so that when the combo value is displayed or incremented, it is twice the regular size, and scales down to normal size during the combo period.  I thought that this emphasized the point that the combo expired over time.

There are a few more changes that I want to make before the competition is over.  I want to add different configurations of the clocks.  I’m not sure if I’m going to do that programmatically or define the layouts in a data file.  I may just have the player play through each of the levels sequentially, but it would be nice if I had a level select screen, with target scores for each of the levels.  If I did that, then I would need to update my leaderboard PHP code and MySQL database to accept scores for different levels on a game.  It wouldn’t be that difficult of a change to make, and it would definitely be useful for leaderboards in my other games.  Games with just one leaderboard could just set the level number to a default value like 0 and just ignore it.

I would also like to include a few more mini-game bonuses like a slots that are enabled if you meet certain conditions.  I’m not sure if that would be when a ball falls in a certain area (like in pachinko) or if it’s enabled when all of the clocks are activated.  I think the extras would all be based on luck, such as spinning a wheel for a bonus.  It would just be something a little different to break up shooting and watching the bouncing balls.

 

Posted on

Dream Build Play – A Change in Plans

This is the last few weeks of the Dream Build Play 2017 competition, and I’ve decided to put my action-RPG game Myriad on hold.  The game just has too far to go in order to make it a completed game and respectable entry.

In it’s place, I’ve decided to make Turn Back the Clocks 4 my Dream Build Play entry.  Honestly, I’ve enjoyed playing it more than any of the other games I’ve created.  I started working on the game in early November, so using it does not break any rules of the Dream Build Play competition.  Plus, there’s a story that goes along with the development game, since it was originally created for the 0hGame jam in an hour.

I’ve spent the past few weeks improving the gameplay and graphics.  I feel like there’s just a little more to do to make it a complete game.  I need to fix the way the balls move in the line as they are shot.  Right now, each ball just targets the position to where it needs to move, but that doesn’t work correctly when the balls are shot rapidly.  I would also like to have the score display for each clock hit, in the color corresponding to the ball which hit it.

The game already has leaderboards implemented, so I’ll just need to remove the screen with text entry to use the XBoxLive services.  I still plan on using my own host to store the leaderboard information, so I’ll just pass the user’s gamertag and score to the leaderboard function.

I also need to do some small changes to graphics.  I want to make the board a little lighter, so that the balls stand out better.  Then I will need to make the inactive clocks darker, so that they stand out against the board.

Modifying the controls to work on XBox One shouldn’t be too big of a problem.  I’ll just need to assign button input events to each of the buttons, like I did with my Kitty’s Adventure game.

Posted on

Unity Health Bar Explained

The following are the steps that I used for creating a health bar using the Unity UI system for my Shark Food game.  Many of the settings for the size and images can obviously modified to meet specific needs.

First, create two images for the background and foreground.  This can be done in Gimp, using the dimensions 512×64.  For the meter fill,  use the Filter > Render > Clouds > Difference Clouds.  Then use Colors > Colorize to make the bar red (hue value 0) and increase the saturation and lightness.  Create the background by simply filling the entire image with black (Edit > Fill With BG Color).   Set the opacity for the layer for the background image to 50%.

Export both of these images to PNG format.  Save the image files in a folder named Sprites in the Assets folder of the Unity project.  Select both images and set Texture Type to Sprite (2D and UI) and press Apply. 

 

 

Create a new Canvas object.  I recommend setting Canvas Scaler to Scale with Screen Size and set Reference Resolution to 1920×1080.

In my Shark Food game, the health is stored in a float variable in my custom Shark class called fHunger.  This value ranges from 0 to 100, which is ensured by using the Mathf.Clamp function after it has been set.

Under the Canvas object in the Unity Hierarchy, create two new UI > Image objects.  Ensure that the image with and height match the same dimensions of the health bar image.  Assign the background image to the first one and the foreground image to the second one.  A Text > UI object can also be created to display the value on the health bar.  Parent the foreground Image and Text object to the background image object.

Add a new UI > Mask component to the background image.  Ensure that Show Mask Graphic is selected.

Create a new custom C# script for the health bar.  I called mine HungerBar.  Attach this script to the background image object.  Open the health bar script in an editor (I used Visual Studio) and add a line of code in the Update method to set the position property of the foreground image.  Use Find on the transform to get the foreground image.  Alternatively, create an Image instance variable and assign the foreground Image in the Inspector.  Use GetComponent<RectTransform> to get the localPosition property of the foreground Image.  Declare a float instance variable for the x position.  Set the localPosition property to a new Vector3 with the x property set to the instance variable and y property set to zero.

Create a setValue  method, which sets the instance variable to the passed in value times the health bar width in pixels, minus the health bar width.

Whenever the health value is updated, call setValue and pass in a value from 0 to 1.  This was in the updateHunger method of my Shark class, which gets called on every Update.

The health bar object can be returned with GameObject.FindObjectOfType<HealthBar>(), assuming that you only have one health bar in the scene.  Since my hunger value was a float from 0 to 100, I divided by that value by 100f before passing it to the setValue method.  The text can also be set by using GameObject.Find and setting GetComponent<Text>().text .  Be sure to import UnityEngine.UI, because it doesn’t get added by default.  If the intellisense doesn’t work for the Text object, it’s usually because of the missing import statement.

That’s all there’s to getting a health bar working.  It’s fairly simple once you know the steps and settings.

Another example is the time bar that I created for my Archaeology game.  For this bar, I modified the background image, so that it is in the shape of an hourglass.

Then I created a new image, selected the background image shape and filled with an outline color.  Then I shrank the selection by one pixel, then cleared the selection to make a one pixel outline.  I created a new Sprite in Unity, and used the outline image for this new image.  It is important that the outline is not parented to the background image (since it would be affected by the mask).  Instead, it should be placed at the same level as the background image, but it is important for it to come after the background image in the heirarachy, otherwise it will not display.

I made a function that returns the amount of time remaining in the game as a float from 0f to 1f.  For the position code, I multiply the percentage float by the negative height of the image (128 pixels).  So as time progresses, the foreground image will gradually move downward, until it reaches the bottom of the image.