game maker
Gebruikersnaam:
Wachtwoord:
Home Info Forums Help
Welkom, Gast. Alsjeblieft inloggen of registreren.
De activerings e-mail gemist?
+  Forums
|-+  Werken met Game Maker
| |-+  Gevorderden (Moderators: Erik Leppen, ericlegomeer, BlueMoonProductions)
| | |-+  Game Maker HTML 5 en javascript
Pagina's: [1]
« vorige volgende »
Print
Advertenties

dvdtv
Jurylid


Offline Offline

Berichten: 4718

Eigenaar van het bedrijf: Meester Dennis.


WWW
« Gepost op: 30 Januari 2017, 09:55:31 »

Hoi allemaal,

Ik zou graag een website code in game willen laten uitvoeren met Game-Maker. Nu heb ik dus deze code:

Code:
<input class="button" type="button" value="Fullscreen" onclick="toggleFullScreen()" style="position: absolute; bottom: 0; right: 0; float: right; clear:right;">

<script>

function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||   
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) { 
      document.documentElement.requestFullScreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
      document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullScreen) { 
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
  } else { 
    if (document.cancelFullScreen) { 
      document.cancelFullScreen(); 
    } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
    } 
  } 
}
</script>

En als ik dit gebruik dan krijg ik op mijn website het volgende:
http://haastrechtloop.nl/testje.php

Maar wat ik zou willen is dat ik in mijn HTML5 spel (game maker) een button maak, en als ik op dit button klik dat hij dan dit stukje script uitvoert. Zodat hij naar fullscreen mode gaat.

Kan iemand mij hiermee helpen?

groetjes,
Dennis


Naar boven Gelogd

Flumble
Gebruiker


Offline Offline

Berichten: 1950


« Antwoord #1 Gepost op: 30 Januari 2017, 16:58:59 »

Het schijnt mogelijk te zijn om naar volledig scherm te gaan door op F10 te drukken in het spel.


Kan je niet gewoon die knop toevoegen aan de html van je HTML5-export? Knipoog

Behalve document.documentElement kan elk html-element om fullscreen vragen, dus je kan het spelcanvas zelf in volledig scherm zetten in plaats van de hele pagina:
Code:
function toggleFullScreen() {
  var element = document.getElementById("gm4html5_div_id"); //de <div> waar het spel in zit

  if ((document.fullScreenElement && document.fullScreenElement !== null) ||
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (element.requestFullScreen) {
      element.requestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

/*helaas, de fullscreen-API is nog niet in alle browsers gestandaardiseerd
function toggleFullScreen() {
  if (document.fullscreen)
    document.exitFullscreen();
  else
    document.querySelector("canvas").requestFullscreen();
}*/


[edit] andere methodes zijn mogelijk, maar ik begin liever hiermee omdat die andere methodes waarschijnlijk een chaos worden.

[edit] de vorige code klopte van geen kant: geen enkele browser ondersteunt de standaardnamen voor volledig scherm en het spel komt altijd in een divje genaamd gm4html5_div_id, dat mogelijk handiger is dan het canvas.

« Laatste verandering: 30 Januari 2017, 20:49:36 door Flumble »
Naar boven Gelogd

dvdtv
Jurylid


Offline Offline

Berichten: 4718

Eigenaar van het bedrijf: Meester Dennis.


WWW
« Antwoord #2 Gepost op: 30 Januari 2017, 17:13:32 »

Hoi Flumble,

Dus stel dat ik een button maak waarim je virtueel F10 indruk dan gaat het scherm naar fullscreen?

Wat bedoel je precies met het canvas vergroten?
Mijn html5 programma's worden om de volgende manier afgespeeld:
http://dennisvanduin.nl/digibord/tools/tool_tafelsflitsen/tafelsflitsen.html

Ik wil namelijk in mijn spel een button maken die ervoor zorgt dat je kan switche ntussen full screen en normaal beeld...

Groetjes,
Dennis

« Laatste verandering: 30 Januari 2017, 18:57:58 door dvdtv »

Naar boven Gelogd

Flumble
Gebruiker


Offline Offline

Berichten: 1950


« Antwoord #3 Gepost op: 30 Januari 2017, 20:40:09 »

Dus stel dat ik een button maak waarim je virtueel F10 indruk dan gaat het scherm naar fullscreen?
Nee, want naar volledig scherm gaan moet door directe invoer van de gebruiker gebeuren, dus niet vanuit een event in GM. (GM kan zelf wel naar volledig scherm als je op F10 drukt omdat het door de runner wordt afgevangen in plaats van dat het wordt omgezet naar een event in GM.)

Wat bedoel je precies met het canvas vergroten?
Het spel zelf speelt zich af in het <canvas>-element (zie de broncode van je html-bestand). Dus je kan een hele pagina vol informatie en knoppen (waaronder een knop voor volledig scherm) hebben terwijl je in volledig scherm alleen het spelvenster het volledige scherm in beslag neemt.

Als ik op je pagina een paar elementen toevoeg (een button om op de firefox-manier naar volledig scherm te gaan en een div om de gamemaker-div heen die ervoor zorgt dat de achtergrondkleur het hele scherm beslaat):

dan heb ik die knop zichtbaar in het normale venster, maar niet in volledig scherm. (of als je de knop binnen die div zet, is die natuurlijk wl te zien in volledig scherm)
En de browser vertelt je wel hoe je weer uit volledig scherm komt.


Je kan ook een knop vanuit GM maken met clickable_add. Hopelijk kan je hem een target geven in de vorm javascript:toggleFullScreen();return false;, maar dat weet ik niet zeker.

[edit] vorige bericht aangepast qua code

« Laatste verandering: 30 Januari 2017, 20:50:13 door Flumble »
Naar boven Gelogd

dvdtv
Jurylid


Offline Offline

Berichten: 4718

Eigenaar van het bedrijf: Meester Dennis.


WWW
« Antwoord #4 Gepost op: 30 Januari 2017, 22:01:10 »

Hoi Flumble,

Ik heb nu het volgende van jou script en mijn script gemaakt. Eerst had ik jou code overgenomen, maar dan kreeg ik mijn hele scherm niet zichtbaar:

Nu heb ik het volgende:
Code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Generated by GameMaker:Studio http://www.yoyogames.com/gamemaker/studio -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="pragma" content="no-cache"/>
        <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>Rekenrek</title>

        <!-- Set the background colour of the document -->
        <style>
            body {
              background: #B7E0F9;
              color:#cccccc;
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            canvas {
                      image-rendering: optimizeSpeed;
                      -webkit-interpolation-mode: nearest-neighbor;
                      -ms-touch-action: none;
                      margin: 0px;
                      padding: 0px;
                      border: 0px;
            }
            :-webkit-full-screen #canvas {
                 width: 100%;
                 height: 100%;
            }
            div.gm4html5_div_class
            {
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            /* START - Login Dialog Box */
            div.gm4html5_login
            {
                 padding: 20px;
                 position: absolute;
                 border: solid 2px #000000;
                 background-color: #404040;
                 color:#00ff00;
                 border-radius: 15px;
                 box-shadow: #101010 20px 20px 40px;
            }
            div.gm4html5_cancel_button
            {
                 float: right;
            }
            div.gm4html5_login_button
            {
                 float: left;
            }
            div.gm4html5_login_header
            {
                 text-align: center;
            }
            /* END - Login Dialog Box */
            :-webkit-full-screen {
               width: 100%;
               height: 100%;
            }
        </style>
    </head>

    <body>
<div id="spel" style="width: 100%; background-color: inherit;">
        <div class="gm4html5_div_class" id="gm4html5_div_id"></div>
            <canvas id="canvas" width="1024" height="768">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>       
</div>

<input class="button" type="button" value="Fullscreen" onclick="toggleFullScreen()" style="position: absolute; bottom: 0; right: 0; float: right; clear:right;">

<script>

function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||   
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) { 
      document.documentElement.requestFullScreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
      document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullScreen) { 
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
  } else { 
    if (document.cancelFullScreen) { 
      document.cancelFullScreen(); 
    } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
    } 
  } 
}
</script>



        <!-- Run the game code -->
        <script type="text/javascript" src="rekenrek/rekenrek.js?SBFAC=290428831"></script>
    </body>
</html>


Maar dan krijg ik wel een fullscreen buttn rechts onderin beeld, en deze vergroot het spel ook. Maar na het vergroten staat alles ineens meer naar rechts... met een witte rand. Terwijl het wel netjes gecentreerd staat als ik gewoon op F11 druk. Verder zou ik willen dat de Fullscreen butten dus verdwijnt als je in fullscreen zit... Enig idee hoe ik dat toevoeg?

Groetjes,
Dennis

Bij voorbaat dank!


Naar boven Gelogd

Flumble
Gebruiker


Offline Offline

Berichten: 1950


« Antwoord #5 Gepost op: 30 Januari 2017, 22:53:40 »

Het probleem is dat je bij het aanpassen van de HTML de div van gamemaker niet meer om het canvas hebt staan:
Code:
<div id="spel" style="width: 100%; background-color: inherit;">
        <div class="gm4html5_div_class" id="gm4html5_div_id"></div>
            <canvas id="canvas" width="1024" height="768">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>        
</div>

moet zijn

<div id="spel" style="width: 100%; background-color: inherit;">
        <!-- hier hoort, in ieder geval bij tafelsflitsen, ook nog een <img> voor het laadscherm. Is die weggevallen bij het veranderen van de code? -->
        <div class="gm4html5_div_class" id="gm4html5_div_id">
            <canvas id="canvas" width="1024" height="768">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
        </div>
</div>


Oh en let op dat je met mijn eerdere code het id "spel" moet zoeken in plaats van "gm4html5_div_id" wanneer je die spel-div gebruikt.

« Laatste verandering: 30 Januari 2017, 22:59:48 door Flumble »
Naar boven Gelogd

dvdtv
Jurylid


Offline Offline

Berichten: 4718

Eigenaar van het bedrijf: Meester Dennis.


WWW
« Antwoord #6 Gepost op: 31 Januari 2017, 17:30:19 »

Hoi Flumble,

Ik kom volgens mij een stukje dichterbij, maar als ik nu op je button klik dan gebeurd er niks... De code is:
Code:
    <body>
<div id="spel" style="width: 100%; height: 100%; background-color: inherit;">
        <div class="gm4html5_div_class" id="gm4html5_div_id">
        <img src="rekenrek/splash.png" id="GM4HTML5_loadingscreen" alt="GameMaker:HTML5 loading screen" style="display:none;"/>
            <!-- Create the canvas element the game draws to -->
            <canvas id="canvas" width="1024" height="768">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
        </div>
</div>
<button onclick="document.getElementById('spel').mozRequestFullScreen();">Volledig scherm</button>
 

<!-- Run the game code -->
        <script type="text/javascript" src="rekenrek/rekenrek.js?SBFAC=290428831"></script>
    </body>

Je kan het zien op: http://dennisvanduin.nl/digibord/tools/tool_rekenrek/rekenrek.html

Kan je me er nog verder mee helpen?

Groetjes,
Dennis


Naar boven Gelogd

Flumble
Gebruiker


Offline Offline

Berichten: 1950


« Antwoord #7 Gepost op: 31 Januari 2017, 18:57:59 »

Ik kom volgens mij een stukje dichterbij, maar als ik nu op je button klik dan gebeurd er niks...
Interessant. Ik had niet verwacht dat je alsnog de knop uit mijn screenshot ("op de firefox-manier") zou kopiren nadat je zelf al een knop met het fullscreen-script had neergezet.

Naar boven Gelogd

dvdtv
Jurylid


Offline Offline

Berichten: 4718

Eigenaar van het bedrijf: Meester Dennis.


WWW
« Antwoord #8 Gepost op: 31 Januari 2017, 19:52:48 »

Ohh haha, ik weet genoeg! Ik dacht dat ik jou kleine stukje code moest gebruiken haha!

Dankjewel!

Edit:
Ik heb het nu werken, alleen in internet explorer werkt het niet... Ik gebruik de volgende code:
Code:

<script type="text/javascript">

function goFullscreen(id) {
var element = document.getElementById(id);

  if ((element !== null) ||    
   (!element.mozFullScreen && !element.webkitIsFullScreen)) {
    if (element.requestFullScreen) {  
      element.requestFullScreen();  
    } else if (element.mozRequestFullScreen) {  
      element.mozRequestFullScreen();  
    } else if (element.webkitRequestFullScreen) {  
      element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }  
  } else {  
    if (element.cancelFullScreen) {  
      element.cancelFullScreen();  
    } else if (element.mozCancelFullScreen) {  
      element.mozCancelFullScreen();  
    } else if (element.webkitCancelFullScreen) {  
      element.webkitCancelFullScreen();  
    }  
  }  
}
</script>

<iframe id="gamewindow" src="../../digibord/tools/tool_klok1/klok1.html" name="klok" frameborder="0" scrolling="no"  allowfullscreen horizontalscrolling="no" verticalscrolling="no" style="width:100%;height:768px; position:relative;"></iframe>

<button onclick="goFullscreen('gamewindow'); return false">Volledig scherm</button>

Je kan het testen op:
http://dennisvanduin.nl/digibord/tools/testje1.php

Hoe laat ik het nu ook werken in IE?

« Laatste verandering: 31 Januari 2017, 21:47:53 door dvdtv »

Naar boven Gelogd

Flumble
Gebruiker


Offline Offline

Berichten: 1950


« Antwoord #9 Gepost op: 1 Februari 2017, 14:58:11 »

Ik hoop dat het om IE 11 gaat? Eerdere versies hebben de fullscreen-API niet.

IE 11 heeft ms als prefix, dus die moet ook in het lijstje:
Code:
...
function goFullscreen(id) {
  if (!document.fullscreen && !document.mozFullScreen && !document.webkitIsFullScreen) {

    var element = document.getElementById(id);

    if (element) {
      if (element.requestFullscreen) { 
        element.requestFullscreen(); 
      } else if (element.mozRequestFullScreen) { 
        element.mozRequestFullScreen(); 
      } else if (element.webkitRequestFullscreen) { 
        element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
      } else if (element.msRequestFullscreen) {
        element.msRequestFullScreen();
      }
    }

  } else {

    if (document.exitFullscreen) { 
      document.exitFullscreen(); 
    } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } else if (document.webkitExitFullscreen) { 
      document.webkitExitFullscreen(); 
    } else if (document.msExitFullscreen) { 
      document.msExitFullscreen(); 
    }

  }
}
...

Naar boven Gelogd

dvdtv
Jurylid


Offline Offline

Berichten: 4718

Eigenaar van het bedrijf: Meester Dennis.


WWW
« Antwoord #10 Gepost op: 1 Februari 2017, 20:29:41 »

Super dankjewel! Nu nog even er achter komen hoe ik de button niet kan weergeven op telefoons en de oude IE.


Naar boven Gelogd

Advertenties
« vorige volgende »
Pagina's: [1]
Print


Topic Informatie
0 geregistreerde leden en 1 gast bekijken dit topic.

Ga naar:  

Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines
www.game-maker.nl © 2003-2017 Nederlandse Game Maker Community