Work on the vertical slice of Moonfrost, an independent AA online and cross-platform life sim game made with Unity:

  • Engineer #1, research, prototyping and game development

  • Project management, roadmaps, milestones, epics, tasks, bug report, weekly playtest

  • Novel 3D pixel-art rendering pipeline

  • 3C (Character, Camera, Controllers)

  • Map system using dual grids and LoD

  • Placement of items, occlusion, culling, pixel-perfect camera, navigation

“Moonfrost is a 2D multiplayer, life-simulation and role-playing game for mobiles and PC that will let you escape into a charming, ever-growing world full of secrets and wonder-whenever and wherever you want.“

Announcement Trailer

It’s still early on, but the 3d pixel-art is already starting to come to life:

Prototyping

Our reference game was Stardew Valley so naturally we started by looking at ortho top-down cameras. We tested several other camera views and eventually our art department settled on the ortho iso view. The ortho camera is required for pixel perfect projection.

One of the first prototype in ortho iso view, with some map tiles, to test 3C and rendering. At this stage we had a lot of pixel jittering and there was a bit of doubt. Could we really achieve 3D pixel perfect in iso?

3D Pixel-Art

For Moonfrost we wanted to bring pixel-art to the next level. That meant realtime lighting, shadows (from any angle), point lights, animation, day and night cycles, seasons with unique atmospheres, camera effect, possibly volumetric fog, etc. We also wanted to throw in some true 3D (to be automatically pixelized) to allow for tons of character customization.


But it’s hard to shade pixel art correctly! I couldn’t find that many pixel-art games with high quality lighting:

  • Pathway does an amazing job with lighting, they have a custom made 2D engine with normal mapped sprites and custom shadow casting. It looks like a great solution but it took 2 to 3 years to make the rendering engine!

  • Sea of Stars uses Unity, looks amazing, and does exactly what we’re looking for. It showed us that it was indeed possible to do pixel art in Unity and leverage its 3D rendering features

3D Pixel-Art Renderer

It was a team effort featuring Roarke Nelson (Lead Artist) and Kel Parke (Technical Artist) to achieve the rendering goals I mentioned above. And here is a brief breakdown of our solution:

  • Camera view is ortho iso, and ortho size is determined by grid size (1x1m) and pixel size of 1x grid tile

  • Downscaling to 360p to ensure an always perfect grid, and to allow mixing 2d & 3d (3d gets pixelized at same sampling rate)

  • Renders into a RenderTexture which is then shown upscaled in fullscreen

  • Pixel-art objects (viewed as pure 2D) are in fact 3D meshes with their UV camera mapped toward the iso camera. Can then cast and receive shadow, have a normal map, and be lighted like any 3D object in Unity

  • The camera and every object always need to be placed on a ‘Iso Pixel Perfect’ grid, to avoid jittering due to the 3D rasterizer

  • Finally, the camera needs to implement sub pixel smoothing to prevent jerkiness when moving while game is upscaled

  • On top of it all, we made a few custom shaders to get as close as possible to a pixel art finish (light quantization)

Snapshot from the farm, at different times:

MF4.png
MF5.png
MF1.png
MF6.png
MF2.png
MF3.png

World Building

This is what our terrain tiles look like on flat ground. The seam is in the middle and allows for maximum space for transitions.

Each terrain tile is placed based on what terrain & elevation data is found at its corners. In this system each corner is also called a “dual tile”. And this is what is modified by the player, this is where he farms or places most items.

Because our game is in 3D, terrain tiles have to look at 8 corners dual tiles, to see if that terrain is to be flat, or elevated.

Terrain is placed automatically based on the dual tile data surrounding it.

This is very similar to building an iso-surface in marching cube!

Item Placement

Items can occupy an entire dual tile (seen in cyan) or can be placed more precisely on a 1/4 precise grid (seen in purple).

Here we see the fences and the plants taking each a full dual tile, while some props around the farm occupy the precise grid.

That way players can place items precisely to decorate their space, and we don’t have to create a giant precise grid. We only create it when it’s needed.

Next

Starfire