Not A Game - Tab Menu Demo
Shri April 21st, 2014

All,

 

4-22-14 updated zip file:

- menu can now be placed on edges, not just corners

- add ability to set background image on tabs to none and use wade draw function instead

- add ability to slide main menu into place, very basic.

- uploaded tabMenuJsonDocumentation.pdf to describe json file data

 

cheers

 

I put together a little demo of a tab menu for a wade game.

The menu is data driven from a json file

As it is currently written, the menu will only work in one of the four corners of the game screen (top,bottom) (left,right).

Run this demo with the console open to see the messages on menu item clicks.

 

The main stuff is in menuData.json, tabMenu.js and tabKey.js

The rest of the isometric stuff is just to show what it would look like to interact with a game.

 

I am not a javascript expert, so I'm sure there are optimizations I have missed.

Specifically, I am using eval() in two instances in the code. I have read that this is a bad practice.

If anyone can suggest replacements for how they are used in the code, I would appreciate it.

 

This uses the  wade 1.1.3 engine and the 1.1.1 iso plugin
In the html, these are loaded from a common directory.
You will have to modify the html file to point to wherever you are getting the wade engine and iso plugin from.

Besides modifying the html, it should run out of the box.
Feel free to reuse the code as you wish. Ignore the copyright stuff at the top of the files
The iso images are all under CC 3.0 so attribution is requested..

 

cheers

 

 

All 4 Comments
Elliot April 21st, 2014
This could be very handy! I'll try it later today and post some feedback.

Thanks for sharing it with us :)
Gio April 22nd, 2014

Hi Shri

 

The tab menu is actually quite cool. I really like the fact that it's all customisable via JSON, and that you can easily nest tab keys. I'd really like to expand on this idea and make a set of UI items that people can just pick up and use in their projects.

 

I can think of a couple of ways to make your tab menu even better - unfortunately I have a couple of things to finish this week and can't help by writing code at the moment, but here are my suggestions to improve it. I may have more time towards the end of the week to help with it though.

 

  1. Add options to use vector graphics instead of image files - this will make it easier to customise (i.e. you just say "I want a white background with a red border", and don't need to create an image of a box with a white background and a red border). If you use the stuff in wade.drawFunctions this should be quite easy to do for the tab keys. For the main "tab" sprite, that may require writing a custom draw function for the rounded corners, so it's slightly more complicated. Let me know if I can help with that.
  2. Add options to place it on the edges of the screen, not just corners. 
  3. Since it's going to be on a corner or edge of the screen, it'd be nice if you could make the tab keys "slide in" rather than suddenly appear. This would involve setting their initial positions somewhere off-screen, then call moveTo for the scene objects.
  4. Reducing the number of scene objects would help performance. If you could add several sprites to the same scene objects (rather than having one sprite per object), then it would be a bit quicker. The data that is passed to input event handlers such as "onClick" contains information about which sprite was clicked, so it shouldn't be difficult to handle that.

Anyway, these are just suggestions, the control is already very useful as it is now.

 

Thanks for sharing!

nicoX April 23rd, 2014
+1 :)

I am going to use it in my projects. Thanks Shri!
Elliot April 25th, 2014
Hah, I totally forgot to come back and post my comments after I said I'd do so :D

I see that now you posted some documentation too.

In short, I think this is awesome! The gui control itself is good and could be improved with vector graphics, like Gio said above. But the idea of building a set of these and make them freely available is pure awesomeness.

Shri, you have been very generous, sharing a lot of code with us. But it shouldn't be left to you, I want to contribute to this too. And if more people here contributed to building this set of gui controls, we'd have it in no time. So lets do it people!
Post a reply
Add Attachment
Submit Reply
Login to Reply