Transparent background HTML5

pol2095 · October 16, 2017, 11:00pm

Hello,

when I export to HTML5, is-it possible to have a transparent background ?

Thanks

player_03 · October 18, 2017, 12:09am

I don’t know if this is possible by default. If not, you can always use templates.

singmajesty · October 18, 2017, 12:12am

I think you can by doing the following:

<window background="null" if="html5" />

or maybe

<window background="0x00000000" if="html5" />

pol2095 · October 18, 2017, 7:29am

<window background="null" if="html5" />

it work, thanks.

loudo · September 4, 2018, 1:21pm

It seems that it is not working anymore.

singmajesty · September 4, 2018, 5:04pm

I did a test, and it does appear to be working. However, the default HTML template sets a black background (for use with letter-boxing)

github.com

openfl/openfl/blob/develop/assets/templates/html5/template/index.html#L29


	<script>
		window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, { capture: false, passive: false });
		if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {
			var meta = document.getElementById ("viewport");
			meta.setAttribute ('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');
		}
	</script>
	
	<style>
		html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
		#openfl-content { background: #000000; width: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_WIDTH::px::else::100%::end::; height: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_HEIGHT::px::else::100%::end::; }
::foreach assets::::if (type == "font")::::if (cssFontFace)::::cssFontFace::::else::
		@font-face {
			font-family: '::fontName::';
			src: url('::targetPath::.eot');
			src: url('::targetPath::.eot?#iefix') format('embedded-opentype'),
			url('::targetPath::.svg#my-font-family') format('svg'),
			url('::targetPath::.woff') format('woff'),
			url('::targetPath::.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;

I did a quick test with a red window background, and removed the #openfl-content background, and OpenFL content did have a transparent background

loudo · September 4, 2018, 10:50pm

Oh why I didn’t see that it was just a matter of css. Thanks.