Hwado Live2Dモデラー

イメージの上にマウスを乗せると
ランダムにセリフが出ます。

(function () { const root = document.getElementById( "interactive-character" ); if (!root || root.dataset.initialized === "true") { return; } root.dataset.initialized = "true"; const portrait = root.querySelector( ".character-portrait" ); const img = root.querySelector( ".character-image" ); const dialog = root.querySelector( ".character-dialog" ); /* ======================================== 이미지 주소 ======================================== */ const imageURLs = { default: "https://framerusercontent.com/images/hYsaoXK4sK33ttE3rKQqcNuCh1I.gif?scale-down-to=512&width=1200&height=1200", x: "https://framerusercontent.com/images/Vj9O7CW9UaPIakjdJ8QCbYC3Fk.png?scale-down-to=512&width=1200&height=1200", o: "https://framerusercontent.com/images/wCRMaXrn7kQ6bgF8w8NnXlnKY.png?scale-down-to=512&width=1200&height=1200" }; /* ======================================== X / O 랜덤 대사 ======================================== */ const dialogues = { x: [ "イラスト制作の依頼は、現在受け付けていません。", "モデル制作時、スクリーントーンの使用は禁止です。", "モデル制作時、オーバーレイの使用は禁止です。", "髪を一枚のパーツに統合しないでください。", "レイヤー名を設定してください。", "左右のパーツを統合しないでください。", "フォルダ全体へのマスク適用は禁止です。", "パーツ周辺を整理してください。", "不可視部分も描画してください。", "未整理の状態で提出しないでください。すべてのパーツを整えてください。", "ファイルを共有しないでください。対象を特定次第、制裁を実行します。", "無断転載・再配布・販売を確認した場合、必要な措置を講じます。", "虫は嫌いです。" ], o: [ "乗算および加算は使用してください。", "線画と塗りを分離してもそんなに問題ありません。", "パーツ分けについては、周囲の方に聞いてみるのが良いです。", "私はそれほど堅苦しいものではありません。お気軽にご質問ください。", "参考資料の送付を許可します。失礼にはあたりません。", "もちもちするのが好き。", "私は健康です。" ] }; let lastDialogue = { x: "", o: "" }; let currentState = "default"; /* ======================================== 이미지 변경 ======================================== */ function setImage(state) { if (currentState === state) return; currentState = state; img.src = imageURLs[state]; } /* ======================================== 기본 상태 ======================================== */ function resetCharacter() { setImage("default"); dialog.textContent = ""; dialog.classList.remove("is-visible"); } /* ======================================== X / O 랜덤 선택 ======================================== */ function activateCharacter() { const state = Math.random() < 0.5 ? "x" : "o"; const list = dialogues[state]; let choices = list.filter(function (line) { return line !== lastDialogue[state]; }); if (choices.length === 0) { choices = list; } const selectedDialogue = choices[Math.floor(Math.random() * choices.length)]; lastDialogue[state] = selectedDialogue; setImage(state); dialog.textContent = selectedDialogue; dialog.classList.add("is-visible"); } /* ======================================== PC: 마우스를 올리면 활성화 ======================================== */ root.addEventListener("pointerenter", function (event) { if (event.pointerType !== "mouse") return; activateCharacter(); }); root.addEventListener("pointerleave", function (event) { if (event.pointerType !== "mouse") return; resetCharacter(); }); /* ======================================== 모바일: 캐릭터를 누르면 활성화 ======================================== */ portrait.addEventListener("click", function (event) { if ( !window.matchMedia( "(hover: none), (pointer: coarse)" ).matches ) { return; } event.stopPropagation(); activateCharacter(); }); /* 배경을 누르면 기본 상태로 복귀 */ document.addEventListener("click", function (event) { if ( !window.matchMedia( "(hover: none), (pointer: coarse)" ).matches ) { return; } if (!root.contains(event.target)) { resetCharacter(); } }); /* X / O 이미지 미리 불러오기 */ [imageURLs.x, imageURLs.o].forEach(function (url) { const preload = new Image(); preload.src = url; }); /* 최초 기본 상태 */ resetCharacter(); })();

• X (Twitter)
• Commission site

• Back

• EN
• KR
• JP

Hwado _ Vtuber

• X (Twitter)
• Chzzk (stream)
• Cime (stream)
• Youtube (archive)

• EN
• KR
• JP

• Back