top of page
Poster Wide.png

Legend of the Outlaw Mage

Game Trailer Overview

About Legend of the Outlaw Mage

Legend of the Outlaw Mage is a 3rd-Person Action RPG that combines elements of dungeon crawlers with stylish, fast-paced combat.

" Dive into canyons and caves, defeating powerful enemies to advance. Collect powerful spells to build your arsenal and wreak havoc upon your foes. Gather enough style points to fill up your style meter and unleash your ultimate spells. You are the Outlaw Mage. You are not trapped in here with them. They are trapped in here with YOU. "  —— Steam

Project Overview

  • Role: Generalist Programmer

  • Engine: Unreal Engine 4.26.2

  • Language: Unreal Blueprint, C++

  • Development Team: 16 Developers

    • 5 programmers, including programming lead​

    • 5 artists, including art lead

    • 3 level designers, including level design lead

    • 2 producers

    • 1 game designer

  • Development Time: 5 months​

Roles and Responsibilities

  • Developed gameplay systems, including player skills system, pickup system and audio system

  • Planned and scripted an interface-based blueprint architecture with software development team

  • Created a robust and smooth UI framework to support console controller (Xbox / PS4)

  • Implemented a screen-space particle system using screen capture camera in Unreal 4.26.2

  • Designed a customized culling material function allowing player camera to unobstructed view

  • Collaborated with artist and game designer to implement animations, UI and HUD assets

Postmortem

What Went Well

  • Rapid prototyping went well during the development. For instance, in order to dig the fun of "Using spells to crash enemies", the team were required to prototype the spell mechanics with at least 3 different spells and 2 enemies AI. Successful prototype were then created and delivered in 6 hours.

  • Team culture was awesome and filled with positivity. Leaders encouraged team members to donate their ideas. Team members were able to freely communicate thoughts for the game.

What Went Wrong

  • The gameplay experience is lower than expected. According to the steam comments, including positive and negative, most of the player complained about the low difficulties and short gameplay time.

  • Difficulties in creating a shop system to enhance the rouge-lite experience.

  • Weak spell structure leads to hard implementation of new features. It's a disaster when deconstructing the hard-code game logic and resolving the bad consequence. 

What I learned​​

  • Avoiding hard coding in the early prototype by using ESC design pattern and data-driven techniques.

  • Adaptive UI systems are more challenging than first thought, which should be well scheduled by designer and programmer.

  • Following the naming convention to create files ensure a good developing experience.

UI Framework

Robust and smooth UI framework

Input device update

Legend of the Outlaw Mage is designed to run at PC or PlayStation 4. Player could choose keyboard and mouse, or Xbox controller when playing on PC. From their perspective, they want to see specific icons and texts for different input device, especially when they inserting a new controller during the game. Below is an example of how to detect the input device change and broadcast the info.

Since the bool variable of input device changing was stored in the Game Instance, developer can access it at anywhere. Here's an example of listening the input device changes to switch button image dynamically.

When player changing the input mode, the button icon will switching to the specific icon:

ControlSettingPanel.gif

Hidden cursor hover

Unreal 4 provides a hover status for UMG button, which allow developer to assign image and sound effect on that. However, the hover state could only be activated by the hardware cursor movement. When developer implementing the controller input for button clicking, menu switching and other actions, the UI should also perform hover status with display changing and sound playing.

To resolve this issue, we implemented the hidden cursor hover method. When the event of input device changed notified, the Show Mouse Cursor would set to current input mode (false if not keyboard). After that, the hardware cursor will be "hijacked" and move to the center of the current aiming widget.

Menu stack

When UI widgets are adding into the player screen, they will listen to the input event simultaneously. For cursor input this is fine, but it's not friendly when using controller. For example, player trigger "Quit" button to quit the current menu, but this action will also be processed by other menu widgets at the same time. As a result, all the alive widgets are quit.

This could be fixed by assigning the input priority of the widget component. However, it doesn't solve the issue when multiple widgets are opening with same priority, such as sliders in audio settings, key buttons in control settings, and so on. For the reasons given above, we develop the stack data structure for widgets. It push the new adding widget into stack, and pop it after widget quit.

MenuStack.png

One of the advantage of menu stack is easy to switch menu backward. With only few attributes, the stack could identify and pop all the child widgets of current menu and menu itself. And the new top widget belongs to the current upmost menu.

screen-space particle systems

Screen Particle System

In Legend of the Outlaw Mage, player would gain the style meter point from the dead enemy. According to the design from game designer, style meter particle is collected in the world scene, and then fly to the charge bar UI in the screen space. If the  Image below show the actual effect.

ScreenParticles.gif

Since Unreal 4.26 didn't support the Niagara System for UI. To achieve this effect, we implement a lightweight framework using scene camera capture component. In this framework, screen particle can be generated at any screen position, and move to the destination coordinates. During the movement in world space, the camera will capture the particles in orthogonal projection, and draw to the render target texture. Here's the basic logic of this framework.

ScreenParticles.png

In order to capture the particle, the world position of attached actor are divided into (X, Y) and Z. The Z value is between the capture plane and camera due to orthogonal projection, and the (X, Y) coordinates are computed based on the viewport position. The start coordinates is the screen position of player pawn.

Below blueprint show the capture logic in each frame. If there're particles exists in the show actor list, the camera continue to capture. Render target will be resized if the viewport changed, and the screen coordinates of particles will also be adjusted.

Adjusting the particle position is the same as adding process.

customized culling shade

Culling Material Function

Legend of the Outlaw Mage is a top-down 3D game. Each room surrounds with procedural generated cliffs mesh, which would block the player camera accidently. To avoid this issue, we implement the culling material function to cull the blocking cliffs.

ClipBlocking.gif

For the material of the cliff, we bind a output function to Opacity Mask. In each frame, we shoot a ray from camera to player position. If the ray hit on cliff, we change the scale parameters in culling material function. Opacity reset to zero if blocking. Below blueprint is the logic of culling material function.

bottom of page