Inspiration
We always enjoyed playing TTRPG, that's also how we met, but for the longest time we found it difficult to find webapps or softwares that were both able to allow us to digitally store our characters, especially coming from different realms than DnD, and enabled us to also play organically without thinking "this character sheet design is bad". That's why we decided to design our own digital character sheets, with the goal to accomodate even the least known TTRPG Handbooks, and making them easy to access and play with by putting them all together in the same web app.
What it does
For now, the Webapp shows a 3D menu entirely made by us. The User can click on the blank sheet in front of him to open a simple mockup version a character sheet from The Witcher TTRPG. Here the User can explore various tabs, showing the most important information about the character, and even throw some 3D dices to resolve some stats and skills checks.
How we built it
We built the app in Angular to exploit it's components and modularity, which will reach it's full potential once more handbooks and rulesets are added. The 3D environment is built in Blender and then imported in the Angular Project using the Three.js library and its plugins. Then camera, lights and a bit of physics were added to the scene. On the other hand, the frontend was designed and then developed to act as a functional Overlay displayed when the User moves the camera on the paper.
Challenges we ran into
Beside designing the character sheet to be useful in a web view, we had some issues with Three.js in the jumpstart phase of the process, as it is not a library any of us ever had to use. Then the overlay nature of the frontend added some complexity when it came to showing the user a real dice throw. Furthermore, the lights took some trials and errors too.
Accomplishments that we're proud of
We are proud of showing a functional demo of the project which tackled most of the challenges of handling a 3D environment and all it's components as efficiently as possible to be displayed in a web app.
What we learned
We learned how to manipulate 3D objects in a Web Application thanks to the Three.js library. How to manipulate the camera and move it across a scene, how to play with lights and bloom to obtain a reasonable effect and, most importantly, how to manipulate physics and raycasting to throw dices and obtain results.
What's next for Character Vault
On the 3D part: Fixing dices physics, implementing a separate dice thrower, adding a physical library with books from which the user can choose a blank manual to create a new character....
On the 2D part: Choosing which character to render, new blank Character creation, expanding The Witcher Handbook with all it's component and adding the edit logic to the display overlay, adding a functional note system to support the character during it's adventures...
What it does
For now, the Webapp shows a 3D menu entirely made by us. The User can click on the blank sheet in front of him to open a simple mockup version a character sheet from The Witcher TTRPG. Here the User can explore various tabs, showing the most important information about the character, and even throw some 3D dices to resolve some stats and skills checks.
How we built it
We built the app in Angular to exploit it's components and modularity, which will reach it's full potential once more handbooks and rulesets are added. The 3D environment is built in Blender and then imported in the Angular Project using the Three.js library and its plugins. Then camera, lights and a bit of physics were added to the scene. On the other hand, the frontend was designed and then developed to act as a functional Overlay displayed when the User moves the camera on the paper.
Challenges we ran into
Beside designing the character sheet to be useful in a web view, we had some issues with Three.js in the jumpstart phase of the process, as it is not a library any of us ever had to use. Then the overlay nature of the frontend added some complexity when it came to showing the user a real dice throw. Furthermore, the lights took some trials and errors too.
Accomplishments that we're proud of
We are proud of showing a functional demo of the project which tackled most of the challenges of handling a 3D environment and all it's components as efficiently as possible to be displayed in a web app.
What we learned
We learned how to manipulate 3D objects in a Web Application thanks to the Three.js library. How to manipulate the camera and move it across a scene, how to play with lights and bloom to obtain a reasonable effect and, most importantly, how to manipulate physics and raycasting to throw dices and obtain results.
What's next for Character Vault
On the 3D part: Fixing dices physics, implementing a separate dice thrower, adding a physical library with books from which the user can choose a blank manual to create a new character....
On the 2D part: Choosing which character to render, new blank Character creation, expanding The Witcher Handbook with all it's component and adding the edit logic to the display overlay, adding a functional note system to support the character during it's adventures...
Log in or sign up for Devpost to join the conversation.