Stencyl 3.4.0 is now out. Get it now!

Merrak's Isometric Adventures -- UI Toolset

merrak

  • *
  • Posts: 1676
More progress made in the past couple of days  8)

I now have full text box support. Here is center justification


Left justify (right is also supported)


And, after some debugging, full justification


I don't want to get caught up in feature creep, but I realized this toolset can solve a wide variety of problems. For instance, getting the little damage and HP numbers to show over characters will be much easier using the UI tools.


A ridiculous amount of code goes into the inventory card system. That entire system can be replaced with much cleaner code using UI tools.

The next thing I need to tackle is integrating actors and images in the toolset. This will allow me to solve one of the original problems--making a tile selection menu so that tiles can be selected from a palette. I also need drop-down menus, since I need to be able to select from multiple tilesets. Plus, having the usual file, view, etc. menus would be helpful... as well as scrollbars so I can move around larger maps.

SadiQ

  • Posts: 1755
Is the text in that textbox intentionally missing words or are they hidden for some reason?
Can't wait to see how you manage to create  dropdown menus.
Proud member of the League of Idiotic Stencylers! Doing things in Stencyl that probably shouldn't be done.

Bombini

  • *
  • Posts: 858
Very cool progress!

merrak

  • *
  • Posts: 1676
Is the text in that textbox intentionally missing words or are they hidden for some reason?
Can't wait to see how you manage to create  dropdown menus.

I should've picked better screenshots for the first two :)

There was a bug that was causing the last word in each line to be dropped. I caught it while debugging full justify, but it was related to a different part of the code. I may not have noticed it if I didn't use part of the Stencyl FAQ as a test passage. The first two used a paragraph from one of the earlier posts, but if you use your own writing then sometimes you see what you think it says and not what is really written.

Very cool progress!

Thanks!

merrak

  • *
  • Posts: 1676
I got menus up and running. Menus were fairly simple to implement. What took longer was getting interactivity (mouse-over detection, click detection, etc.) Since each UI element is a bitmap, I had to set up code to re-draw the image when something like the highlight color changed.

Here are some (large) screenshots showing some code and the result. A lot of this could be streamlined. For instance, I can set up a custom block to handle most of the configuration. In fact, I'm realizing configuring a large number of UI elements could be a pain. Next idea up--allowing for parameters to be read in by an XML file. This would give a CSS-like definitions system where a default template can be read in via XML and blocks can be used to configure individual parameters.

Code that sets up the menu bar:

Code that sets up the sector menu:

Result:

Not shown in the code: a mistake. Looking over the images, I realized I forgot to make the menu items children of the menu bar. It'll work, but one feature of the parent/child system is that if the parent is removed, the children are removed, too. Also the children will follow the parent if the parent is moved.

Also not shown, I did confirm tweens work. I provided a block that returns the bitmap itself and was able to get a nice fade-out effect. While the map editor is utilitarian,  I'd like to use the UI code to support the in-game interface as well. When I'm done I'll roll up these blocks into a proper extension.

« Last Edit: December 17, 2017, 11:35:24 pm by merrak »

merrak

  • *
  • Posts: 1676
2018! I spent most of the holiday period visiting family, so I did not get much done. Still, I did take a few significant steps. My GUI system is coming along. Menus were particularly challenging, but mainly because I had to write the core-level routines that will support the other GUI elements I need.

Here is the completed block set. It's now easy to set up a menu and its corresponding action. Notably, the routines now support managing child GUI elements. In earlier versions of the blocks I showed, every individual element had to be constructed manually. This wasn't too bad for the close confirmation dialog (three elements: background and two buttons). For menus, though, each option is its own element. Now I can just create the menu and add options with one block.


Result:


I also made most of the tiles for the revised "classic" Temple of Idosra, using the 8-color palette. I drew most of these during downtime visiting my in-laws. I showed my nephews how to create a room (still using Tiled). Some rooms we came up with:



I also showed them how to play the original game from 2016. I never watched anyone play through it before, so it was interesting to see how they did. I think the platforming at the beginning may be too challenging. My oldest nephew (age 9) managed to get the ivory key after several dozen attempts at jumping over the lava. For those unfamiliar with the game, this challenge is one of the first encounters. After he managed to clear them, his younger brother took the controls and promptly died.


I also wrote up the exp points, HP, damage, etc. table on the plane ride back home. Originally I was going to dump exp points entirely, but I've turned around on that. I wouldn't expect anyone to be familiar with ACK!MUD, but it had an unusual leveling system. Rather than gain levels by gaining experience points, players had a choice of different classes to level up by spending experience points. The MUD server I wrote, derived from ACK!MUD, took that a step further, allowing for leveling up individual skills, primarily by spending experience points, but also by finding books.

The system I wrote up for Idosra is similar. The player gains experience points and can find books in the temple. Reading a book provides a skill and costs experience. Furthermore, most experience points are gained by completing objectives or finding treasures and secret areas, not killing mobiles. Idosra isn't meant to be a long game, so I'm trying to stay away from killing mobiles to grind experience. The player must find the books and earn enough experience points to learn from them. I also get to think of clever titles for the books  :P

mdotedot

  • *
  • Posts: 1294
Great read as always.

Nice progress on the menu system.
In the past I've made some attempts to do GUI stuff but it never actually works 'native-intuitive' across the different platforms.
Technically it works, but the GUI implementation does not behave like the user of the platform is used to. Navigating both with keyboard + mouse for instance.  I kind of am waiting for some poor fool to do a platform wide GUI system implementation :D

Playtesting (with kids and elders) is really nerve wrecking. Especially when you are in the view of the user who will look at you for help/hints.
In general we tend to know the game so well that we forget that children and elderly people (yours truly included) have a problem dealing with the controls.


Hanging out in the Chat:  http://www.stencyl.com/chat/

Proud member of the League of Idiotic Stencylers! Doing things in Stencyl that probably shouldn't be done.

merrak

  • *
  • Posts: 1676
Technically it works, but the GUI implementation does not behave like the user of the platform is used to. Navigating both with keyboard + mouse for instance.  I kind of am waiting for some poor fool to do a platform wide GUI system implementation :D

I realized I can't design a GUI that appeals to everyone. But I can at least write one that appeals to me :D

For apps that are primarily "functional" (editors, etc. that rely on an efficient UI), I still think HaxeUI is the better route to take. But as of now, HaxeUI is in alpha, the OpenFL backend is in alpha, and Stencyl 3.5 is still in beta (and I'm still using 3.4 stable). For games, though, I think there's another, larger issue with HaxeUI--it's not Stencyl. From what I've read, HaxeUI primarily relies on CSS files to define the look of the interface. Stencyl uses images and actors. A better solution should integrate with the tools Stencyl already provides.

Playtesting (with kids and elders) is really nerve wrecking. Especially when you are in the view of the user who will look at you for help/hints.
In general we tend to know the game so well that we forget that children and elderly people (yours truly included) have a problem dealing with the controls.

I don't think they play a lot of computer games. They have tablets and a PS3 that I've seen them play, but keyboard controls were unfamiliar. What gave them the most trouble was using two arrow keys at once to move in a cardinal direction. This could have easily been solved by allowing for use of the numpad to move in eight directions. I don't know why I didn't think to do that. The directions are even referred to as "dir4", "dir8", "dir3", etc. in the code and animation files.

May 2015 image set... 1 2 3 4 6 7 8 9

Bombini

  • *
  • Posts: 858
+1 on this!
I play tested as well with regular age and older players (50+). Simulating a twin stick shooter on a keyboard (like in Space Pirate) feels very natural for me but no way an older person would understand it. That's why its very important to define first which audience you want to reach and not only pick the right theme, gameplay and mechanics but also the righ UI and UX.

Especially before getting into the project full force.
For me its ok. I dont expect older players to play the game.


merrak

  • *
  • Posts: 1676
...That's why its very important to define first which audience you want to reach and not only pick the right theme, gameplay and mechanics but also the righ UI and UX... For me its ok. I dont expect older players to play the game.

5-8 year-old's isn't my target audience, but any feedback can be useful, too. They wanted me to make a game with their favorite superheroes. I tried to explain why I couldn't do that and had to make up my own characters instead.