From d624b49b0f6cc77c85e7ccb5c85062c4d73ac19a Mon Sep 17 00:00:00 2001 From: evofan Date: Tue, 7 Jan 2020 22:17:05 +0900 Subject: [PATCH] build --- dist/assets/images/pic_star.png | Bin 785 -> 0 bytes dist/index.html | 7 ++----- dist/main.js | 4 ++-- 3 files changed, 4 insertions(+), 7 deletions(-) delete mode 100644 dist/assets/images/pic_star.png diff --git a/dist/assets/images/pic_star.png b/dist/assets/images/pic_star.png deleted file mode 100644 index bf3afe6f6cf083698f6334fe06fe4ba55309705f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 785 zcmeAS@N?(olHy`uVBq!ia0vp^DImiFr}2 zZIXIt-m8gXf~8+in9k=Bj#BZfGn6gb<6UQMwZ!-N+?Nx63qO*STH-U=tLD-f|C8)? zD=%+hoL|G&5uP$xhc$J_5;yU$JC_JgGMv6dQ|G9PsAFHn630b?{c}8yJe|no87Y%A z+oeb?hBth#s2*)%fNh;!S{ zj59*jwX^@t+r3qBviALX7yj%yyS`I%qkQi3&YQolOFw_2`tnI?O;LFF7oPbhldV!J zH=Ul>CLyN2WZLt|F&n%a{ns>v+*~B>7x`>bkcX9zq1gAN@QNn^0?*~VceE*-v7D~_ zebez-fdbFwSh@p=YdkB9(nMO!(_iuj%~xjY^NA>ybK^+&yB;85s6HPKW6hAvK z`wu7Ad8Q?-CpG_QsR%|ks`Q_5cbV1ltJQ;dlARK-hg-)3<`+tr+Me)CeZDbjCI>O8bbGQ*;8JsMP%(@Q6t?a^>EC&PyLvZw zUJhgI4eQ5^IlqJ$#lIaZm}5Oja;2xKmeR7-YF|4#W;M<#aT5G@KtFcI#;y+T-4DAj zute|7`jo7d_uHwYHp|8|lDqYggx4g#)

Spine Animation Viewer

+

caution: Spine version must be 3.8 or later.

- -
- -
- +
diff --git a/dist/main.js b/dist/main.js index 657f200..6250054 100644 --- a/dist/main.js +++ b/dist/main.js @@ -745,7 +745,7 @@ eval("module.exports = function(module) {\n\tif (!module.webpackPolyfill) {\n\t\ /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\n// stage settings\r\nexports.STAGES = {\r\n WIDTH: 720,\r\n HEIGHT: 480,\r\n BG_COLOR: 0x000000\r\n};\r\n// path for use assets\r\nexports.ASSETS = {\r\n ASSET_SPINE_NUM: 1,\r\n ASSET_BG: \"assets/images/pic_bg.jpg\",\r\n // ASSET_SPINE1: \"assets/spine/alien/export/alien.json\" // your spine animation\r\n ASSET_SPINE1: \"assets/spine/spineboy/export/spineboy.json\" // your spine animation\r\n};\r\nexports.GAME = {\r\n FPS: 60 // framerate ex. 30\r\n};\r\n\n\n//# sourceURL=webpack:///./src/constants.ts?"); +eval("\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\n// stage settings\r\nexports.STAGES = {\r\n WIDTH: 720,\r\n HEIGHT: 480,\r\n BG_COLOR: 0x000000\r\n};\r\n// path for use assets\r\nexports.ASSETS = {\r\n ASSET_BG: \"assets/images/pic_bg.jpg\",\r\n // ASSET_BG: \"\", // if you don't want to use bg image\r\n ASSET_SPINE1: \"assets/spine/spineboy/export/spineboy.json\" // your spine animation\r\n // ASSET_SPINE1: \"assets/spine/alien/export/alien.json\" // your spine animation\r\n // ASSET_SPINE1: \"assets/spine/dragon/export/dragon.json\" // your spine animation\r\n // ASSET_SPINE1: \"assets/spine/powerup/export/powerup.json\" // your spine animation\r\n};\r\nexports.GAMES = {\r\n FPS: 60 // framerate ex. 30\r\n};\r\n\n\n//# sourceURL=webpack:///./src/constants.ts?"); /***/ }), @@ -757,7 +757,7 @@ eval("\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\n// /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\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 (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result[\"default\"] = 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\nconsole.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// Custom GameLoop(v5)\r\n// call requestAnimationFrame directly.\r\nvar oldTime = Date.now();\r\nvar ms = 1000;\r\nvar fps = constants_1.GAME.FPS;\r\nvar animate = function () {\r\n var newTime = Date.now();\r\n var deltaTime = newTime - oldTime;\r\n oldTime = newTime;\r\n if (deltaTime < 0) {\r\n deltaTime = 0;\r\n }\r\n if (deltaTime > ms) {\r\n deltaTime = ms;\r\n }\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 = constants_1.ASSETS.ASSET_SPINE_NUM; // 1 fixed now\r\nvar anim_ary = [];\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, idx) {\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 }; // dummy\r\n playAnimation2(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\nvar spineLoaderOptions = { metadata: { spineSkeletonScale: 0.5 } };\r\nvar spineObj = [];\r\n// const anim_ary: string[][] = [[\"death\", \"hit\", \"jump\", \"run\"], [\"bounce\"]];\r\nvar isDragging = false;\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\ncontainer.interactiveChildren = true;\r\nstage.addChild(container);\r\n// bg\r\nvar bg;\r\n// texts\r\nvar text_libVersion, text_animationName, text_error, text_fps;\r\nif (!ASSET_BG || ASSET_BG === null || typeof ASSET_BG === \"undefined\") {\r\n console.log(\"Do not use background image.\");\r\n}\r\n// loader\r\nloader\r\n .add(\"bg\", ASSET_BG)\r\n .add(\"spineCharacter1\", ASSET_SPINE1, spineLoaderOptions) // spine ver. 3.8\r\n .load(function (loader, resources) {\r\n console.log(loader);\r\n console.log(resources);\r\n // bg\r\n bg = new PIXI.Sprite(resources.bg.texture);\r\n container.addChild(bg);\r\n // text_version\r\n var version = \"pixi-spine 2.1.6\\nPixiJS 5.2.0\\nSpine 3.8.55\\nwebpack 4.41.2\";\r\n text_libVersion = setText(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 // text_fps\r\n text_fps = setText(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 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;\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 displayError();\r\n throw Error(\"load error ...\");\r\n});\r\n/**\r\n * dislpay Asset Loading Error\r\n */\r\nvar displayError = function () {\r\n var error_message = \"Asset Loading Error ...\";\r\n text_error = setText(error_message, \"Arial\", 24, 0xff0000, \"center\", \"bold\");\r\n container.addChild(text_error);\r\n text_error.x = WIDTH / 2 - text_error.width / 2;\r\n text_error.y = HEIGHT / 2 - text_error.height / 2;\r\n};\r\n/**\r\n * Remeove text_animationName\r\n * @param { PIXI.Text } targetText\r\n */\r\nvar clearText = function (target) {\r\n target.text = \"\";\r\n container.removeChild(target);\r\n};\r\n/**\r\n * Change & Play Alien Animation.\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\nfunction playAnimation(e) {\r\n var num1 = this.animNum1 - 1;\r\n var num2 = this.animNum2 - 1;\r\n var animeLoop = false; // TODO: configurable\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 // play anime\r\n animeObj.state.setAnimation(0, animeName, animeLoop);\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\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);\r\n var num2 = button.name.substring(1, 2);\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\nfunction playAnimation2(obj) {\r\n console.log(\"playAnimation2()\", obj);\r\n var num1 = obj.animNum1;\r\n var num2 = obj.animNum2;\r\n var animeLoop = false; // TODO: configurable\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 // play anime\r\n animeObj.state.setAnimation(0, animeName, animeLoop);\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 } e\r\n */\r\nvar onDragStart = function (e) {\r\n isDragging = true;\r\n var sp = e.currentTarget;\r\n sp.alpha = 0.5;\r\n};\r\n/**\r\n * stop drag\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 */\r\nvar onDragMove = function (e) {\r\n if (isDragging) {\r\n var sp = e.currentTarget;\r\n sp.x = renderer.plugins.interaction.mouse.global.x;\r\n sp.y = renderer.plugins.interaction.mouse.global.y + sp.height / 2;\r\n sp.children[0].x = sp.x;\r\n sp.children[0].y = sp.y;\r\n }\r\n};\r\n\n\n//# sourceURL=webpack:///./src/index.ts?"); +eval("\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 (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result[\"default\"] = 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// 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// Custom GameLoop(v5), call requestAnimationFrame directly.\r\nvar oldTime = Date.now();\r\nvar ms = 1000;\r\nvar fps = constants_1.GAMES.FPS;\r\nvar animate = function () {\r\n var newTime = Date.now();\r\n var deltaTime = newTime - oldTime;\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;\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 version = \"pixi-spine 2.1.6\\nPixiJS 5.2.0\\nSpine 3.8.55\\nwebpack 4.41.2\";\r\n text_libVersion = setText(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 // text fps\r\n text_fps = setText(\"FPS: \" + 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 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 * 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 animeLoop = false; // TODO: configurable\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 // play anime\r\n animeObj.state.setAnimation(0, animeName, animeLoop);\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?"); /***/ })