Tag: litk

Posted on

Creating Realistic Cloudy HDR Skyboxes

Each level of “Lillie is the Keeper” features a unique high-definition skybox texture. These Unity cubemaps are rendered in Bforartists, the UI-focused fork of Blender. Here’s how you can create your own.

Create a new scene in Bforartists, and switch the Render Engine to Cycles (camera icon: Render Engine). Add a single Directional Light, to act as the sun. Model a gently curving lenticular piece of geometry, about 5 km in radius, to act as the ground/ocean, and texture it appropriately.

If you’re interested in accuracy, you can enable an add-on called Sun Position to set your sun angle for the date, time, latitude and longitude of your game scene (Preferences menu: Add-ons: Lighting: Sun Position).

Switch to the Shading tab, and select the World (background) shader. Create a Sky Texture node. Set it to Preetham, and link its output to the World Output node’s Surface input.

Clouds

Next, model your clouds (as ordinary geometry) in rough form. Hide them from rendering. Create a Volume object (Add menu: Volume: Empty). Go to the Volume’s Modifiers tab (wrench icon), and add a Mesh to Volume modifier. Set the Modifier’s Object to your hidden cloud geometry object. What you’ll get is a Minecraft-like blocky cloud. Increase the Voxel Amount to reduce this blockiness somewhat–try 1024.

To fully remove the blockiness and get cloudier edges, go back to the Modifiers tab, and add a Volume Displace modifier. Go to the Texture tab (checkerboard icon). Create a new texture, and set its type to Clouds. Go back to your Modifiers, and assign the cloud texture to your Volume Displace modifier. Adjust the Texture and Modifier settings until you like the results.

Go to the Material tab (crash test dummy head icon), create a new material, and assign it the Principled Volume shader. Adjust the material properties to your desired cloud appearance. (This can take a while. Start with a Density of .001-.005. You’re welcome.)

Rendering

Finally, set up your camera to render the six faces of the cubemap. In the Data tab (camera icon) set the Field of View to 90 degrees. In the Output tab (printer icon) set the Resolution to a power-of-two square, like 1024 or 2048. Set the Frame Range to 0-5. Select a folder and filename to render to, setting the File Format to OpenEXR (.exr), in order to save HDR color values. Go to the Animation tab, and animate your camera to be rotated as follows on frames 0-5 (x,y,z):

  • 0: 90, 0, 270
  • 1: 90, 0, 90
  • 2: 180, 0, 0
  • 3: 0, 0, 0
  • 4: 90, 0, 0
  • 5: 90, 0, 180

Render all six frames (Render menu: Render Animation). This would be a good time to take a walk around the block. Notice the blackbirds.

Building the Skybox

When you get the renders looking how you want, open your frames in an image editor and arrange them in one big vertical strip. Frame 0 should be at the top, and 5 at the bottom. Save this, again, as an OpenEXR file.

In Unity, import the strip image. Click on the texture to see its Import Settings in the Inspector. Set the Texture Type to Default, the Texture Shape to Cube, and check Fixup Edge Seams.

Finally, create a material. Set the Shader to Skybox/Cubemap, and under Cubemap (HDR), select your texture. In your Scene, open the Lighting panel (Window menu: Rendering: Lighting). Click the Environment tab, and assign your material to Skybox Material.

Bonus

Download my .blend file for LitK level 5: Light right here.

Posted on

Lillie Can’t Do a Thing With Her Hair

Download the .blend file here.

In LitK, Lillie’s messy hair becomes visible when you don’t have look-around control. (I’m bored with letterboxed cutscenes.) The original hair textures were hand-painted, before “rounded realism” really took shape. There’s a realtime hair package in Unity, but it’s heavy for iOS devices. I decided to try rendering out some more realistic textures in BForArtists (Blender).

How does a gen-x-lennial go about learning a new tool? Try to find the one non-video tutorial Google still indexes. Skim it. Dive in. Check the documentation. Get something you’re reasonably happy with. Junk it, and start over from scratch. Get something maybe actually useable. Tweak it until you run out of time.

The results aren’t bad:

Then, defocused in Photoshop:

The Cycles renderer and Principled Hair (Transmissive) shader work together nicely. The tweaking options could use some love. (WTF does “shape” of a noise function mean?) Always use the BForArtists manual, not Blender’s.

“Lillie is the Keeper” 1.4 will bring many bigger improvements. We’ll look at those soon.

Posted on

Lillie is the Keeper 1.2 Released

LitK 1.2 is now available on the App Store. It features:

  • Revamped kitchen with period furniture
  • Enhanced UI
  • Improved AR setup experience
  • New event system to support current & future game enhancements
  • Refactored, more reliable UI system
  • New intrusive thoughts
  • More Acre Courier content
  • Bug fixes & small visual improvements throughout
Posted on

Bunk – Downloadable .blend File

With the first of the planned updates out, I’ve improved some of the visual elements that were just sort of roughed in for the initial release. (Because if you wait until everything’s perfect, you’ll never ship.) I wanted to share a little of my process.

Really, Lillie. Make your own bed.

Here is the ZIP file. Everything is modelled in Bforartists, the UI-focused fork of Blender, and the file is 100% compatible with the mainline app. I use proxy Materials in Bforartists, as they’re easily replaced with native URP Materials in the .fbx file import dialogue. I find it more reliable to place unused/support items into a separate Scene Collection, and export the Active Collection from the .fbx export dialogue, rather than selecting items manually. Normally I do the bevelling by hand, but on the bunks I tried out the Bevel Modifier, followed by a light Decimate Modifier, to clean up unnecessary flat geometry. It works okay, and it’s quick, but the polygon count ends up higher than necessary. Because of the way Unity handles animations, the curtains are separate files.

The bunks are based loosely on photo references from the New Brighton Lighthouse. They’re meant to feel friendly and cozy, as they’re Lillie’s first sanctuary after the disastrous boat trip. In my head cannon (which I guess makes it the official cannon) we’re playing through Lillie’s memories, fears and anxieties. In “real life” she succeeded at all of these tasks the first time, but–like many of us–obsesses over what could have gone wrong. (Which are our in-game failures and resets.)

Posted on

Useful Unity Components: PlaySounds

In this ZIP file you’ll find three C# scripts for Unity: PlaySounds.cs, PlaySoundsMultitrack.cs and PlaySoundsBySpeed.cs. The latter two are subclasses of PlaySounds.cs, and require the former in your project. These small, lightweight scripts are used throughout Lillie is the Keeper (along with a couple other subclasses that are dependent on features of the game).

Basically, they do everything that I wish Unity’s own AudioSource Component did by itself. Play through a list of AudioClips? No problem. Play a random clip from a list? Done. Play OnTriggerEnter()? One click. You can play a single clip or all clips, disable the GameObject after playing, trigger audio from an external script, and monitor playing status with UnityEvents or a simple bool.

Check the scripts’ headers for a full rundown of features and how to use them. You’ll also see helpful tooltips in the Unity Editor.

The two subclassed scripts, PlaySoundsMultitrack and PlaySoundsBySpeed let you do two additional things. With the former, you can swap between up to four wholly different sets of AudioClips. Think of a windmill randomly playing different sounds from a playlist at different speeds: a slow, creaky set of sound clips at lower speeds, and a higher, whooshier set at high speed. PlaySoundsBySpeed lets you specify a minimum velocity at which to trigger sounds, and scales the volume up from 0 to 100% at a maximum speed. (Setting both speeds equal always plays the sound at normal volume.)

There are a couple things you may want to customize. These are written for rapid prototyping, trying things out, and generally seeing what works. Just about everything that can be public is, rather than using [SerializeField] private. If there are no AudioClips in the list, PlaySounds will simply disable itself; you may prefer to throw an error. Additionally, you’ll notice that an AudioSource component is necessary, but not required in code via [RequireComponent(typeof(AudioSource))]. (Instead, PlaySounds logs the issue for you.) This is deliberate, to keep Component coupling loose while trying things out, but may not be what you want in production.

I encourage you to use these, without limitations, in your own work. (But if you do something cool, please do let me know!)

Posted on

LitK: Here Goes Nothing

This is it! “Lillie is the Keeper,” the innovative new AR adventure game for iPhone & iPad, is live…

And best of all, it’s FREE, through January 6!

Explore your own virtual lighthouse, and live Lillie’s story. I’m proud to bring this playable short story to you, and hope you enjoy your time at Switch Rock Light Station.

Download on the App Store