Using Webpack - Positioning Canvas

Phaser 3
1

Hi,

I am using webpack and I am trying to position the canvas. Too be honest, I don’t have a really good understanding of webpack, it was part of the template I used to start the game from. My game is in a file called ‘.src/index.js’ and the HTML template is a file called ‘index.html’.

The html file looks like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Game</title>
  </head>
  <body style="text-align: center;">
  </body>
  <footer>
     <!-- FOOTER INFORMATION HERE -->
  </footer>
</html>

I want to put the canvas before the footer. I have tried using the “canvas” attribute in the game config and set it to document.getElementById(‘game’), game being the ID of a canvas element I tried inserting into the template. This didn’t work, I am guessing because the script is not loaded in time or because it is in a separate js file.

The webpack config file looks as below:

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: [/\.vert$/, /\.frag$/],
        use: "raw-loader"
      },
      {
        test: /\.(gif|png|jpe?g|svg|xml)$/i,
        use: "file-loader"
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      root: path.resolve(__dirname, "../")
    }),
    new webpack.DefinePlugin({
      CANVAS_RENDERER: JSON.stringify(true),
      WEBGL_RENDERER: JSON.stringify(true)
    }),
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
};

I have looked online and can see things that relate to this, but to be honest, I don’t really understand.

Can someone help and point me in the right direction?

2 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Game</title>
</head>
<body>
  <div id=parent></div>
  <footer></footer>
</body>
</html>

new Phaser.Game({ parent: 'parent' });
1 Like
3

Amazing! That worked!

Thank you.

4

Quick addition to explain samme’s solution. Specifying a parent in the game config puts the game canvas in the element that you’ve provided while allowing Phaser to create the canvas by itself.

<footer> is also moved into the <body> because the code in your post is not valid HTML (the <html> tag can only have a <head> followed by a <body> that holds all other elements). I haven’t checked how a browser will correct this, but it may have been related to your problem.

5

Thanks, it worked without having to move the footer tag, but I will now move it as it’s better to have correct HTML.