Thanks Sunjammer. I hope things are going okay for you these days.
It's been a while since the game's release and I finally have time for a short technical post here. I haven't really thought much about the book specifically but someone asked about the implementation of the page turning and I thought it'd make a decent devlog entry.
Animating the BookDesign-wise the book in Obra Dinn is intended to collect and organize the deluge of information thrown at the player during gameplay. It establishes the chronology of events, shows details for each death, contains clues for identities, and more. I had a few other ideas about how to present this information to the player (a much shorter logbook, a navigable timeline interface, etc) but settled on a story-like book as the most implicitly useful metaphor.
In the beginning when this was supposed to be a quick project, I wanted to keep the UI simple, unadorned, and largely unanimated. The first public demo's logbook uses very simple instant page-flips. By the time I started working on the final book it was already two years into development and I felt that for such a central part of the game it needed to look fancy with proper page-turn transition animations.
Giffing through a few pages in the final book
There were two core technical requirements to make this work:
#1 The ability to render the entire screen to a texture, before post-processing.
Made relatively easy by Unity's basic design and Obra Dinn's custom rendering pipeline.
#2 The ability to jump instantly to any page of the book within a single Update() frame.
Made possible by Unity's ability to calculate UI layout manually, and careful UI code design.
To show a page turn animation, the basic process is:
1. Render the current screen to a texture (Target A)
2. Change to the next page instantly and render that to another texture (Target B).
3. Hide the 2D book pages and show a 3D model of the pages with Target A and Target B mapped onto them exactly as the 2D pages.
4. Play the animation on the 3D model.
5. Hide the 3D model and show the full 2D book UI, now at the new page.
The 2D book is constructed from Unity standard and custom UI components, which I found pretty nice to work with. The 3D model was built in Maya with skeletal animation for the page turns.
Unity 2D book scene
Maya 3D book scene with a placeholder texture
The 3D scene needs to match the 2D UI exactly, which was a little finicky to set up. Keeping all the UI measurements simple and consistent helped with this (the screen is 800px wide, each page is 310px wide, etc.)
The 3D pages have their UV mapping set to subrects of the full screen render target
Animated page turn in Maya, left and right. The sliding vertical bars thing is the page shadow.
Result in-game and in-editor.
The render-targeted textures are captured before post-processing, so they can be used as regular textures mapped onto geometry and post-processed normally like everything else. I play with the depth scale a little bit during the animation and the page itself stretches the texture out unnaturally, but it moves quick enough to not be very noticeable. Some custom shader code handles depth testing (normally disabled for 2D UI) and faux lighting. You may notice that the shadow texture is pre-dithered in the editor view. Dithering is normally handled in post but sometimes opacity like this has to be done in-scene before post processing. The squareness of the page flip animation itself is a stylistic choice. I tried more natural from-the-bottom-corner turn animations but the less-aligned transforms made things a little too busy against the low resolution 1 bit output.
Once this system was set up I was able to use it for other transitions in the book, most notably the sketch/map/chart unrolling and rolling transitions:
Page-roll modeled in Maya. The geometry is static here.
Rolling is faked by scrolling the UV coordinates while moving the geometry in code.
Page roll transition in-game and in-editor
ExtraA few random extra bits about the book. First and for some ridiculous reason, I thought it was important that book appear accurately bound. The centerline and edges change as the pages move from one side to the other. This was a total waste of time but sometimes there's no arguing with mid-project insanity.
Binding split and stacked pages shift while moving from cover to cover
Second, the book was designed to fill the game's original 640x360 resolution, with the edge of the pages right against the edges of the screen and no border.
Original book presentation filling the game's 640x360 resolution
At some point while messing with the fullscreen dither problem, I decided to switch to 800x450 resolution for the entire game. This change came too late to redesign the book for the larger size, and because the layouts were so precise, just scaling it up created too many artifacts. My solution was to add visible front and back inside covers and to center the book against a black screen. I think this unintentionally improved the presentation by adding visual context and giving the dense pages some room to breath.
Inside covers and black border added to fill out the new 800x450 game resolution
One unaddressed consequence of this change is that the 2D book UI content cannot reach outside the 640x360 page boundaries for the 3D page flipping. This makes the bookmarks slightly less functional - logically they should stand above the page but instead they're clipped to the same boundary as the rest of the content.
Bookmarks don't stand above the pages
Lastly, one of the things I added to the game just before release was the final insurance tally. This is a multipage report that summarize the results of your investigation. Being a collection of pages, it would've made logical sense to animate it like the book, lovingly and with excessive attention to detail. Unfortunately, the presentation of the tally is different enough from the book that it would've required quite a bit of additional work. At that point in the development I had almost no energy for something complicated and instead just cheaped out with a twitching page-flip kinda thing. Honestly I don't think anyone noticed or cared.
Cheap-o page change animation for the final insurance tally.
The page number is functionally important to make it clear you're flipping through the report.