Dev Blog

Tower Defense Tutorial – Brackeys – Ep. 23

digm520admin / / Programming, TowerDefense, Tutorial, Unity
March 2, 2019

Tower Defense Tutorial

Episode 23 – Enemy Health Bars

Youtube – How to make a Tower Defense Game (E23 HEALTH BARS) – Unity Tutorial

By: Brackeys
Ep. 23

In this tutorial we created health bars for the enemies.

We began by creating the foundation for the UI asset. We created a new World Space canvas, added a child UI Image object as our health background, then childed a UI image to that that would be our actual health bar. The BG was given a transparent black color, while the health bar was a fully opaque light green.

We then childed this full group of UI assets to our Enemy prefab. The position needed fixed when this was applied, and the scaling reset so I had to reset that manually as well. This created a health bar that would follow our enemies now. We would need a bit of a tracking script if our enemies rotated (so the health bar would not), but currently the enemies don’t rotate at all so this is not necessary.

To make our health bar actually do something, we started by dragging in a white square image to the source image of the health bar UI image, which was created for the tutorial. It was just a simple 2 x 2 white square. We then changed the Image Type to Filled, and selected the Fill Method “Horizontal”. This allows us to control how much of the image is “filled” horizontally, between 0 and 1 (0 – 100%). This has a very similar effect to what I usually script for health bars which is just a scale multiplier between 1 and 0 tied to the x scale of an object with the anchor point located all the way on the left/right. Either way, this still needs to be tied into health scripts.

Our fill amount for this health bar image needs to be between 0 and 1, so we need to represent our current enemy health as some fraction of our enemy max health. This is easy enough to do by simply holding a value for the max health and dividing the current health by the max health.

PROBLEMS

Bug

I found a bug where some of the turrets I was placing could not be upgraded. They were base turrets but when I selected them it already said they were “Maxed Out” and I could not upgrade them. It was only a select few turrets, and I realized they were in locations where I had an upgraded turret previously and sold it to make room for a new turret.

I believe this bug is simply caused by the fact that the state of upgraded is tied to the node location, so when we upgrade and then sell, the upgrade state is not being reset. That should be a simple fix of resetting the upgrade state when the Sell method is invoked.

Solved

This appeared to be the case as the bug hasn’t come back since I simply added a line to set the isUpgraded bool to false in the Sell method of the Node script.

SUMMARY

  • Another way to create health bars: under the Image (script) component; select image type Filled, and choose Fill Method “Horizontal”

Tower Defense Tutorial – Brackeys – Ep. 22

digm520admin / / Programming, TowerDefense, Tutorial, Unity
March 1, 2019

Tower Defense Tutorial

Episode 22 – Main Menu

Youtube – How to make a Tower Defense Game (E22 MAIN MENU) – Unity Tutorial

By: Brackeys
Ep. 22

In this tutorial we created the Main Menu scene for the game.

We duplicated the original game scene to start, and deleted out everything except the Light, Main Camera, and Environment. Then we only kept the Ground Plane from the environment. We then added a Standard Turret Prefab to be a central object for our menu.

We then edited the sky box to something other than the Unity default. We selected Solid Color for it, and used the color picker to pick the top most color of our ground plane so the sky matched this very final gradient of color. This made it seem like the background was one solid, endless color gradient for the most part.

We then created a World Space canvas with text fitted to it for our PLAY text. We placed this on top of the turret prefab in our menu. We then wanted to make this text clickable, so we just added a Button (script) component. This basically turned the text into a button for us. We could even add our previous animation by simply adding an Animator component and selected our Button Controller for the Controller.

We then created the MainMenu script which will hold the main functionality of this scene. This started by creating public Play and Quit methods for our Play Button and Quit Button. Quit was just Application.Quit, and Play loaded our MainLevel scene.

Finally, we added a bit of animation to our Main Menu to utilize the fact it is set in a 3D environment. We added the two button canvases as children to the PartToRotate object of the turret, and created a quick animation for that that just rotated the entire turret and UI element back and forth a bit over time. This really made the menu feel alive and 3D.

SUMMARY

  • To set current editor view as camera view: select camera and press: Ctrl + Shift + F
  • Set skybox to solid color and use color picker to select farthest/top most color of ground plane for a quick/easy way to make ground and sky look like one coherent background
  • When referencing scene names, make a string and set its value to that scene name so if at any point you want to change the scene name, you just change that string variable’s value and it will fix it in all locations needed

Tower Defense Tutorial – Brackeys – Ep. 21

digm520admin / / Programming, TowerDefense, Tutorial, Unity
February 28, 2019

Tower Defense Tutorial

Episode 21 – Pause Menu

Youtube – How to make a Tower Defense Game (E21 PAUSE MENU) – Unity Tutorial

By: Brackeys
Ep. 21

This tutorial focused on creating the Pause Menu.

To start, we create another UI Panel as the base for the pause menu, and added buttons for: Continue, Retry and Menu. This also had text saying “Paused”.

We created a new script on our Game Manager, PauseMenu. This would deal with the functionality of activating/deactivating our pause menu UI elements. This was done with a method called Toggle, which used a command of ui.SetActive(!ui.activeSelf) which would set whether it was enabled or not to the opposite of what it currently is.

We then got to actually pausing the game. This can be done by simply setting Time.timeScale = 0f. It is commonly mistaken that you also need to set Time.fixedDeltaTime to 0 as well, but this is actually taken care of by Time.timeScale already. We also need to unpause, so we set Time.timeScale back to 1f when that is needed.

It is important to note that while Time.timeScale is at 0, this does prevent some things from working. The hover color of UI buttons was still fine as it is not affected by the timescale, but animations you are running with the Animator will be. They need a specific setting changed in order to function properly. This was shown by trying to fade in our pause menu. Initially, we created a simple recorded animation of changing the alpha from 0 to 1, but when we ran it in game it did not appear. That is because the animation was frozen with the timeScale.

To prevent the animation from being affected by our timescale variation, we change the “Update Mode” in the Animator component of the object we are animating from Normal to Unscaled Time.

Then, we also wanted to animate the buttons some (instead of just having a simple highlight color). To start, we went to the Button (script) component and changed the Transition to Animation. We then selected AutoGenerate Animation. This gave us 4 options in the Animation tab for: Normal, Highlighted, Pressed, Disabled. These are the 4 states of the button. These let you set an animation to start whenever these separate events occur.

SUMMARY

  • Use [gameObject].SetActive(![gameObject].activeSelf) to inverse the current enabled state of a gameObject
  • Use Time.timeScale = 0f; to do a simple pause of your game. This should also set Time.fixedDeltaTime to 0f behind the scenes so you do not need to set this as well. (To unpause, set Time.timeScale back to 1f.)
  • If you want to animate objects during timescale = 0 (like pause menu animations), make sure to change their Animator component Update Modes from Normal to Unscaled Time.
  • To animate UI buttons, select Animation for Transition under the Button (script) component (built into Unity UI buttons). Can then select AutoGenerate animation to record animations like anything else, and for all 4 different states of the button (Normal, Highlighted, Pressed, Disabled).

Particle Systems and the VFX Graph in Unity

digm520admin / / Tutorial, TutorialList, Unity, VFX
February 27, 2019

Particle Systems in Unity 2018 and Later

Particle Systems and New VFX Graphs

I originally intended to look up new tutorials for particle systems in Unity to get a better grasp of the differences in the newest version of the Particle System editor. This was because a lot of older tutorials had the old setup so some of the differences made it hard to follow. While I did find one newer particle system tutorial using the editor, I stumbled upon the Visual Effects graph which appears to be a node/graph based editor for creating VFX new to the latest version of Unity, so I gathered a lot of tutorials for that. Several of them are from Brackeys as well, which is someone I follow often for basic Unity tutorials.


Youtube – Everything to know about the PARTICLE SYSTEM

By: Brackeys

This is the video just going over a lot of the basics of the Particle System editor. Since this was only about a year old I hoped it would cover some of the weird differences I run into, like shaders for particle materials.


Youtube – Visual Effect Graph – Realtime visual effects In Unity 2018.3

By: Unity

This is a quick video from Unity that just shows off some of the basics and capabilities of the VFX graph.


Youtube – FIRE AND SMOKE with Unity VFX Graph!

By: Brackeys

This is a nice example tutorial by Brackeys on using the VFX graph to create a fire/smoke effect.


Youtube – MILLIONS OF PARTICLES! – Unity VFX Graph

By: Brackeys

This is another Brackeys tutorial using the VFX graph that just focuses on doing weird effects with a very large amount of particles.


Youtube – MAKING VISUAL EFFECTS IN UNITY 2018.3 | Beginner’s Guide: VFX Graph

By: Sykoo

This is a longer look into the VFX graph and a lot of it’s capabilities from the very beginning.


Game VFX – Basic Fireball Projectile

digm520admin / / Unity, VFX

STANDARD

February 26, 2019

Fireball FX in Unity

Unity 5 – Game Effects VFX – Fireball Spell / Projectile

Gabriel Aguiar Prod.

They start by creating a basic fireball shape in Photoshop. They used the brush presets to get a nice, fuzzy and flowy effect for drawing this. I went with Round Watercolor since that seemed pretty close to what they used. They also turn the opacity down to allow for increased color on the overlapped sections.

In Photoshop I had something selected on a layer still so when I tried to draw it would only draw in that selection, so that took some time to figure out that issue. They like to use white and just color in Unity. I also used some black to hedge out some of the white values, but not sure if that will create issues in Unity later.

We started creating the Particle System in Unity. We begin by creating a new material that they suggest changing the shader to Particles/Additive, which is a legacy shader now. I tried Particles/Standard Surface, and set the Albedo map to our PNG file instead of dragging it into a texture box (what is done in Particles/Additive).

In the Particle System, we turned off Shape. We edited 3D start size with random between 2 constants. This lets you set bounds that it could scale on any axis. We changed Emission Rate over Time to 1.

We added Rotation over Lifetime. You turn on Separate Axes to get access to more axis options. You also need to change the Start Speed to 0 so it stays in place and solely rotates. You raise the emission rate now to have several spinning at once, and alter the opacity to get the desired visual.

We changed the Render Alignment to Local so it doesn’t always face the camera.

You need to find the balance between: Start Lifetime, Opacity, and Emission Rate over Time. For Colors you can use Start Color/Random Between 2 Constants, or Color over Lifetime. Color over Lifetime gives better options with a gradient functionality.

We added another particle system as a child to the original one. This used another Photoshop image as a texture that was just a small ball of light. This would be used in the material (another Particles/Standard Unlit) of the particle system, as well as for its trail.

This particle system used the following effects: Velocity over Lifetime, Color over Lifetime, Size over Lifetime, Noise, and Trails. The trails add a wind-like light trail effect to each particle that adds a lot to the system. The noise makes trails curvier and more random/organic looking as opposed to always firing in straight lines.

We then added a duplicated version of this secondary particle system but removed the noise and random velocities to just have it travel in a straight line directly behind the overall particle system. Finally we added a Light to the main particle system. This is done by creating a light prefab and dragging it into the Light section of the particle system.

SUMMARY

  • Use white colors for FX for Unity so you can color them in Editor
  • In Particle Systems, in Renderer, increase Max Particle Size (i.e. 3) so when you get closer you don’t get weird problems
  • Adding Noise to the particle system can make it look more random and organic
  • You can add Light prefabs to particle systems

Tower Defense Tutorial – Brackeys – Ep. 20

digm520admin / / Programming, TowerDefense, Tutorial
February 24, 2019

Tower Defense Tutorial

Episode 20 – Sell

Youtube – How to make a Tower Defense Game (E20 SELL) – Unity Tutorial

By: Brackeys
Ep. 20

This tutorial focuses on implementing the “sell” functionality to go along with the sell UI button we have. We are also going to setup an upgraded version of the missile launcher and the laser beamer turret.

The upgraded versions of the missile launcher and laser beamer turret were just upscaled versions with some buffed stats and different material colors. These were set in the Shop TurretBluePrint editor sections as well.

For the selling function, we wanted to add that to our Node script. However, since we just wanted to code something standard to create the sell value of a turret, we ended up going to the TurretBluePrint to create this calculated sell value. This was done because we can now just reference the TurretBluePrint class anytime we want the sell amount, and if we ever want to change how that is calculated, we can just change it in one place instead of looking around for everywhere it is used. In TurretBluePrint class, we simply added a method, GetSellAmount, that returns an int that is just the cost divided by 2 for now. This method can now be referenced in the Node script to get that sell value.

The UI system is very easy to add functionality to. The main UI object holds the central script that keeps track of what we have selected and call methods on that node specifically, as well as containing all the basic UI methods (such as on click events). It’s very easy to know that anything dealing with altering a node goes through this script. It also keeps a lot of our UI functionality organized in one location.

SUMMARY

  • If you are using a variable multiple times that needs calculated, but may want to alter this calculation throughout the design process, it is good to have this done in one location as a small helper method and then reference this method when you want that value. That way you only have to change the calculations in one place to change them globally.

Tower Defense Tutorial – Brackeys – Ep. 19

digm520admin / / Programming, TowerDefense, Tutorial
February 23, 2019

Tower Defense Tutorial

Episode 19 – Upgrade

Youtube – How to make a Tower Defense Game (E19 UPGRADE) – Unity Tutorial

By: Brackeys
Ep. 19

This tutorial goes over upgrading our turrets after selecting them.

We started by moving the BuildTurretOn method from the BuildManager script to the Node script, and renamed it BuildTurret (since it will be obvious it is “on” that node now anyway). This was done because BuildTurretOn was making a lot of references to the Node script anyway, so it made more sense to just handle everything locally to reduce the number of references needed.

Next we created the UpgradeTurret method. This was mostly a copy/paste of our BuildTurret method, with a few tweaks (having a separate cost, possibly a separate effect). The biggest difference was that we couldn’t just instantiate the upgraded turret since we already have one there; we need to remove the initial turret first.

We created a new prefab for the upgraded version of our standard turret. We duplicated the original, scaled that up some, and changed one of the material colors just to make it clear it was a different version. I liked the way they organized this in the Asset hierarchy. Our folder structure was already: Imports -> Models -> [Model Name]. We further branched this into two separate folders to hold the materials for the standard turret and a folder for the materials of the upgraded turret.

We edited the NodeUI so that the upgrade cost is tied to the currently selected turret’s TurretBluePrint now. This makes sure the upgrade cost updates according to which type of turret is selected.

Finally, we created the case for when the turret has no more upgrades available. In the NodeUI script, we check the upgrade state (currently just isUpgraded) on the turret. If it is not in the final state, perform normal upgrade functions, if it is, set the text to something like “Done” or “Maxed Out”, and set the upgrade button itself it be non-interactible (upgradeButton.interactable = false).

SUMMARY

  • If a method makes a lot of references to another script/class, it might make more sense to just move that method into the script/class
  • They use an underscore ( _ ) before a variable to indicate it is just a local variable field version of a variable (i.e. _turret instead of turret since _turret is created and used specifically within a single, smaller method)
  • If you have upgraded versions of models that are mostly varying the materials, create separate Material folders for each variation to keep organized
  • Use buttonName.interactible = false to stop button from having hovering animations or performing actions when pressed

Halo Multiplayer Map Analysis

digm520admin / / LevelDesign
February 19, 2019

Halo Maps

Multiplayer Map Study and Design

We are designing a Halo map for our Architecture Inspired Level Design class, so I did some analysis of certain parts of several of my favorite maps from the franchise as possible portions to take inspiration from to develop the map.

Map Sketch Thoughts

  • Construct
    • Top level
      • Good foundation for the top level of our map
      • Plenty of large hallways which can either have barriers or not to provide/remove sight lines through center
      • Lots of opportunities to add stairs around
        • Can have them protected/not protected
      • Aesthetically
        • Poking out portions could provide sight of large architectural landmarks
        • Can easily be put around/near large landmarks
  • Guardian
    • Look at this map for interesting transitions from upper to lower floor
      • Each outer section of this map has a different way of moving between floors
        • North
          • Natural and manmade ramps
          • Gap between natural part and center
        • West
          • Up and down lift or holes on sides
          • Connects to both top and bottom floor of section next to it
        • East
          • Spiraling ramp/stairs with above vantage point
        • South
          • Enclosed upper and lower floor but with multiple access points
          • Also very concealed stairs between them on outside edge of map
  • High Ground
    • Good example of asymmetry while still being vaguely symmetrical
      • Weird, organic shape; 180 degree rotational symmetry
      • Has mostly upward sloping terrain that really makes it feel asymmetrical
    • Gate
      • Could be good area to draw area from
      • Would fit lore of our map
        • Separation between main land and ship dock
      • Has a lot of vertical options to it
        • Both sides connect to structure with upper/lower floors
        • Gate itself allows for passage on lower floor, with room on upper floor to overlook gate
  • The Pit
    • Floor layout good to pull from for flatter terrain foundation for our map
      • Can use strategy of large flat areas with large, wide ramps to at least give some verticality with minimal terrain work
    • Everything is manmade, so also good to use for civilization aspect
      • Flooring wise, we most likely want more “housey” structures
    • Turret
      • Serves as very simple, but effective small, vertical architectural points
      • Basic elements
        • Protected stairs to go up/down on far edge of map
        • More vulnerable elevation change on bridge to top of turret
        • Very open lower room with 3 entrance points
      • Open Space – Sides
        • These open spaces could be something we look at for our large, flatter transition areas
        • Again, floor of a factory-type building, so mostly flat, with organized, wide ramps
        • Tall, enclosed floor variation structures on sides make it possible to traverse this area without constantly being sighted
          • Still relatively open and easier to be seen here than most places though
  • Complex
    • Another good asymmetrical layout to take inspiration from
    • Has a nice flatter overall layout, with structures to provide the more interesting second floor options
    • This could be a good one to look into for our ground floor layout, then overlap something else over it as our second level

Plan Sketches

I did a few rough plan sketches of some of the areas I was interested in taking inspiration from for our map design. These just helped to give me a feel for how different parts of a Halo multiplayer map work, and also get a gauge for the scaling of different locations.



Finally, I attempted a couple sketches that involved trying to piece some of these elements together in a way that might make an interesting Halo multiplayer map.