import "https://cdn.skypack.dev/@next2d/player@latest";

​

const root = next2d.createRootMovieClip(240, 240, 60, {

    "tagId": "container",

    "fullScreen": true

});

​

const { Sprite, BlendMode } = next2d.display;

const { MouseEvent } = next2d.events;

const {

    TextField,

    TextFormat,

    TextFormatAlign

} = next2d.text;

​

const back = root.addChild(new Sprite());

back.x     = 90;

back.y     = 70;

​

back

    .graphics

    .beginFill("#edef00")

    .drawCircle(30, 30, 60);

​

const sprite = root.addChild(new Sprite());

sprite.x     = 120;

sprite.y     = 110;

​

sprite

    .graphics

    .beginFill("#7EA1C4")

    .lineStyle(5, "#1B365C")

    .drawRect(-50, -30, 200, 120);

​

let position = 0;

const blendList = [

    "ADD",

    "DARKEN",

    "DIFFERENCE",

    "HARDLIGHT",

    "INVERT",

    "LIGHTEN",

    "MULTIPLY",

    "OVERLAY",

    "SCREEN",

    "SUBTRACT"

];

​

sprite.blendMode  = "add";

sprite.buttonMode = true;

sprite.addEventListener(MouseEvent.MOUSE_DOWN, (event) => 

{

    event.currentTarget.startDrag();

});

sprite.addEventListener(MouseEvent.MOUSE_UP, (event) => 

{

    event.currentTarget.stopDrag();

});

sprite.addEventListener(MouseEvent.DOUBLE_CLICK, (event) => 

{

    const target = event.currentTarget;

    position++;

    if (position >= blendList.length) {

        position = 0;

    }

    target.blendMode = BlendMode[blendList[position]];

    target.root.state.text = `double click.\nBlendMode.${blendList[position]}`;

});

​

const textFormat = new TextFormat();

textFormat.size  = 12;

textFormat.bold  = true;

textFormat.align = TextFormatAlign.CENTER;

​

const textField = root.addChild(new TextField());

textField.defaultTextFormat = textFormat;

​

textField.name      = "state";

textField.multiline = true;

textField.width     = 180;

textField.height    = 25;

textField.x         = 45;

textField.y         = 10;

textField.text      = "double click.\nBlendMode.ADD";

​

​