For me a big part of this game is trying to make fun, interactive events. In one particular event, I wanted to use a book as a way to explain the event's mechanics. Trying to avoid big blocks of text, a book with a bit of art and graphics seemed more appealing.
Nobody wants to read all that
Does a book need to have contour fitting contents on each page? No. Does it make the page more difficult to read? Maybe. Does it look cooler? I think so.
The problem is simple, make the contents of the page distort to the curve of the book. In order to make the task much easier, I created a test pattern.
From this we'll be able to easily see our curve in action
My approach for the contour was to start with familiar curves. It looked parabolic in places, with a upward trend near the end. To start, I experimented with ln(x) since it looked like the bend of the page.
Throwback to high school
From there I started adding translations: adding coefficients to make x grow faster or slower, or adding constants to shift the values.
Specifically, what I needed next was to add a component that starts to decay as x increases. ln(x) never starts to slope down itself so I started adding a -x and similar functions.
Bunch of tweaking and scaling with constants to get the shape just right
A few x^2 factors once we cross 30% and 55% of the width of the texture, to start curving upwards
At the end of the shader, there's a little more massaging and scaling. But that's it.
Despite the source art I was working from had (realistic) different curves on the top and bottom, the fit was close enough. Now all I have to do is replace the test pattern with a book page of the same dimensions.
The other advantage of this approach is being able to draw the page contents dynamically. The whole point was avoiding having to prebake all of these pages in an image editor. If you have to change or update it, you would have to do whatever process you did to skew the results, and re-export the image.
Additionally, what if you wanted to have some animated sprites in your book? That would be super cool.
For me, I made a new type of Element called a BookPage. Every frame, the book page renders out its contents to a RenderTarget2D. Then when draw time comes, it simply presents the RenderTarget as a texture and draws to the screen.
Small peek under the hood
In the end, I'm proud of this little gimmick. I hope to add touches like this all over the UIs. They're cheap and easy and I feel it adds a bit of character to the game.
Comments