Add art borders to a square game.

*Edit: This seems to be impossible to do with integer scaling as of version r148*

I would like images around my game instead of ugly black bars. Any tips?

Editing the file index.html should do the trick.

!-- All margins and padding must be zero for the canvas to fill the screen. -->

<style type="text/css">

     * {

          padding: 0;

          margin: 0;

     }

     body {

          <font color="red">background: #000;</font>

          color: #fff;

          overflow: hidden;

          -ms-touch-action: none;

     }

          canvas {

              ?touch-action-delay: none;

              ?touch-action: none;

              ?-ms-touch-action: none;

     }

</style>

Replace <font color="red">background: #000</font> with <font color="blue">background-image:url('your_image.png')</font> .

More info here: http://www.w3schools.com/css/css_background.asp

That's very useful, thanks! My game will be a desktop application, though. Are there any workarounds for that? :-)

Bump!

Uh...If your game is going to be a desktop application then there will be no black bars...

If the user resizes the window or enters fullscreen (which will be important because my game is very small pixel-wise), black bars appear.

Just add the images you'd like at the sides of your playing field. The dotted line in the editor window.

I'm guessing you are using scale outer, so the images will appear when the window is wider than your project size.

I am using integer scaling, and the fix you suggested did not work. :-(

Bump.

As you can read here black bars are normal with letterbox integer scale.

Using another scaling option it can be avoided, because you don't limit the scaling.

Probably you dont want other scaling because of pixel-art, if so, your "problem" can't be solved.

That's a shame. Thanks for the help anyways. :-)