Update / New assets [Metroidvania Project]

General / 08 October 2020

Project SL Update


It's been a while since I last posted, but I just wanted to make an update to say I am still working on the game. Progress has been slow but I have still made progress on key features of the game. The first being a simple redesign of Atlas:
  

The new version of Atlas. Only the hands were changed


This time around I gave more details to the hands to make it looks more realistic. The old version didn't resemble a natural hand:


Old the left. New on the right


The next major thing I added was The first NPC. A scientist named brian with fully functioning dialogue:


Brian Final Version



Brian Dialogue running in unity


As you might have already noticed I have also changed the light settings and lightbox in-gameThis was done to help set the atmosphere for the game. I wanted the game to be unsettling and have an unknown element about itand changing the light was the best way to achieve this. Now it's less of a fast-paced platformer and more like a survival game where your every move matters. You don't know if an enemy is lurking around the next corner or not. I want players to think about their actions and really feel like they're really Atlas surviving on the ship.






I still am tweaking the settings, so this will change again but as of right now am happy with it. My only complaint is that the floodlights are a bit harsh, but they tend to be like that in real life so I might not change it. I just think that the lights have very sharp edges.


What to expect

I have begun work on the medical bay layout and assets, and I plan on posting stuff about that in a few days. I also am wrapping up and polishing Atlas. Once all of her animations and code have been finished I can really get started on some core mechanics of the game. I have been learning how to use some of the new 2D stuff unity has so It's going to look awesome. 

Tweets of progress will also resume soon so be sure to follow if you wanna see sneak peeks of what I am making at that moment. 

Follow here: https://twitter.com/Howwise_

Also, look under the #projectSLgame to find any post on the game.

Until then thanks for reading and have a nice day :) 

-Howwise

Atlas Death Animation [Metroidvania Project]

Making Of / 07 May 2020

I Finally finished the death animation for Atlas. I am very happy with the result and I see the improvement of my skills used in this animation. I wanted to make something very dramatic and a little exaggerated, and I think it turned out very well. I also added it to the game itself and it works perfectly.
  

The final version of the animation


 

This is also the final version of the animation but it clearly lacks the head. I originally wanted to try something different with the head animation so I planned to animate it later. I scrapped that idea and just went with the basic solution and it turned out great
  

The first version had blood splatter, but I decided to scrap that for now and I possibly will add it later. I decided to scrap it because the blood wouldn't make sense for every death, but the lack of it would also not make sense. So I am looking into making a blood system in unity.




A rough outline of how the second frame would be posed


Very trash filling and shading of the initial pose. I did this to quickly get an idea of how it would look. I guess I figured out what I didn't want it to look like 😅😂



Clean up and revamp the design. This is how I imagined in my head how the second frame would look.




This is the final. IMO it looks off but it works perfectly for the sudden pain / initial attack frame. I think it works because she's dying, so it's not expected to be pretty. Or that's the lazy animator in me trying to justify this lazy animation and the fundamental issues with this frame 😅




Here is the death animation running in unity



  

Atlas getting overrun by enemies


Thank you to everyone who read this far. I plan on posting another blog post tomorrow that covers the implementation of the animations in unity and it will take a look at how I set up everything behind the scenes. So please be on the lookout for that. If you're not already, please consider following my twitter. I make consistent posts on there about the game and its progress. It's the best way to stay updated with the game and learn when I make new blog posts. 

Check me out here: https://twitter.com/Howwise_

Thanks again for reading and have a blessed day

-Howard


  

[Metroidvania Project] Process of making a 2D run cycle

Making Of / 31 March 2020

In an earlier post, I mentioned that I would make a longer post that goes through the entire timeline of me creating the main character run cycle animation. So I went ahead and gathered up all of the resources and screenshot to make some sort of a postmortem. This was really the first time I have made animation like this, so I wanted to talk about my journey and highlight the things I learned. So here we go...


Firstly I was advised by a friend to look at other 2D game animations and cartoons to get an idea of what I want to create and learn for them. He says that the best way to make good animation or just art is to learn for what's already out there. So I analyzed other 2D games art and watched videos about keyframes and poses. I also watched time-lapse videos of artists creating animations to get a better understanding of the process. 


I used one of my favorites sprites from super Metroid as a reference. This is one of my favorite animations and is widely known as a great animation.



One of the videos I watched was a great video on the importance of keyframes by a youtube channel called video game animation study. They cover gaming animation topics and often analyze animation styles and practices from popular studios. So if you haven't heard of them I really recommend their channel.



Click here to visit their channel



Also if wanted to see the video I mentioned check it out here:

https://www.youtube.com/watch?v=fJosaT1sCfs&t






New Frame Plus is also a good one. I watched a lot them while researching.



So after doing research and planning out what I was going to work on, I selected a reference that I was going to use for the animation. I was recommended to use the excellent run cycle animation from the main character in the indivisible game. This game is known to have stellar visuals and great animations full of life and expression, so It was a great choice. The art is also hand draw as well, so it fits my style of freestyle / from scratch


This is the exact reference I used to make the animation. Its an 8 frame run cycle. I really like this one because of the defined poses.  





I started making this before with the old design of Atlas. This a very rough version of the first frames of that



I first started work on the legs for the animation. I don't really know I started to like this, but I found this easier to start small and add things later on as I go. The main goal was to create an outline of the animation from scratch, then add details like shading, then finalize everything with minor adjustments and feedback I get. So basic animation > Details > polish and correction.


This is the first draft of the run animation. This is only the first few frames of the animation so It looks a bit off for that reason.


This is the second draft of the run animation. This is still a few only a few frames of the animation, but you can start to see it get a bit more smooth. Well smoother at the very least lol


This is the third draft of the run animation. Its almost done but It needs just a little bit more until it was done. I did have the overall idea though



This is the complete first version with all 8 frames. It has some issues with timing and positioning, but the overall outline is there and that was my main goal.


After I finished the draft of the animation, I corrected the issues I had with the animation and started working shading and the top half. First I had to figure out where the light source was coming from and what colors I wanted to use. Then for the torso, my plan waws to draw the body poses completely from scratch 😅
 

After completely shading and correcting the mistakes on the legs I finally finished the bottom half of the animation. While Shading I made the animation accurately match the legs of Atlas. These legs probably have like 20 different versions, but I only showed the early and final to save time. Also because I didn't document them 😅



Next was the torso and as I said earlier, I was going to create the animation from my memory of what A human should like while running. It didn't go well... But I learned the importance of feedback and the importance of multiple references.

 


This was the first frame I created with the torso and legs combined. I separated the body parts on different layers for convenience and started working on the arms. As you can see this doesn't look very good. 




Then I added the second arm and filled in the torso correctly. This still looked off but at the time I had worked on the animation for so long that I decided to just move on figure out what was wrong with it later.  The issue with this is the perspective and positioning is incorrect. Her legs are facing straight ahead while her torso is facing me / the camera. The positioning is incorrect because the arms and torso are twisted and positioned in an unnatural manner.


I later fixed this by matching the upper bodies perspective with legs perspective and aligned and corrected the arms



This is the first version of the second frame. This is almost correct, but it has some fundamental issues. Her posture is crooked and lazy and perspective isn't exactly right. Her arm placement also makes no sense. 





This was also corrected later and made more accurate. This could maybe still use some adjustments as well.



The last frame I wanted to cover was the 3 frame. This is the one I made right as I was getting the hang of it. It still has it fair share of problems, but it has almost usable right away.

  


The main issue was the posture and arm positioning. In this image, you can see that I was working on fixing the posture, but she was still overextended.



  

Of course, I managed to fix this as well and correct the arms with it. I think that it turned out fine. The holster was also fixed as well


After continuing to learning get knowledge from resources, friends, and just figuring it out. I was able to just continue to create the sprites from that knowledge. So after a few hiccups, it was smooth sailing :) 

I don't plan on going through each frame, but I just wanted to showcase the development and progress I made while creating this animation. I still have a lot to learn, but I am slowly getting there. I had a lot of fun while working on this and I can't wait to continue to make more animations and improve my skills.



Here is the final version :)


  

Side by side comparison (Atlas animation is matching the speed of the indivisible one, which is faster)



If you have read this far, you're awesome and I appreciate it. Please comment on feedback if you have any or tell me what you enjoyed about the post. I am constantly trying to improve so anything is great. Next, I plan to make a shorter post about implementing the animation into unity and challenges that will bring so be on the lookout for that! 

Thanks for reading!


-Howard



[Metroidvania Project] Main Character Animations 2

General / 18 March 2020


The final version of atlas' run cycle


I have finally gotten to the point where I am satisfied with the running animation of the main character, and I can safely that I have completed the animation. After weeks of working on it, I got it to a point where it looks good and it will work well in-game. I didn't post about the in-between steps of the process, so I plan on making a much longer post about the entire process of creating the animation and the things I have learned. In this post, I mainly wanted to showcase the final version and possibly get some feedback to improve it. I also plan to make a post about implementing it in-game and to show off how it looks in-game as well. But check it out the run animation in detail.



  

All 8 frames of the cycle
  



An early version of the third frame that I never shared. This was heavily revamped




I seperated each part so they could be animated independently



Be on the look out for more post soon. I havenit been posting as much I want to, but I plan on changing that soon. Thank you for reading.


-Howard


[Metroidvania Project] Main Character Animations

Work In Progress / 06 March 2020

I spent the last few days working hard on the animation for the main character of my game. Its been a long process but I've finally started to understand animation fundamentals and basics enough to create this character run cycle. I've always had a pretty good understanding of animation but putting all of that knowledge into practice is a different story. Its almost like how most people can tell when CGI looks bad, but can actually make good CGI, nor do they know what makes it look good, to begin with.


With that said it has been a fun process to create this and improve with animations, and I can't wait to learn even more about animation :)



This is the most recent version of the animation. I changed the highlights on the hair and toned down the ones on the arms.



This is the first version of the animation (OMG 😂😅)


This is the second version of the animation and you can see the improvement slowly
 
This is the third version of the animation. This is where it started to look more polished and smooth.

 

 


I'm not finished with the animation yet, but I wanted to share the progress I was making. I plan to add the gun holster the character has and add a little bit more motion to the head because right now it looks stiff. I think animating the ponytail will do the trick. If you're reading this... Thanks for reading this far and I appreciate that you took the time to read it all. 


Check back later for more updates on the animation and the game in general. Thanks for reading :)


-Howard

[Metroidvania Project] Dialogue System / where I've been

General / 26 February 2020

So I ended up breaking my streak and now I have decided to continue from where I left off, but this time around I'm dropping the numbers. Though I didn't post for 12 days, I still worked on stuff and completed some features. I was planning to make a post about the dialogue system on day 6, but I didn't get the system to where I wanted it and before I knew it I ran outta time. Day 7 was extremely busy and I slacked off because I was tired 😅 and it when downhill from there.

But no more excuses, from this point forward I won't break the streak. Heres what want I did over those past days...

I primarily worked on the dialogue system and animations, but today I will cover just the dialogue system, animations will be another day.

I've now finished the dialogue system and I am ready to showcase it.


Here is a video showcasing the system in action captured directly from the game engine.




Here is the dialogue box itself. You can't really see it here, but It's slightly transparent so that it does obstruct too much of the view when the player starts talking with an NPC.



  

Heres A capture of the dialogue box itself in the unity scene. You can see the transparency of it here very well. This will be helpful so that a small enemy won't be able to sneak up on you while dialogue is on the screen.




A quick sketch I made of the overall UI layout. I planned out where the dialogue box would go in the UI canvas.


I just primarily wanted to showcase the art aspects and progress I'm making with the game in this post of the dialogue system. I decided now to go into how I made it and the system behind it. Tomorrow I plan on making a post about the main character's animations. Very soon she won't be sliding around the floor lol. Check back tomorrow for that. 

Thanks for reading,

-Howard


[Metroidvania Project] Hangar Art Showcase

General / 14 February 2020

Today was a very hectic and busy day so I didn't get to work on anything, unfortunately :( But I realized that I never shared some of the artwork I made of the hangar a while back, so enjoy these :)



Each wall was designed in a way where they could be separated into tiles and place in a unity scene. They perfectly split into tiles of 32x32.


This is "lift" track background. It has caution signs in red on the sides to warn people below the lift.



This tile is a straight continuation of the warning lines. It used to connect the regular hangar tiles to other tiles and for transitions into other areas. Its referred to as an alternate hangar tile



Here are the lift and alt hangar tiles in action



this is the default hangar tile use for basic hangar areas




Here are the default tiles in action.


I was heavily inspired by the halo and the alien isolation games and alien films. I the screenshot I've showcased so far are only hallways used to navigate the large hanger with multiple floors. The yellow and black just lets you know you are in a hangar space where work is going on. The ship is so big and the hangar takes up so much space, they needed a way to indicate that you're in a hangar zone and to proceed with caution. This is important because a large number of people on the ship along with some of them being children. 





These are some of the scenes and images that inspired me to create the current hangar tile design. These are a bit more complex in design, I still was able to learn from and adapt certain aspects of there designs into mine. 


The actual main hangar will be huge and filled with ships and cargo. There will also be smaller and closed off areas in the hangar. I plan on making and a map and drawing up where everything is going to go in the game space. I plan on creating more assets to add more detail and style to the hangar. I also plan to give the main area parallax and add objects in the background. I have a lot planned, I just need to map out and plan where exactly everything will go inside unity.


This is a more accurate version of the size of the hangar. I made this room when messing with how bigger areas would look with the tiles. The final one will be much more detailed and have more going on than this dull and plain version.




With this post, I hope you were able to get a better understand of my creative thought process and learn more about the game and its art direction.  Y̶o̶u̶ ̶a̶l̶s̶o̶ ̶g̶o̶t̶ ̶t̶o̶ ̶s̶e̶e̶ ̶h̶o̶w̶ ̶m̶u̶c̶h̶ ̶t̶h̶o̶u̶g̶h̶t̶ ̶I̶ ̶p̶u̶t̶ ̶i̶n̶t̶o̶ ̶w̶h̶a̶t̶ ̶i̶s̶ ̶a̶r̶g̶u̶a̶b̶l̶y̶ ̶j̶u̶s̶t̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶s̶ ̶a̶n̶d̶ ̶h̶o̶w̶ ̶I̶ ̶j̶u̶s̶t̶ ̶r̶a̶m̶b̶l̶e̶ ̶o̶n̶ ̶a̶n̶d̶ ̶o̶n̶ ̶a̶b̶o̶u̶t̶ ̶a̶r̶t̶ ̶a̶n̶d̶ ̶g̶a̶m̶e̶s̶. Anyways I hope you enjoyed the post. Check back tomorrow for more content :) 


Thanks for reading,

-Howard




Started to Add legs to my 3D model

General / 13 February 2020

Today was a busy day so I wasn't able to work on a lot of stuff so this will be a short post, but I took a break from working on my Metroidvania and resumed work on my 3D model. I'm learning 3D modeling with Maya 2020 by following a course on Udemy. Due to me being new with 3D modeling plus following course progress is slow but its still progress. Overall I'm still in the early stages of the model but I happy with how it looks so far.





I can't wait to finish it!

-Howard

[Metroidvania Project] Working on character animations

General / 12 February 2020

Today I spent time working on animations for the main character of the game. I am still kinda new to pixel art and very new to animation so it has been a long and hard process of trial and error. But each time I make a new piece I get better and better. The more time I spend on it, the better I get. I also can't expect to be the best animator with only a little bit of experience, so it's important for me to be patient with myself.


A screenshot of my workspace while creating the first frame of the animation


I good friend of mine recommended that I use a reference of a solid run-cycle animation to help create my own and the results were great. The reference I used was from the Indivisible game which is widely known for its amazing art style and animation. My current animation isn't finished yet and even has some noticeable issues, but having a good reference and A hunger to learning new things about animation really helped create a baseline for my animation. With this first frame, I really wanted to make sure I really nailed the pose so that it is immediately obvious what the player is doing... running. While learning some animation basics, the first thing I learned was the importance of keyframes so I applied this here.


The first frame (WIP)


I will be sure to continue to show off my progress in a later post. Thanks for reading :)

-Howard

[Metroidvania Project] Adding an Inventory system part 2

General / 11 February 2020

Today I spent my time reworking my inventory system and finished the whole thing. As far as visuals go it's pretty much the same, besides icons being the correct size now, but under the hood are some serious improvements. I took the existing system I built with the help of a tutorial and reworked the entire thing to work for my specific needs. Almost no code is left over from the tutorial and is all new code written by me. It was a rigorous process, but I got it done and it works great! 

 

Inventory with items in it (Pistol and flashlight)


I won't go into too much detail on the exact changes I made, but I will say while developing I started with the end goal in mind and used nothing but fundamentals and unity docs to get what I wanted. You might think that an inventory system is super simple but until you build one you'll never realize how complex they can get. If you think about it, inventories are a system the player will use throughout the entirety of the game, so the inventory must be one of the most tested and robust systems in the game. Can't have cool guns and collectibles without a way to store/equip them.

 

Inventory with no items in it (same thing lol)
  

Check out a video of the inventory functionality in action



Nothing feels better than completing a list of tasks


While my system is currently very sound I still have a lot of things to add like a Hotbar system, movable/sortable tiles, saving inventory, highlighted tiles and many more. So I've barely scratched the surface, but I am excited to add more. I will be sure to add another part to this once I add more to the inventory and maybe even make a tutorial when I'm finished. When I first started making an inventory it was hard finding a good tutorial, so maybe I can make one of my own. If anyone who reads this is interested in that please let me know. 


Also, this post marks the second day of me posting a blog every day, so be sure to check back tomorrow for more game dev content.


Thanks for reading :)