Initial commit

lackofbindings · May 31, 2024 · 3e0653b · 3e0653b
commit 3e0653b
Show file tree

Hide file tree

Showing 6 changed files with 230 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/tests/
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Lackofbindings
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,27 @@
+# Unity Mask Combiner
+
+Did you know must Unity files are just easily-editable plaintext?
+If you open a Unity Avatar Mask in a text editor you can modify it manually.
+This Project simplifies that process.
+
+Note: Tested in and designed for Unity 2019, for use with VRChat.
+
+You can access the tool here: https://lackofbindings.github.io/unity-mask-combiner/
+
+## Instructions
+Say you have an Avatar Mask in Unity already set up, but now you've made some changes to your armature, and theres no way to update the mask in Unity without re-importing the avatar to the mask and re-checking all those boxes from scratch.
+1. Create a new mask and import the new armature, this will be the **Source mask** (you can optionally check any bones here and that will be merged as well)
+2. **Save**! This is important, Unity does not write out to asset files until you save!
+3. Drag the **Source mask** file into the `Source` slot (top) of this tool.
+4. Find the original mask in file explorer, this will be the **Destination mask**.
+5. Drag the **Destination mask** file into the `Destination` slot (bottom) of this tool.
+6. Click the `Combine` button and the transform masks will be *additively* merged into the `Destination` slot.
+7. Open the **Destination mask** file in a text editor. 
+8. You can now copy the contents of the `Destination` slot, and paste it into the **Destination** mask file in the text editor.
+9. Save the text editor, and if you have Unity auto-refresh off, right-click the Unity asset browser and click `Refresh`.
+
+The **Destination mask** should now contain the combined paths of both masks, and items should be checked where they were checked in either mask (*additive*).
+
+-----
+
+Works well with [austintaylorx's MakeAvatarMask](https://forum.unity.com/threads/how-to-create-an-avatar-mask-for-custom-gameobject-hierarchy-from-scene.574270/#post-4398478)
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Unity Mask Combiner</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+    <script src='main.js'></script>
+</head>
+<body>
+    <form id="form_main">
+        <textarea id="inputA" name="inputA" required placeholder="Source Mask"></textarea>
+        <textarea id="inputB" name="inputB" required placeholder="Destination Mask"></textarea>
+        <div class="controls">
+            <button type="submit">Combine</button>
+            <button type="reset">Clear</button>    
+        </div>
+        <p>Items from the <b>Source Mask</b> mask will be combined additively into the <b>Destination Mask</b>.<br>
+            Copy the result from the <b>Destination Mask</b> out to your .mask file after combining.
+        </p>
+        <p><i>Note: The Humanoid part of the mask is ignored, whatever is set in the destination mask will be unchanged.</i></p>
+    </form>
+</body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,53 @@
+* {
+    box-sizing: border-box;
+}
+html, body {
+    height: 100%;
+}
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+	background-color: #383838;
+	color: #E8E8E8;
+	font-family: sans-serif;
+}
+button, input, textarea {
+	background-color: #585858;
+	border-color: #585858;
+	color: inherit;
+	padding: 1em;
+}
+button {
+    border-style: solid;
+}
+#form_main {
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 1em
+}
+#form_main > textarea {
+    flex-grow: 1;
+    white-space: pre;
+    overflow-wrap: normal;
+    overflow-x: scroll;
+	padding: 1em;
+	border-style: solid;
+	background-color: #383838;
+}
+
+.controls {
+    display: flex;
+}
+.controls > * {
+    flex-grow: 1;
+    margin-right: 2px;
+}
+.controls > button[type=reset] {
+    flex-grow: 0;
+    min-width: 10em;
+    margin-right: 0;
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,103 @@
+window.addEventListener('load',()=>{
+    const form = document.querySelector('#form_main');
+    const inputElA = form.children.inputA;
+    const inputElB = form.children.inputB;
+
+    form.addEventListener('submit', e=>{
+        e.preventDefault();
+        // console.debug('onSubmit', e);
+        try {
+            const formData = new FormData(e.target);
+            const data = Array.from(formData.entries()).reduce((obj, pair)=>{obj[pair[0]] = pair[1]; return obj}, {});
+            const { inputA, inputB } = data;
+
+            const {items: itemsA} = parseMask(inputA);
+            const {header: headerB, items: itemsB} = parseMask(inputB);
+
+            const resultItems = combineMasks(itemsA, itemsB);
+
+            inputElB.value = stringifyMask(headerB, resultItems);
+            inputElA.value = "Items from this mask combined into mask B";
+
+            console.debug(headerB, resultItems);
+        } catch (error) {
+            console.error(error);
+            inputElB.value = error;
+        }
+
+        return false;
+    });
+
+    inputElA.ondrop = onDropFile;
+    inputElB.ondrop = onDropFile;
+    inputElA.ondragover = preventDefault;
+    inputElB.ondragover = preventDefault;
+
+    function preventDefault(e){
+        e.preventDefault() 
+    }
+
+    function onDropFile(e){
+        // console.debug('onDrop', e);
+        e.preventDefault();
+        const file = e.dataTransfer.files[0];
+        dropFile(file).then(res=>{
+            e.target.value = res;
+        }).catch(e=>{
+            e.target.value = e;
+        })
+    }
+
+    function dropFile(file) {
+        return new Promise((resolve, reject)=>{
+            const reader = new FileReader();
+            reader.onload = e=> {
+                resolve(e.target.result);
+            };
+            reader.onerror = e=> {
+                reject(e);
+            };
+            reader.readAsText(file, "UTF-8");
+        });
+    }
+
+    function combineMasks(itemsA, itemsB){
+        const allPaths = new Set([...Object.keys(itemsA), ...Object.keys(itemsB)]);
+        const result = {};
+        for(let path of allPaths){
+            const weight = parseInt(itemsA[path]) || parseInt(itemsB[path]) || 0;
+            result[path] = (weight + '');
+        }
+        return result;
+    }
+
+    function stringifyMask(header, items){
+        return header + '\n' + Object.keys(items).filter(key=>items.hasOwnProperty(key)).sort().reduce((str,key)=>{
+            return `${str}  - m_Path: ${key}    m_Weight: ${items[key]}\n`;
+        },'');
+    }
+
+    function parseMask(str){
+        const headerWithout = str.split(/^%YAML[\w\W]+m_Elements:/)[1];
+        const headerEndIndex = str.length - (headerWithout && headerWithout.length);
+        if(!headerWithout || headerEndIndex <= 0) throw new Error('YAML header not found, is the input a mask?');
+        const header = str.substring(0, headerEndIndex);
+        const itemsBody = str.substring(headerEndIndex, str.length);
+        const itemsStrings = itemsBody.match((/(?:\s{2}-\sm_Path:\s)([\w\W]+?)(?:\s{4}m_Weight:\s)(\d)/gm));
+
+        const empty = (!itemsStrings && (/\s*\[\]\s*/).test(itemsBody));
+
+        const items = empty? {} : itemsStrings.reduce((obj,item)=>{
+            const parts = (/(?:\s{2}-\sm_Path:\s)([\w\W]+?)(?:\s{4}m_Weight:\s)(\d)/gm).exec(item);
+            if(!parts){
+                throw new Error(`regex failed to match item "${item}"`);
+            }
+            const path = parts[1];
+            const weight = parts[2];
+            obj[path] = weight;
+            return obj;
+        },{});
+
+        return {header, items};
+    }
+})