Forums » Help » Pros / Cons w/ using HTML vs. JavaScript for menus & UI

My current UI is drawn with JavaScript, and extends from Entity.

My menus however, are just classes. They are't too pretty though, and are just text at the moment.

I'd much prefer to use jQuery to create and animate my menus. What are the pros and cons for doing this though?

Has anyone had difficulty with porting to other platforms because of this?

If your game will be available on mobile (with Ejecta or Cocoon) maybe you'll have trouble using jQuery. Try it first.

Particularly I think Ejecta does not support jQuery (or at least with all the features you need) or Dom elements.
http://impactjs.com/ejecta/supported-apis-methods#document

I made a small library (https://github.com/datamosh/ImpactJS-GUI) which saved me quite some time to make the most of my GUI, but it has no animation function. Sounds like an interesting and fun feature to develop.

Thanks for the reply.

Your framework looks great! It includes a lot of the things I was looking for in jQuery anyway, such as being able to find / get other UI elements.

The animating isn't such a big deal, as there are many tweening plugins for impact, including this one which I've been using.

https://github.com/nefD/impact-tween


The only catch is that your elements being tweened must extend from ig.entity.


What are you doing in your framework to check if the player is hovering / clicking on an element?

The plugin you mentioned is great and never mixed with Impact-GUI, when I have time I will try to fix it (of course you can always collaborate with the project)

The hover state is calculated by the position of the cursor:

if(	ig.gui.cursor.pos.x >= element.pos.x && ig.gui.cursor.pos.x <= element.pos.x + element.size.x &&
	ig.gui.cursor.pos.y >= element.pos.y && ig.gui.cursor.pos.y <= element.pos.y + element.size.y &&
	!element.disabled) {
		state = 'hover';
}

The active state simply use the following code:

if((state == 'hover' && (ig.input.state('mouse1') || ig.input.pressed('mouse1'))) || (ig.input.pressed(element.keybind)))

The plugin is very simple and consists of only 222 lines of code, if you use it and make any changes let me know, I would like to keep it simple but really useful.

Seems simple enough. Trying to understand how it detects clicks and inputs would be the hardest part for me to understand it, but it seems quite clear there.

I may end up using this for my UI in the new few weeks.

If I do, I'll be sure to submit any changes I make.

Thanks!