CODEWITHSUNDEEP
haxehaxeflixel
TheSager
TheSager

Reputation: 15

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

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.

Upvotes: 1

Views: 361

Answers (2)

wu-lee
wu-lee

Reputation: 769

I was also looking into this question, and found this:

https://community.openfl.org/t/scalemode-for-html/9695

Which is not the exact solution I used, but pointed me to the Project.xml file. When I checked, this file sets the <window> element for HTML5 like this by default:

<window if="html5" resizable="false" />

Simply changing false to true made the canvas expand to fill the screen, whilst maintaining its aspect ratio.

Given this you can centre the result using CSS on the embedding HTML div element, or an iframe embed for the whole page, using standard CSS techniques. For example:

How to center an element horizontally and vertically

Upvotes: 0

Giuppe
Giuppe

Reputation: 449

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" />

Upvotes: 2

Related Questions