Stage color is always black on Chrome

Haxe
#1

I using the Mac OS version of Chrome and when I set the stage.color to something like blue (0x0000ff), the stage is always black. When I run this page on Firefox, the stage is blue. I’ve also been setting starling.nativeStage.color to red (0xff0000) and when I zoom out in both browsers I get the red native stage visible around the viewport.

How do I get the stage.color to work with Chrome?

#2

So, when you CLICK anywhere on page in THIS TEST, color of stage did not changing in Chrome?
For me it works fine :thinking:

#3

Your test page does work. Can I see your code for this test page?

#5

public function new()
{
super();
stage.addEventListener(MouseEvent.MOUSE_DOWN, onClick);
}

private function onClick(e:MouseEvent):Void
{
var nextColor:Int = 0x000000;
while (nextColor == 0xFFFFFF || nextColor == 0x000000)
{
nextColor = (Math.random() >= 0.5 ? 0xFF0000 : 0) | (Math.random() >= 0.5 ? 0x00FF00 : 0) | (Math.random() >= 0.5 ? 0x0000FF : 0);
}

stage.color = nextColor;
}

I just created a new project in FlashDevelop, project.xml is default.

So, if it works fine (as i thought), the problem is somewhere else…

#6

I managed to get it working with your code, but my code uses Starling. So I created a Starling example based on your code. The code below works with Firefox but not Chrome.

package;

import openfl.display.Sprite;
import starling.core.Starling;
class Startup extends Sprite {
    private var starling : Starling;
	public function new () {		
		super ();
        starling = new Starling (StageColorTest, stage);
        starling.start ();
    }
}

and

package ;

import openfl.events.KeyboardEvent;
import starling.display.Sprite;
import starling.core.Starling;
import starling.events.Event;

class StageColorTest extends Sprite
{
    private var starling : Starling;

    public function new ()
    {
        super();
        this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
    }

    private function addedToStageHandler(event : Event) : Void
    {
        if (starling == null)
        {
            starling = Starling.current;
        }
        starling.stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
        starling.stage.color = 0x4a4137;
        starling.nativeStage.color = 0x4a4137;
    }

    private function onKeyUp(e:Event):Void
    {
        var nextColor:Int = 0x000000;
        while (nextColor == 0xFFFFFF || nextColor == 0x000000)
        {
            nextColor = (Math.random() >= 0.5 ? 0xFF0000 : 0) | (Math.random() >= 0.5 ? 0x00FF00 : 0) | (Math.random() >= 0.5 ? 0x0000FF : 0);
        }
        starling.stage.color = nextColor;
        starling.nativeStage.color = nextColor;
    }
}

If you zoom out in Chrome, you can see the nativeStage.color does change as you release the key but not the stage.color which is always black.

#7

I think the Starling stage.color might be 32-bit. Have you tried 0xFF4A4137 instead?

#8

Adding 0xFF000000 to the desired color value worked.

Whilst this works for both Chrome and Firefox, how cross-platform is this? Will doing this break on other platforms?

#9

I believe that Starling stage.color is meant to be 32-bit in the original AS3, and is how we treat it now on all other platforms