diff --git a/dist/main.js b/dist/main.js
index a67d8df..9343508 100644
--- a/dist/main.js
+++ b/dist/main.js
@@ -782,7 +782,7 @@ eval("\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nex
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\r\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n}));\r\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n});\r\nvar __importStar = (this && this.__importStar) || function (mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n};\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nvar PIXI = __importStar(__webpack_require__(/*! pixi.js */ \"./node_modules/pixi.js/lib/pixi.es.js\"));\r\nwindow.PIXI = PIXI;\r\n__webpack_require__(/*! pixi-spine */ \"./node_modules/pixi-spine/bin/pixi-spine.js\");\r\nvar constants_1 = __webpack_require__(/*! ./constants */ \"./src/constants.ts\");\r\n// ES6:\r\nvar dat = __importStar(__webpack_require__(/*! dat.gui */ \"./node_modules/dat.gui/build/dat.gui.module.js\"));\r\n// npm install -D @types/dat.gui\r\n// console.log(PIXI);\r\n// init\r\nvar WIDTH = constants_1.STAGES.WIDTH;\r\nvar HEIGHT = constants_1.STAGES.HEIGHT;\r\nvar BG_COLOR = constants_1.STAGES.BG_COLOR;\r\n// renderer\r\nvar renderer = new PIXI.Renderer({\r\n    width: WIDTH,\r\n    height: HEIGHT,\r\n    backgroundColor: BG_COLOR,\r\n});\r\ndocument.body.appendChild(renderer.view);\r\n// stage\r\nvar stage = new PIXI.Container();\r\n// dat.GUI\r\nvar gui = new dat.GUI();\r\n// GUI parameter\r\nvar guiCtrl = /** @class */ (function () {\r\n    function guiCtrl() {\r\n        this.fps = constants_1.GAMES.FPS; // default fps\r\n        this.animeTimeScale = constants_1.GAMES.ANIME_TIME_SCALE; // default\r\n        this.animeLoop = constants_1.GAMES.ANIME_LOOP;\r\n    }\r\n    return guiCtrl;\r\n}());\r\n//\r\nvar setFPS = function () {\r\n    // console.log(\"guiObj.fps:\" + guiObj.fps);\r\n    constants_1.GAMES.FPS = Math.round(guiObj.fps);\r\n    clearText(text_fps);\r\n    setTextFPS();\r\n};\r\nvar setAnimeTimeScale = function () {\r\n    // console.log(\"guiObj.animeTimeScale:\" + guiObj.animeTimeScale);\r\n    constants_1.GAMES.ANIME_TIME_SCALE = Math.round(guiObj.animeTimeScale * 10) / 10;\r\n    clearText(text_anime_time_scale);\r\n    setTextAnimeTimeScale();\r\n};\r\nvar setAnimeLoop = function () {\r\n    // console.log(\"guiObj.setAnimeLoop:\" + guiObj.animeLoop);\r\n    constants_1.GAMES.ANIME_LOOP ? (constants_1.GAMES.ANIME_LOOP = false) : (constants_1.GAMES.ANIME_LOOP = true);\r\n    clearText(text_anime_loop);\r\n    setTextAnimeLoop();\r\n};\r\nvar guiObj = new guiCtrl();\r\nvar folder = gui.addFolder(\"Control Panel\");\r\nfolder.add(guiObj, \"animeTimeScale\", 0.1, 10).onChange(setAnimeTimeScale);\r\nfolder.add(guiObj, \"fps\", 1, 60).onChange(setFPS);\r\nfolder.add(guiObj, \"animeLoop\").onChange(setAnimeLoop);\r\nfolder.open();\r\n// Custom GameLoop(v5), call requestAnimationFrame directly.\r\nvar oldTime = Date.now();\r\nvar ms;\r\nvar fps = constants_1.GAMES.FPS;\r\nvar COE = 16.67;\r\nvar animate = function () {\r\n    var newTime = Date.now();\r\n    var deltaTime = newTime - oldTime;\r\n    ms = Math.round(fps * COE);\r\n    console.log(\"fps: \" + fps + \" \" + \"ms: \" + ms);\r\n    oldTime = newTime;\r\n    deltaTime < 0 ? (deltaTime = 0) : deltaTime;\r\n    deltaTime > ms ? (deltaTime = ms) : deltaTime;\r\n    renderer.render(stage);\r\n    requestAnimationFrame(animate);\r\n};\r\n// loader\r\nvar loader = new PIXI.Loader();\r\n// asset\r\nvar ASSET_BG = constants_1.ASSETS.ASSET_BG;\r\nvar ASSET_SPINE1 = constants_1.ASSETS.ASSET_SPINE1;\r\nvar SPINEOBJ_NUM = 1; // now Fixed\r\nvar anim_ary = [];\r\nvar spineLoaderOptions = { metadata: { spineSkeletonScale: 0.5 } };\r\nvar SP_HEIGHT;\r\nvar spineObj = [];\r\nvar isDragging = false;\r\n// json load\r\nvar jsonObj;\r\nvar req = new XMLHttpRequest();\r\nreq.addEventListener(\"load\", function () {\r\n    jsonObj = req.response;\r\n    // get Animation name\r\n    var names = [];\r\n    // Get animation name by key name\r\n    Object.keys(jsonObj.animations).forEach(function (ele) {\r\n        names.push(ele);\r\n        anim_ary.push(ele);\r\n    });\r\n    var leng = names.length;\r\n    var _loop_1 = function (i) {\r\n        var button = (document.createElement(\"button\"));\r\n        button.textContent = \"\" + names[i];\r\n        button.onclick = function () {\r\n            var animeObj = { animNum1: 0, animNum2: i };\r\n            playAnimation(animeObj);\r\n        };\r\n        document.body.appendChild(button);\r\n        var divider = document.createElement(\"span\");\r\n        divider.textContent = \" \";\r\n        document.body.appendChild(divider);\r\n        if (i === leng - 1) {\r\n            var newLine = document.createElement(\"br\");\r\n            document.body.appendChild(newLine);\r\n        }\r\n    };\r\n    for (var i = 0; i < leng; i++) {\r\n        _loop_1(i);\r\n    }\r\n}, false);\r\nreq.open(\"GET\", ASSET_SPINE1, true);\r\nreq.responseType = \"json\";\r\nreq.send(null);\r\n// container\r\nvar container = new PIXI.Container();\r\ncontainer.width = WIDTH;\r\ncontainer.height = HEIGHT;\r\ncontainer.x = 0;\r\ncontainer.y = 0;\r\ncontainer.pivot.x = 0.5;\r\ncontainer.pivot.y = 0.5;\r\nstage.addChild(container);\r\n// bg\r\nvar bg;\r\n// text\r\nvar text_libVersion, text_animationName, text_error, text_fps, text_anime_time_scale, text_anime_loop;\r\n// load\r\nif (ASSET_BG === \"\") {\r\n    console.log(\"Don't use background image.\");\r\n}\r\nelse {\r\n    loader.add(\"bg\", ASSET_BG);\r\n}\r\nloader.add(\"spineCharacter1\", ASSET_SPINE1, spineLoaderOptions); // spine ver. 3.8 over must\r\nloader.load(function (loader, resources) {\r\n    console.log(loader);\r\n    console.log(resources);\r\n    // bg\r\n    if (ASSET_BG !== \"\") {\r\n        bg = new PIXI.Sprite(resources.bg.texture);\r\n        container.addChild(bg);\r\n    }\r\n    // text version\r\n    var pixi_ver = PIXI.VERSION;\r\n    var all_version = \"PixiJS \" + pixi_ver + \"\\npixi-spine 2.1.9\\nSpine 3.8.55\\nwebpack 4.44.2\";\r\n    text_libVersion = setText(all_version, \"Arial\", 24, 0xf0fff0, \"left\", \"bold\");\r\n    container.addChild(text_libVersion);\r\n    text_libVersion.x = 10;\r\n    text_libVersion.y = 10;\r\n    setTextFPS();\r\n    setTextAnimeTimeScale();\r\n    setTextAnimeLoop();\r\n    for (var i = 0; i <= SPINEOBJ_NUM - 1; i++) {\r\n        spineObj[i] = new PIXI.spine.Spine(resources[\"spineCharacter\" + (i + 1)].spineData);\r\n        var sp = spineObj[i];\r\n        sp.x = WIDTH / 2;\r\n        sp.y = HEIGHT / 2 + sp.height / 2;\r\n        SP_HEIGHT = sp.height;\r\n        sp.pivot.x = 0.5;\r\n        sp.pivot.y = 0.5;\r\n        sp.interactive = true;\r\n        sp.buttonMode = true;\r\n        sp.on(\"pointerdown\", onDragStart)\r\n            .on(\"pointerup\", onDragEnd)\r\n            .on(\"pointerupoutside\", onDragEnd)\r\n            .on(\"pointermove\", onDragMove);\r\n        container.addChild(sp);\r\n    }\r\n    // app start\r\n    requestAnimationFrame(animate);\r\n});\r\nloader.onError.add(function () {\r\n    throw Error(\"load error ...\");\r\n});\r\n/**\r\n * Set Text for FPS value\r\n */\r\nvar setTextFPS = function () {\r\n    // text fps\r\n    text_fps = setText(\"FPS: \" + constants_1.GAMES.FPS, \"Arial\", 24, 0x00cc00, \"right\", \"bold\");\r\n    container.addChild(text_fps);\r\n    var offsetX = 10;\r\n    text_fps.x = WIDTH - text_fps.width - offsetX;\r\n    text_fps.y = 440;\r\n};\r\n/**\r\n * Set Text for AnimeTimeScale value\r\n */\r\nvar setTextAnimeTimeScale = function () {\r\n    text_anime_time_scale = setText(\"Animation Time Scale: \" + constants_1.GAMES.ANIME_TIME_SCALE, \"Arial\", 24, 0x00cc00, \"right\", \"bold\");\r\n    container.addChild(text_anime_time_scale);\r\n    var offsetX = 10;\r\n    text_anime_time_scale.x = WIDTH - text_anime_time_scale.width - offsetX;\r\n    text_anime_time_scale.y = 410;\r\n};\r\n/**\r\n * Set Animation Loop value\r\n */\r\nvar setTextAnimeLoop = function () {\r\n    text_anime_loop = setText(\"Animation Loop: \" + constants_1.GAMES.ANIME_LOOP, \"Arial\", 24, 0x00cc00, \"right\", \"bold\");\r\n    container.addChild(text_anime_loop);\r\n    var offsetX = 10;\r\n    text_anime_loop.x = WIDTH - text_anime_loop.width - offsetX;\r\n    text_anime_loop.y = 380;\r\n};\r\n/**\r\n * Remeove text animationName\r\n * @param { PIXI.Text } targetText\r\n */\r\nvar clearText = function (t) {\r\n    t.text = \"\";\r\n    container.removeChild(t);\r\n};\r\n/**\r\n * Change & Play Alien Animation.\r\n * num1 : for multiple spine animations\r\n */\r\nvar displayAnimeName = function (num1, num2) {\r\n    var animation = \"animation: \" + anim_ary[num2];\r\n    text_animationName = setText(animation, \"Arial\", 24, 0x33ccff, \"center\", \"bold\", \"#000000\", 4, false, \"#666666\");\r\n    container.addChild(text_animationName);\r\n    text_animationName.x = WIDTH - text_animationName.width - 10;\r\n    text_animationName.y = 10;\r\n};\r\n/**\r\n * Set Text on TextField\r\n * @param { string | number } message\r\n * @param { string } fontfamily\r\n * @param { number } fontsize\r\n * @param { number } fillcolor\r\n * @param { string } align\r\n * @param { number } fontweight\r\n * @param { string } strokecolor\r\n * @param { number } sthickness\r\n * @param { boolean } isShadow\r\n * @param { string } shadowcolor\r\n *\r\n * @returns { object } PIXI.Text\r\n */\r\nvar setText = function (message, fontfamily, fontsize, fillcolor, align, fontweight, strokecolor, sthickness, isShadow, shadowcolor) {\r\n    if (fontfamily === void 0) { fontfamily = \"Arial\"; }\r\n    if (fontsize === void 0) { fontsize = 12; }\r\n    if (fillcolor === void 0) { fillcolor = 0xffffff; }\r\n    if (align === void 0) { align = \"left\"; }\r\n    if (fontweight === void 0) { fontweight = \"normal\"; }\r\n    if (strokecolor === void 0) { strokecolor = \"#000000\"; }\r\n    if (sthickness === void 0) { sthickness = 0; }\r\n    if (isShadow === void 0) { isShadow = false; }\r\n    if (shadowcolor === void 0) { shadowcolor = \"#000000\"; }\r\n    return new PIXI.Text(\"\" + message, {\r\n        fontFamily: fontfamily,\r\n        fontSize: fontsize,\r\n        fill: fillcolor,\r\n        align: align,\r\n        fontWeight: fontweight,\r\n        stroke: strokecolor,\r\n        strokeThickness: sthickness,\r\n        dropShadow: isShadow,\r\n        dropShadowColor: shadowcolor,\r\n        lineJoin: \"round\",\r\n    });\r\n};\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    var button;\r\n    var btStart = 1;\r\n    var btMaxLength = 100;\r\n    for (var i = btStart; i <= btMaxLength; i++) {\r\n        if (document.getElementById(\"myButton\" + i)) {\r\n            button = document.getElementById(\"myButton\" + i);\r\n            if (button) {\r\n                var num1 = button.name.substring(0, 1); // spineObj[n]\r\n                var num2 = button.name.substring(1, 2); // ex: aim, death, idle ...\r\n                button.addEventListener(\"click\", {\r\n                    animNum1: num1,\r\n                    animNum2: num2,\r\n                    handleEvent: playAnimation,\r\n                    this: button,\r\n                }, false);\r\n            }\r\n        }\r\n    }\r\n});\r\n/**\r\n * Play spine animation by animation-name\r\n * @param { object } animation object\r\n */\r\nvar playAnimation = function (obj) {\r\n    console.log(\"playAnimation()\", obj);\r\n    var num1 = obj.animNum1;\r\n    var num2 = obj.animNum2;\r\n    var animeObj = spineObj[num1];\r\n    var animeName = anim_ary[num2];\r\n    if (animeName === \"\") {\r\n        console.log(\"there isn't animation name.\");\r\n        return false;\r\n    }\r\n    // set timescale\r\n    animeObj.state.timeScale = constants_1.GAMES.ANIME_TIME_SCALE;\r\n    // play anime\r\n    animeObj.state.setAnimation(0, animeName, constants_1.GAMES.ANIME_LOOP);\r\n    // clear text\r\n    if (text_animationName) {\r\n        clearText(text_animationName);\r\n    }\r\n    // show anime name text\r\n    displayAnimeName(num1, num2);\r\n};\r\n/**\r\n * start drag\r\n * @param { object } event\r\n */\r\nvar onDragStart = function (e) {\r\n    isDragging = true;\r\n    var sp = e.currentTarget;\r\n    sp.alpha = 0.75;\r\n};\r\n/**\r\n * stop drag\r\n * @param { object } event\r\n */\r\nvar onDragEnd = function (e) {\r\n    isDragging = false;\r\n    var sp = e.currentTarget;\r\n    sp.alpha = 1;\r\n};\r\n/**\r\n * move drag\r\n * @param { object } event\r\n */\r\nvar onDragMove = function (e) {\r\n    if (isDragging) {\r\n        var sp = e.currentTarget;\r\n        var point = e.data.global;\r\n        sp.x = point.x;\r\n        sp.y = point.y + SP_HEIGHT / 2;\r\n    }\r\n};\r\n\n\n//# sourceURL=webpack:///./src/index.ts?");
+eval("\r\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n}));\r\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n});\r\nvar __importStar = (this && this.__importStar) || function (mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n};\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nvar PIXI = __importStar(__webpack_require__(/*! pixi.js */ \"./node_modules/pixi.js/lib/pixi.es.js\"));\r\nwindow.PIXI = PIXI;\r\n__webpack_require__(/*! pixi-spine */ \"./node_modules/pixi-spine/bin/pixi-spine.js\");\r\nvar constants_1 = __webpack_require__(/*! ./constants */ \"./src/constants.ts\");\r\nvar dat = __importStar(__webpack_require__(/*! dat.gui */ \"./node_modules/dat.gui/build/dat.gui.module.js\"));\r\n// import { GUI } from \"dat-gui\";\r\n// init\r\nvar WIDTH = constants_1.STAGES.WIDTH;\r\nvar HEIGHT = constants_1.STAGES.HEIGHT;\r\nvar BG_COLOR = constants_1.STAGES.BG_COLOR;\r\n// TODO:\r\n// GAMES.FPS -> const FPS: number = GAMES.FPS;\r\n// and Scale, Loop too.\r\n// renderer\r\nvar renderer = new PIXI.Renderer({\r\n    width: WIDTH,\r\n    height: HEIGHT,\r\n    backgroundColor: BG_COLOR,\r\n});\r\ndocument.body.appendChild(renderer.view);\r\n// stage\r\nvar stage = new PIXI.Container();\r\n// dat.GUI\r\nvar gui = new dat.GUI();\r\n// GUI parameter\r\nvar guiCtrl = /** @class */ (function () {\r\n    function guiCtrl() {\r\n        this.fps = constants_1.GAMES.FPS; // default fps ... Does not affect Spien animation speed.\r\n        this.animeTimeScale = constants_1.GAMES.ANIME_TIME_SCALE; // default timescale\r\n        this.animeLoop = constants_1.GAMES.ANIME_LOOP; // default loop\r\n    }\r\n    return guiCtrl;\r\n}());\r\n// GUI method\r\nvar setFPS = function () {\r\n    constants_1.GAMES.FPS = Math.round(guiObj.fps);\r\n    clearText(text_fps);\r\n    setTextFPS();\r\n};\r\nvar setAnimeTimeScale = function () {\r\n    constants_1.GAMES.ANIME_TIME_SCALE = Math.round(guiObj.animeTimeScale * 10) / 10;\r\n    clearText(text_anime_time_scale);\r\n    setTextAnimeTimeScale();\r\n};\r\nvar setAnimeLoop = function () {\r\n    constants_1.GAMES.ANIME_LOOP ? (constants_1.GAMES.ANIME_LOOP = false) : (constants_1.GAMES.ANIME_LOOP = true);\r\n    clearText(text_anime_loop);\r\n    setTextAnimeLoop();\r\n};\r\nvar guiObj = new guiCtrl();\r\nvar folder = gui.addFolder(\"Control Panel\");\r\nfolder.add(guiObj, \"animeTimeScale\", 0.1, 10).onChange(setAnimeTimeScale);\r\nfolder.add(guiObj, \"fps\", 1, 60).onChange(setFPS);\r\nfolder.add(guiObj, \"animeLoop\").onChange(setAnimeLoop);\r\nfolder.open();\r\n// Custom GameLoop(v5), call requestAnimationFrame directly.\r\nvar oldTime = Date.now();\r\nvar ms;\r\nvar COE = 16.67;\r\nvar animate = function () {\r\n    var newTime = Date.now();\r\n    var deltaTime = newTime - oldTime;\r\n    ms = Math.round(constants_1.GAMES.FPS * COE);\r\n    // console.log(\"fps: \" + GAMES.FPS + \" \" + \"ms: \" + ms);\r\n    oldTime = newTime;\r\n    deltaTime < 0 ? (deltaTime = 0) : deltaTime;\r\n    deltaTime > ms ? (deltaTime = ms) : deltaTime;\r\n    renderer.render(stage);\r\n    requestAnimationFrame(animate);\r\n};\r\n// loader\r\nvar loader = new PIXI.Loader();\r\n// asset\r\nvar ASSET_BG = constants_1.ASSETS.ASSET_BG;\r\nvar ASSET_SPINE1 = constants_1.ASSETS.ASSET_SPINE1;\r\nvar SPINEOBJ_NUM = 1; // now Fixed\r\nvar anim_ary = [];\r\nvar spineLoaderOptions = { metadata: { spineSkeletonScale: 0.5 } };\r\nvar SP_HEIGHT;\r\nvar spineObj = [];\r\nvar isDragging = false;\r\n// json load\r\nvar jsonObj;\r\nvar req = new XMLHttpRequest();\r\nreq.addEventListener(\"load\", function () {\r\n    jsonObj = req.response;\r\n    // get Animation name\r\n    var names = [];\r\n    // Get animation name by key name\r\n    Object.keys(jsonObj.animations).forEach(function (ele) {\r\n        names.push(ele);\r\n        anim_ary.push(ele);\r\n    });\r\n    var leng = names.length;\r\n    var _loop_1 = function (i) {\r\n        var button = (document.createElement(\"button\"));\r\n        button.textContent = \"\" + names[i];\r\n        button.onclick = function () {\r\n            var animeObj = { animNum1: 0, animNum2: i };\r\n            playAnimation(animeObj);\r\n        };\r\n        document.body.appendChild(button);\r\n        var divider = document.createElement(\"span\");\r\n        divider.textContent = \" \";\r\n        document.body.appendChild(divider);\r\n        if (i === leng - 1) {\r\n            var newLine = document.createElement(\"br\");\r\n            document.body.appendChild(newLine);\r\n        }\r\n    };\r\n    for (var i = 0; i < leng; i++) {\r\n        _loop_1(i);\r\n    }\r\n}, false);\r\nreq.open(\"GET\", ASSET_SPINE1, true);\r\nreq.responseType = \"json\";\r\nreq.send(null);\r\n// container for anime and bg\r\nvar container = new PIXI.Container();\r\ncontainer.width = WIDTH;\r\ncontainer.height = HEIGHT;\r\ncontainer.x = 0;\r\ncontainer.y = 0;\r\ncontainer.pivot.x = 0.5;\r\ncontainer.pivot.y = 0.5;\r\nstage.addChild(container);\r\n// container for text\r\nvar container_text = new PIXI.Container();\r\ncontainer_text.width = WIDTH;\r\ncontainer_text.height = HEIGHT;\r\ncontainer_text.x = 0;\r\ncontainer_text.y = 0;\r\ncontainer_text.pivot.x = 0.5;\r\ncontainer_text.pivot.y = 0.5;\r\nstage.addChild(container_text);\r\n// bg\r\nvar bg;\r\n// text\r\nvar text_libVersion, text_animationName, \r\n// text_error: PIXI.Text,\r\ntext_fps, text_anime_time_scale, text_anime_loop;\r\nvar offsetX = 10;\r\n// load\r\nif (ASSET_BG === \"\") {\r\n    console.log(\"Don't use background image.\");\r\n}\r\nelse {\r\n    loader.add(\"bg\", ASSET_BG);\r\n}\r\nloader.add(\"spineCharacter1\", ASSET_SPINE1, spineLoaderOptions); // spine ver. 3.8 over must\r\nloader.load(function (loader, resources) {\r\n    console.log(loader);\r\n    console.log(resources);\r\n    // bg\r\n    if (ASSET_BG !== \"\") {\r\n        bg = new PIXI.Sprite(resources.bg.texture);\r\n        container.addChild(bg);\r\n    }\r\n    // text version\r\n    var pixi_ver = PIXI.VERSION;\r\n    var all_version = \"PixiJS \" + pixi_ver + \"\\npixi-spine 2.1.9\\nSpine 3.8.55\\nwebpack 4.44.2\";\r\n    text_libVersion = setText(all_version, \"Arial\", 24, 0xf0fff0, \"left\", \"bold\");\r\n    container_text.addChild(text_libVersion);\r\n    text_libVersion.x = 10;\r\n    text_libVersion.y = 10;\r\n    setTextFPS();\r\n    setTextAnimeTimeScale();\r\n    setTextAnimeLoop();\r\n    for (var i = 0; i <= SPINEOBJ_NUM - 1; i++) {\r\n        spineObj[i] = new PIXI.spine.Spine(resources[\"spineCharacter\" + (i + 1)].spineData);\r\n        var sp = spineObj[i];\r\n        sp.x = WIDTH / 2;\r\n        sp.y = HEIGHT / 2 + sp.height / 2;\r\n        SP_HEIGHT = sp.height;\r\n        sp.pivot.x = 0.5;\r\n        sp.pivot.y = 0.5;\r\n        sp.interactive = true;\r\n        sp.buttonMode = true;\r\n        sp.on(\"pointerdown\", onDragStart)\r\n            .on(\"pointerup\", onDragEnd)\r\n            .on(\"pointerupoutside\", onDragEnd)\r\n            .on(\"pointermove\", onDragMove);\r\n        container.addChild(sp);\r\n    }\r\n    // app start\r\n    requestAnimationFrame(animate);\r\n});\r\nloader.onError.add(function () {\r\n    throw Error(\"load error ...\");\r\n});\r\n/**\r\n * Set Text for FPS value\r\n */\r\nvar setTextFPS = function () {\r\n    text_fps = setText(\"FPS: \" + constants_1.GAMES.FPS, \"Arial\", 24, 0x00cc00, \"right\", \"bold\");\r\n    container_text.addChild(text_fps);\r\n    text_fps.x = WIDTH - text_fps.width - offsetX;\r\n    text_fps.y = 440;\r\n};\r\n/**\r\n * Set Text for AnimeTimeScale value\r\n */\r\nvar setTextAnimeTimeScale = function () {\r\n    text_anime_time_scale = setText(\"Animation Time Scale: \" + constants_1.GAMES.ANIME_TIME_SCALE, \"Arial\", 24, 0x00cc00, \"right\", \"bold\");\r\n    container_text.addChild(text_anime_time_scale);\r\n    text_anime_time_scale.x = WIDTH - text_anime_time_scale.width - offsetX;\r\n    text_anime_time_scale.y = 410;\r\n};\r\n/**\r\n * Set Animation Loop value\r\n */\r\nvar setTextAnimeLoop = function () {\r\n    text_anime_loop = setText(\"Animation Loop: \" + constants_1.GAMES.ANIME_LOOP, \"Arial\", 24, 0x00cc00, \"right\", \"bold\");\r\n    container_text.addChild(text_anime_loop);\r\n    text_anime_loop.x = WIDTH - text_anime_loop.width - offsetX;\r\n    text_anime_loop.y = 380;\r\n};\r\n/**\r\n * Remeove text animationName\r\n * @param { PIXI.Text } targetText\r\n */\r\nvar clearText = function (t) {\r\n    t.text = \"\";\r\n    container_text.removeChild(t);\r\n};\r\n/**\r\n * Set Text for animationName\r\n * (num1 : for multiple spine animations)\r\n */\r\nvar displayAnimeName = function (num1, num2) {\r\n    var animation = \"animation: \" + anim_ary[num2];\r\n    text_animationName = setText(animation, \"Arial\", 24, 0x33ccff, \"center\", \"bold\", \"#000000\", 4, false, \"#666666\");\r\n    container_text.addChild(text_animationName);\r\n    text_animationName.x = WIDTH - text_animationName.width - offsetX;\r\n    text_animationName.y = 10;\r\n};\r\n/**\r\n * Set Text on TextField\r\n * @param { string | number } message\r\n * @param { string } fontfamily\r\n * @param { number } fontsize\r\n * @param { number } fillcolor\r\n * @param { string } align\r\n * @param { number } fontweight\r\n * @param { string } strokecolor\r\n * @param { number } sthickness\r\n * @param { boolean } isShadow\r\n * @param { string } shadowcolor\r\n *\r\n * @returns { object } PIXI.Text\r\n */\r\nvar setText = function (message, fontfamily, fontsize, fillcolor, align, fontweight, strokecolor, sthickness, isShadow, shadowcolor) {\r\n    if (fontfamily === void 0) { fontfamily = \"Arial\"; }\r\n    if (fontsize === void 0) { fontsize = 12; }\r\n    if (fillcolor === void 0) { fillcolor = 0xffffff; }\r\n    if (align === void 0) { align = \"left\"; }\r\n    if (fontweight === void 0) { fontweight = \"normal\"; }\r\n    if (strokecolor === void 0) { strokecolor = \"#000000\"; }\r\n    if (sthickness === void 0) { sthickness = 0; }\r\n    if (isShadow === void 0) { isShadow = false; }\r\n    if (shadowcolor === void 0) { shadowcolor = \"#000000\"; }\r\n    return new PIXI.Text(\"\" + message, {\r\n        fontFamily: fontfamily,\r\n        fontSize: fontsize,\r\n        fill: fillcolor,\r\n        align: align,\r\n        fontWeight: fontweight,\r\n        stroke: strokecolor,\r\n        strokeThickness: sthickness,\r\n        dropShadow: isShadow,\r\n        dropShadowColor: shadowcolor,\r\n        lineJoin: \"round\",\r\n    });\r\n};\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    var button;\r\n    var btStart = 1;\r\n    var btMaxLength = 100;\r\n    for (var i = btStart; i <= btMaxLength; i++) {\r\n        if (document.getElementById(\"myButton\" + i)) {\r\n            button = document.getElementById(\"myButton\" + i);\r\n            if (button) {\r\n                var num1 = button.name.substring(0, 1); // spineObj[n]\r\n                var num2 = button.name.substring(1, 2); // ex: aim, death, idle ...\r\n                button.addEventListener(\"click\", {\r\n                    animNum1: num1,\r\n                    animNum2: num2,\r\n                    handleEvent: playAnimation,\r\n                    this: button,\r\n                }, false);\r\n            }\r\n        }\r\n    }\r\n});\r\n/**\r\n * Play spine animation by anime name\r\n * @param { object } animation object\r\n */\r\nvar playAnimation = function (obj) {\r\n    // console.log(\"playAnimation()\", obj);\r\n    var num1 = obj.animNum1;\r\n    var num2 = obj.animNum2;\r\n    var animeObj = spineObj[num1];\r\n    var animeName = anim_ary[num2];\r\n    if (animeName === \"\") {\r\n        console.log(\"there isn't animation name.\");\r\n        return false;\r\n    }\r\n    // set timescale\r\n    animeObj.state.timeScale = constants_1.GAMES.ANIME_TIME_SCALE;\r\n    // play anime\r\n    animeObj.state.setAnimation(0, animeName, constants_1.GAMES.ANIME_LOOP);\r\n    // clear text\r\n    if (text_animationName) {\r\n        clearText(text_animationName);\r\n    }\r\n    // show anime name text\r\n    displayAnimeName(num1, num2);\r\n};\r\n/**\r\n * start drag\r\n * @param { object } event\r\n */\r\nvar onDragStart = function (e) {\r\n    isDragging = true;\r\n    var sp = e.currentTarget;\r\n    sp.alpha = 0.75;\r\n};\r\n/**\r\n * stop drag\r\n * @param { object } event\r\n */\r\nvar onDragEnd = function (e) {\r\n    isDragging = false;\r\n    var sp = e.currentTarget;\r\n    sp.alpha = 1;\r\n};\r\n/**\r\n * move drag\r\n * @param { object } event\r\n */\r\nvar onDragMove = function (e) {\r\n    if (isDragging) {\r\n        var sp = e.currentTarget;\r\n        var point = e.data.global;\r\n        sp.x = point.x;\r\n        sp.y = point.y + SP_HEIGHT / 2;\r\n    }\r\n};\r\n\n\n//# sourceURL=webpack:///./src/index.ts?");
 
 /***/ })
 
diff --git a/src/index.ts b/src/index.ts
index fb1751f..3e69722 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,18 +4,18 @@ window.PIXI = PIXI;
 import "pixi-spine";
 import { kMaxLength } from "buffer";
 import { STAGES, ASSETS, GAMES } from "./constants";
-// ES6:
 import * as dat from "dat.gui";
-import { GUI } from "dat-gui";
-// npm install -D @types/dat.gui
-
-// console.log(PIXI);
+// import { GUI } from "dat-gui";
 
 // init
 const WIDTH: number = STAGES.WIDTH;
 const HEIGHT: number = STAGES.HEIGHT;
 const BG_COLOR: number = STAGES.BG_COLOR;
 
+// TODO:
+// GAMES.FPS -> const FPS: number = GAMES.FPS;
+// and Scale, Loop too.
+
 // renderer
 const renderer: PIXI.Renderer = new PIXI.Renderer({
   width: WIDTH,
@@ -36,28 +36,25 @@ class guiCtrl {
   public animeTimeScale: number;
   public animeLoop: boolean;
   constructor() {
-    this.fps = GAMES.FPS; // default fps
-    this.animeTimeScale = GAMES.ANIME_TIME_SCALE; // default
-    this.animeLoop = GAMES.ANIME_LOOP;
+    this.fps = GAMES.FPS; // default fps ... Does not affect Spien animation speed.
+    this.animeTimeScale = GAMES.ANIME_TIME_SCALE; // default timescale
+    this.animeLoop = GAMES.ANIME_LOOP; // default loop
   }
 }
 
-//
+// GUI method
 const setFPS = () => {
-  // console.log("guiObj.fps:" + guiObj.fps);
   GAMES.FPS = Math.round(guiObj.fps);
   clearText(text_fps);
   setTextFPS();
 };
 const setAnimeTimeScale = () => {
-  // console.log("guiObj.animeTimeScale:" + guiObj.animeTimeScale);
   GAMES.ANIME_TIME_SCALE = Math.round(guiObj.animeTimeScale * 10) / 10;
   clearText(text_anime_time_scale);
   setTextAnimeTimeScale();
 };
 
 const setAnimeLoop = () => {
-  // console.log("guiObj.setAnimeLoop:" + guiObj.animeLoop);
   GAMES.ANIME_LOOP ? (GAMES.ANIME_LOOP = false) : (GAMES.ANIME_LOOP = true);
   clearText(text_anime_loop);
   setTextAnimeLoop();
@@ -73,13 +70,12 @@ folder.open();
 // Custom GameLoop(v5), call requestAnimationFrame directly.
 let oldTime: number = Date.now();
 let ms: number;
-let fps: number = GAMES.FPS;
 const COE: number = 16.67;
 let animate = () => {
   let newTime: number = Date.now();
   let deltaTime: number = newTime - oldTime;
-  ms = Math.round(fps * COE);
-  console.log("fps: " + fps + " " + "ms: " + ms);
+  ms = Math.round(GAMES.FPS * COE);
+  // console.log("fps: " + GAMES.FPS + " " + "ms: " + ms);
   oldTime = newTime;
   deltaTime < 0 ? (deltaTime = 0) : deltaTime;
   deltaTime > ms ? (deltaTime = ms) : deltaTime;
@@ -94,7 +90,6 @@ let loader: PIXI.Loader = new PIXI.Loader();
 const ASSET_BG: string = ASSETS.ASSET_BG;
 const ASSET_SPINE1: string = ASSETS.ASSET_SPINE1;
 const SPINEOBJ_NUM: number = 1; // now Fixed
-
 const anim_ary: string[] = [];
 const spineLoaderOptions: object = { metadata: { spineSkeletonScale: 0.5 } };
 let SP_HEIGHT: number;
@@ -144,7 +139,7 @@ req.open("GET", ASSET_SPINE1, true);
 req.responseType = "json";
 req.send(null);
 
-// container
+// container for anime and bg
 let container: PIXI.Container = new PIXI.Container();
 container.width = WIDTH;
 container.height = HEIGHT;
@@ -154,16 +149,27 @@ container.pivot.x = 0.5;
 container.pivot.y = 0.5;
 stage.addChild(container);
 
+// container for text
+let container_text: PIXI.Container = new PIXI.Container();
+container_text.width = WIDTH;
+container_text.height = HEIGHT;
+container_text.x = 0;
+container_text.y = 0;
+container_text.pivot.x = 0.5;
+container_text.pivot.y = 0.5;
+stage.addChild(container_text);
+
 // bg
 let bg: PIXI.Sprite;
 
 // text
 let text_libVersion: PIXI.Text,
   text_animationName: PIXI.Text,
-  text_error: PIXI.Text,
+  // text_error: PIXI.Text,
   text_fps: PIXI.Text,
   text_anime_time_scale: PIXI.Text,
   text_anime_loop: PIXI.Text;
+let offsetX: number = 10;
 
 // load
 if (ASSET_BG === "") {
@@ -186,7 +192,7 @@ loader.load((loader: PIXI.Loader, resources: any) => {
   let pixi_ver: string = PIXI.VERSION;
   let all_version: string = `PixiJS ${pixi_ver}\npixi-spine 2.1.9\nSpine 3.8.55\nwebpack 4.44.2`;
   text_libVersion = setText(all_version, "Arial", 24, 0xf0fff0, "left", "bold");
-  container.addChild(text_libVersion);
+  container_text.addChild(text_libVersion);
   text_libVersion.x = 10;
   text_libVersion.y = 10;
 
@@ -225,7 +231,6 @@ loader.onError.add(() => {
  * Set Text for FPS value
  */
 const setTextFPS = () => {
-  // text fps
   text_fps = setText(
     `FPS: ${GAMES.FPS}`,
     "Arial",
@@ -234,8 +239,7 @@ const setTextFPS = () => {
     "right",
     "bold"
   );
-  container.addChild(text_fps);
-  let offsetX: number = 10;
+  container_text.addChild(text_fps);
   text_fps.x = WIDTH - text_fps.width - offsetX;
   text_fps.y = 440;
 };
@@ -252,8 +256,7 @@ const setTextAnimeTimeScale = () => {
     "right",
     "bold"
   );
-  container.addChild(text_anime_time_scale);
-  let offsetX: number = 10;
+  container_text.addChild(text_anime_time_scale);
   text_anime_time_scale.x = WIDTH - text_anime_time_scale.width - offsetX;
   text_anime_time_scale.y = 410;
 };
@@ -270,8 +273,7 @@ const setTextAnimeLoop = () => {
     "right",
     "bold"
   );
-  container.addChild(text_anime_loop);
-  let offsetX: number = 10;
+  container_text.addChild(text_anime_loop);
   text_anime_loop.x = WIDTH - text_anime_loop.width - offsetX;
   text_anime_loop.y = 380;
 };
@@ -282,12 +284,12 @@ const setTextAnimeLoop = () => {
  */
 let clearText = (t: PIXI.Text) => {
   t.text = "";
-  container.removeChild(t);
+  container_text.removeChild(t);
 };
 
 /**
- * Change & Play Alien Animation.
- * num1 : for multiple spine animations
+ * Set Text for animationName
+ * (num1 : for multiple spine animations)
  */
 let displayAnimeName = (num1: number, num2: number) => {
   let animation: string = `animation: ${anim_ary[num2]}`;
@@ -303,8 +305,8 @@ let displayAnimeName = (num1: number, num2: number) => {
     false,
     "#666666"
   );
-  container.addChild(text_animationName);
-  text_animationName.x = WIDTH - text_animationName.width - 10;
+  container_text.addChild(text_animationName);
+  text_animationName.x = WIDTH - text_animationName.width - offsetX;
   text_animationName.y = 10;
 };
 
@@ -376,11 +378,11 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 /**
- * Play spine animation by animation-name
+ * Play spine animation by anime name
  * @param { object } animation object
  */
 let playAnimation = (obj: any) => {
-  console.log("playAnimation()", obj);
+  // console.log("playAnimation()", obj);
   let num1: number = obj.animNum1;
   let num2: number = obj.animNum2;