User avatar
ai_enabled
Topic Author
Posts: 231
Joined: 18 Jul 2013, 05:28
Contact:

Heads up - our game ships with the completely open source UI code (XAML/NoesisGUI) and available for free during alpha!

27 Mar 2018, 11:44

We're making a large indie game with a custom game engine and NoesisGUI integration.
It ships with the completely open source code for UI (and all the gameplay-related code and assets) and supports hot-reloading of everything, including UI code (XAML and C#).

The game is in open alpha now and you can play for free - http://cryofall.com/ (currently it's Windows only; download after registering on http://atomictorch.com with our Game Launcher application).

It's a good chance to see how the UI code can be organized for a large project and how various UI features could be implemented with XAML/NoesisGUI (if you want to open it with VS2017 as we do, please let us know here http://forums.atomictorch.com/ and we will send you the required VS2017 plugin we've made). The code is offered under our custom license so you should not copy-paste it to your projects, but you're free to play around with it as much as you want. Soon it will be possible to create mods for the game.

Kudos to NoesisGUI team for years of support.
You might be also interested in NoesisGUI Wrapper for MonoGame which I'm maintaining.

Regards!
Last edited by ai_enabled on 27 Mar 2018, 12:29, edited 3 times in total.
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
User avatar
ai_enabled
Topic Author
Posts: 231
Joined: 18 Jul 2013, 05:28
Contact:

Re: Heads up - our game ships with the completely open source UI code (NoesisGUI) and available for free during alpha!

27 Mar 2018, 12:09

Some fresh screenshots of the UI (made from the actual game, 4K) - see gallery https://imgur.com/gallery/dMz5V
Image Image Image Image
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
User avatar
jsantos
Site Admin
Posts: 4063
Joined: 20 Jan 2012, 17:18
Contact:

Re: Heads up - our game ships with the completely open source UI code (XAML/NoesisGUI) and available for free during alp

27 Mar 2018, 12:46

This is totally Awesome!!!! Congrats for the release! Probably the most advanced game using Noesis so far.
 
 
XaeroDegreaz
Posts: 29
Joined: 26 Nov 2013, 04:47

Re: Heads up - our game ships with the completely open source UI code (XAML/NoesisGUI) and available for free during alp

09 May 2018, 07:21

@ai_enabled

I'm looking to hire a UI/UX designer for my game. I'm trying to come up with a list of qualities an ideal candidate would have, but am coming up short. Generally I would just grab images and position them on the screen to create the UI, but most UI developers use something like "Adobe Illustrator", and think they should be able to export an SVG -> XAML. I know there are way to do this.

Can you explain the process for which you developed that UI?
Did you use Illustrator?
Did you render an SVG to a DrawingGroup?
Did you use something like Expression Design to convert an AI file directly to XAML?
Are they just a bunch of images positioned on a grid?

If I'm looking for someone to create a UI for my game using Noesis, which skill-sets should I be looking for (besides obviously being able to make nice UI)?
 
User avatar
ai_enabled
Topic Author
Posts: 231
Joined: 18 Jul 2013, 05:28
Contact:

Re: Heads up - our game ships with the completely open source UI code (XAML/NoesisGUI) and available for free during alp

09 May 2018, 10:02

@XaeroDegreaz, I checked your game and I think it will be possible to hire any good game UI artist and task him or hew with drawing the UI in 100% vector. Your game is a sci-fi game which are usually looking great in a completely vector UI - for reference, see XCOM 2, PlanetSide 2, Deus Ex: Human Revolution, Alien: Isolation and Stellaris (most of them are using a vector UI library (Scaleform, which was popular before NoesisGUI in AAA games)). However, please note that using a vector UI library is the most productive and worthy in case you're building a modular UI with high components (controls) reuse.

In our case, we're a small indie team (game designer, programmer (me), artist) making a game where we don't know ahead what features we will implement. We want to be able to quickly prototype the UI (right in the game) and iterate on it. The resulting approach is very agile, modular and quick.

First, our artist drew a mockup of the most important game menus in Photoshop, setting the overall game UI style. These menus included - main menu, servers menu, options menu, in-game "HUD", inventory menu, crafting menu. The Photoshop result was never exported to XAML - I only used it as a reference to create a set of reusable controls for all the cases we needed (so, all UI you see implement as vector, except icons are raster images in HiDPI resolution to look perfect in 4K resolution). Then I was able to implement the entire UI in the same style as our artist conceived (though it improved dramatically as I've wrote XAML and found some better ideas), and continue implementing completely new menus.
The most important controls in our game are: buttons (2 styles), menu window (1 style), tab controls (2 styles), text/captions (3-5 styles), tooltip, slider, combobox (dropbox), checkbox, radiobutton, items container and item slot control (so we can easily add UI for an items container, bind the data and player can move items and perform other operations - the most worthy reusable part of the game!). I've also defined a palette of 7 colors I'm using everywhere (with 7 contrast colors complementing them) - this way I can easily prototype completely new controls without disturbing our artist (which is always too busy with making the game content/art assets).
Usually, our game designer provides me with a paper-drawn mockup of the controls layout he wants for the new feature and I quickly build UI from the existing controls to match his vision.
Because the UI is vector-based, it's relatively easy for a programmer to create new controls by reusing existing controls and creating new controls by using some UI primitives such as border element (so I can wrap some text and button into a border with 1px border thickness of one of the 7 colors and semitransparent black background, set the border element corners to be rounded with 5px curvature, and it already looks great!).

This approach is very agile and suits best for the indie games which don't really know ahead what features are required. It produces a 100% functional and decent-looking UI which is very convenient to use and it's possible to revisit UI later with the help of an artist to make it more decorated and beautiful.

Bottomline, our approach with CryoFall:
0. Task an artist to make the game UI mockups just to conceive the UI style and overall UI layout.
1. Decide which controls needed and implement them. This is very important as these are the building blocks of the UI.
2. Implement game UI by using the implemented controls.
3. Further UI development should reuse existing controls as much as possible.
4. If there is enough free time left, task an artist to help decorate the implemented UI to make it look better.

Regarding your question of the vector art exporting - in this game we almost never exported any vector UI to XAML. We're using raster images for icons and some other stuff as this is much easier and faster to implement than exporting vector paths from AI/PSD/SVG, and it allows to make such elements better by adding shadows and other echancements. CryoFall rarely uses unique shapes and most of the stuff was coded directly in XAML (and almost all custom vector paths, like arrows and curved "HUD" elements, were implemented by writing the path code by hand (it usually produces a little bit better result than exported paths due to more exact positioning of the path points and curves)).

With our previous game (VoidExpanse) we much more heavily exported the vector art (especially for HUD) and for that I've used Inkscape (an open-source vector art editor) to import PSD and then copy-paste the SVG path code (which is 100% compatible with XAML; the feature is called "XML Editor" (Ctrl+Shift+X)).
We were unable to find a decent PSD->XAML exporter: usually most Photoshop plugins are exporting vector paths as the raster images. We didn't work with Adobe Illustrator and can't comment on that, alas. Microsoft Expression Design (which has a native XAML export functionality) was dismissed by our artist as a very inconvenient tool. I remember there was a PSD->XAML export functionality but it was removed for some reason and never actually performed well enough. So Inkscape turned to be the most useful for us.

Regards!
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
XaeroDegreaz
Posts: 29
Joined: 26 Nov 2013, 04:47

Re: Heads up - our game ships with the completely open source UI code (XAML/NoesisGUI) and available for free during alp

21 May 2018, 19:17

Thanks a lot for you input. I meant to get back to this post sooner!

I think I've been able to mostly understand what you're talking about here. I've been using XAML for a while now, but I've never actually created custom buttons and stuff (I've always just used the default skin). For your buttons did you basically take your images from your artist, subclass Button, and create your own 9-sliced button component?

BTW VoidExpanse was a great game :)
 
User avatar
ai_enabled
Topic Author
Posts: 231
Joined: 18 Jul 2013, 05:28
Contact:

Re: Heads up - our game ships with the completely open source UI code (XAML/NoesisGUI) and available for free during alp

21 May 2018, 20:37

For your buttons did you basically take your images from your artist, subclass Button, and create your own 9-sliced button component?
With NoesisGUI it's too complicated and inefficient to use 9-sliced image approach (especially if you want to have multiple states and/or animation).
All buttons (and all other UI elements) in our games are implemented in pure XAML and mostly are fixed-size (especially in VoidExpanse). We use images only for icons as it's not viable to export vector art for them (especially if a shadow/glow effect is required which is currently impossible to implement in NoesisGUI as it doesn't support XAML Effects API yet).

In VoidExpanse 9-sliced approach was used for the game window template (in pure XAML) and it was quite painful to properly define all the XAML and ensure there are no seams/tears/overlays between the neighbor elements in a 9-sliced grid (a lot of manual XAML path re-writing). In hindsight, I think using the 9-sliced image approach is justified for that purpose, but mixing raster and vector UI elements is rarely results in anything good, considering that the vector can scale and render perfectly for any resolution (and also allow us to implement the UI scale game option) but with raster images it's required to supply images to support all the resolutions (720p/1080p/4K for PC and console games) and dynamically select the best image resolution to use (which is not trivial in case of NoesisGUI as there is no built-in solution to swap images defined in XAML depending on the screen resolution or DPI setting).

With NoesisGUI it's very easy to make a decent-looking button and animate it right in XAML. Just define a ControlTemplate, put a Border into it, assign a brush for Background (something with LinearGradientBrush and Opacity/semi-transparency looks very nice), a brush for BorderBrush, set the BorderThickness and CornerRadius. Add a ContentPresenter inside of it. To make it animated, you can define ControlTemplate.Triggers with Trigger elements to swap Background and BorderBrush depending on the Button state (IsMouseOver, IsPressed). All the buttons you see in CryoFall are made this way and you can see the XAML code in the game Core/Core.cpk/UI/Styles folder.
BTW VoidExpanse was a great game :)
Thanks! :-)
AtomicTorch Studio Pte. Ltd. http://atomictorch.com

Who is online

Users browsing this forum: No registered users and 4 guests