HTML moving phaser into container div

后端 未结 3 744
北荒
北荒 2021-02-04 05:52

Currently making up a browser based game in phaser and trying to add it into the container div tag I\'ve created however phaser seems to be pushing itself to below

相关标签:
3条回答
  • 2021-02-04 06:18

    Using the examples found on the phaser github (https://github.com/photonstorm/phaser)

    in the Html:

    <div id="phaser-example"></div>
    

    on the .js

    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
    

    The fourth parameter on Phaser.Game() is the id of the DOM element in which you would like to insert the element that Phaser creates.

    0 讨论(0)
  • 2021-02-04 06:23

    For Phaser3 you can specify parent id in configuration object

    const config = {
        width: 800, height: 600,
        ...
        parent: 'element-id'
    };
    
    new Phaser.Game(config);

    checkout docs here: https://photonstorm.github.io/phaser3-docs/global.html#GameConfig

    0 讨论(0)
  • 2021-02-04 06:45

    The 4th parameter to the Phaser.Game constructor is the parent container. If you leave it empty it will inject the canvas into the document body. If you give it a string, it will run a document.getElementById() on that string, and if found inject the canvas into there. If you provide it with an HTMLElement it will skip the ID check and inject the canvas into that element instead.

    So in your case specifically I would suggest you create a div with an ID, then pass that ID into the constructor.

    More details here: http://gametest.mobi/phaser/docs/Phaser.Game.html

    0 讨论(0)
提交回复
热议问题