Displaying HTML game in a div at actual size?

How do I...?
1

Even with the project properties option changed to “No changes to the game size” - when I do an HTML5 export (to local folder) the game still occupies the full height of the browser window (with a black background elsewhere.)

Looking at the index.html page that seems to make sense since the canvas is the body of the page as a whole.

How can I change that so the game renders in just say a div that’s the actual size of the game? I’m assuming it’s possible to change createStandardCanvas to something other than document.body - but what about bindStandardEvents in the function and #canvasArea in the CSS?

2

Hi

I have the same problem
I’ve found some things to change, so I have my game in my div.

But I’ve always a BIG BIG problem ! Mouse X and Y are not taken for div corner, but from page !
So, something is wrong… but what ??

I modify file pixi-renderes/runtimegame-pixi-renderer.js
this._isFullPage =false; //so game has the right size
this._pixiRenderer.view.style['position'] = 'relative'; //instead of absolute (to put the game inside the div)
this._pixiRenderer.view.style['top'] =0;// replace bad this._marginTop + (maxHeight - canvasHeight) / 2 + 'px';
this._pixiRenderer.view.style['left'] = 0;// replace bad this._marginLeft + (maxWidth - canvasWidth) / 2 + 'px';

I also modify the function to call the game (function in index.html file, after export)
new function is :
<div id="canvasArea2">my Div, where I want my game</div>
<script>
(function() {
//Initialization
var game = new gdjs.RuntimeGame(gdjs.projectData, {});

    //Create a renderer
    var myCanvas = document.getElementById("canvasArea2");
    game.getRenderer().createStandardCanvas(myCanvas);

    //Bind keyboards/mouse/touch events
    game.getRenderer().bindStandardEvents(game.getInputManager(), myCanvas, document);//, window, document

    //Load all assets and start the game
    game.loadAllAssets(function() {
        game.startGameLoop();
    });
})();
</script>

But, If you test with Mouse coordonates, it’s a big bug…

Example here :
http://adminvps4.fr.nf/test4-forum-gdevelop/

3

I wish I could be of more help, but personally I ended up putting my game and the assets into a sub folder then calling it into a responsive iframe. I have no idea if that would have any bearing on how the co-ordinates are calculated or whether they’d still be based off the size of the parent window.

4

iframe is a bad solution, but if it’s not a problem for you, yes, it’s very simple.

5

I don’t see how an iframe is bad, but whatever. You changed GDevelop’s code so you broke it, as it expects to be used as an absolute canvas. See this: javascript - Real mouse position in canvas - Stack Overflow to learn how to modify inputtools.js to calculate it how you want.