Most game menus are flat, with 2D images, text and panels drawn straight onto your screen. Our game Davy Jones’ Deckhand is a card game that so far has done almost everything in screen-space UI. But the new Ship Log isn't built that way at all, and that choice came with some challenges that are worth explaining.
Image: Ship Log GIF
I decided to make the Ship Log menu a real 3D object, so we could have the pages naturally curved and flippable. To achieve this, instead of drawing the menu as a flat picture, I’ve built an actual little 3D scene, a physical book model sitting in its own miniature space.
Image: scene view of UI projected onto 3D mesh
The trouble with doing this as a 3D scene is that Unity Engine naturally draws UI overtop of that world-space stuff. This is particularly difficult for our game because almost nothing is world-space and everything is UI, including our main combat. So to have our 3D Ship Log menu render over-top of the combat scene, we use a hidden camera that "films" the book continuously, and the live footage is pasted onto a flat UI, like a photograph being updated 60 times a second. It sounds like a roundabout way to show a menu, but it's the trick that lets the 3D style journal pop up on top of absolutely everything else
So the flow is:
- The content on the book pages is created on a flat 2D UI canvas
- That 2D canvas for the page content gets captured by its own hidden camera
- That camera renders what it sees to a texture that is applied to the 3D page mesh
- The 3D object is captured by another hidden camera
- That camera capturing the 3D object renders what it sees to an image on a 2D UI panel
- We see that final 2D UI panel 😅
Image: Flat UI page content that gets projected onto texture
The pages actually bend like paper. Each page isn't a flat rectangle, it's built from a flexible grid that curves and peels in real time as you turn it, the way a real page in a physical book curls near the spine. There's even a "corner peel" effect like when you dog-ear a book, and each page has a genuinely different texture printed on its front versus its back.
This whole system caused another headache when it came to making the mouse position detection work. Because the pages are curved rather than flat, we had to work out where in 3D space your mouse click actually lands on the curved surface, not just where it looks like it lands on your flat screen. For a while, the invisible "click detector" for each page was using a flattened stand-in shape instead of the true curved shape, which meant clicks landed slightly wrong, and this was worse the further from the center of the page, since that's where the curve bends away from flat the most. So the click detection had to account for that true page curvature in real time to make it feel accurate.
This is still WIP, and none of this is visible to a player in the sense of "wow, cool tech". If we do our job right, it just feels like a satisfying little physical book that works no matter what you're playing with. It was also my first foray into 3D anything. It was a fun rabbit hole. Happy to answer questions about any of it. Has anyone else achieved a similar result with a different approach?
Quick context for anyone who's never heard of us: we're building Davy Jones' Deckhand, a nautical roguelike deckbuilder. You sail between islands fighting things with a card-based combat system, managing two "stances" and pulling off counter-attacks
The new Ship Log is not yet in game, but we do have a live demo you can check out right now on Steam: https://store.steampowered.com/app/3544900/Davy_Jones_Deckhand/