[Semi-theoretical question] Which parts of the image (in the issue below) may could be implemented in libui-ng + glimmer-dsl-libui?

[rubyFeedback]

Heya Andy,

This is more of a question. Please do feel free to close this issue whenever you would like to.

I am working on a GUI for oldschool pen and paper gamebooks, also called "adventure books".

This is a hobby, so I can only invest some time every now and then, then I have to do more realistic things again.

Anyway. The current iteration I am at is done in ruby-gtk3, mostly for prototyping.

Have a look at the following image if you'd like to please:

https://i.imgur.com/CjG5hpx.png

Now - I am not a designer. I don't claim to focus on design either, first and foremost. I am more interested in getting the functionality right. Then improve on things at a later time.

We can use some kind of CSS for that too, although ruby-gtk3 is not great when it comes to CSS.

There are various smaller issues, in particular WHERE to put things and images. But, these are just details for now.

I am quite pleased so far with my result in that I can play oldschool gamebooks. My next plan is to actually obtain the dataset for all gamebooks, or at the least those I used to play when I was young, and then some more (learning about OCR of images to obtain the words, before I store them). I kind of want to see how much can be done via a GUI.

At a later point I also want to offer multiple GUIs. One in Java too. One for the world wide web as well, so probably .cgi, sinatra and rails - at some point in the future.

Anyway.

I am not yet finished with the ruby-gtk3 variant; I mean explore ruby-gtk4 at a later time.

But, I was wondering whether I could use libui here. And get this to work on windows, just to demonstrate how much you could do with libui on windows too.

I have that small libui-paradise gem, but I think I won't invest that much more time into it, for many reasons. I will maintain it but it is kind of inactive since months and I don't feel like investing as much time into it when I could use glimmer-libui-dsl actually. Because you seem to support more via glimmer + libui. So it would make sense go to that route.

But!

I could perhaps also go the SWT route + glimmer. This one is probably nicer; the editor you wrote also looks ok-ish, often better than libui. Libui is super-great for prototyping though. And perhaps I may go with both ... but for now I want to focus on one thing. Since I already know libui a little, using glimmer-dsl-libui makes sense.

Before I invest too much time into this, and then abandon it, I was wondering how much we could do visually with glimmer-dsl-libui?

So thinking about windows, I believe these features would be super-useful:

• Being able to set different fonts. I'd like to be able to use two different fonts, a larger one, and then a smaller one for not so important components. Is it possible to mix two fonts in the same libui-widget? Is there an example for this in glimmer-dsl-libui?

• I need to be able to display a few images, ideally smaller ones. I also need one area where I can change the main image to be shown (the one associated with the gamebook page content). Is it possible to update an image in a glimmer-dsl-libui widget at a later point? E. g. providing a local path actually to an image and then showing that.

• Is it possible to set a background wallpaper image and then put text on top of that in glimmer-dsl-libui?

Perhaps I am way off here, and it may be better to use SWT instead. I could then probably get the same results you had with the editor and the games you implemented. (By the way more small games would always be great, if you ever find you have too much spare time left. :D)

Anyway.

I will most assuredly read this definitely (I have bookmarked it into my todo list), so please do feel free to close it - I will definitely read any pointers and comments.

I can factor our most parts into a module and control that module, but I currently don't quite yet know (from an applied point of view) how to get the same or the similar layout logic via glimmer dsl libui. If I recall correctly you had some examples somewhere in this regard, so I may have to re-read this at a slightly later time when I can continue with other widgets than ruby-gtk3. Right now I am still a bit in the prototype stage.

[AndyObtiva]

There is a new upcoming feature in Glimmer DSL for LibUI called Custom Shapes, which will facilitate building a game like yours more productively.

Custom Shapes are already supported by Glimmer DSL for SWT: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#custom-shapes

In fact, they are used to build several games, like Quarto: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#quarto

So, you could definitely build your game very productively with Glimmer DSL for SWT, which already supports embedding images in the foreground or background, updating images at runtime while playing the game, and using different fonts.

You can probably build a quick prototype of your game with Glimmer DSL for LibUI (including the ability to set different fonts), but excluding images since they are not natively supported by LibUI yet. (As I've mentioned in the past, there is non-native support for displaying small images in Glimmer DSL for LibUI, and it lets you update the images at runtime, but it would be better to avoid displaying images in LibUI until supported natively.)

Check an example under Area Text for how to use different fonts: https://github.com/AndyObtiva/glimmer-dsl-libui#area-text

require 'glimmer-dsl-libui'

include Glimmer

window('area text drawing') {
  area {
    text {
      default_font family: 'Helvetica', size: 12, weight: :normal, italic: :normal, stretch: :normal

      string('This ') {
        font size: 20, weight: :bold, italic: :normal, stretch: :normal
        color r: 128, g: 0, b: 0, a: 1
      }

      string('is ') {
        font size: 20, weight: :bold, italic: :normal, stretch: :normal
        color r: 0, g: 128, b: 0, a: 1
      }

      string('a ') {
        font size: 20, weight: :bold, italic: :normal, stretch: :normal
        color r: 0, g: 0, b: 128, a: 1
      }

      string('short ') {
        font size: 20, weight: :bold, italic: :italic, stretch: :normal
        color r: 128, g: 128, b: 0, a: 1
      }

      string('attributed ') {
        font size: 20, weight: :bold, italic: :normal, stretch: :normal
        color r: 0, g: 128, b: 128, a: 1
      }

      string("string \n\n") {
        font size: 20, weight: :bold, italic: :normal, stretch: :normal
        color r: 128, g: 0, b: 128, a: 1
      }

      string {
        font family: 'Georgia', size: 13, weight: :medium, italic: :normal, stretch: :normal
        color r: 0, g: 128, b: 255, a: 1
        background r: 255, g: 255, b: 0, a: 0.5
        underline :single
        underline_color :spelling
        open_type_features {
          open_type_tag 'l', 'i', 'g', 'a', 0
          open_type_tag 'l', 'i', 'g', 'a', 1
        }

        "This is a demonstration\n" \
        "of a very long\n" \
        "attributed string\n" \
        "spanning multiple lines\n\n"
      }
    }
  }
}.show

Last but not least, you should be able to build this with Glimmer DSL for GTK (which should get updated to support GTK4 in the future) given that GTK supports images and fonts. But, the library is not as developed and mature as Glimmer DSL for SWT.

If you want, I could join you in building this adventure game project since I used to play games like that when I was a teenager many years ago (in the 90's).

In conclusion, you can:

• Prototype in Glimmer DSL for LibUI without images, but with fonts
• Build a complete version in the mature Glimmer DSL for SWT including images and fonts. This is probably the best choice.
• Consider building a version in Glimmer DSL for GTK, as GTK supports images and fonts, but it's not as mature as Glimmer DSL for SWT

Let me know what you decide to use and if you'd like my help with implementing your project. I don't mind dedicating some time to work on it. I love building new apps with Glimmer DSLs.