Forums » Help » Divs inside of canvas in relation to screen size

Basically I am build my GUI/HUD with divs and am looking for the best way to get them to line up no matter the users screen size. I can't seem to find a method that works.

For instance position the health hud at lower right and it remain the same location no matter the users screen size.

I know this is normally an easy task but for some reason I cannot get it to work with impact. Most likely something stupid I am missing.

It's not such an easy task, though really if you're using divs, it's not really an Impact thing - you have to align the divs using CSS relative to whatever container the canvas element is put in.

I actually avoid using divs where possible just because of the time I wasted trying to get a div lined up on top of the canvas (2 hours of CSS mashing) for touch controls when I could have drawn it trivially inside the canvas.

i am trying to turn them into entities instead. Then I can just position them relative to the player but when the player walks or rather the screen moves they bounce and are choppy.

Any examples of how to do this through canvas?

it is the weirdest thing. I have a Game start sign that pops up and follows the characters for a length of time and it works fine with no bounce.

var player = ig.game.getEntitiesByType( EntityPlayer )[0];
	   this.pos.x =  player.pos.x - 140;
	   this.pos.y =  player.pos.y - 60;
	    if(this.currentAnim.loopCount > 2)
                {
			this.kill();
		}
	     this.parent();

I have the same thing on this icon and it bounces like crazy. Occasionally it will stop bouncing and look great then go right back to bouncing.

More info about floating div's here: http://impactjs.com/forums/impact-engine/jquery-ui-and-impact

I recently created a UI class that handles a full screen or static sized canvas and includes other controls such as buttons, text fields, static text, images, checkmarks, etc. It also lets you create custom "UI Elements" such as a HUD, background image, etc. Any UI element can be "attached" to a point in the canvas (default being center) and positioned relative to that attach point. For example you could attach a HUD to the bottom-right and it will always remain there even if the browser re-sizes.

I'm still debating if I want to release it to the public... mainly holding back because I'd have to do a bit of cleanup on it all as right now its more specific for my project.

okay found the issue but not sure what it is but better share in case someone else needs to do this or has this issue.

Basically as explained above but I spawned the entity from the players init. For some reason it was causing the GUI to shift a few pixels depending on the players velocity.

I spawned the Gui entity from another Entity and BAM fixed it. All of my GUI is based on player location (this is a top down by the way) and now everything is in the same place no matter what the screen size!

thanks for the link Graphikos. I will read up on it.

Eh, I just any HUD in the game's draw routine after the call to this.parent() so it's always kept in sync with the game itself and I never have a positioning problem because it's always drawn where I put it, heh.

k i will try that, it is sometimes getting back out of sync for some reason, bouncing again.