add page 1,2,3

This commit is contained in:
zhl 2021-12-29 18:50:36 +08:00
parent 048e3ca125
commit 69ddce96b9
38 changed files with 12864 additions and 555 deletions

View File

@ -38,7 +38,8 @@ module.exports = {
'vue/eqeqeq': 'error',
'vue/key-spacing': 'error',
'vue/match-component-file-name': 'error',
'vue/object-curly-spacing': 'error'
'vue/object-curly-spacing': 'error',
'@typescript-eslint/no-this-alias': ['off']
},
overrides: [
{

View File

@ -1,34 +0,0 @@
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
// "autoprefixer": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
// 视窗的宽度对应的是我们设计稿的宽度移动端一般是750如果是pc端那就是类似1920这样的尺寸
viewportWidth: 1920,
viewportHeight: 1080, // 视窗的高度,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
viewportUnit: "vw", // 指定需要转换成的视窗单位建议使用vw
// 过滤掉不转换为视窗单位的class类名可以自定义可以无限添加,建议定义一至两个通用的类名
selectorBlackList: [".ignore", ".hairlines"],
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
},
"postcss-viewport-units": {
filterRule: rule => rule.selector.indexOf("::after") === -1 &&
rule.selector.indexOf("::before") === -1 &&
rule.selector.indexOf(":after") === -1 &&
rule.selector.indexOf(":before") === -1
},
"cssnano": {
preset: "default", // 设置成default将不会启用autoprefixer
"postcss-zindex": false
}
}
};

100
package-lock.json generated
View File

@ -1485,7 +1485,7 @@
},
"@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/@types/parse-json/download/@types/parse-json-4.0.0.tgz?cache=0&sync_timestamp=1637269948744&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fparse-json%2Fdownload%2F%40types%2Fparse-json-4.0.0.tgz",
"resolved": "https://registry.npmmirror.com/@types/parse-json/download/@types/parse-json-4.0.0.tgz?cache=0&sync_timestamp=1637284065529&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fparse-json%2Fdownload%2F%40types%2Fparse-json-4.0.0.tgz",
"integrity": "sha1-L4u0QUNNFjs1+4/9zNcTiSf/uMA=",
"dev": true,
"optional": true
@ -2889,7 +2889,7 @@
},
"at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/at-least-node/download/at-least-node-1.0.0.tgz",
"resolved": "https://registry.npmmirror.com/at-least-node/download/at-least-node-1.0.0.tgz",
"integrity": "sha1-YCzUtG6EStTv/JKoARo8RuAjjcI=",
"dev": true,
"optional": true
@ -4375,7 +4375,7 @@
},
"cosmiconfig": {
"version": "6.0.0",
"resolved": "https://registry.nlark.com/cosmiconfig/download/cosmiconfig-6.0.0.tgz?cache=0&sync_timestamp=1629586206512&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-6.0.0.tgz",
"resolved": "https://registry.npmmirror.com/cosmiconfig/download/cosmiconfig-6.0.0.tgz",
"integrity": "sha1-2k/uhTxS9rHmk19BwaL8UL1KmYI=",
"dev": true,
"optional": true,
@ -4389,7 +4389,7 @@
"dependencies": {
"path-type": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz",
"resolved": "https://registry.npmmirror.com/path-type/download/path-type-4.0.0.tgz",
"integrity": "sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs=",
"dev": true,
"optional": true
@ -4797,7 +4797,7 @@
},
"deepmerge": {
"version": "4.2.2",
"resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz",
"resolved": "https://registry.npmmirror.com/deepmerge/download/deepmerge-4.2.2.tgz",
"integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=",
"dev": true,
"optional": true
@ -6004,15 +6004,15 @@
"dev": true
},
"eslint-plugin-vue": {
"version": "7.20.0",
"resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.20.0.tgz",
"integrity": "sha1-mMIYhaa/3wcTw6kpV6Wv6q7tklM=",
"version": "7.0.0-beta.4",
"resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.0.0-beta.4.tgz",
"integrity": "sha1-qhO5RnAsTeG498NGdpgYV3WxH9s=",
"dev": true,
"requires": {
"eslint-utils": "^2.1.0",
"natural-compare": "^1.4.0",
"semver": "^6.3.0",
"vue-eslint-parser": "^7.10.0"
"semver": "^7.3.2",
"vue-eslint-parser": "^7.1.0"
},
"dependencies": {
"eslint-utils": {
@ -6029,6 +6029,30 @@
"resolved": "https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz?cache=0&sync_timestamp=1636378502272&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-1.3.0.tgz",
"integrity": "sha1-MOvR73wv3/AcOk8VEESvJfqwUj4=",
"dev": true
},
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmmirror.com/lru-cache/download/lru-cache-6.0.0.tgz",
"integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
"dev": true,
"requires": {
"yallist": "^4.0.0"
}
},
"semver": {
"version": "7.3.5",
"resolved": "https://registry.npmmirror.com/semver/download/semver-7.3.5.tgz?cache=0&sync_timestamp=1632475048843&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsemver%2Fdownload%2Fsemver-7.3.5.tgz",
"integrity": "sha1-C2Ich5NI2JmOSw5L6Us/EuYBjvc=",
"dev": true,
"requires": {
"lru-cache": "^6.0.0"
}
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/yallist/download/yallist-4.0.0.tgz",
"integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
"dev": true
}
}
},
@ -6721,7 +6745,7 @@
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995651629&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
"resolved": "https://registry.npmmirror.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
@ -6752,21 +6776,21 @@
},
"color-name": {
"version": "1.1.4",
"resolved": "http://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"resolved": "https://registry.npmmirror.com/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
"resolved": "https://registry.npmmirror.com/has-flag/download/has-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz",
"resolved": "https://registry.npmmirror.com/lru-cache/download/lru-cache-6.0.0.tgz",
"integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
"dev": true,
"optional": true,
@ -6776,7 +6800,7 @@
},
"schema-utils": {
"version": "2.7.0",
"resolved": "https://registry.npmmirror.com/schema-utils/download/schema-utils-2.7.0.tgz?cache=0&sync_timestamp=1637075905726&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fschema-utils%2Fdownload%2Fschema-utils-2.7.0.tgz",
"resolved": "https://registry.npmmirror.com/schema-utils/download/schema-utils-2.7.0.tgz?cache=0&sync_timestamp=1637076384813&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fschema-utils%2Fdownload%2Fschema-utils-2.7.0.tgz",
"integrity": "sha1-FxUfdtjq5n+793lgwzxnatn078c=",
"dev": true,
"optional": true,
@ -6788,7 +6812,7 @@
},
"semver": {
"version": "7.3.5",
"resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.5.tgz?cache=0&sync_timestamp=1616463608061&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.5.tgz",
"resolved": "https://registry.npmmirror.com/semver/download/semver-7.3.5.tgz?cache=0&sync_timestamp=1632475048843&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsemver%2Fdownload%2Fsemver-7.3.5.tgz",
"integrity": "sha1-C2Ich5NI2JmOSw5L6Us/EuYBjvc=",
"dev": true,
"optional": true,
@ -6808,7 +6832,7 @@
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
"resolved": "https://registry.npmmirror.com/yallist/download/yallist-4.0.0.tgz",
"integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
"dev": true,
"optional": true
@ -6859,7 +6883,7 @@
},
"fs-extra": {
"version": "9.1.0",
"resolved": "https://registry.nlark.com/fs-extra/download/fs-extra-9.1.0.tgz",
"resolved": "https://registry.npmmirror.com/fs-extra/download/fs-extra-9.1.0.tgz?cache=0&sync_timestamp=1632739240201&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffs-extra%2Fdownload%2Ffs-extra-9.1.0.tgz",
"integrity": "sha1-WVRGDHZKjaIJS6NVS/g55rmnyG0=",
"dev": true,
"optional": true,
@ -6872,7 +6896,7 @@
},
"fs-monkey": {
"version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/fs-monkey/download/fs-monkey-1.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffs-monkey%2Fdownload%2Ffs-monkey-1.0.3.tgz",
"resolved": "https://registry.npmmirror.com/fs-monkey/download/fs-monkey-1.0.3.tgz",
"integrity": "sha1-rjrJLVO7Mo7+DpodlUH2rY1I4tM=",
"dev": true,
"optional": true
@ -8258,7 +8282,7 @@
},
"is-resolvable": {
"version": "1.1.0",
"resolved": "http://registry.npm.taobao.org/is-resolvable/download/is-resolvable-1.1.0.tgz",
"resolved": "https://registry.npmmirror.com/is-resolvable/download/is-resolvable-1.1.0.tgz",
"integrity": "sha1-+xj4fOH+uSUWnJpAfBkxijIG7Yg=",
"dev": true
},
@ -8462,7 +8486,7 @@
},
"jsonfile": {
"version": "6.1.0",
"resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.1.0.tgz?cache=0&sync_timestamp=1604161917513&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-6.1.0.tgz",
"resolved": "https://registry.npmmirror.com/jsonfile/download/jsonfile-6.1.0.tgz",
"integrity": "sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=",
"dev": true,
"optional": true,
@ -8524,11 +8548,6 @@
"type-check": "~0.4.0"
}
},
"lib-flexible": {
"version": "0.3.2",
"resolved": "https://registry.npmmirror.com/lib-flexible/download/lib-flexible-0.3.2.tgz",
"integrity": "sha1-BvWnSDIxSi01wSA5vJw8otrqpCY="
},
"lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmmirror.com/lines-and-columns/download/lines-and-columns-1.2.4.tgz",
@ -9484,7 +9503,8 @@
"object-assign": {
"version": "4.1.1",
"resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true
},
"object-copy": {
"version": "0.1.0",
@ -10043,6 +10063,7 @@
"version": "7.0.39",
"resolved": "https://registry.npmmirror.com/postcss/download/postcss-7.0.39.tgz",
"integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
"dev": true,
"requires": {
"picocolors": "^0.2.1",
"source-map": "^0.6.1"
@ -10051,12 +10072,14 @@
"picocolors": {
"version": "0.2.1",
"resolved": "https://registry.npmmirror.com/picocolors/download/picocolors-0.2.1.tgz?cache=0&sync_timestamp=1634093339035&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fpicocolors%2Fdownload%2Fpicocolors-0.2.1.tgz",
"integrity": "sha1-VwZw95NkaFHRuhNZlpYqutWHhZ8="
"integrity": "sha1-VwZw95NkaFHRuhNZlpYqutWHhZ8=",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"dev": true
}
}
},
@ -10576,15 +10599,6 @@
}
}
},
"postcss-px-to-viewport": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/postcss-px-to-viewport/download/postcss-px-to-viewport-1.1.1.tgz",
"integrity": "sha1-olykELVTyYksyLUlzHENpHvxqlU=",
"requires": {
"object-assign": ">=4.0.1",
"postcss": ">=5.0.2"
}
},
"postcss-reduce-initial": {
"version": "4.0.3",
"resolved": "https://registry.npmmirror.com/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",
@ -13164,7 +13178,7 @@
},
"universalify": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/universalify/download/universalify-2.0.0.tgz",
"resolved": "https://registry.npmmirror.com/universalify/download/universalify-2.0.0.tgz",
"integrity": "sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=",
"dev": true,
"optional": true
@ -13475,7 +13489,7 @@
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995651629&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
"resolved": "https://registry.npmmirror.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
@ -13506,14 +13520,14 @@
},
"color-name": {
"version": "1.1.4",
"resolved": "http://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"resolved": "https://registry.npmmirror.com/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
"resolved": "https://registry.npmmirror.com/has-flag/download/has-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
@ -14395,7 +14409,7 @@
},
"yaml": {
"version": "1.10.2",
"resolved": "https://registry.npmmirror.com/yaml/download/yaml-1.10.2.tgz?cache=0&sync_timestamp=1636797230771&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fyaml%2Fdownload%2Fyaml-1.10.2.tgz",
"resolved": "https://registry.npmmirror.com/yaml/download/yaml-1.10.2.tgz",
"integrity": "sha1-IwHF/78StGfejaIzOkWeKeeSDks=",
"dev": true,
"optional": true

View File

@ -9,20 +9,18 @@
},
"dependencies": {
"core-js": "^3.6.5",
"js-cookie": "^2.2.1",
"lib-flexible": "^0.3.2",
"postcss-px-to-viewport": "^1.1.1",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"vuex-module-decorators": "^2.0.0"
"vuex-module-decorators": "^2.0.0",
"js-cookie": "^2.2.1"
},
"devDependencies": {
"@types/js-cookie": "^2.2.6",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@types/js-cookie": "^2.2.6",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
@ -30,14 +28,14 @@
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/eslint-config-standard": "^5.1.2",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^7.12.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.2",
"eslint-plugin-vue": "^7.1.0",
"eslint-plugin-vue": "^7.0.0-beta.4",
"node-sass": "^4.12.0",
"prettier": "^2.2.1",
"sass-loader": "^8.0.2",
@ -48,14 +46,5 @@
"> 1%",
"last 2 versions",
"not dead"
],
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
}
]
}

8716
public/assets/libs/spine-webgl.js Executable file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,153 @@
guang_texiao.png
size: 1024,1024
format: RGBA8888
filter: Linear,Linear
repeat: none
jineng_0001
rotate: false
xy: 2, 802
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0002
rotate: false
xy: 2, 602
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0003
rotate: false
xy: 147, 802
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0004
rotate: false
xy: 2, 402
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0005
rotate: false
xy: 147, 602
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0006
rotate: false
xy: 292, 802
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0007
rotate: false
xy: 2, 202
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0008
rotate: false
xy: 147, 402
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0009
rotate: false
xy: 292, 602
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0010
rotate: false
xy: 437, 802
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0011
rotate: false
xy: 2, 2
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0012
rotate: false
xy: 147, 202
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0013
rotate: false
xy: 292, 402
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0014
rotate: false
xy: 437, 602
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0015
rotate: false
xy: 582, 802
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0016
rotate: false
xy: 147, 2
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0017
rotate: false
xy: 292, 202
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0018
rotate: false
xy: 437, 402
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0019
rotate: false
xy: 582, 602
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0020
rotate: false
xy: 727, 802
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1
jineng_0021
rotate: false
xy: 292, 2
size: 143, 198
orig: 143, 198
offset: 0, 0
index: -1

View File

@ -0,0 +1 @@
{"skeleton":{"hash":"kCrtIhpwYzozmGuey+YX/gCe1VI","spine":"3.5.51","width":481.71,"height":691.03,"images":"./images/"},"bones":[{"name":"root"},{"name":"jinneng","parent":"root","x":0.29,"y":-15.24,"scaleX":3.369,"scaleY":3.49}],"slots":[{"name":"jineng_0001","bone":"jinneng","attachment":"jineng_0001"},{"name":"jineng_1","bone":"jinneng","attachment":"jineng_0001","blend":"additive"}],"skins":{"default":{"jineng_0001":{"jineng_0001":{"y":82.52,"width":143,"height":198},"jineng_0002":{"y":81.63,"width":143,"height":198},"jineng_0003":{"y":81.63,"width":143,"height":198},"jineng_0004":{"y":81.63,"width":143,"height":198},"jineng_0005":{"y":81.63,"width":143,"height":198},"jineng_0006":{"y":81.63,"width":143,"height":198},"jineng_0007":{"y":81.63,"width":143,"height":198},"jineng_0008":{"y":81.63,"width":143,"height":198},"jineng_0009":{"y":81.63,"width":143,"height":198},"jineng_0010":{"y":81.63,"width":143,"height":198},"jineng_0011":{"y":81.63,"width":143,"height":198},"jineng_0012":{"y":81.63,"width":143,"height":198},"jineng_0013":{"y":81.63,"width":143,"height":198},"jineng_0014":{"y":81.63,"width":143,"height":198},"jineng_0015":{"y":81.63,"width":143,"height":198},"jineng_0016":{"y":81.63,"width":143,"height":198},"jineng_0017":{"y":81.63,"width":143,"height":198},"jineng_0018":{"y":81.63,"width":143,"height":198},"jineng_0019":{"y":81.63,"width":143,"height":198},"jineng_0020":{"y":81.63,"width":143,"height":198},"jineng_0021":{"y":81.63,"width":143,"height":198}},"jineng_1":{"jineng_0001":{"y":82.52,"width":143,"height":198},"jineng_0002":{"y":81.63,"width":143,"height":198},"jineng_0003":{"y":81.63,"width":143,"height":198},"jineng_0004":{"y":81.63,"width":143,"height":198},"jineng_0005":{"y":81.63,"width":143,"height":198},"jineng_0006":{"y":81.63,"width":143,"height":198},"jineng_0007":{"y":81.63,"width":143,"height":198},"jineng_0008":{"y":81.63,"width":143,"height":198},"jineng_0009":{"y":81.63,"width":143,"height":198},"jineng_0010":{"y":81.63,"width":143,"height":198},"jineng_0011":{"y":81.63,"width":143,"height":198},"jineng_0012":{"y":81.63,"width":143,"height":198},"jineng_0013":{"y":81.63,"width":143,"height":198},"jineng_0014":{"y":81.63,"width":143,"height":198},"jineng_0015":{"y":81.63,"width":143,"height":198},"jineng_0016":{"y":81.63,"width":143,"height":198},"jineng_0017":{"y":81.63,"width":143,"height":198},"jineng_0018":{"y":81.63,"width":143,"height":198},"jineng_0019":{"y":81.63,"width":143,"height":198},"jineng_0020":{"y":81.63,"width":143,"height":198},"jineng_0021":{"y":81.63,"width":143,"height":198}}}},"events":{"play_end":{}},"animations":{"animation":{"slots":{"jineng_0001":{"attachment":[{"time":0,"name":"jineng_0001"},{"time":0.0333,"name":"jineng_0002"},{"time":0.0667,"name":"jineng_0003"},{"time":0.1,"name":"jineng_0004"},{"time":0.1333,"name":"jineng_0005"},{"time":0.1667,"name":"jineng_0006"},{"time":0.2,"name":"jineng_0007"},{"time":0.2333,"name":"jineng_0008"},{"time":0.2667,"name":"jineng_0009"},{"time":0.3,"name":"jineng_0010"},{"time":0.3333,"name":"jineng_0011"},{"time":0.3667,"name":"jineng_0012"},{"time":0.4,"name":"jineng_0013"},{"time":0.4333,"name":"jineng_0014"},{"time":0.4667,"name":"jineng_0015"},{"time":0.5,"name":"jineng_0016"},{"time":0.5333,"name":"jineng_0017"},{"time":0.5667,"name":"jineng_0018"},{"time":0.6,"name":"jineng_0019"},{"time":0.6333,"name":"jineng_0020"},{"time":0.6667,"name":"jineng_0021"}]},"jineng_1":{"attachment":[{"time":0,"name":"jineng_0001"},{"time":0.0333,"name":"jineng_0002"},{"time":0.0667,"name":"jineng_0003"},{"time":0.1,"name":"jineng_0004"},{"time":0.1333,"name":"jineng_0005"},{"time":0.1667,"name":"jineng_0006"},{"time":0.2,"name":"jineng_0007"},{"time":0.2333,"name":"jineng_0008"},{"time":0.2667,"name":"jineng_0009"},{"time":0.3,"name":"jineng_0010"},{"time":0.3333,"name":"jineng_0011"},{"time":0.3667,"name":"jineng_0012"},{"time":0.4,"name":"jineng_0013"},{"time":0.4333,"name":"jineng_0014"},{"time":0.4667,"name":"jineng_0015"},{"time":0.5,"name":"jineng_0016"},{"time":0.5333,"name":"jineng_0017"},{"time":0.5667,"name":"jineng_0018"},{"time":0.6,"name":"jineng_0019"},{"time":0.6333,"name":"jineng_0020"},{"time":0.6667,"name":"jineng_0021"}]}},"bones":{"jinneng":{"scale":[{"time":0,"x":1.653,"y":1.561}]}},"events":[{"time":0.6667,"name":"play_end"}]}}}

Binary file not shown.

After

Width:  |  Height:  |  Size: 365 KiB

View File

@ -0,0 +1,363 @@
pic_hero1.png
size: 1024,1024
format: RGBA8888
filter: Linear,Linear
repeat: none
XINGXING
rotate: false
xy: 415, 588
size: 39, 39
orig: 39, 39
offset: 0, 0
index: -1
huli_10
rotate: false
xy: 2, 629
size: 276, 392
orig: 276, 392
offset: 0, 0
index: -1
huli_11
rotate: true
xy: 520, 406
size: 176, 126
orig: 176, 126
offset: 0, 0
index: -1
huli_12
rotate: false
xy: 278, 294
size: 76, 333
orig: 76, 333
offset: 0, 0
index: -1
huli_13
rotate: false
xy: 280, 717
size: 191, 304
orig: 191, 304
offset: 0, 0
index: -1
huli_14
rotate: false
xy: 479, 270
size: 36, 120
orig: 36, 120
offset: 0, 0
index: -1
huli_15
rotate: false
xy: 416, 629
size: 46, 86
orig: 46, 86
offset: 0, 0
index: -1
huli_16
rotate: false
xy: 112, 231
size: 128, 110
orig: 128, 110
offset: 0, 0
index: -1
huli_17
rotate: false
xy: 942, 755
size: 80, 266
orig: 80, 266
offset: 0, 0
index: -1
huli_18
rotate: false
xy: 700, 773
size: 31, 22
orig: 31, 22
offset: 0, 0
index: -1
huli_19
rotate: false
xy: 758, 506
size: 18, 19
orig: 18, 19
offset: 0, 0
index: -1
huli_20
rotate: false
xy: 385, 590
size: 28, 39
orig: 28, 39
offset: 0, 0
index: -1
huli_21
rotate: true
xy: 280, 631
size: 84, 134
orig: 84, 134
offset: 0, 0
index: -1
huli_22
rotate: true
xy: 670, 575
size: 65, 79
orig: 65, 79
offset: 0, 0
index: -1
huli_23
rotate: true
xy: 931, 780
size: 15, 9
orig: 15, 9
offset: 0, 0
index: -1
huli_24
rotate: true
xy: 343, 276
size: 16, 11
orig: 16, 11
offset: 0, 0
index: -1
huli_25
rotate: false
xy: 520, 396
size: 9, 8
orig: 9, 8
offset: 0, 0
index: -1
huli_26
rotate: false
xy: 715, 408
size: 8, 9
orig: 8, 9
offset: 0, 0
index: -1
huli_27
rotate: false
xy: 648, 405
size: 65, 79
orig: 65, 79
offset: 0, 0
index: -1
huli_28
rotate: true
xy: 733, 779
size: 16, 15
orig: 16, 15
offset: 0, 0
index: -1
huli_29
rotate: false
xy: 323, 275
size: 18, 17
orig: 18, 17
offset: 0, 0
index: -1
huli_30
rotate: false
xy: 826, 642
size: 16, 13
orig: 16, 13
offset: 0, 0
index: -1
huli_31
rotate: true
xy: 826, 657
size: 16, 11
orig: 16, 11
offset: 0, 0
index: -1
huli_32
rotate: true
xy: 931, 763
size: 15, 9
orig: 15, 9
offset: 0, 0
index: -1
huli_33
rotate: true
xy: 758, 527
size: 50, 41
orig: 50, 41
offset: 0, 0
index: -1
huli_34
rotate: true
xy: 750, 642
size: 31, 74
orig: 31, 74
offset: 0, 0
index: -1
huli_35
rotate: false
xy: 273, 252
size: 48, 40
orig: 48, 40
offset: 0, 0
index: -1
huli_36
rotate: false
xy: 715, 494
size: 41, 79
orig: 41, 79
offset: 0, 0
index: -1
huli_37
rotate: true
xy: 839, 671
size: 31, 61
orig: 31, 61
offset: 0, 0
index: -1
huli_38
rotate: false
xy: 356, 584
size: 27, 45
orig: 27, 45
offset: 0, 0
index: -1
huli_39
rotate: false
xy: 715, 419
size: 49, 73
orig: 49, 73
offset: 0, 0
index: -1
huli_4
rotate: false
xy: 473, 773
size: 225, 248
orig: 225, 248
offset: 0, 0
index: -1
huli_40
rotate: false
xy: 839, 704
size: 77, 91
orig: 77, 91
offset: 0, 0
index: -1
huli_41
rotate: false
xy: 918, 749
size: 11, 46
orig: 11, 46
offset: 0, 0
index: -1
huli_42
rotate: false
xy: 751, 579
size: 53, 61
orig: 53, 61
offset: 0, 0
index: -1
huli_43
rotate: false
xy: 2, 217
size: 108, 410
orig: 108, 410
offset: 0, 0
index: -1
huli_44
rotate: true
xy: 356, 280
size: 110, 121
orig: 110, 121
offset: 0, 0
index: -1
huli_45
rotate: false
xy: 112, 343
size: 164, 284
orig: 164, 284
offset: 0, 0
index: -1
huli_46
rotate: false
xy: 670, 642
size: 78, 129
orig: 78, 129
offset: 0, 0
index: -1
huli_47
rotate: true
xy: 112, 218
size: 11, 54
orig: 11, 54
offset: 0, 0
index: -1
huli_48
rotate: false
xy: 242, 255
size: 29, 86
orig: 29, 86
offset: 0, 0
index: -1
huli_49
rotate: false
xy: 758, 494
size: 17, 10
orig: 17, 10
offset: 0, 0
index: -1
huli_5
rotate: true
xy: 473, 584
size: 187, 195
orig: 187, 195
offset: 0, 0
index: -1
huli_50
rotate: false
xy: 806, 589
size: 26, 51
orig: 26, 51
offset: 0, 0
index: -1
huli_51
rotate: true
xy: 931, 746
size: 15, 9
orig: 15, 9
offset: 0, 0
index: -1
huli_52
rotate: false
xy: 385, 584
size: 14, 4
orig: 14, 4
offset: 0, 0
index: -1
huli_53
rotate: false
xy: 648, 486
size: 65, 87
orig: 65, 87
offset: 0, 0
index: -1
huli_6
rotate: false
xy: 2, 2
size: 199, 213
orig: 199, 213
offset: 0, 0
index: -1
huli_7
rotate: false
xy: 700, 797
size: 240, 224
orig: 240, 224
offset: 0, 0
index: -1
huli_8
rotate: false
xy: 356, 392
size: 162, 190
orig: 162, 190
offset: 0, 0
index: -1
huli_9
rotate: false
xy: 750, 675
size: 87, 120
orig: 87, 120
offset: 0, 0
index: -1

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 KiB

View File

@ -0,0 +1,286 @@
pic_hero10.png
size: 1998,551
format: RGBA8888
filter: Linear,Linear
repeat: none
hore10_1
rotate: false
xy: 1612, 143
size: 384, 406
orig: 384, 406
offset: 0, 0
index: -1
hore10_10
rotate: true
xy: 1580, 52
size: 19, 91
orig: 19, 91
offset: 0, 0
index: -1
hore10_11
rotate: true
xy: 440, 2
size: 245, 567
orig: 245, 567
offset: 0, 0
index: -1
hore10_12
rotate: true
xy: 1387, 231
size: 57, 168
orig: 57, 168
offset: 0, 0
index: -1
hore10_13
rotate: true
xy: 1581, 73
size: 68, 92
orig: 68, 92
offset: 0, 0
index: -1
hore10_14
rotate: true
xy: 1035, 290
size: 259, 575
orig: 259, 575
offset: 0, 0
index: -1
hore10_15
rotate: true
xy: 1387, 182
size: 47, 173
orig: 47, 173
offset: 0, 0
index: -1
hore10_16
rotate: false
xy: 1411, 2
size: 38, 14
orig: 38, 14
offset: 0, 0
index: -1
hore10_17
rotate: false
xy: 1009, 2
size: 99, 245
orig: 99, 245
offset: 0, 0
index: -1
hore10_18
rotate: true
xy: 1387, 139
size: 41, 103
orig: 41, 103
offset: 0, 0
index: -1
hore10_19
rotate: false
xy: 1769, 69
size: 83, 72
orig: 83, 72
offset: 0, 0
index: -1
hore10_2
rotate: false
xy: 1110, 14
size: 186, 274
orig: 186, 274
offset: 0, 0
index: -1
hore10_20
rotate: true
xy: 1854, 102
size: 39, 93
orig: 39, 93
offset: 0, 0
index: -1
hore10_21
rotate: true
xy: 1298, 15
size: 112, 111
orig: 112, 111
offset: 0, 0
index: -1
hore10_22
rotate: false
xy: 1557, 234
size: 22, 54
orig: 22, 54
offset: 0, 0
index: -1
hore10_23
rotate: true
xy: 1035, 263
size: 25, 64
orig: 25, 64
offset: 0, 0
index: -1
hore10_24
rotate: false
xy: 1411, 34
size: 83, 103
orig: 83, 103
offset: 0, 0
index: -1
hore10_25
rotate: false
xy: 1055, 253
size: 17, 8
orig: 17, 8
offset: 0, 0
index: -1
hore10_26
rotate: false
xy: 1581, 245
size: 16, 9
orig: 16, 9
offset: 0, 0
index: -1
hore10_27
rotate: false
xy: 1496, 77
size: 83, 103
orig: 83, 103
offset: 0, 0
index: -1
hore10_28
rotate: false
xy: 1035, 249
size: 18, 12
orig: 18, 12
offset: 0, 0
index: -1
hore10_29
rotate: false
xy: 1949, 128
size: 17, 13
orig: 17, 13
offset: 0, 0
index: -1
hore10_3
rotate: false
xy: 2, 3
size: 436, 546
orig: 436, 546
offset: 0, 0
index: -1
hore10_30
rotate: true
xy: 1101, 280
size: 8, 7
orig: 8, 7
offset: 0, 0
index: -1
hore10_31
rotate: false
xy: 1101, 272
size: 7, 6
orig: 7, 6
offset: 0, 0
index: -1
hore10_32
rotate: false
xy: 1381, 5
size: 18, 8
orig: 18, 8
offset: 0, 0
index: -1
hore10_33
rotate: false
xy: 1387, 129
size: 19, 8
orig: 19, 8
offset: 0, 0
index: -1
hore10_34
rotate: false
xy: 1769, 58
size: 19, 9
orig: 19, 9
offset: 0, 0
index: -1
hore10_35
rotate: false
xy: 1580, 42
size: 19, 8
orig: 19, 8
offset: 0, 0
index: -1
hore10_36
rotate: true
xy: 1949, 102
size: 24, 5
orig: 24, 5
offset: 0, 0
index: -1
hore10_37
rotate: false
xy: 1110, 4
size: 26, 8
orig: 26, 8
offset: 0, 0
index: -1
hore10_38
rotate: true
xy: 1581, 256
size: 32, 17
orig: 32, 17
offset: 0, 0
index: -1
hore10_39
rotate: false
xy: 1675, 58
size: 92, 83
orig: 92, 83
offset: 0, 0
index: -1
hore10_4
rotate: false
xy: 1451, 2
size: 33, 14
orig: 33, 14
offset: 0, 0
index: -1
hore10_40
rotate: true
xy: 440, 249
size: 300, 593
orig: 300, 593
offset: 0, 0
index: -1
hore10_5
rotate: false
xy: 1298, 129
size: 87, 159
orig: 87, 159
offset: 0, 0
index: -1
hore10_6
rotate: true
xy: 1411, 18
size: 14, 81
orig: 14, 81
offset: 0, 0
index: -1
hore10_7
rotate: true
xy: 1496, 41
size: 34, 82
orig: 34, 82
offset: 0, 0
index: -1
hore10_8
rotate: true
xy: 1298, 2
size: 11, 81
orig: 11, 81
offset: 0, 0
index: -1
hore10_9
rotate: true
xy: 1854, 76
size: 24, 101
orig: 24, 101
offset: 0, 0
index: -1

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 KiB

View File

@ -0,0 +1,286 @@
pic_hero2.png
size: 1024,512
format: RGBA8888
filter: Linear,Linear
repeat: none
BBBBB3
rotate: false
xy: 2, 6
size: 21, 6
orig: 21, 6
offset: 0, 0
index: -1
bbbbb2
rotate: true
xy: 1015, 455
size: 22, 7
orig: 22, 7
offset: 0, 0
index: -1
huanxiong_1
rotate: false
xy: 815, 284
size: 50, 58
orig: 50, 58
offset: 0, 0
index: -1
huanxiong_10
rotate: true
xy: 983, 402
size: 32, 39
orig: 32, 39
offset: 0, 0
index: -1
huanxiong_11
rotate: true
xy: 873, 373
size: 61, 108
orig: 61, 108
offset: 0, 0
index: -1
huanxiong_12
rotate: false
xy: 302, 79
size: 31, 45
orig: 31, 45
offset: 0, 0
index: -1
huanxiong_13
rotate: true
xy: 873, 436
size: 71, 117
orig: 71, 117
offset: 0, 0
index: -1
huanxiong_14
rotate: false
xy: 2, 14
size: 131, 85
orig: 131, 85
offset: 0, 0
index: -1
huanxiong_15
rotate: false
xy: 611, 346
size: 133, 161
orig: 133, 161
offset: 0, 0
index: -1
huanxiong_16
rotate: false
xy: 435, 82
size: 31, 24
orig: 31, 24
offset: 0, 0
index: -1
huanxiong_17
rotate: false
xy: 216, 200
size: 260, 307
orig: 260, 307
offset: 0, 0
index: -1
huanxiong_18
rotate: false
xy: 2, 101
size: 212, 406
orig: 212, 406
offset: 0, 0
index: -1
huanxiong_19
rotate: true
xy: 337, 108
size: 41, 81
orig: 41, 81
offset: 0, 0
index: -1
huanxiong_2
rotate: true
xy: 478, 174
size: 57, 106
orig: 57, 106
offset: 0, 0
index: -1
huanxiong_20
rotate: true
xy: 738, 286
size: 56, 75
orig: 56, 75
offset: 0, 0
index: -1
huanxiong_21
rotate: false
xy: 746, 396
size: 125, 111
orig: 125, 111
offset: 0, 0
index: -1
huanxiong_22
rotate: true
xy: 856, 344
size: 27, 29
orig: 27, 29
offset: 0, 0
index: -1
huanxiong_23
rotate: true
xy: 983, 373
size: 27, 32
orig: 27, 32
offset: 0, 0
index: -1
huanxiong_24
rotate: false
xy: 135, 15
size: 67, 84
orig: 67, 84
offset: 0, 0
index: -1
huanxiong_25
rotate: true
xy: 856, 373
size: 21, 15
orig: 21, 15
offset: 0, 0
index: -1
huanxiong_26
rotate: true
xy: 867, 305
size: 37, 16
orig: 37, 16
offset: 0, 0
index: -1
huanxiong_27
rotate: false
xy: 992, 479
size: 30, 28
orig: 30, 28
offset: 0, 0
index: -1
huanxiong_28
rotate: true
xy: 204, 2
size: 67, 84
orig: 67, 84
offset: 0, 0
index: -1
huanxiong_29
rotate: true
xy: 204, 90
size: 9, 10
orig: 9, 10
offset: 0, 0
index: -1
huanxiong_3
rotate: true
xy: 216, 126
size: 72, 119
orig: 72, 119
offset: 0, 0
index: -1
huanxiong_30
rotate: false
xy: 887, 347
size: 22, 24
orig: 22, 24
offset: 0, 0
index: -1
huanxiong_31
rotate: true
xy: 466, 189
size: 9, 10
orig: 9, 10
offset: 0, 0
index: -1
huanxiong_32
rotate: false
xy: 911, 350
size: 22, 21
orig: 22, 21
offset: 0, 0
index: -1
huanxiong_33
rotate: true
xy: 1017, 391
size: 9, 5
orig: 9, 5
offset: 0, 0
index: -1
huanxiong_34
rotate: true
xy: 420, 108
size: 41, 50
orig: 41, 50
offset: 0, 0
index: -1
huanxiong_35
rotate: true
xy: 337, 151
size: 47, 127
orig: 47, 127
offset: 0, 0
index: -1
huanxiong_36
rotate: true
xy: 335, 64
size: 42, 53
orig: 42, 53
offset: 0, 0
index: -1
huanxiong_37
rotate: true
xy: 586, 183
size: 48, 7
orig: 48, 7
offset: 0, 0
index: -1
huanxiong_38
rotate: true
xy: 611, 312
size: 32, 125
orig: 32, 125
offset: 0, 0
index: -1
huanxiong_4
rotate: true
xy: 478, 233
size: 63, 128
orig: 63, 128
offset: 0, 0
index: -1
huanxiong_5
rotate: true
xy: 216, 71
size: 53, 84
orig: 53, 84
offset: 0, 0
index: -1
huanxiong_6
rotate: false
xy: 478, 298
size: 131, 209
orig: 131, 209
offset: 0, 0
index: -1
huanxiong_7
rotate: false
xy: 746, 344
size: 108, 50
orig: 108, 50
offset: 0, 0
index: -1
huanxiong_8
rotate: true
xy: 390, 78
size: 28, 43
orig: 28, 43
offset: 0, 0
index: -1
huanxiong_9
rotate: false
xy: 992, 436
size: 21, 41
orig: 21, 41
offset: 0, 0
index: -1

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 302 KiB

View File

@ -0,0 +1,426 @@
pic_hero3.png
size: 1024,1024
format: RGBA8888
filter: Linear,Linear
repeat: none
hroe3_1
rotate: false
xy: 2, 590
size: 259, 432
orig: 259, 432
offset: 0, 0
index: -1
hroe3_10
rotate: false
xy: 1012, 1011
size: 10, 11
orig: 10, 11
offset: 0, 0
index: -1
hroe3_11
rotate: false
xy: 1012, 998
size: 10, 11
orig: 10, 11
offset: 0, 0
index: -1
hroe3_12
rotate: false
xy: 291, 480
size: 61, 108
orig: 61, 108
offset: 0, 0
index: -1
hroe3_13
rotate: false
xy: 2, 2
size: 38, 33
orig: 38, 33
offset: 0, 0
index: -1
hroe3_14
rotate: false
xy: 207, 172
size: 88, 65
orig: 88, 65
offset: 0, 0
index: -1
hroe3_15
rotate: true
xy: 278, 328
size: 17, 9
orig: 17, 9
offset: 0, 0
index: -1
hroe3_16
rotate: false
xy: 1012, 989
size: 10, 7
orig: 10, 7
offset: 0, 0
index: -1
hroe3_17
rotate: false
xy: 974, 950
size: 11, 9
orig: 11, 9
offset: 0, 0
index: -1
hroe3_18
rotate: false
xy: 218, 59
size: 15, 4
orig: 15, 4
offset: 0, 0
index: -1
hroe3_19
rotate: false
xy: 407, 663
size: 19, 13
orig: 19, 13
offset: 0, 0
index: -1
hroe3_2
rotate: false
xy: 2, 165
size: 203, 423
orig: 203, 423
offset: 0, 0
index: -1
hroe3_20
rotate: false
xy: 383, 623
size: 20, 16
orig: 20, 16
offset: 0, 0
index: -1
hroe3_21
rotate: false
xy: 459, 683
size: 20, 16
orig: 20, 16
offset: 0, 0
index: -1
hroe3_22
rotate: false
xy: 96, 2
size: 16, 14
orig: 16, 14
offset: 0, 0
index: -1
hroe3_23
rotate: false
xy: 942, 757
size: 17, 16
orig: 17, 16
offset: 0, 0
index: -1
hroe3_24
rotate: false
xy: 196, 38
size: 17, 15
orig: 17, 15
offset: 0, 0
index: -1
hroe3_25
rotate: true
xy: 155, 38
size: 15, 39
orig: 15, 39
offset: 0, 0
index: -1
hroe3_26
rotate: true
xy: 377, 678
size: 21, 49
orig: 21, 49
offset: 0, 0
index: -1
hroe3_27
rotate: true
xy: 855, 672
size: 24, 62
orig: 24, 62
offset: 0, 0
index: -1
hroe3_28
rotate: true
xy: 938, 840
size: 46, 25
orig: 46, 25
offset: 0, 0
index: -1
hroe3_29
rotate: true
xy: 342, 622
size: 53, 39
orig: 53, 39
offset: 0, 0
index: -1
hroe3_3
rotate: true
xy: 942, 800
size: 38, 20
orig: 38, 20
offset: 0, 0
index: -1
hroe3_30
rotate: true
xy: 490, 694
size: 49, 99
orig: 49, 99
offset: 0, 0
index: -1
hroe3_31
rotate: true
xy: 591, 694
size: 11, 36
orig: 11, 36
offset: 0, 0
index: -1
hroe3_32
rotate: false
xy: 289, 400
size: 46, 46
orig: 46, 46
offset: 0, 0
index: -1
hroe3_33
rotate: false
xy: 942, 775
size: 18, 23
orig: 18, 23
offset: 0, 0
index: -1
hroe3_34
rotate: false
xy: 855, 667
size: 15, 3
orig: 15, 3
offset: 0, 0
index: -1
hroe3_35
rotate: true
xy: 346, 465
size: 13, 6
orig: 13, 6
offset: 0, 0
index: -1
hroe3_36
rotate: true
xy: 591, 707
size: 36, 40
orig: 36, 40
offset: 0, 0
index: -1
hroe3_37
rotate: false
xy: 938, 888
size: 31, 58
orig: 31, 58
offset: 0, 0
index: -1
hroe3_38
rotate: false
xy: 289, 349
size: 32, 49
orig: 32, 49
offset: 0, 0
index: -1
hroe3_39
rotate: false
xy: 207, 448
size: 82, 140
orig: 82, 140
offset: 0, 0
index: -1
hroe3_4
rotate: true
xy: 633, 667
size: 171, 220
orig: 171, 220
offset: 0, 0
index: -1
hroe3_40
rotate: true
xy: 633, 948
size: 74, 339
orig: 74, 339
offset: 0, 0
index: -1
hroe3_41
rotate: false
xy: 377, 701
size: 111, 321
orig: 111, 321
offset: 0, 0
index: -1
hroe3_42
rotate: false
xy: 2, 37
size: 151, 126
orig: 151, 126
offset: 0, 0
index: -1
hroe3_43
rotate: true
xy: 207, 167
size: 3, 8
orig: 3, 8
offset: 0, 0
index: -1
hroe3_44
rotate: false
xy: 96, 18
size: 46, 17
orig: 46, 17
offset: 0, 0
index: -1
hroe3_45
rotate: false
xy: 383, 641
size: 22, 35
orig: 22, 35
offset: 0, 0
index: -1
hroe3_46
rotate: false
xy: 263, 677
size: 112, 345
orig: 112, 345
offset: 0, 0
index: -1
hroe3_47
rotate: true
xy: 218, 65
size: 11, 74
orig: 11, 74
offset: 0, 0
index: -1
hroe3_48
rotate: false
xy: 218, 78
size: 74, 92
orig: 74, 92
offset: 0, 0
index: -1
hroe3_49
rotate: true
xy: 291, 448
size: 30, 53
orig: 30, 53
offset: 0, 0
index: -1
hroe3_5
rotate: false
xy: 919, 672
size: 21, 24
orig: 21, 24
offset: 0, 0
index: -1
hroe3_50
rotate: false
xy: 942, 739
size: 15, 16
orig: 15, 16
offset: 0, 0
index: -1
hroe3_51
rotate: true
xy: 342, 591
size: 29, 32
orig: 29, 32
offset: 0, 0
index: -1
hroe3_52
rotate: false
xy: 974, 961
size: 36, 61
orig: 36, 61
offset: 0, 0
index: -1
hroe3_53
rotate: true
xy: 114, 2
size: 14, 9
orig: 14, 9
offset: 0, 0
index: -1
hroe3_54
rotate: true
xy: 428, 674
size: 25, 29
orig: 25, 29
offset: 0, 0
index: -1
hroe3_55
rotate: false
xy: 207, 347
size: 80, 99
orig: 80, 99
offset: 0, 0
index: -1
hroe3_56
rotate: true
xy: 633, 840
size: 106, 303
orig: 106, 303
offset: 0, 0
index: -1
hroe3_57
rotate: false
xy: 207, 239
size: 69, 106
orig: 69, 106
offset: 0, 0
index: -1
hroe3_58
rotate: false
xy: 490, 745
size: 141, 277
orig: 141, 277
offset: 0, 0
index: -1
hroe3_59
rotate: true
xy: 42, 5
size: 30, 52
orig: 30, 52
offset: 0, 0
index: -1
hroe3_6
rotate: false
xy: 855, 698
size: 85, 140
orig: 85, 140
offset: 0, 0
index: -1
hroe3_60
rotate: true
xy: 263, 590
size: 85, 77
orig: 85, 77
offset: 0, 0
index: -1
hroe3_7
rotate: false
xy: 155, 55
size: 61, 108
orig: 61, 108
offset: 0, 0
index: -1
hroe3_8
rotate: true
xy: 323, 382
size: 16, 12
orig: 16, 12
offset: 0, 0
index: -1
hroe3_9
rotate: false
xy: 407, 648
size: 18, 13
orig: 18, 13
offset: 0, 0
index: -1

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 413 KiB

View File

@ -0,0 +1,251 @@
pic_hero9.png
size: 1024,512
format: RGBA8888
filter: Linear,Linear
repeat: none
biyan_1
rotate: false
xy: 790, 446
size: 14, 6
orig: 14, 6
offset: 0, 0
index: -1
biyan_2
rotate: true
xy: 198, 2
size: 9, 4
orig: 9, 4
offset: 0, 0
index: -1
erduo_1
rotate: false
xy: 578, 333
size: 24, 23
orig: 24, 23
offset: 0, 0
index: -1
erduo_2
rotate: false
xy: 293, 154
size: 19, 24
orig: 19, 24
offset: 0, 0
index: -1
face_1
rotate: true
xy: 790, 454
size: 56, 75
orig: 56, 75
offset: 0, 0
index: -1
face_2
rotate: true
xy: 867, 454
size: 56, 75
orig: 56, 75
offset: 0, 0
index: -1
ling_1
rotate: true
xy: 190, 76
size: 67, 47
orig: 67, 47
offset: 0, 0
index: -1
mao
rotate: false
xy: 239, 97
size: 32, 26
orig: 32, 26
offset: 0, 0
index: -1
meimao_1
rotate: false
xy: 514, 320
size: 17, 11
orig: 17, 11
offset: 0, 0
index: -1
meimao_2
rotate: false
xy: 2, 2
size: 11, 3
orig: 11, 3
offset: 0, 0
index: -1
shenti
rotate: true
xy: 2, 7
size: 136, 186
orig: 136, 186
offset: 0, 0
index: -1
shoubi
rotate: true
xy: 703, 446
size: 64, 85
orig: 64, 85
offset: 0, 0
index: -1
shoubi_1
rotate: false
xy: 514, 429
size: 187, 81
orig: 187, 81
offset: 0, 0
index: -1
shoubi_2
rotate: false
xy: 456, 232
size: 53, 85
orig: 53, 85
offset: 0, 0
index: -1
toufa_1
rotate: false
xy: 239, 125
size: 52, 53
orig: 52, 53
offset: 0, 0
index: -1
toufa_2
rotate: false
xy: 190, 13
size: 35, 61
orig: 35, 61
offset: 0, 0
index: -1
toufa_3
rotate: false
xy: 944, 459
size: 69, 51
orig: 69, 51
offset: 0, 0
index: -1
xiashen
rotate: false
xy: 2, 145
size: 235, 365
orig: 235, 365
offset: 0, 0
index: -1
yan_1
rotate: false
xy: 1015, 489
size: 7, 6
orig: 7, 6
offset: 0, 0
index: -1
yan_2
rotate: false
xy: 696, 422
size: 5, 5
orig: 5, 5
offset: 0, 0
index: -1
yanbai_1
rotate: true
xy: 502, 217
size: 13, 6
orig: 13, 6
offset: 0, 0
index: -1
yanbai_2
rotate: false
xy: 239, 89
size: 11, 6
orig: 11, 6
offset: 0, 0
index: -1
yankuang_1
rotate: false
xy: 652, 360
size: 14, 6
orig: 14, 6
offset: 0, 0
index: -1
yankuang_2
rotate: true
xy: 204, 2
size: 9, 4
orig: 9, 4
offset: 0, 0
index: -1
yanpi_1
rotate: true
xy: 227, 61
size: 13, 10
orig: 13, 10
offset: 0, 0
index: -1
yanpi_2
rotate: true
xy: 190, 2
size: 9, 6
orig: 9, 6
offset: 0, 0
index: -1
yifu_1
rotate: false
xy: 239, 319
size: 273, 191
orig: 273, 191
offset: 0, 0
index: -1
yifu_2
rotate: false
xy: 456, 191
size: 44, 39
orig: 44, 39
offset: 0, 0
index: -1
yifu_3
rotate: false
xy: 578, 358
size: 72, 69
orig: 72, 69
offset: 0, 0
index: -1
yifu_4
rotate: false
xy: 703, 431
size: 11, 13
orig: 11, 13
offset: 0, 0
index: -1
yifu_5
rotate: true
xy: 652, 368
size: 59, 42
orig: 59, 42
offset: 0, 0
index: -1
yifu_7
rotate: false
xy: 376, 185
size: 78, 132
orig: 78, 132
offset: 0, 0
index: -1
yifu_8
rotate: false
xy: 239, 180
size: 135, 137
orig: 135, 137
offset: 0, 0
index: -1
yifu_9
rotate: false
xy: 514, 333
size: 62, 94
orig: 62, 94
offset: 0, 0
index: -1
zui
rotate: true
xy: 1015, 497
size: 13, 7
orig: 13, 7
offset: 0, 0
index: -1

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

View File

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="assets/libs/spine-webgl.js"></script>
</head>
<body>
<noscript>

View File

@ -1,450 +0,0 @@
[
{
"__type__": "cc.Prefab",
"_name": "",
"_objFlags": 0,
"_native": "",
"data": {
"__id__": 1
},
"optimizationPolicy": 0,
"asyncLoadAssets": false,
"readonly": false
},
{
"__type__": "cc.Node",
"_name": "p2",
"_objFlags": 0,
"_parent": null,
"_children": [
{
"__id__": 2
},
{
"__id__": 5
},
{
"__id__": 8
}
],
"_active": true,
"_components": [
{
"__id__": 11
}
],
"_prefab": {
"__id__": 12
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1920,
"height": 1037
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Node",
"_name": "txt_gameplay",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 3
}
],
"_prefab": {
"__id__": 4
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 571,
"height": 99
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
288.923,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "b3495436-a00a-4edd-a8de-c2adefcdaeaf"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2b6194a6-8a92-4796-9271-cffeb3ca995a"
},
"fileId": "87vb53UvpOj5ar5es6Wyxz",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "txt_battle",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 6
}
],
"_prefab": {
"__id__": 7
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 392,
"height": 36
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
228.887,
127.576,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "5253ea61-3bc7-44d9-aed5-42f11ff236c4"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2b6194a6-8a92-4796-9271-cffeb3ca995a"
},
"fileId": "67NCHChWZLTI7Yt67XExvJ",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "btn_watch",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 9
}
],
"_prefab": {
"__id__": 10
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 295,
"height": 100
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
291,
-20.5,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "fb8a39ba-c5a8-43c1-b649-d2ce64d35046"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2b6194a6-8a92-4796-9271-cffeb3ca995a"
},
"fileId": "5769gtX85I/oulvb/CzGmI",
"sync": false
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "95ed6133-8c38-4789-9717-e058180ceb6d"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2b6194a6-8a92-4796-9271-cffeb3ca995a"
},
"fileId": "",
"sync": false
}
]

Binary file not shown.

After

Width:  |  Height:  |  Size: 985 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 685 B

View File

@ -0,0 +1,106 @@
<template>
<div class="card">
<img class="bg-img" src="@/assets/main/p3/bg_card.png">
<div class="anim-border">
<spine-view class="hero-anim" :data="data" :key="data.id"></spine-view>
<img class="corner" src="@/assets/main/p3/bg_card_corner.png">
<div class="info-div">
<img class="name-img" src="@/assets/main/p3/racoon.png">
<span class="index-label">#01</span>
<span class="price-label">100 USD</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ISpineData } from '@/utils/SpineRender'
import SpineView from '@/components/main/SpineView.vue'
declare module 'vue/types/vue' {
interface Vue {
data: ISpineData
}
}
@Component({
name: 'Card',
components: {
SpineView
},
props: ['data']
})
export default class extends Vue {
private hero: ISpineData = { id: 'hero2_10', skelName: 'pic_hero9', animName: 'animation', repeat: true, scale: 1.4 }
}
</script>
<style lang="scss" scoped>
.card{
position: relative;
}
.bg-img {
width: 297px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.anim-border {
width: 287px;
position: absolute;
left: 0;
top: 0;
height: 465px;
margin-left: 13px;
overflow: hidden;
}
.corner {
position: absolute;
right: 0;
bottom: 0;
}
.hero-anim{
width: 500px;
height: 700px;
position: absolute;
left: -100px;
top: -100px;
right: 0;
margin-left: auto;
margin-right: auto;
}
.info-div {
background-image: url('~@/assets/main//p3/btn_name.png');
width: 270px;
height: 115px;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.name-img {
height: 39px;
width: auto;
}
.index-label {
color: #8FFCEF;
font-weight: bold;
text-shadow: 0 0 10px #8FFCEF,0 0 20px #8FFCEF,0 0 30px #8FFCEF,0 0 40px #8FFCEF;
}
.price-label {
color: black;
font-size: 24px;
margin-top: 13px;
font-weight: bold;
}
</style>

View File

@ -0,0 +1,193 @@
<template>
<div class="nft-list">
<div class="list-container" id="list-container" ref="listContainer">
<div class="scroll-content"
:style="scrollStyle"
>
<div v-for="(datas, index) in cardDatas" :key="index"
class="card-container"
>
<card v-for="data in datas" :data="data" :key="data.id"></card>
</div>
</div>
</div>
<div class="action-bar">
<img class="left-btn" src="@/assets/main/p3/icon_left.png" @click="toLeft">
<div class="page-ctrl">
<div class="page-icon"
v-for="(datas, index) in cardDatas"
@click="toPage(index)"
:key="index" :class="index===currentPage? 'selected': ''"></div>
</div>
<img class="right-btn" src="@/assets/main/p3/icon_left.png" @click="toRight">
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Card from '@/components/main/Card.vue'
import { ISpineData } from '@/utils/SpineRender'
@Component({
name: 'CardScroller',
props: ['datas'],
components: {
Card
}
})
export default class extends Vue {
private heros: ISpineData[] = [
{ id: 'hero_n1', skelName: 'pic_hero2', animName: 'animation', repeat: true, scale: 1.4 },
{ id: 'hero_n2', skelName: 'pic_hero3', animName: 'animation', repeat: true, scale: 1.4 },
{ id: 'hero_n3', skelName: 'pic_hero9', animName: 'animation', repeat: true, scale: 1.4 },
{ id: 'hero_n4', skelName: 'pic_hero1', animName: 'animation', repeat: true, scale: 1.4 },
{ id: 'hero_n5', skelName: 'pic_hero10', animName: 'animation', repeat: true, scale: 1.4 }
]
private cardDatas: ISpineData[][] = []
private currentPage = 0
private totalPage = 1
private pageSize = 4
private scrollWidth = 100
private scrollLeft = 0
private scrolling = false
private scrollTime = 1
created() {
let count = 0
// this.scrollWidth = window.getComputedStyle(this.$refs.listContainer).width
this.totalPage = Math.ceil(this.heros.length / this.pageSize)
let datas: ISpineData[] = []
for (let i = 0; i < this.heros.length; i++) {
if (count++ < this.pageSize) {
datas.push(this.heros[i])
} else {
count = 0
this.cardDatas.push(datas)
datas = []
datas.push(this.heros[i])
}
}
this.cardDatas.push(datas)
const self = this
Vue.nextTick(function() {
self.scrollWidth = self.$refs.listContainer?.offsetWidth
console.log('scrollWidth:', self.scrollWidth)
})
}
get scrollStyle() {
return {
left: this.scrollLeft + 'px',
'-webkit-transition': `left ${this.scrollTime}s`,
transition: `left ${this.scrollTime}s`
}
}
toLeft() {
if (!this.scrolling && this.currentPage > 0) {
this.currentPage--
this.scrolling = true
const self = this
const target = -(this.currentPage * this.scrollWidth)
this.changePos(target, 20, function() {
console.log('toLeft end:', self.scrollLeft)
self.scrolling = false
})
}
}
toRight() {
if (!this.scrolling && this.currentPage < this.totalPage - 1) {
this.currentPage++
const self = this
this.scrolling = true
const target = -(this.currentPage * this.scrollWidth)
this.changePos(target, -20, function() {
console.log('toRight end:', self.scrollLeft)
self.scrolling = false
})
}
}
toPage(index: number) {
if (index === this.currentPage || this.scrolling) {
return
}
this.scrolling = true
const self = this
const target = -(index * this.scrollWidth)
const step = index > this.currentPage ? -20 : 20
this.currentPage = index
this.changePos(target, step, function() {
console.log('toPage end:', self.scrollLeft)
self.scrolling = false
})
}
changePos(target: number, step: number, cb: ()=>void) {
this.scrollLeft = target
setTimeout(function() {
cb()
}, this.scrollTime * 1000)
}
}
</script>
<style lang="scss" scoped>
.nft-list {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 766px;
display: flex;
flex-direction: column;
align-items: center;
}
.list-container {
width: 80vw;
height: 570px;
overflow: hidden;
position: relative;
}
.scroll-content {
display: flex;
position: absolute;
left: 0;
top: 0;
}
.card-container{
display: flex;
width: 80vw;
}
.card{
width: 320px;
height: 550px;
flex: 0 0 auto;
}
.action-bar {
display: flex;
width: 90vw;
justify-content: space-between;
}
.right-btn {
transform: rotateY(180deg);
}
.page-ctrl {
display: flex;
align-items: center;
}
.page-icon{
height: 45px;
width: 221px;
background-image: url('~@/assets/main/p3/icon_deselect.png');
background-repeat: no-repeat;
background-position: center;
}
.page-icon.selected{
background-image: url('~@/assets/main/p3/icon_selected.png');
}
</style>

View File

@ -1,22 +1,112 @@
<template>
<section id="gameplay_section" data-anchor="gameplay"></section>
<section id="gameplay_section" data-anchor="gameplay">
<div class="title">
<img src="@/assets/main/p2/txt_gameplay.png">
<span class="tips">hi you ar</span>
</div>
<div class="color-view">
<img class="logo_t" src="@/assets/main/p1/icon_logo_t.png">
<img class="logo_b" src="@/assets/main/p2/txt_battle.png">
<span class="text">some thing error</span>
<img class="watch_btn" src="@/assets/main/p2/btn_watch.png">
</div>
<spine-view class="hero-anim" :data="hero" :key="hero.id"></spine-view>
<div class="bottom-cover"></div>
</section>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ISpineData } from '@/utils/SpineRender'
import SpineView from '@/components/main/SpineView.vue'
@Component({
name: 'GamePlaySection',
components: {
SpineView
}
})
export default class extends Vue {
private hero: ISpineData = { id: 'hero10', skelName: 'pic_hero10', animName: 'animation', repeat: true, scale: 1.2 }
}
</script>
<style lang="scss" scoped>
#gameplay_section {
background-image: url('~@/assets/main//p2/bg_p2.png');
background-image: url('~@/assets/main/p2/bg_p2.png');
position: relative;
}
.title {
display: flex;
flex-direction: column;
position: absolute;
left: 0;
top: 38px;
right: 0;
margin: auto;
width: 50vw;
height: 200px;
}
.title img{
width: 545px;
height: auto;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.title .tips {
color: white;
font-size: 28px;
}
.color-view {
background-image: url('~@/assets/main/p2/bg_watch.png');
background-repeat: no-repeat;
width: 78vw;
height: 30vw;
right: 0;
bottom: 18vh;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding-bottom: 77px;
padding-top: 20px;
}
.logo_t {
width: 151px;
height: 112px;
}
.logo_b{
width: 392px;
height: 36px;
}
.color-view .text{
color: white;
font-size: 28px;
}
.watch_btn {
width: 300px;
height: 104px;
z-index: 10;
}
.hero-anim {
width: 600px;
height: 800px;
position: absolute;
left: 100px;
bottom: 10px;
}
.bottom-cover{
position: absolute;
left: 0;
right: 0;
height: 50vh;
bottom: 0;
background-image: url('~@/assets/main/p2/bg_bottom.png');
background-repeat: repeat-x;
}
</style>

View File

@ -11,23 +11,32 @@
</div>
</div>
<div class="home_right_panel">
<canvas id="home_canvas">
</canvas>
<div class="spine-list">
<spine-view class="hero-anim" v-for="hero in heros" :data="hero" :key="hero.id"></spine-view>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import SpineView from '@/components/main/SpineView.vue'
import { ISpineData } from '@/utils/SpineRender'
@Component({
name: 'HomeSection',
components: {
SpineView
}
})
export default class extends Vue {
private heros: ISpineData[] = [
{ id: 'hero1', skelName: 'pic_hero2', animName: 'animation', repeat: true },
{ id: 'hero2', skelName: 'pic_hero3', animName: 'animation', repeat: true },
{ id: 'hero3', skelName: 'pic_hero9', animName: 'animation', repeat: true },
{ id: 'hero4', skelName: 'pic_hero1', animName: 'animation', repeat: true }
]
}
</script>
@ -38,4 +47,42 @@ export default class extends Vue {
flex-direction: row;
justify-content: space-between;
}
.home_left_panel{
/* position: absolute;
left: 20px;
top: 60px;*/
width: 686px;
height: 100%;
display: flex;
flex-direction: column;
transform: scale(0.8);
}
.home_left_panel .one_row{
margin-bottom: 10px;
}
.home_left_panel .one_row:first-child{
margin-left: -43px;
}
.version_list_panel {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-right: 30px;
}
.home_right_panel {
width: 60%;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.spine-list{
display: flex;
}
.hero-anim {
width: 400px;
height: 800px;
margin-left: -90px;
margin-right: -90px;
}
</style>

View File

@ -98,10 +98,7 @@ export default class extends Vue {
margin-bottom: 0;
}
.menu_fullpage ul li {
padding-top: 28px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0;
padding: 28px 10px 0;
display: list-item;
text-align: -webkit-match-parent;
margin-left: 30px;

View File

@ -1,22 +1,58 @@
<template>
<section id="nft_section" data-anchor="nft"></section>
<section id="nft_section" data-anchor="nft">
<div class="title">
<img src="@/assets/main/p3/txt_title.png">
<span class="text">how old are you</span>
</div>
<card-scroller class="card-scroller"></card-scroller>
</section>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import CardScroller from '@/components/main/CardScroller.vue'
import { ISpineData } from '@/utils/SpineRender'
@Component({
name: 'NftSection',
components: {
CardScroller
}
})
export default class extends Vue {
}
</script>
<style lang="scss" scoped>
#nft_section {
background-image: url('~@/assets/main//p3/bg_p3.png');
position: relative;
}
.title {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.title img {
width: 562px;
height: auto;
}
.title .text{
color: white;
font-size: 28px;
}
.card-scroller {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 766px;
}
</style>

View File

@ -0,0 +1,49 @@
<template>
<canvas class="spine-canvas" :id="data.id"></canvas>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ISpineData, SpineRender } from '@/utils/SpineRender'
declare module 'vue/types/vue' {
interface Vue {
data: ISpineData
}
}
@Component({
name: 'SpineView',
props: ['data'],
components: {
}
})
export default class extends Vue {
created() {
this.showAnim((canvas: HTMLCanvasElement) => {
const spineCard = new SpineRender(canvas)
spineCard.init(this.data)
})
}
showAnim(cb: (result: HTMLCanvasElement) => void) {
const self = this
const canvas = document.getElementById(this.data!.id) as HTMLCanvasElement
if (!canvas) {
setTimeout(function() {
self.showAnim(cb)
}, 1000)
} else {
cb(canvas)
}
}
}
</script>
<style lang="scss" scoped>
.spine-canvas{
width: 100px;
height: 200px;
}
</style>

1596
src/spine-webgl.d.ts vendored Executable file

File diff suppressed because it is too large Load Diff

185
src/utils/SpineRender.ts Normal file
View File

@ -0,0 +1,185 @@
export interface ISpineData {
id: string
skelName: string
animName: string
repeat: boolean
scale?: number
}
export class SpineRender {
private mvp : spine.webgl.Matrix4
private canvas: HTMLCanvasElement
private lastFrameTime: number
private skeletons: any = {}
private pathBase: string
private gl: WebGLRenderingContext
private skelName = ''
private animName = ''
private shader: spine.webgl.Shader
private batcher: spine.webgl.PolygonBatcher
private skeletonRenderer
private shapes
private assetManager
private scale = 1.5
constructor(canvas: HTMLCanvasElement) {
const config = { alpha: true }
this.mvp = new spine.webgl.Matrix4()
this.lastFrameTime = Date.now() / 1000
this.canvas = canvas
this.skeletons = {}
this.pathBase = 'assets/spines/'
this.gl = this.canvas.getContext('webgl', config) as WebGLRenderingContext || this.canvas.getContext('experimental-webgl', config) as WebGLRenderingContext
if (!this.gl) {
alert('WebGL is unavailable.')
}
this.shader = spine.webgl.Shader.newTwoColoredTextured(this.gl)
this.batcher = new spine.webgl.PolygonBatcher(this.gl)
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this.skeletonRenderer = new spine.webgl.SkeletonRenderer(this.gl)
this.shapes = new spine.webgl.ShapeRenderer(this.gl)
this.assetManager = new spine.webgl.AssetManager(this.gl)
}
init({ skelName, animName, scale, repeat }: ISpineData) {
this.skelName = skelName
this.animName = animName
this.scale = scale || this.scale
// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
this.mvp.ortho2d(0, 0, this.canvas.width - 1, this.canvas.height - 1)
this.assetManager.loadText(this.pathBase + skelName + '.json')
this.assetManager.loadText(this.pathBase + skelName + '.atlas')
this.assetManager.loadTexture(this.pathBase + skelName + '.png')
requestAnimationFrame(this.load.bind(this))
}
load() {
// Wait until the AssetManager has loaded all resources, then load the skeletons.
if (this.assetManager.isLoadingComplete()) {
this.skeletons[this.skelName] = this.loadSkeleton(this.skelName, this.animName, true)
requestAnimationFrame(this.render.bind(this))
} else {
requestAnimationFrame(this.load.bind(this))
}
}
loadSkeleton(name: string, initialAnimation: string, premultipliedAlpha: boolean, skin = 'default') {
// Load the texture atlas using name.atlas and name.png from the AssetManager.
// The function passed to TextureAtlas is used to resolve relative paths.
const self = this
const atlas = new spine.TextureAtlas(this.assetManager.get(this.pathBase + name + '.atlas'), function(path: string) {
return self.assetManager.get(self.pathBase + path)
})
// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
const atlasLoader = new spine.AtlasAttachmentLoader(atlas)
// Create a SkeletonJson instance for parsing the .json file.
const skeletonJson = new spine.SkeletonJson(atlasLoader)
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
const skeletonData = skeletonJson.readSkeletonData(this.assetManager.get(this.pathBase + name + '.json'))
const skeleton = new spine.Skeleton(skeletonData)
skeleton.setSkinByName(skin)
const bounds = this.calculateBounds(skeleton)
// Create an AnimationState, and set the initial animation in looping mode.
const animationStateData = new spine.AnimationStateData(skeleton.data)
const animationState = new spine.AnimationState(animationStateData)
animationState.setAnimation(0, initialAnimation, true)
animationState.addListener({
start: function(track: spine.TrackEntry) {
console.log('Animation on track ' + track.trackIndex + ' started')
},
interrupt: function(track: spine.TrackEntry) {
console.log('Animation on track ' + track.trackIndex + ' interrupted')
},
end: function(track: spine.TrackEntry) {
console.log('Animation on track ' + track.trackIndex + ' ended')
},
dispose: function(track: spine.TrackEntry) {
console.log('Animation on track ' + track.trackIndex + ' disposed')
},
complete: function(track: spine.TrackEntry) {
console.log('Animation on track ' + track.trackIndex + ' completed')
},
event: function(track: spine.TrackEntry, event: spine.Event) {
console.log('Event on track ' + track.trackIndex + ': ' + JSON.stringify(event))
}
})
// Pack everything up and return to caller.
return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha }
}
calculateBounds(skeleton: any) {
skeleton.setToSetupPose()
skeleton.updateWorldTransform()
const offset = new spine.Vector2()
const size = new spine.Vector2()
skeleton.getBounds(offset, size, [])
return { offset: offset, size: size }
}
render() {
const now = Date.now() / 1000
const delta = now - this.lastFrameTime
this.lastFrameTime = now
// Update the MVP matrix to adjust for canvas size changes
this.resize()
this.gl.clearColor(0, 0, 0, 0)
this.gl.clear(this.gl.COLOR_BUFFER_BIT)
// Apply the animation state based on the delta time.
const state = this.skeletons[this.skelName].state
const skeleton = this.skeletons[this.skelName].skeleton
const premultipliedAlpha = this.skeletons[this.skelName].premultipliedAlpha
state.update(delta)
state.apply(skeleton)
skeleton.updateWorldTransform()
// Bind the shader and set the texture and model-view-projection matrix.
this.shader.bind()
this.shader.setUniformi(spine.webgl.Shader.SAMPLER, 0)
this.shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values)
// Start the batch and tell the SkeletonRenderer to render the active skeleton.
this.batcher.begin(this.shader)
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha
this.skeletonRenderer.draw(this.batcher, skeleton)
this.batcher.end()
this.shader.unbind()
requestAnimationFrame(this.render.bind(this))
}
resize() {
const w = this.canvas.clientWidth
const h = this.canvas.clientHeight
const bounds = this.skeletons[this.skelName].bounds
if (this.canvas.width !== w || this.canvas.height !== h) {
this.canvas.width = w
this.canvas.height = h
}
// magic
const centerX = bounds.offset.x + bounds.size.x / 2
const centerY = bounds.offset.y + bounds.size.y / 2
const scaleX = bounds.size.x / this.canvas.width
const scaleY = bounds.size.y / this.canvas.height
let scale = Math.max(scaleX, scaleY) * this.scale
if (scale < 1) scale = 1
const width = this.canvas.width * scale
const height = this.canvas.height * scale
this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height)
this.gl.viewport(0, 0, this.canvas.width, this.canvas.height)
}
}

View File

@ -12,6 +12,7 @@
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"allowJs": true,
"types": [
"webpack-env"
],