Skip to content

Commit

Permalink
fixed render by drop function, thanks @Cpk0521
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex94539
alex94539 committed Apr 1, 2024
1 parent 79c6bac commit 0e7eeb3
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 70 deletions.
4 changes: 2 additions & 2 deletions m_main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<link rel="shortcut icon" href="./assets/favicon.ico" />
<link rel="bookmark" href="./assets/favicon.ico" />

<script src="https://pixijs.download/v7.2.4/pixi.min.js"></script>
<script src="https://pixijs.download/v7.2.4/pixi-legacy.min.js"></script>
<script src="https://pixijs.download/v7.3.2/pixi.min.js"></script>
<script src="https://pixijs.download/v7.3.2/pixi-legacy.min.js"></script>
<script src="./pixi-spine.js"></script>

<!-- Primary Meta Tags -->
Expand Down
4 changes: 2 additions & 2 deletions main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<link rel="shortcut icon" href="./assets/favicon.ico" />
<link rel="bookmark" href="./assets/favicon.ico" />

<script src="https://pixijs.download/v7.2.4/pixi.min.js"></script>
<script src="https://pixijs.download/v7.2.4/pixi-legacy.min.js"></script>
<script src="https://pixijs.download/v7.3.2/pixi.min.js"></script>
<script src="https://pixijs.download/v7.3.2/pixi-legacy.min.js"></script>
<script src="./pixi-spine.js"></script>

<!-- Primary Meta Tags -->
Expand Down
108 changes: 45 additions & 63 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ const dropLoader = PIXI.Assets, cont = new PIXI.Container();
const SML0 = "sml_cloth0", SML1 = "sml_cloth1", BIG0 = "big_cloth0", BIG1 = "big_cloth1";
const urlParams = new URLSearchParams(window.location.search);

// State
let isContinuousShootingEnabled = false

const idolMap = new Map();
const spineMap = new Map();

Expand All @@ -17,7 +14,7 @@ const migrateMap = {
"sml_cloth1": "cb_costume",
"big_cloth0": "stand",
"big_cloth1": "stand_costume",
}
};

function dropHandler(event) {
event.preventDefault();
Expand Down Expand Up @@ -51,17 +48,18 @@ function dropHandler(event) {

if (pathAtlas && pathTexture && pathJSON) {
PIXI.Assets.add({
src: pathJSON,
alias: "dropJson",
src: pathJSON,
format: 'json',
loadParser: 'loadJson'
});
PIXI.Assets.add({
src: pathAtlas,
alias: "dropAtlas",
format: 'text',
format: 'txt',
loadParser: 'loadTxt'
});

PIXI.Assets.load(["dropJson", "dropAtlas"]).then(() => {
renderByDrop(pathTexture);
});
Expand All @@ -79,14 +77,17 @@ async function renderByDrop(dataTexture) {
const rawJson = PIXI.Assets.get("dropJson");
const rawAtlas = PIXI.Assets.get("dropAtlas");
const rawTexture = await blobToBase64(dataTexture);
console.log(rawJson, rawAtlas, rawTexture);
const spineAtlas = new PIXI.spine.core.TextureAtlas(rawAtlas, (_, callback) => {
// console.log(rawJson, rawAtlas, rawTexture);
const spineAtlas = new PIXI.spine.TextureAtlas(rawAtlas, (line, callback) => {
line = rawTexture;
callback(PIXI.BaseTexture.from(rawTexture));
});
const spineAtlasLoader = new PIXI.spine.core.AtlasAttachmentLoader(spineAtlas);
const spineJsonParser = new PIXI.spine.core.SkeletonJson(spineAtlasLoader);
const spineData = spineJsonParser.readSkeletonData(rawJson);
await setupAnimationList(spineData);
// const spineAtlasLoader = new PIXI.spine.AtlasAttachmentLoader(spineAtlas);
// console.log(spineAtlasLoader)
// const spineJsonParser = new PIXI.spine.SkeletonJson(spineAtlasLoader);
const spineJsonParser = new PIXI.spine.SkeletonJson();
const spineData = spineJsonParser.readSkeletonData(spineAtlas, rawJson);
setupAnimationList(spineData);
}

function toastInit() {
Expand All @@ -101,11 +102,6 @@ function toastInit() {
}
}

function tooltipInit() {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
}

function toMobileUI() {
window.location.href = "https://mspine.shinycolors.moe";
}
Expand All @@ -123,7 +119,6 @@ async function init() {
}

toastInit();
tooltipInit();
const canvas = document.getElementById("canvas"), resetBtn = document.getElementById("resetAnimation");

app = new PIXI.Application({
Expand All @@ -141,21 +136,15 @@ async function init() {

resetBtn.onclick = () => {
resetAllAnimation();
}

const continuousShootingModeSwitch = document.getElementById("continuousShootingModeSwitch")
continuousShootingModeSwitch.addEventListener("change", (event) => {
isContinuousShootingEnabled = event.target.checked
// console.info(`enableContinuousShooting:${isContinuousShootingEnabled}`)
})
};

fetch("https://api.shinycolors.moe/spine/idollist").then(async (response) => {
const idolInfo = await response.json();
const idolInfoMap = new Map();
idolInfo.forEach((element) => {
idolInfoMap.set(element.idolId, element);
});
await setupIdolList(idolInfoMap);
setupIdolList(idolInfoMap);
});

_hello();
Expand All @@ -173,7 +162,7 @@ function _hello() {
console.log(...log);
}

async function setupIdolList(idolInfo) {
function setupIdolList(idolInfo) {
const idolList = document.getElementById("idolList");
let idolId = urlParams.has("idolId") ? Number(urlParams.get("idolId")) : 1,
idolName = idolInfo.get(idolId).idolName;
Expand All @@ -189,13 +178,13 @@ async function setupIdolList(idolInfo) {
idolList.appendChild(option);
});

idolList.onchange = async () => {
idolList.onchange = () => {
idolId = idolList.value;
idolName = idolInfo.get(Number(idolId)).idolName;
await testAndLoadDress(idolId, idolName);
testAndLoadDress(idolId, idolName);
};

await testAndLoadDress(idolId, idolName);
testAndLoadDress(idolId, idolName);
}
/*
function testAndLoadPreset(idolId) {
Expand All @@ -213,32 +202,32 @@ function setupPreset(presetList) {

}

async function testAndLoadDress(idolId, idolName) {
function testAndLoadDress(idolId, idolName) {
if (!idolMap.has(idolName)) {
if (idolId == 0) {
fetch(`https://cf-static.shinycolors.moe/others/hazuki.json`).then(async (response) => {
idolMap.set(idolName, await response.json());
await setupDressList(idolMap.get(idolName));
setupDressList(idolMap.get(idolName));
});
}
else {
fetch(`https://api.shinycolors.moe/spine/dressList?idolId=${idolId}`).then(async (response) => {
idolMap.set(idolName, await response.json());
await setupDressList(idolMap.get(idolName));
setupDressList(idolMap.get(idolName));
});
}
}
else {
await setupDressList(idolMap.get(idolName));
setupDressList(idolMap.get(idolName));
}
}

async function setupDressList(idolDressList) {
function setupDressList(idolDressList) {
const dressList = document.getElementById("dressList");
dressList.innerHTML = "";

let lastType = "P_SSR", optGroup = document.createElement("optgroup");
optGroup.label = "P_SSR";
optGroup.label = "P_SSR";
let arrayOrder = 0;

idolDressList.forEach((element, index) => {
Expand Down Expand Up @@ -273,15 +262,15 @@ async function setupDressList(idolDressList) {
});
dressList.appendChild(optGroup);

dressList.onchange = async () => {
dressList.onchange = () => {
arrayOrder = dressList.value;
await setupTypeList(idolDressList[arrayOrder]);
setupTypeList(idolDressList[arrayOrder]);
};

await setupTypeList(idolDressList[arrayOrder]);
setupTypeList(idolDressList[arrayOrder]);
}

async function setupTypeList(dressObj) {
function setupTypeList(dressObj) {
const typeList = document.getElementById("typeList");
let dressType;
typeList.innerHTML = "";
Expand Down Expand Up @@ -366,50 +355,50 @@ async function setupTypeList(dressObj) {
}
}

typeList.onchange = async () => {
typeList.onchange = () => {
const dressList = document.getElementById("dressList");
dressType = typeList.value;

if (dressObj.idolId == 0) {
await testAndLoadAnimation(dressList.options[dressList.selectedIndex].getAttribute("path"), dressType, true);
testAndLoadAnimation(dressList.options[dressList.selectedIndex].getAttribute("path"), dressType, true);
}
else {
await testAndLoadAnimation(dressList.options[dressList.selectedIndex].getAttribute("enzaId"), dressType);
testAndLoadAnimation(dressList.options[dressList.selectedIndex].getAttribute("enzaId"), dressType);
}
};

if (dressObj.idolId == 0) {
await testAndLoadAnimation(dressObj.path, dressType, true);
testAndLoadAnimation(dressObj.path, dressType, true);
}
else {
await testAndLoadAnimation(dressObj.enzaId, dressType);
testAndLoadAnimation(dressObj.enzaId, dressType);
}

}

async function testAndLoadAnimation(enzaId, type, flag = false) {
function testAndLoadAnimation(enzaId, type, flag = false) {
if (!spineMap.has(`${enzaId}/${type}`)) {
if (flag) {
PIXI.Assets.load(`https://cf-static.shinycolors.moe/spine/sub_characters/${migrateMap[type]}/${enzaId}`).then(async (resource) => {
PIXI.Assets.load(`https://cf-static.shinycolors.moe/spine/sub_characters/${migrateMap[type]}/${enzaId}`).then((resource) => {
const waifu = resource.spineData;
spineMap.set(`${enzaId}/${type}`, waifu);
await setupAnimationList(waifu);
setupAnimationList(waifu);
});
}
else {
PIXI.Assets.load(`https://cf-static.shinycolors.moe/spine/idols/${migrateMap[type]}/${enzaId}/data.json`).then(async (resource) => {
PIXI.Assets.load(`https://cf-static.shinycolors.moe/spine/idols/${migrateMap[type]}/${enzaId}/data.json`).then((resource) => {
const waifu = resource.spineData;
spineMap.set(`${enzaId}/${type}`, waifu);
await setupAnimationList(waifu);
setupAnimationList(waifu);
});
}
}
else {
await setupAnimationList(spineMap.get(`${enzaId}/${type}`));
setupAnimationList(spineMap.get(`${enzaId}/${type}`));
}
}

async function setupAnimationList(spineData) {
function setupAnimationList(spineData) {
const animationList = document.getElementById("divAnimationBody");
animationList.innerHTML = "";

Expand Down Expand Up @@ -462,7 +451,7 @@ async function setupAnimationList(spineData) {
currentSpine.state.setAnimation(0, currentSpine.spineData.animations[0].name, true);
}

await renderToStage(currentSpine);
renderToStage(currentSpine);
}

function animationOnChange(theInput, trackNo, currentSpine) {
Expand All @@ -485,13 +474,8 @@ function blobToBase64(blob) {
reader.readAsDataURL(blob);
});
}
const clearState = (spine) => {
spine.state.clearTracks();
spine.skeleton.setToSetupPose();
spine.lastTime = null;
};
async function renderToStage(currentSpine) {
if (isContinuousShootingEnabled) { clearState(currentSpine) }

function renderToStage(currentSpine) {
cont.removeChild(cont.children[0]);
cont.addChild(currentSpine);

Expand All @@ -517,8 +501,6 @@ async function renderToStage(currentSpine) {
cont.scale.set(scale);
cont.pivot.set(contLocalBound.width / 2, contLocalBound.height / 2);
cont.position.set(app.view.width / 2, app.view.height / 2);

if (isContinuousShootingEnabled) { await saveImage(); }
}

function resetAllAnimation() {
Expand Down Expand Up @@ -562,7 +544,7 @@ async function saveImage() {
const fileName = `${idolName}-${dressCategory}-${dressName}-${dressType}.png`;
// Windows: <>:"/\|?*
// macOS/Linux : /
const invalidRagex = /[<>:"\/\\|?*\x00-\x1F]/g;
const invalidRagex = /[<>:"\/\\|?*\x00-\x1F]/g;
const validFileName = fileName.replace(invalidRagex, '_');

anchor.download = validFileName;
Expand Down
6 changes: 3 additions & 3 deletions pixi-spine.js
View file

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions pixi-spine1.js
View file

Large diffs are not rendered by default.

0 comments on commit 0e7eeb3

Please sign in to comment.