Imported costum Class not working for HTML5?

I got an Animation sample from openfl samples, it works fine when I tried exporting for flash and html5. However, when I build a custom Class then importing it to main. Tried compiling it, flash works, but not on HTML5, is this a bug?

Could you share the errors you got, or the code you wrote?

There was no error, it runs smoothly in flash player but not when build for html5.

Main.hx

package;

import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.display.Sprite;
import openfl.Assets;
import AnimateThis;


class Main extends Sprite {

    private var container_vX:Float;
    private var container_vY:Float;
    
    public function new () {
        super ();
        
        var bitmap = new Bitmap (Assets.getBitmapData ("assets/openfl.png"));
        bitmap.x = 0;
        bitmap.y = 0;
        bitmap.smoothing = true;
        
        var container = new Sprite ();
        container.addChild (bitmap);
        container.x = 0;
        container.y = 0;
        container_vX = 3 +Math.random()*3;
        container_vY = 3 +Math.random()*3;        
        
        addChild (container);
        
        var myClass = new AnimateThis();
        myClass.initializer(container,container_vX,container_vY);
    }

}

AnimateThis.hx

package;

import openfl.display.Sprite;
import openfl.events.Event;


class AnimateThis extends Sprite {

    public var vX:Float;
    public var vY:Float;
    public var myCont:Dynamic;
    
    public function new () {
        super ();
    }
    public function initializer(mc:Dynamic,myX:Float,myY:Float){
        myCont = mc;
        vX = myX;
        vY = myY;
        mc.addEventListener(Event.ENTER_FRAME, onEnterFrame);
    }
    private function onEnterFrame(e:Event){
        myCont.x += vX;
        myCont.y += vY;
        if(myCont.x + myCont.width > 800){
            vX *= -1;
        }
        else if (myCont.x < 0){
            vX *= -1;
        }
        if(myCont.y + myCont.height > 600){
            vY *= -1;
        }
        else if (e.currentTarget.y<0){
            vY *= -1;
        }
    }
}

What is interesting is, when I combine these two code into ONE Main.hx, BOTH flash and html5 build works!

Hey, just tried it out.

The issue is with the Dynamic type. Most of the core properties (such as x, y, width and height) are getters or setters. This means that it uses myCont.get_x() or myCont.set_x() at runtime, not myCont.x.

By using DisplayObject, Sprite or MovieClip, something with a good base type in the initializer function of AnimateThis, as well as the myCont var, it works. Be careful of dynamics!

If you’re sure you need a dynamic type, try using reflection to adjust properties:

Reflect.setField (myCont, "x", Reflect.field (myCont, "x") + vX);
Reflect.setField (myCont, "y", Reflect.field (myCont, "y") + vY);

If you can, though, using a strong type is nicer :slight_smile:

1 Like

I see, so my code is not cross-platform ready, how about in case where I got to pass an object from EventListener? For example

myObj.addEventListener(MouseEvent.MOUSE_OVER, onMouse_Over);

function onMouse_Over(e:MouseEvent){
     initializer(e.currentTarget)
}

function initializer(myObj: "something else"){
     ///some code here
}

Using Dynamic is the only way I know I could make this work.

myObj.addEventListener(MouseEvent.MOUSE_OVER, onMouse_Over);

function onMouse_Over(e:MouseEvent){
     initializer(cast(e.currentTarget, DisplayObject));
}

function initializer(myObj:DisplayObject){
     //Now it's safe.
     myObj.x += vX;
     myObj.y += vY;
}

Read this thread for more information:

1 Like