Creating a game with a specific sized web page

Post reply
0 favourites
  • 4 posts
From the Asset Store
Awardkit
$3.50 USD
30% off
Create custom awards and achievement or use the many templates and create your own.
vtrix's avatar
vtrix

  • 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

  • You can remove 

    <div style="text-align: center;"></div>

    , 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.

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

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

    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.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • 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

Post reply
  • 4 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)