YUI - Yui User Interface [WIP]

Community Forums/Showcase/YUI - Yui User Interface [WIP]

SystemError51(Posted 2011) [#1]
Hi all,

I am working on an online game in the moment. To make the game a reality, I purchased BlitzMax.

The game itself needs a UI to handle different things - text display, news from the web, trade/market windows and so on and so forth.

For a week I have been experimenting around. I'm not a pro and it certainly can be done better, but here are my first attempts in creating a user interface.

This is a work in progress and my first steps. Please be gentle.

Video:
[YouTube] YUI - Yui User Interface - Pre-Alpha state

I'm planning to make YUI open source. The game however, won't be.

YUI is named after Yui Hirasawa from "K-ON!". Plus, I thought that's a cool word-play and a Unix-like recursive abbrevation.

Comments are welcome!


Cheers
Marcus

Last edited 2011


BlitzSupport(Posted 2011) [#2]
I watched the video, and I thought the code layout was really impressive for someone who's only been using Blitz for a week, even if you clearly know what you're doing!

For all that it matters (ie. not much), BlitzMax isn't "a scripting layer on top of C++" as suggested in the video -- it outputs its own assembly code, which is compiled using FASM; the result is then linked via MinGW into a final executable (for Windows, anyway). It does of course use MinGW/g++ for building any C/C++ code you might import in your .bmx projects.

Anyway, new GUIs are always welcome, so do keep updating!

Last edited 2011


xlsior(Posted 2011) [#3]
Nice.

Just as an FYI: There are some work-arounds to counteract the delay in the mouse movements, which is caused by double buffering.

IIRC the easiest fix is to do a 1x1 pixel grabimage each frame, and the delay should be gone.


Kryzon(Posted 2011) [#4]
Hi Marcus. I'm very glad to see a fellow blitzer that is also a fan of anime and japanese culture (I'm watching your Tokyo videos at the moment).

It's looking good as it is, but you have much more to gain by spicing up your GUI's skin detail with gradients, shapes and thematic adornments (these depend on your art direction\theme of your game).
If you want to keep if simple, even something as simple as chamfered corners can make a huge difference.

Some GUI samples:
Dead Space
Starcraft 2
Sup. Commander

I agree with BlitzSupport that your code is very well structured.
Can you write more about how the game will be (i.e: genre etc.)?


SystemError51(Posted 2011) [#5]
Hi all,

BlitzSupport:

I watched the video, and I thought the code layout was really impressive for someone who's only been using Blitz for a week, even if you clearly know what you're doing!


Wow thanks! :)

I usually try to keep my code as organized as possible. For the simple reason that it may get very complex at some point, and when that happens I need to know where things go wrong. So all files have distinctive names, and clearly designated folders. In my case, the "Game" folder governs everything universal for the game (like global variables) and so on, and the "UI" folder obviously has the code for the UI.


BlitzSupport:

For all that it matters (ie. not much), BlitzMax isn't "a scripting layer on top of C++" as suggested in the video -- it outputs its own assembly code, which is compiled using FASM; the result is then linked via MinGW into a final executable (for Windows, anyway). It does of course use MinGW/g++ for building any C/C++ code you might import in your .bmx projects.


Nice, I didn't know that. I guess then I got some wrong information from my friend... either way, good to know it works this way - makes Blitz even more interesting.


xlsior:

There are some work-arounds to counteract the delay in the mouse movements, which is caused by double buffering.

IIRC the easiest fix is to do a 1x1 pixel grabimage each frame, and the delay should be gone.


I'll check into that. Using a Delay(ms) is not the most elegant solution for this.


Kryzon:

I'm very glad to see a fellow blitzer that is also a fan of anime and japanese culture (I'm watching your Tokyo videos at the moment).


Arigatou gozaimasu :)


Kryzon:

It's looking good as it is, but you have much more to gain by spicing up your GUI's skin detail with gradients, shapes and thematic adornments (these depend on your art direction\theme of your game).
If you want to keep if simple, even something as simple as chamfered corners can make a huge difference.

I agree with BlitzSupport that your code is very well structured.
Can you write more about how the game will be (i.e: genre etc.)?



Again, arigatou gozaimasu :) It's what I could do in a week. It's very basic, very simple... in the moment it's more of a functional test than about beauty. However rounded windows and gradients based upon the XML settings is definitely an option, I gonna have to look into that at some point.


It's a Sci-Fi MMO-RTS. It takes place about 500 years from now, when we discover an ancient alien secret.

As the name says it's supposed to be online... so it's gonna get interesting to code :)

Last edited 2011


slenkar(Posted 2011) [#6]
Are you from Austria? You sound a bit like Arnie :)

but anyway Nice GUI, you have seem to have the right approach to programming


SystemError51(Posted 2011) [#7]
Thanks slenkar.

I am working on basically two things at the same time right now. One is an emulation of a scrollable view (performed with SetViewport sorcery) and some form of "rich text" view, if you can call it that. It's a view that parses text in order to display it the way you want. It may support images too, and alignment (left, center, right).

Another thing I want to implement is for the UI to run on a separate thread, and the main game events on another. That way rendering the UI is non-blocking for the game itself (I discovered the TThread trickery).

I'll keep you posted


Captain Wicker (crazy hillbilly)(Posted 2011) [#8]
looks like it could be a pretty well done game when you finish it. :)


SystemError51(Posted 2012) [#9]
Well after fiddling around with my ideas to create a user interface, I have come to the conclusion that my attempts are futile. So I purchased a toolkit instead.

While I can not make that one open source, it allows for practically infinite theming. So it might be even better than what I wanted to do before.