How can you position a HaxeFlixel canvas in the centre of a chrome window? - haxe

Question

At the moment, I'm learning HaxeFlixel, and I can centre the text in the canvas, but i can't position the canvas in the centre of chrome the chrome window. Is there a way to do it and Main.hx?
PlayState.hx :
package;
import flixel.FlxG;
import flixel.FlxState;
import flixel.text.FlxText;
class PlayState extends FlxState
{
override public function create()
{
super.create();
var text = new FlxText(0, 0, 0, "Hello World\n", 64);
text.screenCenter();
add(text);
}
override public function update(elapsed:Float)
{
super.update(elapsed);
enterFullscreen();
}
public function enterFullscreen()
{
if (FlxG.keys.justPressed.ENTER)
{
FlxG.fullscreen = !FlxG.fullscreen;
}
}
}
Main.hx :
package;
import flixel.FlxGame;
import openfl.display.Sprite;
class Main extends Sprite
{
public function new()
{
super();
addChild(new FlxGame(0, 0, PlayState));
}
}
Please help,
Thanks.

Answer 1

When you compile an HaxeFlixel project for the web, there are two parts:
all the Haxe code is converted to Javascript, executing inside a <canvas> HTML object; all the rest of the HTML page is taken from a template, and you need to change that to center your canvas or otherwise add other elements on the side.
The default template that HaxeFlixel uses is inside the Lime project: https://github.com/openfl/lime/blob/develop/templates/html5/template/index.html
You need to copy that file inside your project, for example in assets/index.html; then customize it, for example adding the <center> tag around <div id="content"></div> (the div where your game canvas will be placed):
<center>
<div id="content"></div>
</center>
You can use CSS to center it, too, if you're so inclined. Just be careful touching the lines with :: as those are template directives.
With your new template placed in assets/index.html, add this line inside project.xml:
<template path="assets/index.html" />