Dear Bloxers,
In our first blog post explaining how OpenBlox came together, we gave you an idea of why we chose to get into the blockchain space in the first place and why we picked NFTs as in-game assets.
A quick TLDR: as gamers, we wanted to empower players to own their assets without centralized power structures.
We also shared the process of how we developed characters based on hour-long discussions and relying on inspiration from various sources such as arts, games, and more.
In this post, we will share more about how we got to develop the User Interface for our first app: RougeBlox.
RougeBlox is a roguelike card game. Each player will use their Blox NFT as a character to start their adventure. Journeys are randomly created to ensure that no experience is the same and keep things exciting.
As players advance through the game, they will build their deck, opening ever-more options for strategic play. Along the way, they will fight many enemies and bosses and gain a lot of experience.
You can read more about it in our Whitepaper.
So let’s start with the first thing we had to get down: the logo.
Logo
The above was one of 6 initial designs we mocked up for the logo. As you can see, the letters are slightly tilted to the back, as in, for example, the Minecraft logo.
However, we didn’t feel that this logo was quite fitting for a turn-based strategy card game since with the clouds and leaves had more of an association with farming. So instead, we ended up favoring another design. The below results from various iterations and meetings around how to arrange elements, which colors to pick, at what angles to present letters, font size, you name it.
Splash Screens
First and foremost, if you’re not familiar with the term, what is a splash screen?
A splash screen is also sometimes called launch screen. It is shown to users when first interacting with an app or website. It usually contains an image, the logo, and (if applicable) the current version of the software.
For the RougeBlox splash screen, we started to create them around the first three races we released:
- Flower
- Fish
- Techno
Each one of them lives in separate layers with unique features. Therefore, all Splash screens draw on different inspirations.
We started with something simple as just scenery for the Flower’s world, the green layer.
We added more of our native elements to it, until we had a version all our team could agree on, the one you probably have seen before:
Another screen you are by now familiar with started out with the following background until we added the Techno in action:
The main splash screen, which will shown to users when opening the game was inspired by Zelda, and other games where the main character is overlooking their world.
It evolved from a rough sketch:
To the final screen that you’re all familiar with:
And of course, any game that involves cards, we had to come up with a design for all the different attacks, and defenses that players can leverage to fight their opponents.
From very conceptual first sketches as the below
we picked our favorites and evolved them to fit all the different races and their specific effects.
For all the different cards in progress, we’ve been sharing them over the last few months on our Twitter feed and will continue to do so whenever we make further design progress on them. A peek at our Techno cards,
Or do you prefer the insects?
While sometimes it might seem as if developing a game is pretty straightforward, there is a lot of going back and forth between designers, the broader team, and the developers involved.
We hope that with these articles, we provide you bit more insights into how we have been working, and continue working on OpenBlox, and the creation of RougeBlox.
To ask us more about our process, join our Discord.
