Jump to content


Photo

HTML 5 WEBSITE


  • Please log in to reply
2 replies to this topic

#1 russiantvemail

russiantvemail

    GMC Member

  • New Member
  • 4 posts
  • Version:GM:HTML5

Posted 21 April 2012 - 11:37 PM

Solved


This link tells how to do it in a very easy built in game maker method !!!

http://gmc.yoyogames...4

Thanks to all those who Helped !!! ::lmao::



-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

How can you make the room and view width and hight always the same as browser? So its like "fullscreen" but to the browser window width and hight.
Could it be done by changing the HTML canvas code??

 <canvas id="canvas" width="800" height="600">

What i am trying to do is to make a website and i want it to port to the browser window or some function thats similar...
I have good knowledge of gml code (i had version 8) but i have little to no knowledge of html or javascript...
My plan is to make an animated website similar to those made in flash.

Any other tips or suggestions how to make the website in gm html5 would be great.. :smile:


** I also know about the issues with text not being indexable but i will include the stuff that needs to be crawled in native html...
*** I know that canvas takes long to load just like flash...
**** I know that text wouldnt be able to be copied from canvas but this doesnt matter for me...


PS: I am new to GMC... :medieval:

All help will be usefull !!


---------------------------------------------------------------------------------------------------------------------------------------------------------------------

EDIT:



Thanks for the quick reply..

I tried the first option:
<canvas id="canvas"><script type="text/javascript">document.getElementById("canvas").style.width = screen.width;document.getElementById("canvas").style.height = screen.height;</script>
However this didn't seem to work and the canvas shrunk down to 100 x 100 :confused:

Then I tried changing the canvas id to percentage:
<canvas id="canvas" width="100%" height="100%">
This worked for the width however it didn't work with the hight and shrunk the hight of the canvas to 100px :confused:

Then I attempted this code:
<script type="text/javascript">document.write("<canvas id='canvas' width='" + screen.width + "' height='" + screen.height + "'>");</script>
Which seemed to work and both the width and the hight had changed the view ports however there remained to be some space left on both the width and the hight and the scroll bars remained.. :mellow:

I think it might be something else in the index file generated by game maker that could of caused the problem ?? So this is the original index generated by GM HTML5:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Generated by GameMaker:HTML5 http://www.yoyogames.com/gamemaker/html5 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name ="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta charset="utf-8"/>

        <!-- Set the title bar of the page -->
        <title>Game Maker HTML 5</title>

        <!-- Set the background colour of the document -->
        <style>
            body {
              background: #222;
              color:#cccccc;
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            canvas {
                      image-rendering: optimizeSpeed;
                      -webkit-interpolation-mode: nearest-neighbor;
                      margin: 0px;
                      padding: 0px;
                      border: 0px;
            }
            div.gm4html5_div_class
            {
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            :-webkit-full-screen {
               width: 100%;
               height: 100%;
            }
        </style>
    </head>

    <body>
        <div class="gm4html5_div_class" id="gm4html5_div_id">
            <!-- Create the canvas element the game draws to -->
            <canvas id="canvas" width="800" height="600">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
        </div>

        <!-- Run the game code -->
        <script type="text/javascript" src="html5game/Project Website.js?FIFBC=1842075707"></script>
    </body>
</html>



It might be that there is something else in this index file that causes the issue or its me who is doing something wrong :wacko:
its just that i am realy bad with the html and js and sometimes dont know what i am doing.

I just started learning html so i basicly fail at it.... and js is unknown teritory for me :confused:



EDIT:

Solved


Edited by russiantvemail, 22 April 2012 - 05:41 AM.

  • 0

#2 thegame

thegame

    Flying Penguin

  • GMC Member
  • 1495 posts
  • Version:GM:Studio

Posted 21 April 2012 - 11:47 PM

You will have to use JavaScript to find the height and width of the page, then set the size of the canvas.
Basically:

<canvas id="canvas">

<script type="text/javascript">
document.getElementById("canvas").style.width = screen.width;
document.getElementById("canvas").style.height = screen.height;
</script>

I'm not sure how GM will react to this though... there maybe be some function in GM to do it.
You could also try to do it like this:

<script type="text/javascript">
document.write("<canvas id='canvas' width='" + screen.width + "' height='" + screen.height + "'>");
</script>

But again, I don't know if it works with GM.

Edit: Just remembered something else... I think that if you set both width and height to 100% it might work:
<canvas id="canvas" width="100%" height="100%">

Edited by thegame, 21 April 2012 - 11:49 PM.

  • 0

#3 russiantvemail

russiantvemail

    GMC Member

  • New Member
  • 4 posts
  • Version:GM:HTML5

Posted 22 April 2012 - 01:25 AM

Solved (Sorry for the double post) :thumbsup:

Edited by russiantvemail, 22 April 2012 - 05:42 AM.

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users