Search Unity

2D Pixel Perfect for a crisp conquest in Skul: The Hero Slayer

, enero 21, 2021

With 2D Pixel Perfect, the 2D team at Unity wanted to make it easy for creators to produce sharp and clear pixel art of various sizes and scales intended to be displayed on a range of devices. When the team at SouthPAW Games embarked on developing their first pixel art game, Skul: The Hero Slayer, they relied on many Unity 2D tools to help them create this beautiful 2D game.

SouthPAW Games used Unity’s 2D Tilemaps, 2D Pixel Perfect and Sprite Atlas to make this highly anticipated rogue-lite.

Bringing Skul to life

Skul: The Hero Slayer is a 2D rogue-lite (the game changes on every play) and action platformer featuring a small skeleton guard named Skul, who embarks on a journey where he takes on enemy Adventurers, and the Imperial Army to rescue his Demon King.

SouthPAW Games, now a team of eight, was founded in 2017 by former gamedev club members from Chonnam National University in South Korea. Unity has been the tool of choice ever since they started creating games with Unity 3.0. Skul is their first pixel art project.

The team owes a debt to historical platformers like Kirby and the Mega Man series, where players gain abilities by eating enemies or using the boss’s special weapons. These influences are felt in Skul, where you can enjoy fast-paced battles with different characters that each have a unique set of attributes and skills.

Sang-u Park (aka PAW), the game’s director and animator, teams up with four programmers, two background artists and one character artist.

Skul’s team is working toward an official release in the first half of 2021. Being continually updated, the game is currently in Early Access on Steam with Very Positive reviews. When we spoke with the team, more than 700,000 people had already wishlisted the game.

Setting up 2D Pixel Perfect and creating the visuals

SouthPAW Games used the latest Long-Term Support version – Unity 2019.4 LTS – to develop Skul, along with Universal Render Pipeline (URP) 8.10 for graphics.

The 2D Pixel Perfect package, included with the 2D Renderer of the URP package or available via the Package Manager, features the Pixel Perfect Camera component, which ensures your pixel art remains crisp and clear at different resolutions, and can make motion, rotation and scaling of objects follow the pixel grid pattern. It automatically makes all the calculations needed to scale the viewport with resolution changes.  

When working with pixel art, it is important to keep the resolution of all assets consistent across the game, as the team realized at the beginning of development. “The reference resolution during preproduction turned out to be way too high for our needs, and we ended up with overly detailed graphic resources. Eventually, we had to recreate all the visual resources.”

The team finally settled on a PPU (pixels per unit) of 32 that applies across the game, with a Tilemap grid of 32 x 32 pixels per tile, where one tile equals one unit of in-game distance.

The set up of the Pixel Perfect Camera component and Sprite Renderer of the GameObjects

Their reference resolution was 640 x 360 pixels and they set 400 pixels as the maximum height of the background. To make sure the graphics remained sharp in all resolutions, the team used Game view to check the display, as well as testing the game on PCs with different specs.

Pixel Perfect Camera scales up the reference resolution – so even a retro style looks good on modern screens – by multiplying the resolution by whole numbers. To fill the full screen, it either shows black bars or expands the view port, according to the user’s preference.

To keep the process as seamless as possible, the team makes a rough version in the reference ratio to get the feeling of shapes and colors. Next, they share and discuss the ideas during the concept art phase (1). When a character is confirmed, they plan the animation and sketch the keyframes as in 2

They then make prototypes to check the motion and size (3), before they can start programming the character abilities and skills. Finally, to produce the animation they use the AnimationImporter plugin to bring their Aseprite asset into Unity (4).

Many other elements contribute to the look and feel of Skul, such as the hack-and-slash action effect and how objects like armor or weapons pop off an enemy when they are killed. And 2D Physics helps make it feel real.

Director and animator Sang-u Park (aka PAW) explains. “We call these objects ‘parts.’ The spawn position for each part is the same as shown in the sprite, which makes it look as if it’s falling off the enemy. The player may also hit the parts to knockback. Each part has its own weight and rotational force, as would be the case in the real world.”

For rotating objects, sometimes the team rotated a sprite directly in Unity. In other instances they produced a sequence animation by creating a sprite for each rotation angle.

“Creating a sprite for every rotating angle to deliver the intended visual will surely give us the quality, but the cost will be higher as well. Whenever we have a sprite to rotate, we carefully consider aspects like the sprite’s visual and its role to decide which method to apply.”

Designing levels with 2D Tilemap Editor

For Skul, the team classified the world’s tilemaps as Terrain, Terrain Foothold, and Platform. A player cannot pass through Terrain; Terrain Foothold is also blocked, but a player can step on it; and a player can trespass the Platform kind, for example, by jumping up from a lower point or jumping down from it. The team also created a script to classify and set the tile type by inheriting the tile class.

According to PAW, “We used the Tile Palette to generate tiles and used many features that the Tile Palette provides. We also optimized Colliders by binding the Tilemap Collider 2D into a single Polygon Collider 2D.” 

The Tile Palette allowed the team to create maps visually and intuitively while maintaining full control with the API. They also optimized Colliders with the Composite Collider component.

Tips for performance, efficiency and more

Sprite Atlas

The performance improved substantially from using Sprite Atlas. By packing together sprites that are present in the same map, the team reduced draw calls.

Initially, the team focused on optimizing the draw calls and memory consumption, but soon, rather than squeezing out a performance improvement of 1 or 2 fps (frames per second), they shifted their attention to making the game more fun. They also spent time on making sure the project structure was convenient for testers and themselves.

“As a 2D game, it does not have high system requirements. Once we optimized the game performance to a certain level, the game could easily run on a smartphone,” states PAW.

The visual effects were packed with empty space around the animation sprites with the pivot point at the center, so it was easier to have each frame in the right position for the animation.

Physics 2D

Physics 2D was used for collisions between static and dynamic objects. For dynamic collisions used for visual effects (like a debris effect), the Physics 2D accuracy setting could be lowered without directly impacting gameplay. For elements that require high accuracy with direct game experience, such as the player’s movement, the team used features like 2D Raycast and Collider casting to calculate some game logic.

Other tricks

SouthPAW Games extended the Unity Editor to allow the team to edit and use most Unity features without code changes. The Unity Profiler played an important role in identifying CPU bottlenecks and the Frame Debugger checked the drawing, so the team could constantly improve the game based on the information learned from these tools. 

Among the additional work done to save resources, the team: 

  • split visual effects into smaller parts, then mixed different parts for different output purposes
  • changed attributes such as the size, angle, and colors to make them look like new effects
  • used the default shaders that come in URP and 2D Renderer, but removed unused functions from their project

Other 2D tools and custom extensions

Several 2D tools were released after the project had already started. While the team couldn’t leverage them, they are excited about 2D Sprite Shape, 2D Lights and Sprite Tools.

“These tools are too complex for us to implement by ourselves and they’re difficult to optimize. And there were no third-party tools that we could fully rely on. We’ve heard that some of the tools use the Job System and are well optimized. We look forward to being able to access useful, official tools like this.”

As fans of 2D games, the SouthPAW Games team is pleased with the 2D tools Unity releases and updates. 

The team also uses many of the APIs that come with the 2D tools and made extensions that would enable artists to iterate on the game without needing to change the code.

The artists used SpriteAnimationPreview to previsualize frame-by-frame animations.

Another handy tool was the Preset system, which allows you to load predefined settings for imported assets. It is useful for creating game items and characters in a consistent way.

The team saved time by creating shortcuts to their project folders. They set up their weapons system with an option to create new prefabs with the relevant information included, and a system to drop items at the player’s position.

Clinical review, critical accomplishments

SouthPAW Games showcased Skul for the first time at the Global Indie Game Development Contest (GIGDC) and won first prize – a Unity Clinic (a Unity Korea service). Unity Korea sent a team to Gwangju for the Clinic session to provide feedback to the development team. Together they reviewed the project’s performance. The Skul team also learned the basics of profiling from the Unity Clinic team.

For SouthPAW Games, the official release of Skul is just another checkpoint on the journey. They intend to keep listening to players and updating the game until they achieve the Skul they had envisioned.

You can contact the team via the Steam community, Discord, and Twitter.

More Unity resources for 2D

At Unity, we build native tools optimized for 2D workflows that are designed to reduce round-tripping, accelerate productivity, and empower teams to bring stunning 2D worlds to life across all platforms. Discover some of them on our 2D tools page.

Interested in pixel art? Check out our guides on how to achieve true retro 8-bit and 16-bit graphics.

Want more 2D pixel art, performance and productivity tips? Watch our Unite Now session below.

3 replies on “2D Pixel Perfect for a crisp conquest in Skul: The Hero Slayer”

Nice, curious about allowing different aspect ratios – this will affect gameplay in 2D.
Also the «Upscale Render Texture» option on pixel perfect camera makes the most sense to me – can not imagine not using that unless you want sub-pixel (retro-pixel) movement.

Comments are closed.