Creating a game with a specific sized web page

Get help using Construct 2

Post » Wed Jan 11, 2012 1:01 am

I need to create a game that measures exactly 728x90 when it is finished to fit in a specific spot on a web page. The game will be hosted on its own web page and an iframe will be used to import the game into its final spot on the target page. After setting the layout size to 728x90 the web page the game is on seems to be a little larger then 728x90. I have looked through the index.html file (that is created when the built) and found some code that created a 1px border around the game (which I removed). I also removed the "Created with Sierra" link (sorry but there is not enough room for the link and the game) to try to reduce the game's web page to 728x90.

Is there any other code in the index.html file (or anywhere else) that would add any extra space around the game that would need to be removed to get the final size of the web page hosting the game down to 728x90?

Jason
B
18
S
7
G
5
Posts: 62
Reputation: 4,410

Post » Wed Jan 11, 2012 1:18 pm

You can remove
[code]<div style="text-align: center;"></div>[/code], this will position your application in the top left of your page.

You can't really act on the page's size though, as it depends on the browser and the resolution of the user.
I have a screen resolution of 1920X1080, and my browser is always amximised, there's no way I will have a webpage of 728X90.

But, you can set your application size (project properties) to be at the exact size you want. You are sure this way that your application will never be bigger than the size you want. (especially if you don't use the fullscreen properties)

Also, I'm not sure if placing the game in an iFrame will work smootlhy as expected. Nothing else to do here but try.Kyatric2012-01-11 13:18:56
New to Construct ? Where to start

Image Image
Image Image

Please attach a capx to any help request or bug report !
Moderator
B
247
S
85
G
40
Posts: 6,998
Reputation: 57,791

Post » Wed Jan 11, 2012 4:25 pm

Try using this style tag in the page with the canvas:

[code]     <style type="text/css">
          * {
               padding: 0;
               margin: 0;
          }
          canvas {
               position: fixed;
          }
    </style>[/code]

It'll remove all padding and margins, so the canvas should sit pixel-perfectly in the top-left of the page at its correct size.
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,518

Post » Wed Jan 11, 2012 10:49 pm

Upon doing a combination of both of the above recommendations (alone with an extra <br/> I discovered above the Scirra link) I was able to get the game sized correctly.

Thanks,

Jason
B
18
S
7
G
5
Posts: 62
Reputation: 4,410


Return to How do I....?

Who is online

Users browsing this forum: Kagubro and 30 guests