Forums » Impact Engine » JQuery UI and Impact

From a pretty high level guess, would it be pretty difficult to integrate JQuery UI as a gui system within Impact? I looked at qooxdoo first as the gui library option but with it's automated python build system, it looked like a no go.

There seems to be a disconnect in understanding of where Impact fits in the world of the HTML.

Impact works with the HTML canvas element, a standard part of HTML 5. It would be perfectly fine to use jQuery (and jQuery UI) on the same HTML page as Impact and even use jQuery code within your impact source (it's all javascript after all). But to integrate jQuery UI within Impact is not the right way to think about it. jQuery UI doesn't use the canvas element but rather other DOM elements (div tags, etc.). Two different methods of "drawing". So if you want to use jQuery UI over the top of the Impact driven canvas element and control your game then there isn't much stopping you.

Clear as mud right? ;) Bottom line is you should be able to make Impact work with any web-based library.

awesoommmmeeeeee, thanks Graphikos!

Just to clarify, you should be able to make it work - but not by trying to use jQuery UI inside the canvas. The canvas is essentially a single element. From jQuery UI's perspective, it's little more than a single div or a single span, it can't do a great deal to it, other than move it around and such, you can't put tags in it and expect it to work (as tags inside a canvas are only rendered if the canvas is not active, e.g. on IE8)

oh darn, i misunderstood. so would the better approach to creating a gui for a game being rendered in Impact's canvas be to either:

1. write up my own gui library within the Impact canvas

or

2. using jQuery and float windows and associated widgets on top of the Impact canvas? From what you are saying though, these widgets won't be able to affect any of the variables being used within the Impact canvas?

Writing your own classes to handle UI elements would be the best option. To use jQuery UI you indeed need to "float" them on top of the canvas. This can easily be done with some CSS with relative and absolute positioning. These elements can interact with your Impact code/game.

In this demo using the HTML buttons plugin you can see an HTML element interacting with Impact:

http://labs.nixmc.com/~eddy/game/ (plugin/info: http://impactjs.com/forums/code/html-buttons-plugin)

Like I said, it's still best to roll your own solutions. It will give you greater control and less compatibility problems.

very interesting. thanks again!

Quote from Graphikos
Writing your own classes to handle UI elements would be the best option. To use jQuery UI you indeed need to "float" them on top of the canvas. This can easily be done with some CSS with relative and absolute positioning. These elements can interact with your Impact code/game.

How does one float one HTML element on top of another? I tried various methods but couldn't get it to work. Care to share?

with the z-index property!

You wouldn't have to use z-index. Something like this should work fine:

<div id="wrapper" style="position: relative; width: 800px; height: 600px; margin: auto;">
	<canvas id="canvas" style="border: 1px solid #555;"></canvas>
	<div style="background: #f00; position: absolute; top: 50px; right: 50px; width: 50px; height: 50px; cursor: pointer;" onClick="alert('Clicked!');"></div>	
</div>

This sample is using an 800x600 game for impact. You'd need to adjust the wrapper (outside) div to match the size of the game canvas.

ig.main( '#canvas', MyGame, 60, 800, 600, 0 );