Game Art - Project 2: 3D/2D Character and Environment (Porting and Testing)

27.10.2024 - 11.12.2024 / Week 10 - Week 12
Ilhan Rayan bin Khairul Anwar / 0361205
Game Art / Bachelor of Design (Honours) in Creative Media
Project 02 - 3D/2D Character and Environment (Porting and Testing)

---

INSTRUCTIONS

---

PRACTICAL

For project 2, we had to take our designs from Project 1 and essentially port them into a recreation of the game we're following. The MiB clearly states we have a choice between 3D and 2D porting / testing however my lecturer wanted us to do 3D only. Because I failed Anatomy and Character Sculpture, the class about how to 3D model, my skills with ZBrush and other software like Blender are essentially non-existent since I was very far behind in that class. So instead, I chose to do two porting tests in 2D rather than just one test in 3D since the MiB clearly states that we have a choice between the two, if we were supposed to only do 3D then it should have been changed before the semester started.

Visualization 1

Figure 1.1: Marvel Rivals Ability Menu

For my first visualization test, I chose to recreate the ability menu that you can access by pressing F1 during the game. This would require me to design custom UI icons for Darkhawk as well as a full body render in the same art style as the game

Figure 1.2: Ability Menu Pre-Visualization Test

Using a template that I found on Reddit, I made a quick mock up of what I wanted the character's ability menu to look like. The illustration of Darkhawk was a PNG that I found online however I did do a quick logo design that I placed behind him so that I wouldn't have to worry about that later. 

Figure 1.3: Darkhawk UI Design

In a separate document, I drew each individual UI using pre-existing UI elements as a base and adding my own elements to them, effectively creating new designs for Darkhawk. I then compiled all of them together onto one document for easier showcasing. The orange and yellow UI on the bottom right of Figure 1.3 is the character's ultimate ability which has a unique orange hue and yellow sparks surrounding it. In game however these sparks are constantly moving which makes drawing them difficult so I just used one design to simulate the effect.

Figure 1.4: Character Model First Steps

Using Spider-Man's render as a base like last time, I drew his outline for Darkhawk so that I had an understanding of what the bodily proportions would have to look like at a 3/4 angle along with the game's unique style.

Figure 1.5: Details Added

Once I had his outline done, I started drawing on all of his details from the character model I drew in Project 1. I kept the Spider-Man model there so that I would know where to draw his elements. The hardest part was trying to recreate his triangular breastplate as I had to draw it at an angle and perspective has always been my weakest area. The second hardest was where and how to draw his helmet because of the angle and because I had to make sure it looked good due to the design I chose.

Figure 1.6: Colour Added

Using other character models as well as fanart, I added in Darkhawk's colours and shading. Because I’m still working on improving my shading skills, I decided to use Spiderman’s body as a base for where and how to shade the character so that it would fit in with the other character designs.

Figure 1.7: Wings Outline

After finishing the base design, I contemplated giving him his wings to give his design an additional element to make it cooler. So I asked one of my friends and she recommended that I add the wings to give it more depth. I started off by drawing a basic shape of what the wings would look like in red and made sure that they would work with the style of wings my character had.

Figure 1.8: Wings Drawn

With the outline ready, I lowered it's opacity and began drawing on his wings, the larger wing blades on his arms were the easiest part to draw as they were the largest, the hardest part was drawing the wings on his back. Because of they way it's shaped, I had to find a way to make it look like the wings were bending from his arms onto his back while also keeping the shape without it looking awkward. After some time I managed to create a shape and design that fit. I considered giving it shading but i decided against it as it's mainly the characters' bodies that have shading, not their gear or equipment.

Figure 1.9: Finalized Render / Model

With the model finally complete and as close as possible to the game, I added on cyan and pink outlines to the areas with lighting to finally finish the art style of the game. If I was more confident with my skills and had more experience, I would have given him a more unique pose rather than just a default standing pose so that his drawing would have more character.

Figure 1.10: Completed Ability Menu

With the model and UI icons complete, I uploaded both of them onto the photoshop file that I had with this template and began updating it with my own elements to create my own ability menu. I had a lot of fun with this part as I got to take time and ensure that everything fit into place and looked nice.

.
Visualization 2

Figure 2.1: Marvel Rivals Character Menu

For the second porting test, I decided to go with the Character profile menu that you can access through the in game lobby where players can take a look at all the available characters as well as customize their skin, emotes or look at their abilities and lore. This was going to be a difficult task as there was no template online that could help me with designing the menu, which meant that I had to redraw everything on the menu from scratch as closely as possible.

Figure 2.2: Left Background Drawn

The first step I took was drawing the left side of the menu since it was mainly triangles with different shades of white. Because I was using the Procreate app to draw and copy pasting takes a lot longer compared to other applications, I hand drew each individual triangle using the game’s menu as the colour palette reference.

Figure 2.3: Top Bar Drawn

The next step was to draw the bar in the top left. I was originally planning on just drawing the text as a placeholder then replacing them with the font in photoshop but later on I realized that it’d just be easier to find the font and write them on Procreate.

Figure 2.4: Right Background Drawn

The next step was to draw the right side of the menu which consisted of darker and larger triangles. I left space in the middle as I required that space to draw the silhouette of the character and because I do not know where the divide between the white and black triangle starts so I was better off leaving it empty.

Figure 2.5: Title Text Drawn

With most of the background done, I decided to start drawing the title text on the left hand side of the screen. Because I couldn’t find the font that was used for the name, I traced out the letters from other character menus to form his names on my own.

Figure 2.6: Checkboard Floor Drawn

After I finished drawing the title, I decided to fix the text in the top bar as I had originally planned to leave it blank and fill it in with text via photoshop or illustrator. But it was here where I came up with the idea to simply download the text onto my iPad and just do it here to save time. I also drew the ESC / Back button in the bottom right for as much immersion as possible. Once all of that was done I proceeded to draw the checkered floor in the blank space. I had to find a colour that was both similar to the logo's colour, was pale enough and had a strong feel. After some time I managed to finally find one that worked well.

Figure 2.7: Silhouette Outline Drawn

Once the floor was done, I started working on drawing the outline of the character in the menu. For simplicity I hid the top bar as well as the floor so that I could properly see the full illustration without any obstructions. I used the full body render that I drew previously as the base for the silhouette since the way it's shaped worked well. 

I was originally going to use Spider Man's silhouette outline from his menu to create my outline, then drawing the rest of Darkhawk's details over it but I realized that I could just use my own work to save a lot of time.

Figure 2.8: Shading & Geometric Shapes Added

Once I had a good enough outline, I decided to add in another arm to Darkhawk's outline to add more space as it felt a bit empty on the right-hand side of his body, using Spider-Man's arm outline as the base since it's close enough and because the details don't really matter. 

After the silhouette was complete I draw on the white shading in the same style as other character menus and added in the geometric, almost stained-glass style triangles to the silhouette since that's what all the other characters had.

Figure 2.9: Silhoeutte Coloured

Once the silhouette and shapes were done, I finally started to colour it in using different shades of pink in order to mimic the original style as close as possible. 

Figure 2.10: Finalized Background

With the full silhouette done, I used an eraser with the airbrush shape to slowly remove the lower half of the silhouette so that it would blend into the checkered floor as per the game's style.

Figure 2.11: Completed Menu Test

With the background finally done, I added in the character render and finished up any parts that were left, such as the paragraph describing the character underneath the title and the difficulty level. 

---

REFLECTION

I personally liked this project, granted we had to make a 3D model however I simply did not have enough time, effort, nor experience to create an accurate recreation of Marvel Rivals' 3D models as they are fairly complex to make. Given the design of my character, it would have taken way too long to create a model that both fit the game and suited what I wanted. Besides that, I enjoyed recreating the game's graphical elements as closely as possible and I'm really proud of what I accomplished.

While it was fairly obvious if you take a look at the roster of characters, the artists of this game love giving the characters sharp and rougher outlines / shapes with their designs as well as a unique lighting style that makes the characters pop. I found that I'm good at recreating a lot of things in 2D which helped me greatly for this project as I had to mimic the game's style as closely as possible.

I know I'd be limiting by skillset by sticking with primarily 2D but I never joined Creative Media for an ART degree, I joined for a creative media degree, choosing entertainment design was simply the easiest option for me so I'm fine with not having any strong experience with 3D modelling, even if it limits my career capabilities. I know where my road will take me and it won't require extensive knowledge on 3D modelling.