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

​

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

    "tagId": "container",

    "fullScreen": true

});

​

const { Shape, Sprite } = next2d.display;

const { Point } = next2d.geom;

const { TextField } = next2d.text;

​

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

const shape1 = sprite1.addChild(new Shape());

shape1

    .graphics

    .lineStyle()

    .drawRect(0, 0, 200, 150);

​

const textField1 = sprite1.addChild(new TextField());

textField1.defaultTextFormat.size = "10";

textField1.text = "sprite1(x:0, y:0)";

​

const sprite2 = sprite1.addChild(new Sprite());

sprite2.x = 30;

sprite2.y = 30;

​

const shape2 = sprite2.addChild(new Shape());

shape2

    .graphics

    .lineStyle()

    .drawRect(0, 0, 160, 110);

​

const textField2 = sprite2.addChild(new TextField());

textField2.defaultTextFormat.size = "10";

textField2.text = "sprite2(x:30, y:30)";

​

const sprite3 = sprite2.addChild(new Sprite());

sprite3.x = 60;

sprite3.y = 30;

​

const shape3 = sprite3.addChild(new Shape());

shape3

    .graphics

    .lineStyle()

    .drawRect(0, 0, 90, 60);

​

const textField3 = sprite3.addChild(new TextField());

textField3.defaultTextFormat.size = "10";

textField3.text = "sprite3(x:90, y:60)";

​

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

globalText.defaultTextFormat.size = "10";

globalText.autoSize = "left";

globalText.y = 160;

globalText.text = `sprite3.globalToLocal(new Point(90, 60)) => ${sprite3.globalToLocal(new Point(90, 60))}`;

​

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

localText.defaultTextFormat.size = "10";

localText.autoSize = "left";

localText.y = 180;

localText.text = `sprite3.localToGlobal(new Point(0, 0)) => ${sprite3.localToGlobal(new Point(0, 0))}`;

​