Improving Enemies with Particle Effects

Yet again I am back on Project 1, making improvements. This time I decided to add some more visual features to the enemies. I wanted to make the enemies stand out because they can be hard to see, since both the enemies and the background have similar cream colours. Also, since the enemy sprites just disappear when they have lost all their health, I wanted to have a fade or a transition just so it looks better.

What I added is a particle effect that sits behind an enemy and fades after the enemy dies. The effect is intended to make the enemy appear as if they have an aura.

To do this I created a Particle System in Unity, set its Shape to Mesh and its Mesh to Cylinder.

ShapeMesh.png

The reason I selected Mesh > Cylinder instead of Circle is because particles spawn in the centre and around the edge of the Cylinder, whereas Circle has particles spawning inside the Circle. You can see the difference below.

ShapeCompare.png

ShapeCompareSettings.png

The Particle System on the left is the Cylinder and the Particle System on the right is the Circle. Both have the same settings, which you can see in the image above.

The Cylinder Shape suits my needs more because, when speed is set to a negative, all the particles centre in a single spot. This gives me the kind of fading effect that I am looking for. Below is an image of the Cylinder Particle System with Start Speed set to -0.5 and Emission > Rate Over Time set to 500.

Cylinder.png

For the actual Particle System I used the following settings and got the following result:

CylinderSettings.png

CylinderDone.png

Now to put the Particle System underneath an enemy sprite.

CylinderSprite.png

In order to make the Particle System linger and fade after the the Enemy sprite has been destroy, we need to write some code. We can’t make the Particle System a child of the the Enemy sprite because when the Enemy sprite is destroyed the Particle System will be destroyed as well.

The first that we have to do is reference the Particle System.StopLoopCodeStart.png

Also, set up a bool that we will use later.

StopLoopCodeBool.png

Then, in the function that controls when the enemy is destroyed, line 41 of the code below retrieves the Main section of our Particle System and line 42 retrieves the Loop setting of our Particle System and changes its value to the bool made earlier.

StopLoopCode.png

Be sure to put the code above the Destroy code, otherwise the Enemy will be destroyed and will not run anymore code.

Now we have a Particle System that fades when the Enemy sprite is destroyed, but what happens when the Enemy sprite moves? Well the Particle System, at the moment, doesn’t follow the Enemy sprite. Let’s change that.FollowCode.png

The above code has a public reference to a GameObject, meaning that we can drag and drop the specific Enemy sprite that we want to be associated with this code. Then the Follow() function finds the Enemy’s position, if available, and makes the Particle System’s position equal to it. Finally, this function is called in Update().

Now the Particle System follows the Enemy sprite and fades away shortly after the Enemy sprite is destroyed.

Advertisements

Importing Assets From Collaborators

When I imported the art assets, that I received from Hayden, into the Unity project, I encountered a problem. The assets could be dragged into the scene and the preview of the assets had some form of artefacting.

It turns out that the cause of this problem is that the assets’ Texture Type was set to Default.

Standard.png

In for the asset to be useable in the way that I want it to, I just needed to change the Texture Type from Default to Sprite (2D and UI). This immediately fixed all the problems that I was having.

However, all the art assets that Hayden sent me were huge when compared the to size of our levels and, well… pretty much everything else.

Huge.png

I tried adjusting the size of the head by changing the scale of it, but that had me working in decimals and it was just a headache to deal with.

Fortunately, there is another way to deal with this problem. It is called Pixels Per Unit.

PPU.png

Adjusting Pixels Per Unit to 2500, instead of 100, shrunk the size of the asset down to the small head that you can see below the big head in the 2nd image above this.

From there on out it was a simple Texture Type change and a Pixels Per Unit adjustment to each assets that Hayden sent and they all became useable.

Creating Audio Assets

In addition to art assets and particle effects for Project 1, I decided to create my own audio assets as well. Using Audacity, I created the sound effects for when an enemy gets destroyed and when and enemy attacks.

To do this, I opened Audacity and click the ‘Click to Start Monitoring’ button up the top. This is just to set up my mic and make sure that everything is recording properly. From there I hit the record button and made a few noises that I thought would be appropriate.

Audacity.png

After I found a few that I thought were good enough to use, I deleted all the excess audio and dead-air by clicking and dragging the mouse cursor over the areas and then pressing the Delete key.

Next I had to cut the audio in three different sections. This is because there were three different sounds in that audio clip that I want separated and if I was to export the current recording, it would export in one large chunk which I would rather not work with.

To cut the audio, I highlighted a section that I wanted to keep and pressed the Space Bar. What the Space Bar does is it plays the currently selected audio and nothing else, meaning that you can check if you have selected all the audio you wanted.

AudacitySelectedAudio.png

Then, once you are happy with your selection, you go to Edit > Remove Special > Split Cut.

AudacitySplitCut.png

This cuts the audio you have selected out of the current track. Now you need a place that audio in a different track. To do this you need to go to Tracks > Add New > Stereo Track.AudacityAddTrack.png

This will create a track beneath the first one on the screen. Now you need to paste the track that you cut by clicking on the second track and then going to Edit > Paste.AudacityPaste.png

You must follow these steps for each separate audio file that you wish to create. Remember that each track is a different audio file. When pasting audio, it may sit beyond the beginning of the track but that is nothing to worry about. Since there is nothing recorded there, not even dead-air, Audacity disregards that section completely. However, if you want to fix that you can go to Tracks > Align Tracks > Start to Zero and it will move the audio on the track to the beginning of the track.

Now that all the audio is ready, we can export it. We are able to export multiple tracks at once by going to File > Export Multiple. When you click that you will be greeted by the screen below.AudacityExportMultiple.png

Note that I am exporting the audio as MP3’s. When I first tried this I was given a pop-up telling me that I needed the LAME encoder in order to export my audio as MP3’s. This isn’t a big problem because the pop-up as a button on it that directs you to the download page for the LAME encoder.

After doing that, it will ask you to enter any info that you want on your audio files such as Artist Name, Track Title, etc. Once that is done and your files are successfully exported, it is time to import them into Unity. I made a folder called Audio and placed all of my tracks in there.

Now there is audio in the project but not in the game. Time to add some functionality through code. I started by creating an empty and naming it ‘AudioManager’. I gave it an AudioSource and attached a script to it that looked like this:AudioScript.png

This script has public AudioClip refenences that allow me to drag and drop my audio from the Inspector and an AudioSource reference that is assigned to when the script starts. So now we a place in the game where audio is stored and can be played from, but nothing that tells the AudioManager to actually play anything.

The next step is then to add lines of code that tell the AudioManager to certain tracks when a certain thing happens. The two images below are of the lines I have added to the enemies Death and Attack functions.

EnemyAudioScript1.png

EnemyAudioScript2.png

The first script tells the AudioManager to play ‘defGhst1’ whenever an enemy dies and the second script tells the AudioManager to play ‘defGhst2’ whenever the player enters the enemy’s range of attack.

Creating a Particle Effect

Particle Effects:

For Project 1, I created a particle effect that changes based on whether the player has finished the level or not. The purpose of this particle effect is to have a more visually appealing indicator that the level is complete and that the player can move to the next one. I also wanted the particle effect to match the art style of the game, which is pixel graphics. Note that this project was done in 2D.

I started by creating a Particle System in Unity by right-clicking inside the Hierarchy and selecting the Particle System option.

HierarchyParticle.png

Doing this will make a GameObject called Particle System appear, similar to the Particle System that, as you can see, is a child of the ExitLevel GameObject.

The default Particle System shoots white circles in a cone shape, as can be seen below. However, this doesn’t fit well with the current theme of the game.

SceneParticle.png

So, to fix this, the first thing I did was to change the Material in the Renderer settings. I want this particle effect to mimic a section of the border so I created a Material that is the same colour as the border and applied it to the Particle System, the result of which you can see below. Note, however, that in order to get this result I had to change the Shader that is on the Material from Standard to Unlit > Color.

SceneParticleMaterial.png

The next thing that I changed was the Shape. The default shape is a cone but, in order to make a believable-looking wall, that will have to change. After experimenting with a few different shapes, I settled on the Edge shape.

The first thing to adjust is the rotation. The default X rotation of a Particle System is -90 degrees which means that, with the Edge Shape applied, the particles are now shooting towards the camera, if in the 2D camera setting. Set the X rotation to 0 to stop that. So now the Particle System should look the the one pictured below.

SceneParticleEdge.png

Now, while that seems all well and good, it doesn’t mimic a wall very well. The first step to fixing this is to position the Particle System where I want it and adjust its value from there. As you can see in the picture below it doesn’t fit quite, since it is supposed to fit in the small opening in the border below it.

SceneParticlePlaced.png

The first setting I change was the Start Size, to 0.1, since those particles are far too large for what I need them to do. Then I went to Shape > Radius and changed it to 1.8 in order stop the particles from extending into the border. After that I did some tinkering with both Start Lifetime and Start Speed, finally settling on 1 and 0.66 respectively.

The Particle System now looks like the image below. There is a fairly obvious problem here, that problem being that there aren’t nearly enough particles to make a convincing mimic of a wall.

SceneParticleAdjusted.png

In order to add more particles, I went to Emission > Rate Over Time and changed it to 10,000. This, however, isn’t the only setting that must change. If you don’t change Max Particles to 10,000 (Rate over Time multiplied by Start Lifetime) as well, you will get a solid line of particles once every second instead of a block of particles.

The image below is a big block of 10,000 particles. Now, all that remains is adding some functionality through coding.

SceneParticleDesignDone.png

Here is what I have written for the Particle System:

ParticleCode.png

The first thing I do is reference the EndLevel script because there is a function in there that detects if all the enemies have been defeated. Then I wrote a public reference to the Particle System. This allows me to assign the Particle System in the Inspector. Finally, the float partiChange determines the rate at which the Particle System decreases emission.

The function LevelComplete() check if all the enemies are defeated and, if so, retrieves the emission and then the emission.rate of the Particle System. I then change the constantMax of the emission.rate so that it decreases according partiChange. Then, last of all, is an if statement that checks if the constantMax goes below a certain point. If it does go below that amount the rate that constantMax decreases at is set to 0, meaning that it remains at the rate that it dropped to.

This script is then attached to the ExitLevel object that was in the Hierarchy from earlier. Now the Particle System is done and this is the final result.

Creating Item Cards

I have created a template card with the board game being made for Project 2. My intention when making this template was to make sure that all the information that was required to be on the card was clear and easily understood. I created this template using GIMP.

Card.png

When I created a new file, I set the image size to 14cm x 20cm. Then I created the black outline of the card, as well as the card layout, with the Pencil Tool with size at 10px. I separated the card into 5 different sections: the Title, Deck, Resources, Artwork and Abilities.

The Title is the section at the top of the card and has the largest sized text on the card.

CardTitle.png

To do this, I used the Text Tool and made a small text box. I then typed the name of the card, in this case ‘Kinda Gross Towel’, and expanded the limits of the text box to match the section. I then highlighted the text and increased the font size until I felt that it fit nicely within the limits of the section.

I made it like this so that, when a player receives the card, it is very obvious. Also, as players become more familiar with the game, they may come to associate the name of the card with its abilities so having the title be large is important.

 

The Deck section is at the top-right of the card, defined by a distinct circle.

CardDeck.png

I followed the same method that I used for the Title for the Deck section as well. I created a text box, placed the corresponding letter, expanded the limits of the text box to match the section and then increased the font until I felt it looked good.

This section tells players what Deck this card belongs to. It is used during the setup of the game, as well as when a player discards a card. I gave it a unique area because of how vital it is during the setup of a game. The letter in the circle is in bold and represents the first letter of the deck that is belongs to: M (Medical Bay), K (Kitchen) and CB (Cargo Bay).

 

The Resources section is on the right-hand side of the card and tells the player how much of each resource the card is worth.

CardResources.png

To create the coloured squares I used both the Rectangle Select Tool and the Bucket Fill Tool. I used the Rectangle Select Tool to to create an appropriately sized square. The square is small enough to allow for three squares of the same size to fit within the section, but also large enough to fit a decently sized number inside of it. I then used the Bucket Fill Tool to fill each square with the colour used to represent one of the resources. After that, I used the Text Tool to label each square with the amount of resources that the card provides for each resource type. I followed the same text method for the numbers as I did for the Deck.

This section has 3 numbers, each one inside a differently coloured square. Each square represents a different resource: Blue = Tech, Green = Bio and Yellow = Energy. I decided to give this section colour so that it stands out from the rest of the card and allows for players to distinguish between resources without the need for text. However, having colour be the defining factor means that it may be impossible for a colour-blind person to read it.

 

The Artwork section is in the middle of the card and is a visual representation of the Item Card

CardArt.png

This section is fairly large on the card and is intended to provide a visual connection from the card to the game board. However, due to the constraints of the project, this section may be cut. Another reason this section maybe removed is to make more room for the Abilities section.

 

The Abilities section is at the bottom of the card and is the largest section on the card. It describes the abilities that the player gets when they receive the card.

CardAbilities.png

Since some cards have both a Passive and an Active ability, I started by using the Pencil Tool, again at 10px, to draw a line to split the section into two. I then created a text box, using the Text Tool, on either side.

This section is broken into a Passive and Active area. The details of the abilities are listed in their respective area. In order to fit the wording of the abilities on the card, I had to re-word some of them. Even still, some of the ability descriptions of some cards don’t fit properly.

 

 

Dev Diary – Creating 2D Assets

For my first project of Studio 1 (one of my subjects at uni), I decided to take on the task of creating all the games assets by myself. Quite a daunting task but I felt that, given the simple shapes that my artist used in her works, it wouldn’t be too difficult to create something that, at least, vaguely matches hers. What sparked this drive was actually a program that I had purchased from Humble Bundle called Pyxel Edit. I am not too sure of this program’s reputation at the time of writing but I was excited to start creating my own assets, instead of relying upon Unity’s Asset Store.

While I found it easy to adapt Harriet’s artwork and style to the program, my lack of knowledge when it comes to pixel art in general was quite evident when I began to import my assets into Unity. When I began my first import I had finished approximately half of all the assets that I had needed. While that sounds all well and good, I soon realized that my assets were far too small for my intended screen size, as they were a measly 64×64. This led to me redoing all the assets that I had done previously but in a much larger canvas, 264×264.

I also attempted some simple animations while re-creating the previous assets. I was able to animate both the player and the enemies, even if it is just one extra frame. I learned the process of creating a sprite sheet, albeit a small one, as well how to import my own assets and animations straight into Unity. While assets are simple to import to Unity, the animations required a bit of additional work. Since the animations are imported as a single sprite, I had to enter the settings of the animation in question and split the sheet into multiple cells that Unity could recognize. Since my animations were a simple two frames, it was easy to understand what I needed to do, but that process allowed me to understand more complex sprite sheets and how to use them in later projects, if need be.     

Environment:someportal Player Animation:Player.gif