Adding Shield Strength And Color Change When Damaged And Tying It To UI Sprite Sheet

So, I ran into quite the ordeal when writing this and ended up redoing the entire thing. For some reason Unity crashed and my player script became corrupted so I ended up redoing it and taking a different approach to it anyways. It ended up pretty awesome in my opinion.

Anyways, hi all! So, today I am writing this article on adding a shield health system with visual representations through color change on the shields, with matching UI representation. Pretty awesome. So, as I said I had a different system in place that instantiated a prefab shield but my script crashed. So, I took a different approach to adding the shields. Then I added a health system to them. Then I tied it to the UI. To do this, I started with my shield on the player. Then I scripted it to be disabled at start(). And I created several variables. One for the shield, a bool for my check if it was active or not, an int for hits, an array for the my colors, a sprite renderer for my new shield colors, and a check if my shield was destroyed.

Then I made sure it was off at the start as well as the collider by setting the sprite renderer and the collider2D enabled to false at start(), and setting my shield hit points to 0 because there is no shield on start.

After dragging and dropping all that into their respective spots in the inspector, I added 3 colors to my color array and adjusted them to where I wanted them and thought they looked ok. You can make whatever color you want using the color wheel and its components.

After that, I made my shield activation method. This was then called in my modular powerup collectible system in a switch statement with a switch ID. (More on that here: https://medium.com/@jebonneygames/switch-statements-to-the-rescue-c9c578054ec7 and here: https://medium.com/@jebonneygames/creating-a-modular-powerup-system-in-unity-c31e06fb8c17 ). So, I altered my old method to include the new shield color and a method I made to activate the components I deactivated on the shield on start. Then set my bool and the shield hits to 3. I also made a shield damage method. (The UI manager comes in later.)

Then I altered my previous damage method which only had one shield and one hit to include functions to alter the color and shield damages if the shields were active and had a certain amount hit points. A function for each one. I actually tried tying all this to a shield script but it didn’t work properly and my switch manager script kept throwing errors, so I just put it all in my player script. Maybe because I was trying to reference a script method through 2 other scripts? I’m not sure to be honest. (I should also note, when you delete and rewrite a function or code, make sure you delete the whole old code you don’t need and don’t miss that last semicolon…ugh. It will not throw an error if it is right after your function but the function will not run. Just FYI.).

Anyways, so I put it all on my player script and called each function based on the shield hit points when damage was taken. Added damage to the shield, switched the color on my array, and added my UI component that comes in later. Then if it didn’t have any hit points left or was at 0, shut everything back off and set my shield active bool to false.

After that it would return to the normal damage method on the player without shields. I now had a functional shield health and damage system that changed the color of the shield based on its hit points to a selected color from my array.

Then it was on to UI. See how they match colors. I made a sprite sheet for that using photoshop and images taken of my shield with each color. I sliced it and sized each image so it fit in its square. I made 4 different sheets. One with all of them. One with transparency… or sorry, opacity in Photoshop, of the blue sprite turned all the way down. One with orange or yellow and blue turned down. And one with all three turned down. Then I saved them as pngs and imported them into my Unity project and made them sprites.

Then I went to my UI canvas and my UI manager script. First I added an image to my canvas and put my full shield sprite in the source image spot and set them to where they looked good. Then I dragged my empty sprite image into the source image spot once I knew it was where I wanted it to be.

After that I went to my UI manager script and added a sprite array variable for my different sheets. Then I added an image to change to the sprite I wanted to use from the array.

Then I made a method to change the image to whatever sprite I wanted from the array based on an integer system which would call the array index of the sprite I want to use.

Then back in my player script I added all the changes where they needed to be which you saw earlier. I couldn’t get it to work properly using the shield lives for some reason, it kept glitching out and going to the wrong sprites and taking 2 hits at once sometimes, it was odd, no idea why, so I just typed in the index where I wanted it to be and everything worked just fine. Kind of strange because it should’ve been the same number I manually typed in. No other changes were made. Anyways, that is how I made a shield health and damage system with color changes and custom UI elements of my actual shield and shield damage colors. Thank you for reading =).