Creating End of Level Screen

The Inspiration and Vision

When a player reaches the end of the level in Jungle Jim, I want players to feel as if they have accomplished a grand feat while also bringing the level to a close. There are numerous methods and features utilized by games I enjoy that create this feeling in players. 

My main sources of inspiration for this are:

- Smash Bros Ultimate

- ...and Mario Odyssey

The both of these have a really flashy and punchy look to their visuals. They also both utilizes a slomo or freeze frame effect to bring the level to a close. This effect is in sync with the music, which provides a rise and a resolution which help create a feeling of satisfaction and accomplishment within the player. 

The way I see it, the music is the most important factor for invoking this feeling of accomplishment. I want to prioritize the music first, and then design visuals around the music. Before beginning the music however, I want to create a list of guidelines for the end of level screen to follow based on the intent of my design.

Guidelines:

• Music: 4-6 seconds with a simple continuation playing during the menu afterwards. 
  • Not too short or too long. This plays at the end of every mission, so is a more common screen than something like a hub clear.
• Animation: Jim does a playful dance or animation with a punchy close that displays the collectable.
  • Player is rewarded with a pleasant cutscene with an awesome punchy closing. 
  • After the punch, player continues to see Jim by the menu, so he should idly move in the pose as to not look fake or cheap.
• Camera: Finish with a dynamic camera angle.
  • I want to create a "bold" feeling with the camera and menu, and a dynamic angle will help achieve this feeling.
  • After the punch, the camera view will slide to the right in screen space as the menu slides in, keeping Jim in frame.
• Input/Menu: After Jim touches the collectable, input is lost until the menu appears. 
  • Menu slides in from the right featuring moving graphics in the background/border.
  • Bold style, maybe yellow? 
  • Displays Time, Fastest Time, Coins collected in play, New Collectibles obtained,  and Total Collectable count.

With these guidelines created, I now have a basic outline for my vision that I can turn into a plan.

The Plan

As you read further, I will dive into the following plan as I was executing it:

1. Communicate needs to the team
2. Storyboard the just of what I want
3. Define my technical scope
4. Implementation

Communicate Needs to the Team

     I am not a musician by any means, so I first had one of my teammates create a jingle for the level clear. This is how it is turning out so far! With a jingle created, I can now begin to create a plan for the level clear. 

     I had no other needs to discuss. I would have liked to have somebody start the animation at this time, but I do not currently have any willing animators for that so I will have to tackle it myself later.

Storyboard the Just of What I Want

I first started by creating a storyboard to figure out exactly how I want the sequence to generally look. I'm not very good at drawing and I intended to create this quickly and roughly, but I tried to display the intended movements with arrows to help it be understood when looking back on it.

I like the general plan, but I'd like to block it out first to see how it looks in engine. Though this is also a bit outside of my comfort zone, so I will have to learn a few things to implement this.

Define my Technical Scope

     I am not well versed in creating cinematics, so I have a lot of questions and unknowns to tackle in order to understand just how much work my idea will take; and whether or not I can actually accomplish it.

Firstly, I want this animation to play in relation to where the Jungle Gem is placed in a level. I will probably have some kind of dummy actor for the "center" of the animation, that will basically just be the root location for everything involved here. I have absolutely no idea how to make a level sequence play in relation to a transform, so I will have to do some research.

The Problems:

• I need to make a sequence that can play in relative-space to a transform.
• I need to make a sequence that can play in multiple levels, not just one.
• I need to make a sequence that can spawn actors.

     In my research, I learned a lot of useful things. 

     Firstly, I can spawn actors by using instanced actors and converting them into spawnables in the sequencer UI. This allows me to be able to animate actors that are dynamically spawned only when the cutscene is playing. I initially just planned to use this for the Gem, but I also decided I would make a separate actor BP for the Jim that is visible during this cutscene sequence. The players actual controllable character will be made invisible and player input will be disabled from the game. This decision simplified a lot of the process, as I was able to just create a simple animation graph for testing and have a simpler actor to use in the cutscene. This also removes all references to the player controller in the cutscene blueprints, which reduces the player controller's size map and saves memory and performance. 

     Secondly, I can make a multi-level sequence by creating the level sequence in the content drawer UI instead of the add actors UI. This creates a level sequence that has no bindings to any level, and once I place them into a scene and save that instance is automatically binded. This allows me to just place it into any level and make it playable with my spawnables.

     Lastly, I can make a sequence play in relative space by overriding instance data and setting a transform origin actor. This issue was actually the hardest to solve, and I found my answer in an old tucked away forum.  It was tricky because I had to do this through blueprint. I had never gotten the "Default Instance Data" of an actor before, but it was exactly what I needed here! It allowed me to access the Transform Origin Actor that was otherwise unwritable.

Following this, I have now learned how to tackle all of the problems I previously had! 

...Well almost.

As I got to this point, I realize that I have no idea how to do the "push" effect that occurs when the menu slides out. My current thoughts are that I might possibly be able to do this with render textures, but I also know that will take a lot of finessing and I am wondering what other methods there are to achieve this. 

I created a graphic to better explain what I must solve.

My thoughts right now are that I could use a render texture and create a widget specifically for this. 

If I were to use this method, I would need to learn how to:

• Create the centered scaling effect on the image with the render texture.
• Access the sequence camera and apply that to a render texture.
  • Alternatively, spawn a camera with the EXACT same settings and location to use instead.
• If the widget is scaled, I would need to also scale the aspect ratio of the camera to prevent stretching.

I asked some forums online with no responses, so I just decided to go for it. However, I first tried to just alter the camera to get an effect I was happy with-and I got one! 

I blocked out a basic sequence for the level clear sequence which looks like this:

It took me 10.5 hours to get to the start of this devlog to now, and I'm fairly happy with the result. Now that my technical scope is figured out I am going to go ahead and move on to implementing the sequence and polishing it up.

Implementation

     The audio is still not in its final form currently, so I am deciding to work on the UI aspects of the sequence first. I wanted the menu to be dynamically moving, and I had a plan for how I wanted that to look. My idea was to have an animated border that is wavy on two layers, creating an unpredictably-predictable behavior for it; kind of like watching a waterfall(if that makes any sense at all). I also wanted the menu itself to have a moving background that isn't too distracting. 

The fonts and texts are not completed, but here is the result I came up with!

The wavy border was completed using the material graph. I had a texture with a symmetrical wave moving along the Y axis on a panner. I then made this texture rhythmically move up/down and left/right with sine and cosine waves. At this point, the effect was too predictable so I had to come up with a way to add that "unpredictable" aspect to it. At that point, I had the idea to lerp the coordinates with an offset using a panning gradient as an alpha. This let the motion continue as normal, but occasionally have a wave roll across the effect.

At this point, I am realizing that I need to sit down and figure out what my intentions are with the information displayed on the level clear screen.  Currently, the information looks something like this: 

I decided that I should sit down and figure out exactly what I need to display, as well as how I should present it. 

Firstly, the givens.

• Clear Time
• Record Time
• Option to save ghost
• Save and Continue

These are givens because I know 100% that these need to be displayed. The clear time is important to display here because there is no where better to place it than at the end of the level. The record time should also be displayed, so that the player can compare their clear time with their fastest record. 

Save and continue is a given because...well... the player should be able to prompt their return to the hub at their own discretion. This way, they can read their results or simply take a break. The text also implies that the game will not save until the player presses this button to exit the level, which is true. 

The ghost system is not yet implemented, so there are still a lot of specifics I do not know just yet. Regardless, I wanted to go ahead and insert a button here. I'm not sure if players will be able to store multiple ghosts at the same time, or if the ghost should be whatever they want or just their fastest time. For now, just a button that does nothing yet will be okay.

Secondly, the main thing to figure out.

• Collectible presentation

Completion Percent

While I don't have this implemented into the game yet, I plan to allow the player to see how many collectibles are remaining in the level in the pause menu. This way, they should already know if they are missing collectables if they actually desire to collect them all in the first playthrough. However, for those that do not check these things it would be convenient for them to see their completion percent at the end of every level, so they can passively track which ones they might return to later.

New Collectables

This category is definitely more something I need to think about. I definitely want players to be able to see how many new collectables they obtained in this run, but I'm not sure that this way of presenting it is what I should do. I think it might be interesting to watch the numbers increment up to the amount of them that you got, but I would need to do it in a way that is quick. It would also be confusing to watch several numbers increment at the same time, so they would need to be subsequent of each other. With that in mind, I think it would be very annoying to wait for others to finish so you could see everything's final result.

So for the sake of brevity, I think it would be best to have the amounts not increment and instead just appear. However, I can still do something with that. I believe I can make them sequentially appear with some kind of particle and sound effect. This would take very little time and would be visually interesting. It would also include some kind of suspenseful buildup to the completion percentage being revealed. Now that I have this planned, I will definitely ALSO INCLUDE the total collectables on this menu.

All right. I've spent some time figuring out what I want, and I actually already implemented almost everything for the UI at this point. Here is where it's at so far!

You may notice there's quite a few things that I have not talked about, such as the level transition and the button animations. Those were on the fly creative decisions I made, and I think they turned out pretty well!

Animation

     A few days after completing the UI, I got the final version of the level clear music. 

The new theme: https://drive.google.com/file/d/1-ixr18Q1Ae66vIyLYkabafdXIT1r7_mq/view?usp=shari...

With the final version in hand, I now have to create the animations. At this point, I am realizing that I have no idea how Jim should be dancing specifically. I am trying to visualize it in my head, but not having any breakthroughs. My first thought is to look for some more reference material. I struggled to find any, and I even tried making a cinematic without dancing to experiment. In the end though, I decided I needed to just to something simple for right now and landed on something kinda similar to this.

As I'm trying to animate this, I am realizing I do not have the necessary skills to create this animation. What I instead will look into is animation retargeting. My Unreal project is in 5.2, which does not have the new retargeting feature that works better across skeletons, so I will instead try to learn how to retarget in Maya. My goal is to retarget a dance from Mixamo onto our Jim skeleton to play in the middle of the animation. The first half, will be a pose and the final will be the spin and collectable reveal. 

To do this, I will need to create IK Rigs for both the Mixamo skeleton, and Jim skeleton. Fortunately, I already have a Jim IK Rig, so I just need to make one for the mixamo skeleton. 

After doing so... success! Kinda... It worked, but it will definitely require some manual cleanup. Unfortunately, the manual cleanup will have to be done in Unreal rather than Maya, which I have not really used for animation before. Thankfully I doubt it will require much to still look better than if I tried to animate something from scratch. 

Back in Maya, I am going to animate and export the beginning and ending sections of the animation I want(the pose and the spin.) After which, I will create a new level sequence in Unreal to use to Bake the animations in. 

Here is how it looks in-game!

This is by far the happiest I've been so far with the animation for the clear. In terms of animation, I feel like this is done! However, there is still plenty I wish to do with the UI.

Polish

     Right now, the "Level Clear" text that appears is still just placeholder. I wish to have some kind of animated graphic pop up. I am thinking confetti is appropriate given the occasion and tone. There is also a "sparkle" sound in the music at the reveal, and this would match that nicely.

In terms of implementation, right now I think the way I could do this is to find a stock confetti pop animation to import into after effects. Once in after effects, I can export as an image sequence which I can then edit into a flipbook texture in photoshop. Upon further research though, this would be difficult to do with confetti. There are lots of small pieces moving quickly, which would require crazy resolutions to display properly. I think for this effect, I might end up doing a video effect after all.

I did my first attempt, but I made a bit of an error.

I kept the resolution of the video low as to prevent from using too much memory or taking too long to load. Unfortunately, the quality was SO LOW that I was unable to properly create an alpha for the confetti. I could use an additive blend mode to blend it without the black pixels appearing, but even so the effect still looks like it does above: pretty bad. Because it was in additive mode, the colors of the confetti are completely washed out.

I recreated the effect at a higher resolution, and was able to use the Masked mode this time. I also went ahead and animated Jim's Idle after showing the collectable.

Conclusion

At this point, I think there is still more that I can do to polish this up. I also however believe a break will benefit me so that I may return with fresh eyes on the topic. Eventually, I'll have to return to this when I have the collectable model finished. At that time, I will do more.

This has been a long devlog, so it's probably better if I wrap it up here!

At the (near) end of this journey, I present to you the current result!