First mockup

Image credit: Internet

First mockup

As I mentioned in the Introduction post, my current idea involves creating two modules – one is the tool for creating entities and rules, the other would be the in-game system in shape of a Unity plugin. This post will shed some light on my concept of the former.

Design principles

Firstly I’d like to create a tool that would be easy to use by game designers. That means that they should not even suspect that there is some math behind this (not even mentioning the temporal logic). Using that tool has to be maximally intuitive. It should allow creating new entities and building rules from the existing ones. I also think that it would be convenient to group these rules into… Some groups, that I currently call acts. Underneath the UI layer there also has to be a module for converting these rules to the temporal logic’s format used in the system written by my friend. From a technical point of view – this has to be a desktop application, with the UI that I can code really quickly, since this is the easiest part of my work and I don’t want to waste much time on it.

Choosing the technology

First thing that came on my mind was WPF. I used to know XAML pretty well and I had the pleasure of creating some really nice looking apps using it – but that was a year ago. Since then I was working mainly with JavaScript and Unity. So, my next thought was… Hey, can I write a desktop (windows!) application, using JavaScript? That would be awesome, lately I’ve been really into the JS stack.

Of course I can! (。◕‿◕。)

I ran into the Electron engine that allows to create desktop applications using JavaScript, HTML and CSS. As we can read in the docs, it can be called as a variant of Node.js runtime that is more suitable for desktop applications than web servers. We can think of it as a mini browser engine that renders our GUI windows as web pages. I was really surprised when I found out that some of the apps that I use every day are built on top of that, such as Slack app or Visual Studio Code.

1

The Slack app always felt like it was just a web page opened in the form of a window, but I would never accuse VSC of that. I almost started downloading the prebuilt release of Electron, when I realized that… That I hate using CSS. I never really fully learned it and I kind of don’t want to. So far I’ve mostly built the backend servers, and when I have to create some administration panel I simply use Bootstrap.

So I had to think of something else. What is the other tool that I already know quite well, is suitable for writing desktop applications and would be convenient to use? Ahhh, Unity! I recently haven’t experienced any post-update crashes, so my feelings towards this engine are quite warm. Unity it is!

First concept and mock up

The time has come that I finally know a little bit more about what I have to do and I’m ready for some coding. First thing to do was to create a mockup of the GUI. I put some buttons into panels, some panels into panels and this panels with panels into even larger panels… I even tried to make it look a little bit more appealing, but it’s still ugly as f***. I’m afraid the final version won’t be much prettier. I also hope it won’t get as complicated as the HUD presented on the featured image of this post. :)

So, here it is:

2

Try guessing how it will be used. ;)

Bonus

That’s it for now. I decided to write shorter posts, so that I actually had time for development. Since I had a feedback that I have too few images in my posts, here is an image of two funny beers that I got on my birthday. One is for me and the other is for my boyfriend. ;)

3

comments powered by Disqus