Phase 1: Thrusters and more UI
Objective: Add Scaling Bar to show thruster availability.
Before adding the objective, I felt some clean up was needed. I changed the space background and added a simple dash UI panel around the screen. I scaled the player, enemies, asteroid and all collectables down slightly to give more room on the screen for movement. The player lives img was moved on top of the panel and turned sideways.
I then added a scrolling background script for a nicer visual when the game is running. This required making an empty game object and making a second copy of the background. A rigidbody and collider were attached to both copies of the background. To position the second background ahead of the main one, I took the size of the colliders Y and made that the position of the second background. The rigidbodies were both set to a kinematic body type and the background script attached to each.
Within the scrolling script, private rigidbody and box collider variables are created and assigned within the start method using get component. A private float is also created called background y length and assigned to the box colliders size y. The rigidbody velocity is set to a new vector for movement.
Inside the update and if statement checks to see if the background passes the y axis at a position greater than the negative y size and if so moves the y position to the positive y position leaving both x and z as they are.
For the thruster sprite add a UI image to the canvas and set the source image. For the thruster I want to use two UI images, one for a background and one to scale with the thruster fuel. The second image is placed inside an empty game object which is placed on top of the background UI image. Using the gameobject will allow the inner image to have its pivot point changed so scaling doesnt grow both directions.
Next in the UIManager, create a private image to set which image will be used(I have a second blue image for when the thruster is charging) and also create a serialized sprite array for the images then set these in the inspector. Create a private bool to know when the thruster is charging and set it to false.
Next create a public UpdateThruster method that takes a float. Inside this run an if statement to check if is charging is true. If true use the blue image and if not use the yellow/orange image. After the if statement set the thruster level img rectTransform size with anchors by the axis and the passed in float value. To account for the is charging bool, create a public Thrusters charging method that takes a bool and assign is charging based on the input.
For the thruster behaviour we will set it up that there is 3 seconds of thruster fuel. The thruster will auto fill if not used at 9 seconds per 3 second tank. If the thruster is fully used it deactivates and stops usage for 3 seconds while a coroutine runs during the charge period of 3 seconds. While the charge is running the blue image shows on the truster showing that the thruster is currently disabled. This charges at 3 seconds for 3 seconds.
For this we need a float varaibles for thruster level, can thrust, thruster charge time and two bools for is active and is charging.
In the update method a get key up and get key down are set to activate and deactivate the thrusters. To activate a second requirement of can thrust being less that Time.time is needed. A ThrusterUsage method is also called to check if thrusters are active or charging. If active and levels are higher than 0, level is decreased by time.deltaTime and a call to the UI managers updates thrusters with the fuel level is passed. If levels hit 0, thrusters deactivate and start the coroutine and set the new can thrust time to thruster charge time + Time.time. The UI manager is also updated of the thruster fuel level.
In the next post, we will look at adding UI for Ammo
