Jump to content

Nice 2D UI/gauges eg Flight Arcade demo


Recommended Posts

I really like the Learn part of the Flight Arcade demo (http://flightarcade.com/), very easy to follow and well explained. But it only describes the 3D, Audio and input parts - how were the gauges at the bottom done?? I had a look at the source but it's partially minified and buried somewhere. 

I'm looking for a 2D library like this, that could be applied over the top of a babylonJS canvas, or just in its own canvas, and would work without a GPU (for 2D only applications). It would be good if the graphics could be designed in some vector based program and then filled in/animated with JavaScript, rather than all programmed, but I have no idea where to start with this! SVG? I don't know. 

I would be happy if there were some demos and tutorials you could point me to. 

Thanks very much. 

Link to comment
Share on other sites

Thanks Deltakosh! Good to know. I guess I'll follow that up separately as it's not babylon-specific. I've tried d3, I was looking for more of a widget library with click support; I looked into svg and it still doesn't support variables so I'll probably just have to draw everything programmatically. 

If you were interested I wanted to create something like the HUD of Mechwarrior 2 as seen here: https://www.google.com.au/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjgzqGsh77MAhWDI6YKHShbCiUQjRwIBw&url=http%3A%2F%2Ftop100.ign.com%2F2007%2Fign_top_game_72.html&psig=AFQjCNFPBqfJCW8o62NtHIRMgkOevyiwmA&ust=1462370116201049

Also with some instrument panel type controls, but I haven't come up with a good design yet so I'm getting ahead of myself. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...