Parading on - Week 5
Overview:
- UI Development
- Creation of Animations
- Early enemy work
This week, I decided to replace that rather ugly stamina bar - as well as add some additional functionality to the player. Making it so they can actually die. I started on this with the week before, sketching designs for what I had in mind (which have unfortunately been lost). I knew that I wanted to incorporate the minimalist style that I've been using into the UI itself, so I kept the design of the shapes rather simple.
I think the UI is the part I'm most satisfied with - the design is simple, the bars are functional, and in my opinion, it's visually appealing. The crystal is not actually just a decal - it's an indicator of health. As the players health lowers, the image of the crystal changes. The crystal itself is actually multiple images, layered one on top of another. I created this by getting the players health in the blueprint editor and using multiple ranges and some maths to set the opacity value of each image - effectively blending one to another until it displays only the bottom layer, when the player has 0 health. The far left controls the bottom image, and the end of the blueprint controls the top layered image.
The final design of my UI bar, created in photoshop and imported into UE4.
I think the UI is the part I'm most satisfied with - the design is simple, the bars are functional, and in my opinion, it's visually appealing. The crystal is not actually just a decal - it's an indicator of health. As the players health lowers, the image of the crystal changes. The crystal itself is actually multiple images, layered one on top of another. I created this by getting the players health in the blueprint editor and using multiple ranges and some maths to set the opacity value of each image - effectively blending one to another until it displays only the bottom layer, when the player has 0 health. The far left controls the bottom image, and the end of the blueprint controls the top layered image.
The crystal visual and the blueprint that controls it.
I was rather happy with how this turned out. But that's not the only thing I created this week. I also went and learned something entirely new. Spine! No, not the back bone, the program that's used to create 2D animations through a skeleton-like system. Before this, I had never touched the program before. I felt like I got a solid foundation on how the software works, which'll allow me to use it in the future if I need to.
Spine in action - not my image, though! I unfortunately don't have access to Spine at the time of writing this blog.
I used Spine to create 2D animations for my character. The standard UE4 sprites that exist in the game (which you may have noticed in previous weeks) don't fit things for me. So, I decided to make my own. I had my character concept, which I made on Week 4, and wanted to realise that. However, the technical side of making my character exactly how I wanted it would take far too much time to create. So, I had to compromise - instead, I created a basic character that featured the animations I wanted to achieve. This allowed me to get the feel of the character (and in turn improve the feel of the game massively, which I noticed after implementing the animations) yet still have plenty of time to work on other things.
The animations of my character - you may notice something on the top right. This is also before I added the new UI. Oh, and I'll get to the thing on the right in a bit.
If you compare this to an earlier gif, or, better yet - you've played a before and after version, you'd notice that the difference having this animated character in makes a massive difference. I felt this immediately after I put it in - after seeing the standard UE4 character for so long, it was such a nice change. Since the creation of this gif, I have since added small variations to animations - one jumping and falling straight instead of an angle, but that's the only differences this gif has to the final game. I'm very glad I decided to create these animations, as the game feels far better to play because of it.
Now, you may've noticed the little thing in the top right of the above gif. That's the very first actual enemy I have in-game! Sure, it's just a sprite sitting there, but this allowed me to figure out how to achieve the glow properly for enemies. I found that having a border glow makes the enemy much more easily noticed. The enemy itself is meant to be a corrupted giant fly, which is to fly towards the player slowly and damage them. I will be going onto these enemies in-depth on a later week.






Comments
Post a Comment