hitArea in HTML5

Haxe
#1

Hi,
I am targeting Flash to develop my project and everything is ok, but the final target will be HTML5: targeting it I am now receiving this error

openfl.display.Sprite has no field hitArea

Does this mean that HTML5 does not support hitArea? Please tell me this is NOT true.

#2

The class doesn’t have this at all, so it seems flash is the only target with support for hitArea.

Doesn’t look like it’d be too complicated to add support for it, probably in here I guess https://github.com/openfl/openfl/blob/master/openfl/display/Sprite.hx#L170

#3

I’ve been making strides to improve the hit test logic in OpenFL, I noticed this as well, I think we’re close to being able to support a hitArea object, could you mouseEnabled = false and addChild (hitAreaObject) instead?

#4

Good, but for now I have adopted a different approach.
Previously I used the standard method to use a custom hitArea, now I use a method very similar to the one you’re suggesting: I have a container with mouseEnabled = false, and an interactiveArea (your hitAreaObject) put inside it. The only “problem” is that I must remember to change child order when switching the gfx inside the container, because even if the gfx is mouse-disabled, if I put it upon the interactiveArea it steals the mouse interactions… and I wonder why.

#5

There are hit related improvements in the repository that might fix that case, mouseEnabled was handled a little differently before

#6

Great! Where do I find the list of improvements?

#7

For changes not yet in a new version you can browse the commit list: https://github.com/openfl/openfl/commits/master
Otherwise there’s the changelog: https://github.com/openfl/openfl/blob/master/CHANGELOG.md

#8

Ooook, it was obvious, thank you :wink:

But, wait, Joshua, the improvements are in the public or in the dev version?

#9

I am doing a few more tests with buttons in HTML5.
I noticed that RollOver and RollOut are not detected: is this a bug?

EDIT: I have found another discrepancy between Flash and HTML5.
I have an item (it is the same one I modified to replace the missing hitArea in the beginning):
it is a Sprite containing a gfxContainer: gfxContainer contains a switchable gfx element and an activeArea element.
The structure is like this:

item
	- gfxContainer (mouseEnabled = false, mouseChildren = true)
		- gfx (mouseEnabled = false, mouseChildren = false)
		- activeArea (mouseEnabled = true, mouseChildren = false)
  • gfxContainer must ignore global mouse interactions and care for children only.
  • gfx must be totally ignored by mouse interactions
  • activeArea must care for global mouse interactions and ignore children specific ones.

I do this to use activeArea shape as hitArea for whatever gfx is in the container, but this works in Flash only: using these settings in HTML5 the item does not detect mouse interactions, it is not interactive at all.
To make this work the exact same way in HTML5 I must set gfxContainer.mouseEnabled = true: it still ignores gfx shape and uses activeArea shape for interactions, but if I use this settings in Flash it uses both gfx and activeArea as hitArea.

To be honest, both Flash and HTML5 behaviours look wrong:

  • gfx should be passive whatever I set in its container, but this is not true for Flash.
  • gfxContainer.mouseEnabled = true shouldn’t be necessary, but this is not true for HTML5.

Weird situation… am I missing something? For now I have set a conditional compilation

#if flash
	stateContainer.mouseEnabled = false;
#else
	stateContainer.mouseEnabled = true;
#end

but I’d like it to be just a temporary fix.

#10

The release treats mouseEnabled=false as no mouse, dev should handle mouseEnabled=false with mouseEnabled=true more like Flash

#11

Ok, so I will wait for release :wink:

#12

I appreciate I’m resurrecting an ancient thread here, but after playing around with different targets I’ve found that there still seems to be a discrepancy between how HTML5 and Flash handle the event flow in certain cases.

I’m using Openfl: 8.9.6 and Lime: 7.7.0.

Here is some test code with a parent container and two child sprites that have mouseEnabled = false

package;

import openfl.Assets;
import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.display.Sprite;
import openfl.events.MouseEvent;

class Main extends Sprite 
{   
    public function new () 
    {
        super();
        var parent = new Sprite();
        parent.name = 'parent';
        var child1 = new Sprite();
        child1.name = 'child1';
        var child2 = new Sprite();
        child2.name = 'child2';

        child1.addChild(new Bitmap(Assets.getBitmapData("assets/openfl.png"))); 
        
        child2.graphics.beginFill(0x24AFC4);
        child2.graphics.drawRect(520,35,100,100);
        child2.graphics.endFill();

        child1.mouseEnabled = false;
        child2.mouseEnabled = false;

        parent.addChild(child1);
        parent.addChild(child2);
        addChild(parent);  
        parent.addEventListener(MouseEvent.CLICK, onClick);
    }

    public function onClick(e:MouseEvent):Void
    {
        trace('${cast(e.target, Sprite).name} is clicked');
    }
}

On Flash: Clicking both children traces parent is clicked (correct as far as I can tell from my limited AS3 experience).

On HTML5: Clicking on child2 traces parent is clicked, but nothing happens when clicking on child1. There seems to be a difference between how the child sprites with bitmap child vs graphics are handled.

Is this simply a difference between targets that I should stay aware of, or should they handle the event in the same way? I’m afraid I’m too new to all this to dig into and comprehend the source code.

Many thanks.