diff --git a/404.html b/404.html index f9abf1a2..4ea5e1fa 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ Page Not Found | Character Studio - + diff --git a/assets/js/2e160ebc.b05f1c22.js b/assets/js/2e160ebc.b05f1c22.js new file mode 100644 index 00000000..148d6a1d --- /dev/null +++ b/assets/js/2e160ebc.b05f1c22.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[6421],{1876:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>p,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=t(4848),r=t(8453);const i={},o="Optimizer",a={id:"Developers/Pages/optimizer",title:"Optimizer",description:"You can access this page by going to Optimize Character menu button.",source:"@site/docs/Developers/Pages/optimizer.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/optimizer",permalink:"/characterstudio-docs/docs/Developers/Pages/optimizer",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/optimizer.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709352314,formattedLastUpdatedAt:"Mar 2, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Batch Manifest",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-manifest"},next:{title:"Wallet",permalink:"/characterstudio-docs/docs/Developers/Pages/wallet"}},d={},c=[];function l(e){const n={code:"code",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"optimizer",children:"Optimizer"}),"\n",(0,s.jsxs)(n.p,{children:["You can access this page by going to ",(0,s.jsx)(n.code,{children:"Optimize Character"})," menu button."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Summary"})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Optimizer"})," page, allows you to drag and drop an existing vrm file and add optimzation options, such as reducing meshes, manual face culling, reducing material count, and reducing file size by applying sparse accessors to expression shapes."]}),"\n",(0,s.jsx)(n.p,{children:"It uses the drag and drop component to allow the user to drop any vrm file model or animation file into the window."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Logic"})}),"\n",(0,s.jsxs)(n.p,{children:["For this component we want the user to be able to drag and drop a file with ",(0,s.jsx)(n.code,{children:"FileDropComponent"})," and detect wether the user dropped an nft json file (.json), animation file (.fbx) or .vrm file to start the optimization process."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Pre-process Functions:"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleFilesDrop"}),": Function to detect wether the user dropped a manifest, animation, or vrm file(s)."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleVRMDrop"}),": User dropped a VRM file, load the vrm file into the current view. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleAnimationDrop"}),": User dropped an animation file, load the animation into the current displayed character, if no vrm or manifest has been added, this will have no effect. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Process Functions:"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"download"}),": Start optimization and download process for current loaded character."]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Util Functions:"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"back"}),": Go to the previous menu"]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>a});var s=t(6540);const r={},i=s.createContext(r);function o(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2e160ebc.f3128975.js b/assets/js/2e160ebc.f3128975.js deleted file mode 100644 index c020086d..00000000 --- a/assets/js/2e160ebc.f3128975.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[6421],{1876:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>a,toc:()=>d});var o=n(4848),s=n(8453);const r={},i="Optimizer",a={id:"Developers/Pages/optimizer",title:"Optimizer",description:"The Optimizer component is a part of a React application that provides an interface for users to optimize their 3D character models. Users can drop their character files into the component, which then processes the file, optimizes it, and allows the user to download the optimized version. The component also provides options for merging and creating texture atlases, and displays information about the current model.",source:"@site/docs/Developers/Pages/optimizer.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/optimizer",permalink:"/characterstudio-docs/docs/Developers/Pages/optimizer",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/optimizer.md",tags:[],version:"current",lastUpdatedBy:"madjin",lastUpdatedAt:1708577163,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Batch Manifest",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-manifest"},next:{title:"Wallet",permalink:"/characterstudio-docs/docs/Developers/Pages/wallet"}},c={},d=[];function l(e){const t={code:"code",em:"em",h1:"h1",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"optimizer",children:"Optimizer"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"Optimizer"})," component is a part of a React application that provides an interface for users to optimize their 3D character models. Users can drop their character files into the component, which then processes the file, optimizes it, and allows the user to download the optimized version. The component also provides options for merging and creating texture atlases, and displays information about the current model."]}),"\n",(0,o.jsx)(t.p,{children:"In layman's terms, this component is like a workshop for 3D character models. Users can bring their models in, tweak some settings, and then get a more optimized version of their model to use in their projects."}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Imports"})}),"\n",(0,o.jsx)(t.p,{children:"The component imports various hooks from React, styles, contexts, components, and utility functions from different modules."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:'import React, { useContext, useEffect, useState } from "react"\nimport styles from "./Optimizer.module.css"\nimport { ViewMode, ViewContext } from "../context/ViewContext"\nimport { SceneContext } from "../context/SceneContext"\nimport CustomButton from "../components/custom-button"\nimport { LanguageContext } from "../context/LanguageContext"\nimport { SoundContext } from "../context/SoundContext"\nimport { AudioContext } from "../context/AudioContext"\nimport FileDropComponent from "../components/FileDropComponent"\nimport { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils"\nimport ModelInformation from "../components/ModelInformation"\nimport MergeOptions from "../components/MergeOptions"\nimport { local } from "../library/store"\n'})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Component Definition"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"Optimizer"})," component is defined as a functional, no props are required."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:"function Optimizer() {\n // Component body\n}\n"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"State and Context"})}),"\n",(0,o.jsx)(t.p,{children:"The component uses several pieces of state and context to manage its behavior and data."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:'const { \n isLoading, \n setViewMode \n} = React.useContext(ViewContext)\nconst {\n characterManager,\n animationManager,\n sceneElements,\n loraDataGenerator,\n spriteAtlasGenerator\n} = React.useContext(SceneContext)\nconst { playSound } = React.useContext(SoundContext)\nconst { isMute } = React.useContext(AudioContext)\n\nconst [model, setModel] = useState(null);\nconst [nameVRM, setNameVRM] = useState("");\n'})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:"characterManager"})," is the class that holds the logic to load/append vrm models and custom character manifests."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:"animationManager"})," is the class that holds the logic to load animations to current loaded traits."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:"sceneElements"})," all the elements within the scene that dont belong to the character traits."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:"loraDataGenerator"})," is the class that holds the logic to create lora data from loaded vrm files."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:"spriteAtlasGenerator"})," is the class that holds the logic to create 2d animated sprites and spritesheets from the currently loaded vrm files."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Helper Functions"})}),"\n",(0,o.jsx)(t.p,{children:"Several helper functions are defined within the component to handle various tasks such as getting options, downloading the VRM, handling file drops, and more."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:"const back = () => { /* Function body */ }\nconst getOptions = () => { /* Function body */ }\nconst download = () => { /* Function body */ }\nconst handleAnimationDrop = async (file) => { /* Function body */ }\nconst handleVRMDrop = async (file) => { /* Function body */ }\nconst handleFilesDrop = async(files) => { /* Function body */ };\n"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"useEffect Hook"})}),"\n",(0,o.jsxs)(t.p,{children:["A ",(0,o.jsx)(t.code,{children:"useEffect"})," hook is used to perform side effects when the ",(0,o.jsx)(t.code,{children:"currentVRM"})," state changes."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:"useEffect(() => {\n const fetchData = async () => { /* Function body */ }\n fetchData();\n}, [currentVRM])\n"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Render"})}),"\n",(0,o.jsxs)(t.p,{children:["The component returns a JSX structure that includes a loading indicator, a section title, a ",(0,o.jsx)(t.code,{children:"FileDropComponent"}),", a ",(0,o.jsx)(t.code,{children:"MergeOptions"})," component, a ",(0,o.jsx)(t.code,{children:"ModelInformation"})," component, and a set of ",(0,o.jsx)(t.code,{children:"CustomButton"})," components."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:"return (\n
\n {/* JSX structure */}\n
\n)\n"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Export"})}),"\n",(0,o.jsxs)(t.p,{children:["Finally, the ",(0,o.jsx)(t.code,{children:"Optimizer"})," component is exported for use in other parts of the application."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"export default Optimizer\n"})})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var o=n(6540);const s={},r=o.createContext(s);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2f562218.aa45011b.js b/assets/js/2f562218.aa45011b.js new file mode 100644 index 00000000..6d155452 --- /dev/null +++ b/assets/js/2f562218.aa45011b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[465],{3415:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>n,metadata:()=>a,toc:()=>i});var r=s(4848),o=s(8453);const n={},c="Load",a={id:"Developers/Pages/load",title:"Load",description:"(wip) The Load page is currently hidden, but should be accessible from the Landing page to allow user quickly load their saved characters.",source:"@site/docs/Developers/Pages/load.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/load",permalink:"/characterstudio-docs/docs/Developers/Pages/load",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/load.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709352314,formattedLastUpdatedAt:"Mar 2, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Save",permalink:"/characterstudio-docs/docs/Developers/Pages/save"},next:{title:"Claim",permalink:"/characterstudio-docs/docs/Developers/Pages/claim"}},d={},i=[];function l(e){const t={code:"code",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"load",children:"Load"}),"\n",(0,r.jsxs)(t.p,{children:["(wip) The ",(0,r.jsx)(t.code,{children:"Load"})," page is currently hidden, but should be accessible from the ",(0,r.jsx)(t.code,{children:"Landing"})," page to allow user quickly load their saved characters."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Summary"})}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"Load"})," page allows to load an existing character from your wallet or page preferences into the character studio viewer."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Functions"})}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"loadCharacter"}),": loads target character with given string, it searched in user preferences cache to get this data."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"connectWallet"}),": Connects Wallet to fetch nfts from a collection (wip)"]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"back"}),": Goes back to the previous menu."]}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>c,x:()=>a});var r=s(6540);const o={},n=r.createContext(o);function c(e){const t=r.useContext(n);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2f562218.b59c9cef.js b/assets/js/2f562218.b59c9cef.js deleted file mode 100644 index f9e73ec3..00000000 --- a/assets/js/2f562218.b59c9cef.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[465],{3415:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>i});var o=n(4848),s=n(8453);const a={},c="Load",r={id:"Developers/Pages/load",title:"Load",description:"The Load component is a part of a React application that interacts with the Ethereum blockchain. It allows users to connect their Ethereum wallet, fetches the NFTs (Non-Fungible Tokens) owned by the user, and displays them. The user can then select a character (NFT) to load. The component also provides audio feedback based on the user's actions and allows the user to navigate back to the landing page.",source:"@site/docs/Developers/Pages/load.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/load",permalink:"/characterstudio-docs/docs/Developers/Pages/load",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/load.md",tags:[],version:"current",lastUpdatedBy:"madjin",lastUpdatedAt:1708577163,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Save",permalink:"/characterstudio-docs/docs/Developers/Pages/save"},next:{title:"Claim",permalink:"/characterstudio-docs/docs/Developers/Pages/claim"}},d={},i=[];function l(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"load",children:"Load"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"Load"})," component is a part of a React application that interacts with the Ethereum blockchain. It allows users to connect their Ethereum wallet, fetches the NFTs (Non-Fungible Tokens) owned by the user, and displays them. The user can then select a character (NFT) to load. The component also provides audio feedback based on the user's actions and allows the user to navigate back to the landing page."]}),"\n",(0,o.jsx)(t.p,{children:"In simpler terms, this component is like a personal locker for users where they can see all the unique digital assets (NFTs) they own. They can connect their digital wallet, see their assets, and choose one to interact with."}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Imports"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:"import React, { useEffect, useState } from 'react';\nimport styles from './Load.module.css';\nimport { ethers } from 'ethers';\nimport { useWeb3React } from '@web3-react/core';\nimport { InjectedConnector } from \"@web3-react/injected-connector\"\nimport { ViewContext, ViewMode } from '../context/ViewContext';\nimport { SoundContext } from \"../context/SoundContext\"\nimport { AudioContext } from \"../context/AudioContext\"\n"})}),"\n",(0,o.jsxs)(t.p,{children:["The component imports necessary libraries and contexts. ",(0,o.jsx)(t.code,{children:"ethers"})," is a library to interact with Ethereum blockchain. ",(0,o.jsx)(t.code,{children:"useWeb3React"})," and ",(0,o.jsx)(t.code,{children:"InjectedConnector"})," are used to connect to the user's Ethereum wallet. ",(0,o.jsx)(t.code,{children:"ViewContext"}),", ",(0,o.jsx)(t.code,{children:"SoundContext"}),", and ",(0,o.jsx)(t.code,{children:"AudioContext"})," are React contexts used to manage global state related to view mode, sound, and audio settings."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Component State and Contexts"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:"function Load() {\n const { account, library, activate } = useWeb3React();\n const [characters, setCharacters] = useState([]);\n const { setViewMode } = React.useContext(ViewContext);\n const { playSound } = React.useContext(SoundContext)\n const { isMute } = React.useContext(AudioContext)\n ...\n}\n"})}),"\n",(0,o.jsxs)(t.p,{children:["The component uses ",(0,o.jsx)(t.code,{children:"useWeb3React"})," to get the user's Ethereum account, the Ethereum library instance, and the ",(0,o.jsx)(t.code,{children:"activate"})," function to connect the wallet. It also uses ",(0,o.jsx)(t.code,{children:"useState"})," to manage a local state ",(0,o.jsx)(t.code,{children:"characters"})," which stores the NFTs owned by the user. It uses ",(0,o.jsx)(t.code,{children:"useContext"})," to get the necessary functions and values from the global state."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Fetching NFTs"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"useEffect(() => {\n ...\n}, [account, library]);\n"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"useEffect"})," hook is used to fetch the NFTs owned by the user whenever the ",(0,o.jsx)(t.code,{children:"account"})," or ",(0,o.jsx)(t.code,{children:"library"})," changes. It interacts with a smart contract on the Ethereum blockchain to get the balance and details of each NFT."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Wallet Connection and Character Loading"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:"const connectWallet = () => {\n activate(injectedConnector)\n}\n\nconst loadCharacter = (character) => {\n !isMute && playSound('backNextButton');\n setViewMode(ViewMode.APPEARANCE)\n}\n"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"connectWallet"})," function is used to connect the user's Ethereum wallet. The ",(0,o.jsx)(t.code,{children:"loadCharacter"})," function is used to load a selected character (NFT), play a sound if not muted, and change the view mode to ",(0,o.jsx)(t.code,{children:"APPEARANCE"}),"."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Rendering"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx!",children:"return (\n ...\n);\n"})}),"\n",(0,o.jsx)(t.p,{children:"The component renders a message to connect the wallet if not connected, a list of characters (NFTs) owned by the user, and a back button to navigate back to the landing page. The styles are applied using CSS modules."})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>r});var o=n(6540);const s={},a=o.createContext(s);function c(e){const t=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),o.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/4024efc6.3c6f993d.js b/assets/js/4024efc6.3c6f993d.js new file mode 100644 index 00000000..6fa896e5 --- /dev/null +++ b/assets/js/4024efc6.3c6f993d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[4319],{7577:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var r=t(4848),s=t(8453);const i={},c="Appearance",a={id:"Developers/Pages/appearance",title:"Appearance",description:"To Access this menu, go to Create Character menu button, then select any option displayed there.",source:"@site/docs/Developers/Pages/appearance.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/appearance",permalink:"/characterstudio-docs/docs/Developers/Pages/appearance",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/appearance.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709352314,formattedLastUpdatedAt:"Mar 2, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Create",permalink:"/characterstudio-docs/docs/Developers/Pages/create"},next:{title:"Bio",permalink:"/characterstudio-docs/docs/Developers/Pages/bio"}},o={},d=[];function l(e){const n={code:"code",em:"em",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"appearance",children:"Appearance"}),"\n",(0,r.jsxs)(n.p,{children:["To Access this menu, go to ",(0,r.jsx)(n.code,{children:"Create Character"})," menu button, then select any option displayed there."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.em,{children:(0,r.jsx)(n.strong,{children:"Important:"})})," if no option is present in this menu, you need to setup ",(0,r.jsx)(n.code,{children:"VITE_ASSET_PATH"})," in the ",(0,r.jsx)(n.code,{children:".env"})," file, to point to ",(0,r.jsx)(n.code,{children:"character manifest.json"})," location, and point were to fetch manifest options."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Summary"})}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"Appearance"})," page, allows you to load and select different character traits (models), animations, and textures, as well as entering debug mode and fine tune details on your avatar. It provides buttons based on a pre-defined ",(0,r.jsx)(n.code,{children:"character-manifest"})," to dress-up and customize your character."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Logic"})}),"\n",(0,r.jsxs)(n.p,{children:["For this component, we want the user to be able to access the ",(0,r.jsx)(n.code,{children:"characterManager"})," functions by providing ui buttons to select trait models or textures, play animations, and set culling layers for selected character."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Select character functions"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"randomize"}),": From loaded manifest, load a set of random traits (the traits that will be randomized are defined in the loaded manifest)"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"handleColorChange"})," ",(0,r.jsx)(n.code,{children:"handleChangeComplete"}),": Change the color of current selected trait"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"clickDebugMode"}),": Display debug mode in the main window"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"selectTrait"}),": Select a trait from the displayed options and load it into the character"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"removeTrait"}),": Remove the current selected trait."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"randomTrait"}),": Get a Random trait from current selected trait."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"selectTraitGroup"}),": Change currently displayed trait options to selected trait group."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Drag and drop functions"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"handleFilesDrop"})," User dropped a file, detect what type it was:"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"handleAnimationDrop"}),": User dropped an animation, play it on the current character traits"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"handleImageDrop"}),": User dropped an image, apply it to the current selected Trait (works only if there is currently a selected trait)"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"handleVRMDrop"}),": User dropped a vrm file, load it as custom on current selected Trait (works only if there is currently a selected trait)"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"handleJsonDrop"}),": User dropped a json file, consider it as an nft json specification file and load all traits included in this file."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"uploadTrait"}),": Actually load the vrm file that was drag and dropped by the user."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Utils functions"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"back"}),": Go back to manifest selection page."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"next"}),": Go to download page."]}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>a});var r=t(6540);const s={},i=r.createContext(s);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/4024efc6.417b0bf3.js b/assets/js/4024efc6.417b0bf3.js deleted file mode 100644 index bc87e4e6..00000000 --- a/assets/js/4024efc6.417b0bf3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[4319],{7577:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var s=t(4848),r=t(8453);const i={},c="Appearance",a={id:"Developers/Pages/appearance",title:"Appearance",description:"To Access this menu, go to Create Character menu button, then select any option displayed there.",source:"@site/docs/Developers/Pages/appearance.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/appearance",permalink:"/characterstudio-docs/docs/Developers/Pages/appearance",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/appearance.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709103052,formattedLastUpdatedAt:"Feb 28, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Create",permalink:"/characterstudio-docs/docs/Developers/Pages/create"},next:{title:"Bio",permalink:"/characterstudio-docs/docs/Developers/Pages/bio"}},o={},d=[];function l(e){const n={code:"code",em:"em",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"appearance",children:"Appearance"}),"\n",(0,s.jsxs)(n.p,{children:["To Access this menu, go to ",(0,s.jsx)(n.code,{children:"Create Character"})," menu button, then select any option displayed there."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.em,{children:(0,s.jsx)(n.strong,{children:"Important:"})})," if no option is present in this menu, you need to setup ",(0,s.jsx)(n.code,{children:"VITE_ASSET_PATH"})," in the ",(0,s.jsx)(n.code,{children:".env"})," file, to point to ",(0,s.jsx)(n.code,{children:"character manifest.json"})," location, and point were to fetch manifest options."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Summary"})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Appearance"})," component, allows you to load and select different character traits (models), animations, and textures, as well as entering debug mode and fine tune details on your avatar. It provides buttons based on a pre-defined ",(0,s.jsx)(n.code,{children:"character-manifest"})," to dress-up and customize your character."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Logic"})}),"\n",(0,s.jsxs)(n.p,{children:["For this component, we want the user to be able to access the ",(0,s.jsx)(n.code,{children:"characterManager"})," functions by providing ui buttons to select trait models or textures, play animations, and set culling layers for selected character."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Select character functions"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"randomize"}),": From loaded manifest, load a set of random traits (the traits that will be randomized are defined in the loaded manifest)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleColorChange"})," ",(0,s.jsx)(n.code,{children:"handleChangeComplete"}),": Change the color of current selected trait"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"clickDebugMode"}),": Display debug mode in the main window"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"selectTrait"}),": Select a trait from the displayed options and load it into the character"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"removeTrait"}),": Remove the current selected trait."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"randomTrait"}),": Get a Random trait from current selected trait."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"selectTraitGroup"}),": Change currently displayed trait options to selected trait group."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Drag and drop functions"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleFilesDrop"})," User dropped a file, detect what type it was:"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleAnimationDrop"}),": User dropped an animation, play it on the current character traits"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleImageDrop"}),": User dropped an image, apply it to the current selected Trait (works only if there is currently a selected trait)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleVRMDrop"}),": User dropped a vrm file, load it as custom on current selected Trait (works only if there is currently a selected trait)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleJsonDrop"}),": User dropped a json file, consider it as an nft json specification file and load all traits included in this file."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"uploadTrait"}),": Actually load the vrm file that was drag and dropped by the user."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Utils functions"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"back"}),": Go back to manifest selection page."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"next"}),": Go to download page."]}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>a});var s=t(6540);const r={},i=s.createContext(r);function c(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ddfb2db.23791b33.js b/assets/js/5ddfb2db.23791b33.js new file mode 100644 index 00000000..449ce628 --- /dev/null +++ b/assets/js/5ddfb2db.23791b33.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[5564],{5883:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>d});var s=n(4848),r=n(8453);const i={},c="Mint",o={id:"Developers/Pages/mint",title:"Mint",description:"(wip) The Mint Page is currently hidden, but should be accessed after user finished creating his character from the appearance menu.",source:"@site/docs/Developers/Pages/mint.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/mint",permalink:"/characterstudio-docs/docs/Developers/Pages/mint",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/mint.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709352314,formattedLastUpdatedAt:"Mar 2, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"View",permalink:"/characterstudio-docs/docs/Developers/Pages/view"},next:{title:"Save",permalink:"/characterstudio-docs/docs/Developers/Pages/save"}},a={},d=[];function l(e){const t={code:"code",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"mint",children:"Mint"}),"\n",(0,s.jsxs)(t.p,{children:["(wip) The ",(0,s.jsx)(t.code,{children:"Mint"})," Page is currently hidden, but should be accessed after user finished creating his character from the appearance menu."]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Summary"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"Mint"})," Page purpose is to allow the user an easy way to mint into an existing collection their selected character."]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Functions"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"back"}),"go back to the previous page."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"next"})," move forward to the next page."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"Mint"})," is an asynchronous function that handles the minting process."]}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>o});var s=n(6540);const r={},i=s.createContext(r);function c(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ddfb2db.c74b179c.js b/assets/js/5ddfb2db.c74b179c.js deleted file mode 100644 index 3057953b..00000000 --- a/assets/js/5ddfb2db.c74b179c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[5564],{5883:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});var s=n(4848),o=n(8453);const i={},c="Mint",r={id:"Developers/Pages/mint",title:"Mint",description:"The MintComponent is a React component that provides the functionality for minting a digital asset. In layman's terms, it's like a factory machine interface where you can create your own unique digital item (like a character in a game). This component handles the process of creating the item, showing the status of the creation process, and providing buttons to navigate to other parts of the application.",source:"@site/docs/Developers/Pages/mint.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/mint",permalink:"/characterstudio-docs/docs/Developers/Pages/mint",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/mint.md",tags:[],version:"current",lastUpdatedBy:"madjin",lastUpdatedAt:1708577163,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"View",permalink:"/characterstudio-docs/docs/Developers/Pages/view"},next:{title:"Save",permalink:"/characterstudio-docs/docs/Developers/Pages/save"}},a={},d=[];function l(e){const t={code:"code",h1:"h1",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"mint",children:"Mint"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"MintComponent"})," is a React component that provides the functionality for minting a digital asset. In layman's terms, it's like a factory machine interface where you can create your own unique digital item (like a character in a game). This component handles the process of creating the item, showing the status of the creation process, and providing buttons to navigate to other parts of the application."]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Imports"})}),"\n",(0,s.jsx)(t.p,{children:"The component imports several dependencies, including styles, contexts, a custom button component, and a utility function for minting assets."}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx!",children:'import React from "react"\nimport styles from "./Mint.module.scss"\nimport { ViewMode, ViewContext } from "../context/ViewContext"\nimport { SceneContext } from "../context/SceneContext"\nimport CustomButton from "../components/custom-button"\nimport { SoundContext } from "../context/SoundContext"\nimport { AudioContext } from "../context/AudioContext"\nimport { mintAsset } from "../library/mint-utils"\n'})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Component Definition"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"MintComponent"})," is a functional component that takes a ",(0,s.jsx)(t.code,{children:"getFaceScreenshot"})," prop. It uses several contexts to get and set various application states."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx!",children:"function MintComponent({getFaceScreenshot}) {\n const { templateInfo, model, avatar } = React.useContext(SceneContext)\n const { setViewMode } = React.useContext(ViewContext)\n const { playSound } = React.useContext(SoundContext)\n const { isMute } = React.useContext(AudioContext)\n ...\n}\n"})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"State Variables"})}),"\n",(0,s.jsxs)(t.p,{children:["The component uses two state variables: ",(0,s.jsx)(t.code,{children:"status"})," to store the current status of the minting process, and ",(0,s.jsx)(t.code,{children:"minting"})," to store whether the minting process is currently ongoing."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx!",children:'const [status, setStatus] = React.useState("")\nconst [minting, setMinting]= React.useState(false)\n'})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Functions"})}),"\n",(0,s.jsx)(t.p,{children:"The component defines several functions:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"back"})," and ",(0,s.jsx)(t.code,{children:"next"})," are used to navigate to other views in the application."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"MenuTitle"})," is a sub-component that renders the title of the menu."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"Mint"})," is an asynchronous function that handles the minting process."]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx!",children:"const back = () => {...}\nconst next = () => {...}\nfunction MenuTitle() {...}\nasync function Mint(){...}\n"})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Render"})}),"\n",(0,s.jsx)(t.p,{children:"The component returns a JSX structure that includes:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"A title for the section."}),"\n",(0,s.jsxs)(t.li,{children:["A container for the minting process, which includes the ",(0,s.jsx)(t.code,{children:"MenuTitle"})," sub-component, two ",(0,s.jsx)(t.code,{children:"CustomButton"})," components for the minting options, and a status message."]}),"\n",(0,s.jsx)(t.li,{children:"A container for navigation buttons."}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx!",children:"return (\n
\n ...\n
\n)\n"})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Export"})}),"\n",(0,s.jsxs)(t.p,{children:["Finally, the ",(0,s.jsx)(t.code,{children:"MintComponent"})," is exported for use in other parts of the application."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx!",children:"export default MintComponent\n"})})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>r});var s=n(6540);const o={},i=s.createContext(o);function c(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/668a584f.651120fa.js b/assets/js/668a584f.651120fa.js deleted file mode 100644 index 0c1f18bd..00000000 --- a/assets/js/668a584f.651120fa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[4175],{8753:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>r,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>l});var o=n(4848),s=n(8453);const i={},r="Batch Manifest",a={id:"Developers/Pages/batch-manifest",title:"Batch Manifest",description:"To Access this menu, go to Batch Download button, then Manifest - Load by manifest",source:"@site/docs/Developers/Pages/batch-manifest.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/batch-manifest",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-manifest",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/batch-manifest.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1708836726,formattedLastUpdatedAt:"Feb 25, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Batch Download",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-download"},next:{title:"Optimizer",permalink:"/characterstudio-docs/docs/Developers/Pages/optimizer"}},d={},l=[];function c(e){const t={code:"code",em:"em",h1:"h1",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"batch-manifest",children:"Batch Manifest"}),"\n",(0,o.jsxs)(t.p,{children:["To Access this menu, go to ",(0,o.jsx)(t.code,{children:"Batch Download"})," button, then ",(0,o.jsx)(t.code,{children:"Manifest - Load by manifest"})]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Summary"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"Batch Manifest"})," component allow users to drag and drop one or mutliple ",(0,o.jsx)(t.code,{children:"manifest"})," files.\nOnce the manifests are added, for each manifest dropped, user has 2 options that will appear on the lower right corner of th screen:"]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Download VRM"})}),"\nThe user can batch the process to download a vrm with the ",(0,o.jsx)(t.code,{children:"initialTraits"})," defined in each manifest ( traits will be randomly selected from the trait options of that manifest ). This will download a vrm model for each manifest uploaded"]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Get preview image"})}),"\nThe user can batch the process to download a preview image with the ",(0,o.jsx)(t.code,{children:"initialTraits"})," defined in each manifest ( same as before traits will be randomly selected from the trait options of that manifest ). The process will create a medium shot image with the character using the random chosen intital traits and download it."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:"Important note"}),"\nIf multiple images/files are not being downloaded, browser might not support/allow this feature. Please switch to a web browser that support this feature (Chrome), or allow it on your current browser"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Import Statements"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:'import React, { useContext, useEffect, useState } from "react"\nimport styles from "./Optimizer.module.css"\nimport { ViewMode, ViewContext } from "../context/ViewContext"\nimport { SceneContext } from "../context/SceneContext"\nimport CustomButton from "../components/custom-button"\nimport { LanguageContext } from "../context/LanguageContext"\nimport { SoundContext } from "../context/SoundContext"\nimport { AudioContext } from "../context/AudioContext"\nimport FileDropComponent from "../components/FileDropComponent"\nimport { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils"\nimport JsonAttributes from "../components/JsonAttributes"\nimport ModelInformation from "../components/ModelInformation"\nimport MergeOptions from "../components/MergeOptions"\nimport { local } from "../library/store"\n'})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Logic"})}),"\n",(0,o.jsxs)(t.p,{children:["For this component we want the user to be able to drag and drop a file with ",(0,o.jsx)(t.code,{children:"FileDropComponent"})," and detect wether the user dropped Manifest file (.json), animation file (.fbx) or .vrm file to start the batch download process accodrdingly."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Pre-process Functions:"})}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"handleFilesDrop"}),": Function to detect wether the user dropped a manifest, animation, or vrm file(s)."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"handleJsonDrop"}),": User dropped a manifest file, save the manifest file(s) as an object(s) so its ready to load its content."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"handleVRMDrop"}),": User dropped a VRM file, load the vrm file into the current view. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"handleAnimationDrop"}),": User dropped an animation file, load the animation into the current displayed character, if no vrm or manifest has been added, this will have no effect. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Process Functions:"})}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"download"}),": Start batch download process for all the manifest previously added (this function must be called only if user added at least 1 manifest file)"]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"downloadImage"}),": Start batch download process for all preview images of the laoded manifests (this function must be called only if user added at least 1 manifest file)"]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"getOptions"}),": Set the options that will be used for the downloaded character"]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"downloadVRMWithIndex"}),": Download a vrm file, or the image, given a the manifest index."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Util Functions:"})}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"clickDebugMode"}),": Enter febug mode (Will only display if user already laoded a model)"]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"back"}),": Go to the previous menu"]}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>a});var o=n(6540);const s={},i=o.createContext(s);function r(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/668a584f.654a54db.js b/assets/js/668a584f.654a54db.js new file mode 100644 index 00000000..2ea0751e --- /dev/null +++ b/assets/js/668a584f.654a54db.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[4175],{8753:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var s=t(4848),i=t(8453);const o={},r="Batch Manifest",a={id:"Developers/Pages/batch-manifest",title:"Batch Manifest",description:"To Access this menu, go to Batch Download button, then Manifest - Load by manifest",source:"@site/docs/Developers/Pages/batch-manifest.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/batch-manifest",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-manifest",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/batch-manifest.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709352314,formattedLastUpdatedAt:"Mar 2, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Batch Download",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-download"},next:{title:"Optimizer",permalink:"/characterstudio-docs/docs/Developers/Pages/optimizer"}},d={},l=[];function c(e){const n={code:"code",em:"em",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"batch-manifest",children:"Batch Manifest"}),"\n",(0,s.jsxs)(n.p,{children:["To Access this menu, go to ",(0,s.jsx)(n.code,{children:"Batch Download"})," button, then ",(0,s.jsx)(n.code,{children:"Manifest - Load by manifest"})]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Summary"})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Batch Manifest"})," component allow users to drag and drop one or mutliple ",(0,s.jsx)(n.code,{children:"manifest"})," files.\nOnce the manifests are added, for each manifest dropped, user has 2 options that will appear on the lower right corner of th screen:"]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.em,{children:(0,s.jsx)(n.strong,{children:"Download VRM"})}),"\nThe user can batch the process to download a vrm with the ",(0,s.jsx)(n.code,{children:"initialTraits"})," defined in each manifest ( traits will be randomly selected from the trait options of that manifest ). This will download a vrm model for each manifest uploaded"]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.em,{children:(0,s.jsx)(n.strong,{children:"Get preview image"})}),"\nThe user can batch the process to download a preview image with the ",(0,s.jsx)(n.code,{children:"initialTraits"})," defined in each manifest ( same as before traits will be randomly selected from the trait options of that manifest ). The process will create a medium shot image with the character using the random chosen intital traits and download it."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.em,{children:"Important note"}),"\nIf multiple images/files are not being downloaded, browser might not support/allow this feature. Please switch to a web browser that support this feature (Chrome), or allow it on your current browser"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Logic"})}),"\n",(0,s.jsxs)(n.p,{children:["For this component we want the user to be able to drag and drop a file with ",(0,s.jsx)(n.code,{children:"FileDropComponent"})," and detect wether the user dropped Manifest file (.json), animation file (.fbx) or .vrm file to start the batch download process accodrdingly."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Pre-process Functions:"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleFilesDrop"}),": Function to detect wether the user dropped a manifest, animation, or vrm file(s)."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleJsonDrop"}),": User dropped a manifest file, save the manifest file(s) as an object(s) so its ready to load its content."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleVRMDrop"}),": User dropped a VRM file, load the vrm file into the current view. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"handleAnimationDrop"}),": User dropped an animation file, load the animation into the current displayed character, if no vrm or manifest has been added, this will have no effect. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Process Functions:"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"download"}),": Start batch download process for all the manifest previously added (this function must be called only if user added at least 1 manifest file)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"downloadImage"}),": Start batch download process for all preview images of the laoded manifests (this function must be called only if user added at least 1 manifest file)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"getOptions"}),": Set the options that will be used for the downloaded character"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"downloadVRMWithIndex"}),": Download a vrm file, or the image, given a the manifest index."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Util Functions:"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"clickDebugMode"}),": Enter febug mode (Will only display if user already laoded a model)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"back"}),": Go to the previous menu"]}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>a});var s=t(6540);const i={},o=s.createContext(i);function r(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/935f2afb.2fdfb9a6.js b/assets/js/935f2afb.31c01839.js similarity index 65% rename from assets/js/935f2afb.2fdfb9a6.js rename to assets/js/935f2afb.31c01839.js index 4cf38b66..30b2a9db 100644 --- a/assets/js/935f2afb.2fdfb9a6.js +++ b/assets/js/935f2afb.31c01839.js @@ -1 +1 @@ -"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[8581],{5610:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"About","href":"/characterstudio-docs/docs/about","docId":"about","unlisted":false},{"type":"link","label":"Quickstart","href":"/characterstudio-docs/docs/quickstart","docId":"quickstart","unlisted":false},{"type":"link","label":"History","href":"/characterstudio-docs/docs/history","docId":"history","unlisted":false},{"type":"category","label":"General","items":[{"type":"link","label":"Create an Avatar","href":"/characterstudio-docs/docs/General/create-an-avatar","docId":"General/create-an-avatar","unlisted":false},{"type":"link","label":"Optimize avatars","href":"/characterstudio-docs/docs/General/optimize-avatars","docId":"General/optimize-avatars","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Modders","items":[{"type":"link","label":"Sample Files","href":"https://github.com/m3-org/loot-assets"},{"type":"link","label":"Preparing Assets","href":"/characterstudio-docs/docs/Modders/process-avatars","docId":"Modders/process-avatars","unlisted":false},{"type":"link","label":"Change animations","href":"/characterstudio-docs/docs/Modders/change-animations","docId":"Modders/change-animations","unlisted":false},{"type":"category","label":"Manifest Files","items":[{"type":"link","label":"Overview","href":"/characterstudio-docs/docs/Modders/manifest-files/overview","docId":"Modders/manifest-files/overview","unlisted":false},{"type":"link","label":"Character Select","href":"/characterstudio-docs/docs/Modders/manifest-files/character-select","docId":"Modders/manifest-files/character-select","unlisted":false},{"type":"link","label":"Character Traits","href":"/characterstudio-docs/docs/Modders/manifest-files/character-traits","docId":"Modders/manifest-files/character-traits","unlisted":false},{"type":"link","label":"VRM to LoRA data","href":"/characterstudio-docs/docs/Modders/manifest-files/vrm-to-lora","docId":"Modders/manifest-files/vrm-to-lora","unlisted":false},{"type":"link","label":"VRM to Spritesheet","href":"/characterstudio-docs/docs/Modders/manifest-files/vrm-to-spritesheet","docId":"Modders/manifest-files/vrm-to-spritesheet","unlisted":false},{"type":"link","label":"AI Personality","href":"/characterstudio-docs/docs/Modders/manifest-files/ai-personalities","docId":"Modders/manifest-files/ai-personalities","unlisted":false},{"type":"link","label":"Useful Scripts","href":"/characterstudio-docs/docs/Modders/manifest-files/generate-manifest-files","docId":"Modders/manifest-files/generate-manifest-files","unlisted":false}],"collapsed":false,"collapsible":true}],"collapsed":false,"collapsible":true},{"type":"category","label":"Developers","items":[{"type":"link","label":"Overview","href":"/characterstudio-docs/docs/Developers/overview","docId":"Developers/overview","unlisted":false},{"type":"category","label":"Managers","collapsed":true,"items":[{"type":"link","label":"Character Manager","href":"/characterstudio-docs/docs/Developers/Managers/character-manager","docId":"Developers/Managers/character-manager","unlisted":false},{"type":"link","label":"Animation Manager","href":"/characterstudio-docs/docs/Developers/Managers/animation-manager","docId":"Developers/Managers/animation-manager","unlisted":false},{"type":"link","label":"LookAt Manager","href":"/characterstudio-docs/docs/Developers/Managers/look-at-manager","docId":"Developers/Managers/look-at-manager","unlisted":false},{"type":"link","label":"Blink Manager","href":"/characterstudio-docs/docs/Developers/Managers/blink-manager","docId":"Developers/Managers/blink-manager","unlisted":false},{"type":"link","label":"Screenshot Manager","href":"/characterstudio-docs/docs/Developers/Managers/screenshot-manager","docId":"Developers/Managers/screenshot-manager","unlisted":false},{"type":"link","label":"LoRa Data Generator","href":"/characterstudio-docs/docs/Developers/Managers/lora-data-generator","docId":"Developers/Managers/lora-data-generator","unlisted":false},{"type":"link","label":"Sprite Atlas Generator","href":"/characterstudio-docs/docs/Developers/Managers/sprite-atlas-generator","docId":"Developers/Managers/sprite-atlas-generator","unlisted":false}],"collapsible":true},{"type":"category","label":"Contexts","collapsed":true,"items":[{"type":"link","label":"Scene Context","href":"/characterstudio-docs/docs/Developers/Contexts/scene-context","docId":"Developers/Contexts/scene-context","unlisted":false},{"type":"link","label":"View Context","href":"/characterstudio-docs/docs/Developers/Contexts/view-context","docId":"Developers/Contexts/view-context","unlisted":false},{"type":"link","label":"Sound Context","href":"/characterstudio-docs/docs/Developers/Contexts/sound-context","docId":"Developers/Contexts/sound-context","unlisted":false},{"type":"link","label":"Audio Context","href":"/characterstudio-docs/docs/Developers/Contexts/audio-context","docId":"Developers/Contexts/audio-context","unlisted":false},{"type":"link","label":"Language Context","href":"/characterstudio-docs/docs/Developers/Contexts/language-context","docId":"Developers/Contexts/language-context","unlisted":false}],"collapsible":true},{"type":"category","label":"Pages","collapsed":true,"items":[{"type":"link","label":"Landing","href":"/characterstudio-docs/docs/Developers/Pages/landing","docId":"Developers/Pages/landing","unlisted":false},{"type":"link","label":"Create","href":"/characterstudio-docs/docs/Developers/Pages/create","docId":"Developers/Pages/create","unlisted":false},{"type":"link","label":"Appearance","href":"/characterstudio-docs/docs/Developers/Pages/appearance","docId":"Developers/Pages/appearance","unlisted":false},{"type":"link","label":"Bio","href":"/characterstudio-docs/docs/Developers/Pages/bio","docId":"Developers/Pages/bio","unlisted":false},{"type":"link","label":"View","href":"/characterstudio-docs/docs/Developers/Pages/view","docId":"Developers/Pages/view","unlisted":false},{"type":"link","label":"Mint","href":"/characterstudio-docs/docs/Developers/Pages/mint","docId":"Developers/Pages/mint","unlisted":false},{"type":"link","label":"Save","href":"/characterstudio-docs/docs/Developers/Pages/save","docId":"Developers/Pages/save","unlisted":false},{"type":"link","label":"Load","href":"/characterstudio-docs/docs/Developers/Pages/load","docId":"Developers/Pages/load","unlisted":false},{"type":"link","label":"Claim","href":"/characterstudio-docs/docs/Developers/Pages/claim","docId":"Developers/Pages/claim","unlisted":false},{"type":"link","label":"Batch Download","href":"/characterstudio-docs/docs/Developers/Pages/batch-download","docId":"Developers/Pages/batch-download","unlisted":false},{"type":"link","label":"Batch Manifest","href":"/characterstudio-docs/docs/Developers/Pages/batch-manifest","docId":"Developers/Pages/batch-manifest","unlisted":false},{"type":"link","label":"Optimizer","href":"/characterstudio-docs/docs/Developers/Pages/optimizer","docId":"Developers/Pages/optimizer","unlisted":false},{"type":"link","label":"Wallet","href":"/characterstudio-docs/docs/Developers/Pages/wallet","docId":"Developers/Pages/wallet","unlisted":false}],"collapsible":true},{"type":"link","label":"SDK","href":"/characterstudio-docs/docs/Developers/sdk","docId":"Developers/sdk","unlisted":false}],"collapsed":false,"collapsible":true}]},"docs":{"about":{"id":"about","title":"About","description":"An evolving and truely open 3D studio for making and optimizing VRM avatars and/or create a customized avatar builder app using your own assets.","sidebar":"tutorialSidebar"},"Developers/Contexts/audio-context":{"id":"Developers/Contexts/audio-context","title":"Audio Context","description":"Audio Context is used simply to enable or disable audio.","sidebar":"tutorialSidebar"},"Developers/Contexts/language-context":{"id":"Developers/Contexts/language-context","title":"Language Context","description":"Language context that uses react-i18next to translate given text.","sidebar":"tutorialSidebar"},"Developers/Contexts/scene-context":{"id":"Developers/Contexts/scene-context","title":"Scene Context","description":"Scene Context allows easy access to app managers and scene elements. All the logic to modify, edit, display, create spritesheet or lora for vrms rest within these managers, and using Scene Context is an easy way to fetch all the logic:","sidebar":"tutorialSidebar"},"Developers/Contexts/sound-context":{"id":"Developers/Contexts/sound-context","title":"Sound Context","description":"Sound Context is used to get sound files and play them in any page or component by just providing the name of the sound.","sidebar":"tutorialSidebar"},"Developers/Contexts/view-context":{"id":"Developers/Contexts/view-context","title":"View Context","description":"Allows navigation within the app and current active page. Viewmode just defines which page is currently active:","sidebar":"tutorialSidebar"},"Developers/Managers/animation-manager":{"id":"Developers/Managers/animation-manager","title":"Animation Manager","description":"Manages animations for a character, including loading, playing, and controlling animations.","sidebar":"tutorialSidebar"},"Developers/Managers/blink-manager":{"id":"Developers/Managers/blink-manager","title":"Blink Manager","description":"BlinkManager is a class responsible for managing blinking animations for VRM models in a Three.js scene.","sidebar":"tutorialSidebar"},"Developers/Managers/character-manager":{"id":"Developers/Managers/character-manager","title":"Character Manager","description":"Character Manager is the main manager for the character studio, it provides functions to load manifests and traits within your three.js application","sidebar":"tutorialSidebar"},"Developers/Managers/look-at-manager":{"id":"Developers/Managers/look-at-manager","title":"LookAt Manager","description":"LookAtManager is a class that manages the orientation of joints or bones in a Three.js scene, typically used for eyes and neck of a character, following the mouse movement within a defined hotzone.","sidebar":"tutorialSidebar"},"Developers/Managers/lora-data-generator":{"id":"Developers/Managers/lora-data-generator","title":"LoRa Data Generator","description":"The LoRaDataGenerator class is responsible for generating LoRa data based on the specified manifest file.","sidebar":"tutorialSidebar"},"Developers/Managers/screenshot-manager":{"id":"Developers/Managers/screenshot-manager","title":"Screenshot Manager","description":"ScreenshotManager is responsible for capturing screenshots with various framing options within a Three.js scene.","sidebar":"tutorialSidebar"},"Developers/Managers/sprite-atlas-generator":{"id":"Developers/Managers/sprite-atlas-generator","title":"Sprite Atlas Generator","description":"SpriteAtlasGenerator is a class responsible for generating sprite atlases from animations specified in a manifest file.","sidebar":"tutorialSidebar"},"Developers/overview":{"id":"Developers/overview","title":"Overview","description":"Character Studio aims to give a quick setup to any character generator. Logic lies within Scripts and Managers that have been externalized to be reusable. The react app initializes these managers within a SceneContext to be quickly imported and accessed in any React Page or React Component.","sidebar":"tutorialSidebar"},"Developers/Pages/appearance":{"id":"Developers/Pages/appearance","title":"Appearance","description":"To Access this menu, go to Create Character menu button, then select any option displayed there.","sidebar":"tutorialSidebar"},"Developers/Pages/batch-download":{"id":"Developers/Pages/batch-download","title":"Batch Download","description":"To Access this menu, go to Batch Download button, then select any other option than is not Manifest - Load by manifest","sidebar":"tutorialSidebar"},"Developers/Pages/batch-manifest":{"id":"Developers/Pages/batch-manifest","title":"Batch Manifest","description":"To Access this menu, go to Batch Download button, then Manifest - Load by manifest","sidebar":"tutorialSidebar"},"Developers/Pages/bio":{"id":"Developers/Pages/bio","title":"Bio","description":"This menu is currently hidden, to display it you can use the function setViewMode and const ViewMode from ViewContext import statement, to display this page usingsetViewMode(ViewMode.LANDING)","sidebar":"tutorialSidebar"},"Developers/Pages/claim":{"id":"Developers/Pages/claim","title":"Claim","description":"Claim displays the menu options for batch download processes. It\'s the second menu element that goes by name Batch Download in the Landing page options.","sidebar":"tutorialSidebar"},"Developers/Pages/create":{"id":"Developers/Pages/create","title":"Create","description":"Create can be accessed by clicking the first Menu Button in the Landing page","sidebar":"tutorialSidebar"},"Developers/Pages/landing":{"id":"Developers/Pages/landing","title":"Landing","description":"The Landing component page is the initial page. It provides the user with options to create, optimize, load a character or connect wallet. Each option is represented by a button.","sidebar":"tutorialSidebar"},"Developers/Pages/load":{"id":"Developers/Pages/load","title":"Load","description":"The Load component is a part of a React application that interacts with the Ethereum blockchain. It allows users to connect their Ethereum wallet, fetches the NFTs (Non-Fungible Tokens) owned by the user, and displays them. The user can then select a character (NFT) to load. The component also provides audio feedback based on the user\'s actions and allows the user to navigate back to the landing page.","sidebar":"tutorialSidebar"},"Developers/Pages/mint":{"id":"Developers/Pages/mint","title":"Mint","description":"The MintComponent is a React component that provides the functionality for minting a digital asset. In layman\'s terms, it\'s like a factory machine interface where you can create your own unique digital item (like a character in a game). This component handles the process of creating the item, showing the status of the creation process, and providing buttons to navigate to other parts of the application.","sidebar":"tutorialSidebar"},"Developers/Pages/optimizer":{"id":"Developers/Pages/optimizer","title":"Optimizer","description":"The Optimizer component is a part of a React application that provides an interface for users to optimize their 3D character models. Users can drop their character files into the component, which then processes the file, optimizes it, and allows the user to download the optimized version. The component also provides options for merging and creating texture atlases, and displays information about the current model.","sidebar":"tutorialSidebar"},"Developers/Pages/save":{"id":"Developers/Pages/save","title":"Save","description":"The Save component is a part of a React application that provides a user interface for saving a character. It includes buttons for going back, merging options, exporting, and minting. The component also interacts with several contexts to manage view modes, language, sound, and audio settings.","sidebar":"tutorialSidebar"},"Developers/Pages/view":{"id":"Developers/Pages/view","title":"View","description":"The View component is a part of a React application that handles the user interface for a chat feature. It uses various contexts to manage state and behavior, such as view mode, sound, audio, and language settings. The component also controls a microphone feature and speech recognition. In layman\'s terms, this component is like the control center for a chat room where users can interact with each other, and it manages how the chat room looks, sounds, and behaves.","sidebar":"tutorialSidebar"},"Developers/Pages/wallet":{"id":"Developers/Pages/wallet","title":"Wallet","description":"(WIP) For the connect wallet button to appear, you need to setup an open sea api key in the .env, the variable must be called with the name VITEOPENSEAKEY. Once a key is placed, you can access this menu, in the main window. it will request you to connect your wallet.","sidebar":"tutorialSidebar"},"Developers/sdk":{"id":"Developers/sdk","title":"SDK","description":"WIP","sidebar":"tutorialSidebar"},"General/create-an-avatar":{"id":"General/create-an-avatar","title":"Create an Avatar","description":"There\'s a few ways to make an avatar with Character Studio:","sidebar":"tutorialSidebar"},"General/optimize-avatars":{"id":"General/optimize-avatars","title":"Optimize avatars","description":"Optimizing VRM models by hand can be very tedious and time consuming. We have designed a simple drag and drop solution that can reduce the amount of draw calls and overall filesize of VRM avatars by:","sidebar":"tutorialSidebar"},"history":{"id":"history","title":"History","description":"This project stands on the shoulders of giants with years of history from open source hackers and web3 enthusiasts.","sidebar":"tutorialSidebar"},"Modders/change-animations":{"id":"Modders/change-animations","title":"Change animations","description":"The animation files are referenced via animationPath in the manifest.json file, here\'s an example (source):","sidebar":"tutorialSidebar"},"Modders/manifest-files/ai-personalities":{"id":"Modders/manifest-files/ai-personalities","title":"AI Personality","description":"This is an experimental feature for prepopulating and customizing personalities for VRM avatars for AI chatbot application use cases.","sidebar":"tutorialSidebar"},"Modders/manifest-files/character-select":{"id":"Modders/manifest-files/character-select","title":"Character Select","description":"There\'s a manifest.json file for the character select screen located in the public folder of the repo, for example CharacterStudio/public/character-assets/manifest.json. Think of each of these as a new character template, like picking a class in an MMO or choosing your fighter in a video game.","sidebar":"tutorialSidebar"},"Modders/manifest-files/character-traits":{"id":"Modders/manifest-files/character-traits","title":"Character Traits","description":"Setting up this manifest will populate the asset trait section with your own traits that people can select from. It will also serve the character studio for cull trait model options (remove faces underneath) based on the layers, so the triangles disappear underneath the clothing for example.","sidebar":"tutorialSidebar"},"Modders/manifest-files/generate-manifest-files":{"id":"Modders/manifest-files/generate-manifest-files","title":"Useful Scripts","description":"Some useful scripts for generating manifest files for use in https://github.com/M3-org/characterstudio. YMMV.","sidebar":"tutorialSidebar"},"Modders/manifest-files/overview":{"id":"Modders/manifest-files/overview","title":"Overview","description":"The manifest files are essential if you want to mod Character Studio with your own assets and selection screens. They are found in various parts of the project, and basically are the main file other than art assets that you would need to modify to make an avatar builder program. For more info go to the full documentation page for any manifest in the sidebar.","sidebar":"tutorialSidebar"},"Modders/manifest-files/vrm-to-lora":{"id":"Modders/manifest-files/vrm-to-lora","title":"VRM to LoRA data","description":"This manifest is inspired by the VRM to LoRA guide by reneil1337 will generate training data that can be used for training LoRAs using tools such as Kohya.","sidebar":"tutorialSidebar"},"Modders/manifest-files/vrm-to-spritesheet":{"id":"Modders/manifest-files/vrm-to-spritesheet","title":"VRM to Spritesheet","description":"The spritesheet generator works very similar to the LoRA generator with the exception that the image outputs are turned into an atlas alongside a gif preview. Here\'s a very simple example of a manifest file that can generate a spritesheet:","sidebar":"tutorialSidebar"},"Modders/process-avatars":{"id":"Modders/process-avatars","title":"Preparing Assets","description":"After cloning and installing Character Studio, you will want to then copy your assets into the public folder and check the .env variable to ensure it\'s configured to the right location.","sidebar":"tutorialSidebar"},"quickstart":{"id":"quickstart","title":"Quickstart","description":"- Main repo//github.com/M3-org/characterstudio","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file +"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[8581],{5610:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"About","href":"/characterstudio-docs/docs/about","docId":"about","unlisted":false},{"type":"link","label":"Quickstart","href":"/characterstudio-docs/docs/quickstart","docId":"quickstart","unlisted":false},{"type":"link","label":"History","href":"/characterstudio-docs/docs/history","docId":"history","unlisted":false},{"type":"category","label":"General","items":[{"type":"link","label":"Create an Avatar","href":"/characterstudio-docs/docs/General/create-an-avatar","docId":"General/create-an-avatar","unlisted":false},{"type":"link","label":"Optimize avatars","href":"/characterstudio-docs/docs/General/optimize-avatars","docId":"General/optimize-avatars","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Modders","items":[{"type":"link","label":"Sample Files","href":"https://github.com/m3-org/loot-assets"},{"type":"link","label":"Preparing Assets","href":"/characterstudio-docs/docs/Modders/process-avatars","docId":"Modders/process-avatars","unlisted":false},{"type":"link","label":"Change animations","href":"/characterstudio-docs/docs/Modders/change-animations","docId":"Modders/change-animations","unlisted":false},{"type":"category","label":"Manifest Files","items":[{"type":"link","label":"Overview","href":"/characterstudio-docs/docs/Modders/manifest-files/overview","docId":"Modders/manifest-files/overview","unlisted":false},{"type":"link","label":"Character Select","href":"/characterstudio-docs/docs/Modders/manifest-files/character-select","docId":"Modders/manifest-files/character-select","unlisted":false},{"type":"link","label":"Character Traits","href":"/characterstudio-docs/docs/Modders/manifest-files/character-traits","docId":"Modders/manifest-files/character-traits","unlisted":false},{"type":"link","label":"VRM to LoRA data","href":"/characterstudio-docs/docs/Modders/manifest-files/vrm-to-lora","docId":"Modders/manifest-files/vrm-to-lora","unlisted":false},{"type":"link","label":"VRM to Spritesheet","href":"/characterstudio-docs/docs/Modders/manifest-files/vrm-to-spritesheet","docId":"Modders/manifest-files/vrm-to-spritesheet","unlisted":false},{"type":"link","label":"AI Personality","href":"/characterstudio-docs/docs/Modders/manifest-files/ai-personalities","docId":"Modders/manifest-files/ai-personalities","unlisted":false},{"type":"link","label":"Useful Scripts","href":"/characterstudio-docs/docs/Modders/manifest-files/generate-manifest-files","docId":"Modders/manifest-files/generate-manifest-files","unlisted":false}],"collapsed":false,"collapsible":true}],"collapsed":false,"collapsible":true},{"type":"category","label":"Developers","items":[{"type":"link","label":"Overview","href":"/characterstudio-docs/docs/Developers/overview","docId":"Developers/overview","unlisted":false},{"type":"category","label":"Managers","collapsed":true,"items":[{"type":"link","label":"Character Manager","href":"/characterstudio-docs/docs/Developers/Managers/character-manager","docId":"Developers/Managers/character-manager","unlisted":false},{"type":"link","label":"Animation Manager","href":"/characterstudio-docs/docs/Developers/Managers/animation-manager","docId":"Developers/Managers/animation-manager","unlisted":false},{"type":"link","label":"LookAt Manager","href":"/characterstudio-docs/docs/Developers/Managers/look-at-manager","docId":"Developers/Managers/look-at-manager","unlisted":false},{"type":"link","label":"Blink Manager","href":"/characterstudio-docs/docs/Developers/Managers/blink-manager","docId":"Developers/Managers/blink-manager","unlisted":false},{"type":"link","label":"Screenshot Manager","href":"/characterstudio-docs/docs/Developers/Managers/screenshot-manager","docId":"Developers/Managers/screenshot-manager","unlisted":false},{"type":"link","label":"LoRa Data Generator","href":"/characterstudio-docs/docs/Developers/Managers/lora-data-generator","docId":"Developers/Managers/lora-data-generator","unlisted":false},{"type":"link","label":"Sprite Atlas Generator","href":"/characterstudio-docs/docs/Developers/Managers/sprite-atlas-generator","docId":"Developers/Managers/sprite-atlas-generator","unlisted":false}],"collapsible":true},{"type":"category","label":"Contexts","collapsed":true,"items":[{"type":"link","label":"Scene Context","href":"/characterstudio-docs/docs/Developers/Contexts/scene-context","docId":"Developers/Contexts/scene-context","unlisted":false},{"type":"link","label":"View Context","href":"/characterstudio-docs/docs/Developers/Contexts/view-context","docId":"Developers/Contexts/view-context","unlisted":false},{"type":"link","label":"Sound Context","href":"/characterstudio-docs/docs/Developers/Contexts/sound-context","docId":"Developers/Contexts/sound-context","unlisted":false},{"type":"link","label":"Audio Context","href":"/characterstudio-docs/docs/Developers/Contexts/audio-context","docId":"Developers/Contexts/audio-context","unlisted":false},{"type":"link","label":"Language Context","href":"/characterstudio-docs/docs/Developers/Contexts/language-context","docId":"Developers/Contexts/language-context","unlisted":false}],"collapsible":true},{"type":"category","label":"Pages","collapsed":true,"items":[{"type":"link","label":"Landing","href":"/characterstudio-docs/docs/Developers/Pages/landing","docId":"Developers/Pages/landing","unlisted":false},{"type":"link","label":"Create","href":"/characterstudio-docs/docs/Developers/Pages/create","docId":"Developers/Pages/create","unlisted":false},{"type":"link","label":"Appearance","href":"/characterstudio-docs/docs/Developers/Pages/appearance","docId":"Developers/Pages/appearance","unlisted":false},{"type":"link","label":"Bio","href":"/characterstudio-docs/docs/Developers/Pages/bio","docId":"Developers/Pages/bio","unlisted":false},{"type":"link","label":"View","href":"/characterstudio-docs/docs/Developers/Pages/view","docId":"Developers/Pages/view","unlisted":false},{"type":"link","label":"Mint","href":"/characterstudio-docs/docs/Developers/Pages/mint","docId":"Developers/Pages/mint","unlisted":false},{"type":"link","label":"Save","href":"/characterstudio-docs/docs/Developers/Pages/save","docId":"Developers/Pages/save","unlisted":false},{"type":"link","label":"Load","href":"/characterstudio-docs/docs/Developers/Pages/load","docId":"Developers/Pages/load","unlisted":false},{"type":"link","label":"Claim","href":"/characterstudio-docs/docs/Developers/Pages/claim","docId":"Developers/Pages/claim","unlisted":false},{"type":"link","label":"Batch Download","href":"/characterstudio-docs/docs/Developers/Pages/batch-download","docId":"Developers/Pages/batch-download","unlisted":false},{"type":"link","label":"Batch Manifest","href":"/characterstudio-docs/docs/Developers/Pages/batch-manifest","docId":"Developers/Pages/batch-manifest","unlisted":false},{"type":"link","label":"Optimizer","href":"/characterstudio-docs/docs/Developers/Pages/optimizer","docId":"Developers/Pages/optimizer","unlisted":false},{"type":"link","label":"Wallet","href":"/characterstudio-docs/docs/Developers/Pages/wallet","docId":"Developers/Pages/wallet","unlisted":false}],"collapsible":true},{"type":"link","label":"SDK","href":"/characterstudio-docs/docs/Developers/sdk","docId":"Developers/sdk","unlisted":false}],"collapsed":false,"collapsible":true}]},"docs":{"about":{"id":"about","title":"About","description":"An evolving and truely open 3D studio for making and optimizing VRM avatars and/or create a customized avatar builder app using your own assets.","sidebar":"tutorialSidebar"},"Developers/Contexts/audio-context":{"id":"Developers/Contexts/audio-context","title":"Audio Context","description":"Audio Context is used simply to enable or disable audio.","sidebar":"tutorialSidebar"},"Developers/Contexts/language-context":{"id":"Developers/Contexts/language-context","title":"Language Context","description":"Language context that uses react-i18next to translate given text.","sidebar":"tutorialSidebar"},"Developers/Contexts/scene-context":{"id":"Developers/Contexts/scene-context","title":"Scene Context","description":"Scene Context allows easy access to app managers and scene elements. All the logic to modify, edit, display, create spritesheet or lora for vrms rest within these managers, and using Scene Context is an easy way to fetch all the logic:","sidebar":"tutorialSidebar"},"Developers/Contexts/sound-context":{"id":"Developers/Contexts/sound-context","title":"Sound Context","description":"Sound Context is used to get sound files and play them in any page or component by just providing the name of the sound.","sidebar":"tutorialSidebar"},"Developers/Contexts/view-context":{"id":"Developers/Contexts/view-context","title":"View Context","description":"Allows navigation within the app and current active page. Viewmode just defines which page is currently active:","sidebar":"tutorialSidebar"},"Developers/Managers/animation-manager":{"id":"Developers/Managers/animation-manager","title":"Animation Manager","description":"Manages animations for a character, including loading, playing, and controlling animations.","sidebar":"tutorialSidebar"},"Developers/Managers/blink-manager":{"id":"Developers/Managers/blink-manager","title":"Blink Manager","description":"BlinkManager is a class responsible for managing blinking animations for VRM models in a Three.js scene.","sidebar":"tutorialSidebar"},"Developers/Managers/character-manager":{"id":"Developers/Managers/character-manager","title":"Character Manager","description":"Character Manager is the main manager for the character studio, it provides functions to load manifests and traits within your three.js application","sidebar":"tutorialSidebar"},"Developers/Managers/look-at-manager":{"id":"Developers/Managers/look-at-manager","title":"LookAt Manager","description":"LookAtManager is a class that manages the orientation of joints or bones in a Three.js scene, typically used for eyes and neck of a character, following the mouse movement within a defined hotzone.","sidebar":"tutorialSidebar"},"Developers/Managers/lora-data-generator":{"id":"Developers/Managers/lora-data-generator","title":"LoRa Data Generator","description":"The LoRaDataGenerator class is responsible for generating LoRa data based on the specified manifest file.","sidebar":"tutorialSidebar"},"Developers/Managers/screenshot-manager":{"id":"Developers/Managers/screenshot-manager","title":"Screenshot Manager","description":"ScreenshotManager is responsible for capturing screenshots with various framing options within a Three.js scene.","sidebar":"tutorialSidebar"},"Developers/Managers/sprite-atlas-generator":{"id":"Developers/Managers/sprite-atlas-generator","title":"Sprite Atlas Generator","description":"SpriteAtlasGenerator is a class responsible for generating sprite atlases from animations specified in a manifest file.","sidebar":"tutorialSidebar"},"Developers/overview":{"id":"Developers/overview","title":"Overview","description":"Character Studio aims to give a quick setup to any character generator. Logic lies within Scripts and Managers that have been externalized to be reusable. The react app initializes these managers within a SceneContext to be quickly imported and accessed in any React Page or React Component.","sidebar":"tutorialSidebar"},"Developers/Pages/appearance":{"id":"Developers/Pages/appearance","title":"Appearance","description":"To Access this menu, go to Create Character menu button, then select any option displayed there.","sidebar":"tutorialSidebar"},"Developers/Pages/batch-download":{"id":"Developers/Pages/batch-download","title":"Batch Download","description":"To Access this menu, go to Batch Download button, then select any other option than is not Manifest - Load by manifest","sidebar":"tutorialSidebar"},"Developers/Pages/batch-manifest":{"id":"Developers/Pages/batch-manifest","title":"Batch Manifest","description":"To Access this menu, go to Batch Download button, then Manifest - Load by manifest","sidebar":"tutorialSidebar"},"Developers/Pages/bio":{"id":"Developers/Pages/bio","title":"Bio","description":"This menu is currently hidden, to display it you can use the function setViewMode and const ViewMode from ViewContext import statement, to display this page usingsetViewMode(ViewMode.LANDING)","sidebar":"tutorialSidebar"},"Developers/Pages/claim":{"id":"Developers/Pages/claim","title":"Claim","description":"Claim displays the menu options for batch download processes. It\'s the second menu element that goes by name Batch Download in the Landing page options.","sidebar":"tutorialSidebar"},"Developers/Pages/create":{"id":"Developers/Pages/create","title":"Create","description":"Create can be accessed by clicking the first Menu Button in the Landing page","sidebar":"tutorialSidebar"},"Developers/Pages/landing":{"id":"Developers/Pages/landing","title":"Landing","description":"The Landing component page is the initial page. It provides the user with options to create, optimize, load a character or connect wallet. Each option is represented by a button.","sidebar":"tutorialSidebar"},"Developers/Pages/load":{"id":"Developers/Pages/load","title":"Load","description":"(wip) The Load page is currently hidden, but should be accessible from the Landing page to allow user quickly load their saved characters.","sidebar":"tutorialSidebar"},"Developers/Pages/mint":{"id":"Developers/Pages/mint","title":"Mint","description":"(wip) The Mint Page is currently hidden, but should be accessed after user finished creating his character from the appearance menu.","sidebar":"tutorialSidebar"},"Developers/Pages/optimizer":{"id":"Developers/Pages/optimizer","title":"Optimizer","description":"You can access this page by going to Optimize Character menu button.","sidebar":"tutorialSidebar"},"Developers/Pages/save":{"id":"Developers/Pages/save","title":"Save","description":"The Save component is a part of a React application that provides a user interface for saving a character. It includes buttons for going back, merging options, exporting, and minting. The component also interacts with several contexts to manage view modes, language, sound, and audio settings.","sidebar":"tutorialSidebar"},"Developers/Pages/view":{"id":"Developers/Pages/view","title":"View","description":"This menu is currently hidden, but it can be shown after character bio page, after the personality of the character has been selected.","sidebar":"tutorialSidebar"},"Developers/Pages/wallet":{"id":"Developers/Pages/wallet","title":"Wallet","description":"(WIP) For the connect wallet button to appear, you need to setup an open sea api key in the .env, the variable must be called with the name VITEOPENSEAKEY. Once a key is placed, you can access this menu, in the main window. it will request you to connect your wallet.","sidebar":"tutorialSidebar"},"Developers/sdk":{"id":"Developers/sdk","title":"SDK","description":"WIP","sidebar":"tutorialSidebar"},"General/create-an-avatar":{"id":"General/create-an-avatar","title":"Create an Avatar","description":"There\'s a few ways to make an avatar with Character Studio:","sidebar":"tutorialSidebar"},"General/optimize-avatars":{"id":"General/optimize-avatars","title":"Optimize avatars","description":"Optimizing VRM models by hand can be very tedious and time consuming. We have designed a simple drag and drop solution that can reduce the amount of draw calls and overall filesize of VRM avatars by:","sidebar":"tutorialSidebar"},"history":{"id":"history","title":"History","description":"This project stands on the shoulders of giants with years of history from open source hackers and web3 enthusiasts.","sidebar":"tutorialSidebar"},"Modders/change-animations":{"id":"Modders/change-animations","title":"Change animations","description":"The animation files are referenced via animationPath in the manifest.json file, here\'s an example (source):","sidebar":"tutorialSidebar"},"Modders/manifest-files/ai-personalities":{"id":"Modders/manifest-files/ai-personalities","title":"AI Personality","description":"This is an experimental feature for prepopulating and customizing personalities for VRM avatars for AI chatbot application use cases.","sidebar":"tutorialSidebar"},"Modders/manifest-files/character-select":{"id":"Modders/manifest-files/character-select","title":"Character Select","description":"There\'s a manifest.json file for the character select screen located in the public folder of the repo, for example CharacterStudio/public/character-assets/manifest.json. Think of each of these as a new character template, like picking a class in an MMO or choosing your fighter in a video game.","sidebar":"tutorialSidebar"},"Modders/manifest-files/character-traits":{"id":"Modders/manifest-files/character-traits","title":"Character Traits","description":"Setting up this manifest will populate the asset trait section with your own traits that people can select from. It will also serve the character studio for cull trait model options (remove faces underneath) based on the layers, so the triangles disappear underneath the clothing for example.","sidebar":"tutorialSidebar"},"Modders/manifest-files/generate-manifest-files":{"id":"Modders/manifest-files/generate-manifest-files","title":"Useful Scripts","description":"Some useful scripts for generating manifest files for use in https://github.com/M3-org/characterstudio. YMMV.","sidebar":"tutorialSidebar"},"Modders/manifest-files/overview":{"id":"Modders/manifest-files/overview","title":"Overview","description":"The manifest files are essential if you want to mod Character Studio with your own assets and selection screens. They are found in various parts of the project, and basically are the main file other than art assets that you would need to modify to make an avatar builder program. For more info go to the full documentation page for any manifest in the sidebar.","sidebar":"tutorialSidebar"},"Modders/manifest-files/vrm-to-lora":{"id":"Modders/manifest-files/vrm-to-lora","title":"VRM to LoRA data","description":"This manifest is inspired by the VRM to LoRA guide by reneil1337 will generate training data that can be used for training LoRAs using tools such as Kohya.","sidebar":"tutorialSidebar"},"Modders/manifest-files/vrm-to-spritesheet":{"id":"Modders/manifest-files/vrm-to-spritesheet","title":"VRM to Spritesheet","description":"The spritesheet generator works very similar to the LoRA generator with the exception that the image outputs are turned into an atlas alongside a gif preview. Here\'s a very simple example of a manifest file that can generate a spritesheet:","sidebar":"tutorialSidebar"},"Modders/process-avatars":{"id":"Modders/process-avatars","title":"Preparing Assets","description":"After cloning and installing Character Studio, you will want to then copy your assets into the public folder and check the .env variable to ensure it\'s configured to the right location.","sidebar":"tutorialSidebar"},"quickstart":{"id":"quickstart","title":"Quickstart","description":"- Main repo//github.com/M3-org/characterstudio","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/9ab5d69a.367e7b69.js b/assets/js/9ab5d69a.367e7b69.js deleted file mode 100644 index 4de97e1e..00000000 --- a/assets/js/9ab5d69a.367e7b69.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[9962],{9098:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>i,toc:()=>d});var o=t(4848),s=t(8453);const c={},a="View",i={id:"Developers/Pages/view",title:"View",description:"The View component is a part of a React application that handles the user interface for a chat feature. It uses various contexts to manage state and behavior, such as view mode, sound, audio, and language settings. The component also controls a microphone feature and speech recognition. In layman's terms, this component is like the control center for a chat room where users can interact with each other, and it manages how the chat room looks, sounds, and behaves.",source:"@site/docs/Developers/Pages/view.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/view",permalink:"/characterstudio-docs/docs/Developers/Pages/view",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/view.md",tags:[],version:"current",lastUpdatedBy:"madjin",lastUpdatedAt:1708577163,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Bio",permalink:"/characterstudio-docs/docs/Developers/Pages/bio"},next:{title:"Mint",permalink:"/characterstudio-docs/docs/Developers/Pages/mint"}},r={},d=[];function l(e){const n={code:"code",h1:"h1",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"view",children:"View"}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"View"})," component is a part of a React application that handles the user interface for a chat feature. It uses various contexts to manage state and behavior, such as view mode, sound, audio, and language settings. The component also controls a microphone feature and speech recognition. In layman's terms, this component is like the control center for a chat room where users can interact with each other, and it manages how the chat room looks, sounds, and behaves."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Imports"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx!",children:'import React, { useContext } from "react"\nimport styles from "./View.module.css"\nimport { ViewMode, ViewContext } from "../context/ViewContext"\nimport Chat from "../components/Chat"\nimport CustomButton from "../components/custom-button"\nimport { LanguageContext } from "../context/LanguageContext"\nimport { SoundContext } from "../context/SoundContext"\nimport { AudioContext } from "../context/AudioContext"\n'})}),"\n",(0,o.jsxs)(n.p,{children:["The component imports necessary modules, styles, and contexts. ",(0,o.jsx)(n.code,{children:"useContext"})," is a React hook that allows the component to access the state and functions provided by the imported contexts."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Component Function"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx!",children:"function View({templateInfo}) {\n ...\n}\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"View"})," component receives ",(0,o.jsx)(n.code,{children:"templateInfo"})," as a prop."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"State and Context"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx!",children:"const { setViewMode } = React.useContext(ViewContext)\nconst [micEnabled, setMicEnabled] = React.useState(false)\nconst [speechRecognition, setSpeechRecognition] = React.useState(false)\nconst { playSound } = React.useContext(SoundContext)\nconst { isMute } = React.useContext(AudioContext)\nconst { t } = useContext(LanguageContext);\n"})}),"\n",(0,o.jsx)(n.p,{children:"The component uses several pieces of state and context:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"setViewMode"}),": A function from ",(0,o.jsx)(n.code,{children:"ViewContext"})," to change the view mode."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"micEnabled"})," and ",(0,o.jsx)(n.code,{children:"setMicEnabled"}),": State variables to manage the microphone status."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"speechRecognition"})," and ",(0,o.jsx)(n.code,{children:"setSpeechRecognition"}),": State variables to manage the speech recognition status."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"playSound"}),": A function from ",(0,o.jsx)(n.code,{children:"SoundContext"})," to play a sound."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"isMute"}),": A state variable from ",(0,o.jsx)(n.code,{children:"AudioContext"})," to check if the audio is muted."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"t"}),": A function from ",(0,o.jsx)(n.code,{children:"LanguageContext"})," to translate text."]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Back Function"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx!",children:"const back = () => {\n setViewMode(ViewMode.SAVE)\n !isMute && playSound('backNextButton');\n if (speechRecognition)\n speechRecognition.stop()\n setMicEnabled(false)\n}\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"back"})," function changes the view mode to ",(0,o.jsx)(n.code,{children:"SAVE"}),", plays a sound if audio is not muted, stops speech recognition if it's active, and disables the microphone."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Render"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:"return (\n ...\n)\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The component renders a chat interface with a title, a ",(0,o.jsx)(n.code,{children:"Chat"})," component, and a ",(0,o.jsx)(n.code,{children:"CustomButton"})," component. The ",(0,o.jsx)(n.code,{children:"Chat"})," component receives several props related to the microphone and speech recognition. The ",(0,o.jsx)(n.code,{children:"CustomButton"})," component is configured to act as a back button."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Export"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:"export default View\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"View"})," component is exported for use in other parts of the application."]})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>i});var o=t(6540);const s={},c=o.createContext(s);function a(e){const n=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),o.createElement(c.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9ab5d69a.6b391ba8.js b/assets/js/9ab5d69a.6b391ba8.js new file mode 100644 index 00000000..a8a28d99 --- /dev/null +++ b/assets/js/9ab5d69a.6b391ba8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[9962],{9098:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>i,toc:()=>d});var n=r(4848),s=r(8453);const o={},c="View",i={id:"Developers/Pages/view",title:"View",description:"This menu is currently hidden, but it can be shown after character bio page, after the personality of the character has been selected.",source:"@site/docs/Developers/Pages/view.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/view",permalink:"/characterstudio-docs/docs/Developers/Pages/view",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/view.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709352314,formattedLastUpdatedAt:"Mar 2, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Bio",permalink:"/characterstudio-docs/docs/Developers/Pages/bio"},next:{title:"Mint",permalink:"/characterstudio-docs/docs/Developers/Pages/mint"}},a={},d=[];function l(e){const t={code:"code",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"view",children:"View"}),"\n",(0,n.jsx)(t.p,{children:"This menu is currently hidden, but it can be shown after character bio page, after the personality of the character has been selected."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"Summary"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"View"})," page, allows you to chat with the current created character, turning on the ",(0,n.jsx)(t.code,{children:"Chat"})," component and allowing microphone to be used."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"Util Functions:"})}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"back"}),": Go to the previous menu"]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},8453:(e,t,r)=>{r.d(t,{R:()=>c,x:()=>i});var n=r(6540);const s={},o=n.createContext(s);function c(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ae2c20d1.69d0f43e.js b/assets/js/ae2c20d1.69d0f43e.js deleted file mode 100644 index 47c82f52..00000000 --- a/assets/js/ae2c20d1.69d0f43e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[1491],{5240:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var o=n(4848),s=n(8453);const r={},i="Batch Download",d={id:"Developers/Pages/batch-download",title:"Batch Download",description:"To Access this menu, go to Batch Download button, then select any other option than is not Manifest - Load by manifest",source:"@site/docs/Developers/Pages/batch-download.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/batch-download",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-download",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/batch-download.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709103052,formattedLastUpdatedAt:"Feb 28, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Claim",permalink:"/characterstudio-docs/docs/Developers/Pages/claim"},next:{title:"Batch Manifest",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-manifest"}},a={},l=[];function c(e){const t={code:"code",em:"em",h1:"h1",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"batch-download",children:"Batch Download"}),"\n",(0,o.jsxs)(t.p,{children:["To Access this menu, go to ",(0,o.jsx)(t.code,{children:"Batch Download"})," button, then select any other option than is not ",(0,o.jsx)(t.code,{children:"Manifest - Load by manifest"})]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Important:"})})," if only ",(0,o.jsx)(t.code,{children:"Manifest - Load by manifest"})," option is present and there are no additional options, you need to setup ",(0,o.jsx)(t.code,{children:"VITE_ASSET_PATH"})," in the ",(0,o.jsx)(t.code,{children:".env"})," file, to point to ",(0,o.jsx)(t.code,{children:"character manifest.json"})," location, and point were to fetch manifest options."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Summary"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"Batch Download"})," component allow users to drag and drop one or mutliple ",(0,o.jsx)(t.code,{children:"nft json type"})," (example manifest) file(s), that include the option traits that will be laoded for that specific file, and allow the user to download a VRM with the loaded options."]}),"\n",(0,o.jsx)(t.p,{children:"Once these nft json objects are added, for each json file dropped, user may preview each loaded trait by clicking the right or left arrow on the Trait Selection menu that will pop open in the right side of the screen, or download them all by clicking the download button that will appear in the lower right screen."}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:"Important note"}),"\nIf multiple files are not being downloaded, browser might not support/allow this feature. Please switch to a web browser that support this feature (Chrome), or allow it on your current browser"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Import Statements"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:'import React, { useContext, useEffect, useState } from "react"\nimport styles from "./Optimizer.module.css"\nimport { ViewMode, ViewContext } from "../context/ViewContext"\nimport { SceneContext } from "../context/SceneContext"\nimport CustomButton from "../components/custom-button"\nimport { LanguageContext } from "../context/LanguageContext"\nimport { SoundContext } from "../context/SoundContext"\nimport { AudioContext } from "../context/AudioContext"\nimport FileDropComponent from "../components/FileDropComponent"\nimport { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils"\nimport JsonAttributes from "../components/JsonAttributes"\nimport ModelInformation from "../components/ModelInformation"\nimport MergeOptions from "../components/MergeOptions"\nimport { local } from "../library/store"\n'})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Logic"})}),"\n",(0,o.jsxs)(t.p,{children:["For this component we want the user to be able to drag and drop a file with ",(0,o.jsx)(t.code,{children:"FileDropComponent"})," and detect wether the user dropped an nft json file (.json), animation file (.fbx) or .vrm file to start the batch download process accodrdingly."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Pre-process Functions:"})}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"handleFilesDrop"}),": Function to detect wether the user dropped a manifest, animation, or vrm file(s)."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"handleJsonDrop"}),": User dropped a manifest file, save the manifest file(s) as an object(s) so its ready to load its content."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"handleVRMDrop"}),": User dropped a VRM file, load the vrm file into the current view. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"handleAnimationDrop"}),": User dropped an animation file, load the animation into the current displayed character, if no vrm or manifest has been added, this will have no effect. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Process Functions:"})}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"download"}),": Start batch download process for all the manifest previously added (this function must be called only if user added at least 1 manifest file)"]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"getOptions"}),": Set the options that will be used for the downloaded character"]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"downloadVRMWithIndex"}),": Download a vrm file, or the image, given a the nft json index."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Util Functions:"})}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"back"}),": Go to the previous menu"]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>d});var o=n(6540);const s={},r=o.createContext(s);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ae2c20d1.7c193388.js b/assets/js/ae2c20d1.7c193388.js new file mode 100644 index 00000000..db975084 --- /dev/null +++ b/assets/js/ae2c20d1.7c193388.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[1491],{5240:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>r,default:()=>h,frontMatter:()=>i,metadata:()=>d,toc:()=>l});var o=t(4848),s=t(8453);const i={},r="Batch Download",d={id:"Developers/Pages/batch-download",title:"Batch Download",description:"To Access this menu, go to Batch Download button, then select any other option than is not Manifest - Load by manifest",source:"@site/docs/Developers/Pages/batch-download.md",sourceDirName:"Developers/Pages",slug:"/Developers/Pages/batch-download",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-download",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Pages/batch-download.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709352314,formattedLastUpdatedAt:"Mar 2, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Claim",permalink:"/characterstudio-docs/docs/Developers/Pages/claim"},next:{title:"Batch Manifest",permalink:"/characterstudio-docs/docs/Developers/Pages/batch-manifest"}},a={},l=[];function c(e){const n={code:"code",em:"em",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"batch-download",children:"Batch Download"}),"\n",(0,o.jsxs)(n.p,{children:["To Access this menu, go to ",(0,o.jsx)(n.code,{children:"Batch Download"})," button, then select any other option than is not ",(0,o.jsx)(n.code,{children:"Manifest - Load by manifest"})]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.em,{children:(0,o.jsx)(n.strong,{children:"Important:"})})," if only ",(0,o.jsx)(n.code,{children:"Manifest - Load by manifest"})," option is present and there are no additional options, you need to setup ",(0,o.jsx)(n.code,{children:"VITE_ASSET_PATH"})," in the ",(0,o.jsx)(n.code,{children:".env"})," file, to point to ",(0,o.jsx)(n.code,{children:"character manifest.json"})," location, and point were to fetch manifest options."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Summary"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"Batch Download"})," component allow users to drag and drop one or mutliple ",(0,o.jsx)(n.code,{children:"nft json type"})," (example manifest) file(s), that include the option traits that will be laoded for that specific file, and allow the user to download a VRM with the loaded options."]}),"\n",(0,o.jsx)(n.p,{children:"Once these nft json objects are added, for each json file dropped, user may preview each loaded trait by clicking the right or left arrow on the Trait Selection menu that will pop open in the right side of the screen, or download them all by clicking the download button that will appear in the lower right screen."}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.em,{children:"Important note"}),"\nIf multiple files are not being downloaded, browser might not support/allow this feature. Please switch to a web browser that support this feature (Chrome), or allow it on your current browser"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Logic"})}),"\n",(0,o.jsxs)(n.p,{children:["For this component we want the user to be able to drag and drop a file with ",(0,o.jsx)(n.code,{children:"FileDropComponent"})," and detect wether the user dropped an nft json file (.json), animation file (.fbx) or .vrm file to start the batch download process accodrdingly."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Pre-process Functions:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"handleFilesDrop"}),": Function to detect wether the user dropped a manifest, animation, or vrm file(s)."]}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"handleJsonDrop"}),": User dropped a manifest file, save the manifest file(s) as an object(s) so its ready to load its content."]}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"handleVRMDrop"}),": User dropped a VRM file, load the vrm file into the current view. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"handleAnimationDrop"}),": User dropped an animation file, load the animation into the current displayed character, if no vrm or manifest has been added, this will have no effect. (if multiple files are added, only the first one will be used)"]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Process Functions:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"download"}),": Start batch download process for all the manifest previously added (this function must be called only if user added at least 1 manifest file)"]}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"getOptions"}),": Set the options that will be used for the downloaded character"]}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"downloadVRMWithIndex"}),": Download a vrm file, or the image, given a the nft json index."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Util Functions:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"back"}),": Go to the previous menu"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>d});var o=t(6540);const s={},i=o.createContext(s);function r(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d34a9e91.99d71784.js b/assets/js/d34a9e91.282efbbf.js similarity index 73% rename from assets/js/d34a9e91.99d71784.js rename to assets/js/d34a9e91.282efbbf.js index 17008862..31f653aa 100644 --- a/assets/js/d34a9e91.99d71784.js +++ b/assets/js/d34a9e91.282efbbf.js @@ -1 +1 @@ -"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[6965],{3754:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>s,metadata:()=>o,toc:()=>l});var t=n(4848),a=n(8453);const s={},i="Sprite Atlas Generator",o={id:"Developers/Managers/sprite-atlas-generator",title:"Sprite Atlas Generator",description:"SpriteAtlasGenerator is a class responsible for generating sprite atlases from animations specified in a manifest file.",source:"@site/docs/Developers/Managers/sprite-atlas-generator.md",sourceDirName:"Developers/Managers",slug:"/Developers/Managers/sprite-atlas-generator",permalink:"/characterstudio-docs/docs/Developers/Managers/sprite-atlas-generator",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Managers/sprite-atlas-generator.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709269546,formattedLastUpdatedAt:"Mar 1, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LoRa Data Generator",permalink:"/characterstudio-docs/docs/Developers/Managers/lora-data-generator"},next:{title:"Scene Context",permalink:"/characterstudio-docs/docs/Developers/Contexts/scene-context"}},c={},l=[{value:"Constructor",id:"constructor",level:2},{value:"SpriteAtlasGenerator(characterManager)",id:"spriteatlasgeneratorcharactermanager",level:3},{value:"Properties",id:"properties",level:4},{value:"Methods",id:"methods",level:4},{value:"createSpriteAtlas(manifestURL)",id:"createspriteatlasmanifesturl",level:3}];function d(e){const r={code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.h1,{id:"sprite-atlas-generator",children:"Sprite Atlas Generator"}),"\n",(0,t.jsxs)(r.p,{children:[(0,t.jsx)(r.code,{children:"SpriteAtlasGenerator"})," is a class responsible for generating sprite atlases from animations specified in a manifest file."]}),"\n",(0,t.jsx)(r.h2,{id:"constructor",children:"Constructor"}),"\n",(0,t.jsx)(r.h3,{id:"spriteatlasgeneratorcharactermanager",children:"SpriteAtlasGenerator(characterManager)"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"characterManager"}),": An instance of the character manager containing necessary modules like ",(0,t.jsx)(r.code,{children:"screenshotManager"}),", ",(0,t.jsx)(r.code,{children:"blinkManager"}),", and ",(0,t.jsx)(r.code,{children:"animationManager"}),"."]}),"\n"]}),"\n",(0,t.jsx)(r.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(r.p,{children:["Properties for ",(0,t.jsx)(r.code,{children:"Sprite Atlas Generator"})," are not meant to be edited directly, they are modified with methods."]}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:["\n",(0,t.jsx)(r.p,{children:(0,t.jsx)(r.code,{children:".characterManager: Object"})}),"\n",(0,t.jsxs)(r.p,{children:["An object containing various modules, such as ",(0,t.jsx)(r.code,{children:"screenshotManager"}),", ",(0,t.jsx)(r.code,{children:"blinkManager"}),", and ",(0,t.jsx)(r.code,{children:"animationManager"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:["\n",(0,t.jsx)(r.p,{children:(0,t.jsx)(r.code,{children:".screenshotManager:"})}),"\n",(0,t.jsx)(r.p,{children:"The screenshot manager used for capturing screenshots."}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:["\n",(0,t.jsx)(r.p,{children:(0,t.jsx)(r.code,{children:".blinkManager: Object"})}),"\n",(0,t.jsx)(r.p,{children:"The blink manager used for managing blinking animations."}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:["\n",(0,t.jsx)(r.p,{children:(0,t.jsx)(r.code,{children:".animationManager: Object**"})}),"\n",(0,t.jsx)(r.p,{children:"The animation manager used for loading and managing animations."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(r.h4,{id:"methods",children:"Methods"}),"\n",(0,t.jsx)(r.h3,{id:"createspriteatlasmanifesturl",children:(0,t.jsx)(r.code,{children:"createSpriteAtlas(manifestURL)"})}),"\n",(0,t.jsx)(r.p,{children:"Creates a sprite atlas based on the specified manifest file."}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"manifestURL"}),": The URL of the sprite manifest file."]}),"\n"]})]})}function h(e={}){const{wrapper:r}={...(0,a.R)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,r,n)=>{n.d(r,{R:()=>i,x:()=>o});var t=n(6540);const a={},s=t.createContext(a);function i(e){const r=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function o(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(s.Provider,{value:r},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkcharacterstudio_docs=self.webpackChunkcharacterstudio_docs||[]).push([[6965],{3754:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>s,metadata:()=>o,toc:()=>l});var t=n(4848),a=n(8453);const s={},i="Sprite Atlas Generator",o={id:"Developers/Managers/sprite-atlas-generator",title:"Sprite Atlas Generator",description:"SpriteAtlasGenerator is a class responsible for generating sprite atlases from animations specified in a manifest file.",source:"@site/docs/Developers/Managers/sprite-atlas-generator.md",sourceDirName:"Developers/Managers",slug:"/Developers/Managers/sprite-atlas-generator",permalink:"/characterstudio-docs/docs/Developers/Managers/sprite-atlas-generator",draft:!1,unlisted:!1,editUrl:"https://github.com/m3-org/characterstudio-docs/tree/main/docs/Developers/Managers/sprite-atlas-generator.md",tags:[],version:"current",lastUpdatedBy:"memelotsqui",lastUpdatedAt:1709352314,formattedLastUpdatedAt:"Mar 2, 2024",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LoRa Data Generator",permalink:"/characterstudio-docs/docs/Developers/Managers/lora-data-generator"},next:{title:"Scene Context",permalink:"/characterstudio-docs/docs/Developers/Contexts/scene-context"}},c={},l=[{value:"Constructor",id:"constructor",level:2},{value:"SpriteAtlasGenerator(characterManager)",id:"spriteatlasgeneratorcharactermanager",level:3},{value:"Properties",id:"properties",level:4},{value:"Methods",id:"methods",level:4},{value:"createSpriteAtlas(manifestURL)",id:"createspriteatlasmanifesturl",level:3}];function d(e){const r={code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.h1,{id:"sprite-atlas-generator",children:"Sprite Atlas Generator"}),"\n",(0,t.jsxs)(r.p,{children:[(0,t.jsx)(r.code,{children:"SpriteAtlasGenerator"})," is a class responsible for generating sprite atlases from animations specified in a manifest file."]}),"\n",(0,t.jsx)(r.h2,{id:"constructor",children:"Constructor"}),"\n",(0,t.jsx)(r.h3,{id:"spriteatlasgeneratorcharactermanager",children:"SpriteAtlasGenerator(characterManager)"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"characterManager"}),": An instance of the character manager containing necessary modules like ",(0,t.jsx)(r.code,{children:"screenshotManager"}),", ",(0,t.jsx)(r.code,{children:"blinkManager"}),", and ",(0,t.jsx)(r.code,{children:"animationManager"}),"."]}),"\n"]}),"\n",(0,t.jsx)(r.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(r.p,{children:["Properties for ",(0,t.jsx)(r.code,{children:"Sprite Atlas Generator"})," are not meant to be edited directly, they are modified with methods."]}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:["\n",(0,t.jsx)(r.p,{children:(0,t.jsx)(r.code,{children:".characterManager: Object"})}),"\n",(0,t.jsxs)(r.p,{children:["An object containing various modules, such as ",(0,t.jsx)(r.code,{children:"screenshotManager"}),", ",(0,t.jsx)(r.code,{children:"blinkManager"}),", and ",(0,t.jsx)(r.code,{children:"animationManager"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:["\n",(0,t.jsx)(r.p,{children:(0,t.jsx)(r.code,{children:".screenshotManager:"})}),"\n",(0,t.jsx)(r.p,{children:"The screenshot manager used for capturing screenshots."}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:["\n",(0,t.jsx)(r.p,{children:(0,t.jsx)(r.code,{children:".blinkManager: Object"})}),"\n",(0,t.jsx)(r.p,{children:"The blink manager used for managing blinking animations."}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:["\n",(0,t.jsx)(r.p,{children:(0,t.jsx)(r.code,{children:".yarnanimationManager: Object**"})}),"\n",(0,t.jsx)(r.p,{children:"The animation manager used for loading and managing animations."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(r.h4,{id:"methods",children:"Methods"}),"\n",(0,t.jsx)(r.h3,{id:"createspriteatlasmanifesturl",children:(0,t.jsx)(r.code,{children:"createSpriteAtlas(manifestURL)"})}),"\n",(0,t.jsx)(r.p,{children:"Creates a sprite atlas based on the specified manifest file."}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"manifestURL"}),": The URL of the sprite manifest file."]}),"\n"]})]})}function h(e={}){const{wrapper:r}={...(0,a.R)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,r,n)=>{n.d(r,{R:()=>i,x:()=>o});var t=n(6540);const a={},s=t.createContext(a);function i(e){const r=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function o(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(s.Provider,{value:r},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.528300e1.js b/assets/js/runtime~main.ec8cac5f.js similarity index 68% rename from assets/js/runtime~main.528300e1.js rename to assets/js/runtime~main.ec8cac5f.js index bdcc3992..39465d53 100644 --- a/assets/js/runtime~main.528300e1.js +++ b/assets/js/runtime~main.ec8cac5f.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,c,d,f,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var c=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(c.exports,c,c.exports,r),c.loaded=!0,c.exports}r.m=b,r.c=t,e=[],r.O=(a,c,d,f)=>{if(!c){var b=1/0;for(i=0;i=f)&&Object.keys(r.O).every((e=>r.O[e](c[o])))?c.splice(o--,1):(t=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[c,d,f]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},c=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var f=Object.create(null);r.r(f);var b={};a=a||[null,c({}),c([]),c(c)];for(var t=2&d&&e;"object"==typeof t&&!~a.indexOf(t);t=c(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(f,b),f},r.d=(e,a)=>{for(var c in a)r.o(a,c)&&!r.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,get:a[c]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,c)=>(r.f[c](e,a),a)),[])),r.u=e=>"assets/js/"+({198:"80c59f1c",264:"ea12cc33",443:"f2c338ba",446:"d3d02afc",465:"2f562218",601:"813fc4fc",946:"157b43d7",1175:"30190227",1263:"93114ff6",1491:"ae2c20d1",1762:"0ad602a3",1802:"85d0e959",1906:"9e9e5dc3",1972:"73664a40",2134:"bca29e14",2151:"026b6497",2168:"e18865ea",2495:"3d8d21df",2634:"c4f5d8e4",2711:"9e4087bc",2725:"34394f23",3033:"bb2b24ca",3053:"37215f68",3074:"d218451f",3081:"ed02e42b",3249:"ccc49370",3321:"f8e71678",3342:"ca0ee234",3637:"f4f34a3a",3640:"01b2dc8e",3694:"8717b14a",3725:"e6fad545",3822:"8070e160",3888:"988a9ec2",4134:"393be207",4142:"47858b5b",4175:"668a584f",4180:"65a06cd2",4319:"4024efc6",4489:"a1c9fa83",4813:"6875c492",4904:"bb794e0f",4970:"ea36b7af",5206:"ecf69a7b",5549:"95d3ae45",5557:"d9f32620",5564:"5ddfb2db",5688:"66e41a3c",5703:"1ad74b2a",6061:"1f391b9e",6148:"7bc189c8",6421:"2e160ebc",6528:"a0294a64",6810:"60a40192",6864:"0d5331fe",6965:"d34a9e91",7098:"a7bd4aaa",7229:"b6626e7d",7300:"c851cccc",7432:"4097e48d",7472:"814f3328",7643:"a6aa9e1f",7708:"d983a1fe",7871:"421a4f33",7984:"60ba8b2f",8209:"01a85c17",8377:"dfd6eece",8401:"17896441",8581:"935f2afb",8609:"925b3f96",8737:"7661071f",8904:"716a26bf",9048:"a94703ab",9062:"d02179b4",9134:"612df78a",9325:"59362658",9328:"e273c56f",9517:"7df34bbb",9526:"e0d0da10",9647:"5e95c892",9962:"9ab5d69a"}[e]||e)+"."+{198:"344637f8",264:"52b55c5a",443:"a7765925",446:"e95b0a91",465:"b59c9cef",601:"73171865",946:"e8655316",1175:"62d9c926",1263:"71cb0609",1491:"69d0f43e",1762:"b6746202",1802:"61986c88",1906:"d8a1809e",1972:"a4ef91f2",2134:"936227a9",2151:"546e87fc",2168:"d6f8f67c",2237:"1e49fb3f",2495:"8d0760e8",2634:"81c6fd88",2711:"de2031e6",2725:"0972cb91",3033:"96a46db9",3053:"f53601d5",3074:"c9dbd492",3081:"9d898c18",3249:"d0a2795e",3321:"a2c3aca2",3342:"3308fd79",3637:"b292bc20",3640:"69676f04",3694:"245f52f6",3725:"bb54d28d",3822:"663eadec",3888:"f824068e",4134:"47732dc0",4142:"5462a49d",4175:"651120fa",4180:"75824a7a",4319:"417b0bf3",4489:"bd20f2bb",4813:"8cd178c4",4904:"fa9ea807",4970:"c01186ca",5206:"fe64180f",5533:"3ab0d269",5549:"f82d3dbf",5557:"dbc9062b",5564:"c74b179c",5688:"02f01a55",5703:"01d1c3a6",6061:"e28a5fc5",6148:"1f2567bf",6421:"f3128975",6528:"d1e80cd5",6810:"284026b8",6864:"2ef940e4",6965:"99d71784",7098:"953cf14b",7229:"daa4709a",7300:"7a07885e",7432:"1c729374",7472:"40cd5ca9",7643:"bf894e6a",7708:"b449d51d",7871:"f9188117",7984:"d1db5fb7",8209:"fd5da3ee",8377:"05879dad",8401:"59e900b6",8581:"2fdfb9a6",8609:"116a3d31",8737:"62b47ab6",8747:"6f862e33",8904:"2c169ee1",9048:"d439e849",9062:"1c91c09f",9134:"65bed5e0",9325:"6d00cdbf",9328:"b6a6338d",9517:"01bc3ced",9526:"a0ee43c7",9647:"f3398b3a",9962:"367e7b69"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),d={},f="characterstudio-docs:",r.l=(e,a,c,b)=>{if(d[e])d[e].push(a);else{var t,o;if(void 0!==c)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var f=d[e];if(delete d[e],t.parentNode&&t.parentNode.removeChild(t),f&&f.forEach((e=>e(c))),a)return a(c)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/characterstudio-docs/",r.gca=function(e){return e={17896441:"8401",30190227:"1175",59362658:"9325","80c59f1c":"198",ea12cc33:"264",f2c338ba:"443",d3d02afc:"446","2f562218":"465","813fc4fc":"601","157b43d7":"946","93114ff6":"1263",ae2c20d1:"1491","0ad602a3":"1762","85d0e959":"1802","9e9e5dc3":"1906","73664a40":"1972",bca29e14:"2134","026b6497":"2151",e18865ea:"2168","3d8d21df":"2495",c4f5d8e4:"2634","9e4087bc":"2711","34394f23":"2725",bb2b24ca:"3033","37215f68":"3053",d218451f:"3074",ed02e42b:"3081",ccc49370:"3249",f8e71678:"3321",ca0ee234:"3342",f4f34a3a:"3637","01b2dc8e":"3640","8717b14a":"3694",e6fad545:"3725","8070e160":"3822","988a9ec2":"3888","393be207":"4134","47858b5b":"4142","668a584f":"4175","65a06cd2":"4180","4024efc6":"4319",a1c9fa83:"4489","6875c492":"4813",bb794e0f:"4904",ea36b7af:"4970",ecf69a7b:"5206","95d3ae45":"5549",d9f32620:"5557","5ddfb2db":"5564","66e41a3c":"5688","1ad74b2a":"5703","1f391b9e":"6061","7bc189c8":"6148","2e160ebc":"6421",a0294a64:"6528","60a40192":"6810","0d5331fe":"6864",d34a9e91:"6965",a7bd4aaa:"7098",b6626e7d:"7229",c851cccc:"7300","4097e48d":"7432","814f3328":"7472",a6aa9e1f:"7643",d983a1fe:"7708","421a4f33":"7871","60ba8b2f":"7984","01a85c17":"8209",dfd6eece:"8377","935f2afb":"8581","925b3f96":"8609","7661071f":"8737","716a26bf":"8904",a94703ab:"9048",d02179b4:"9062","612df78a":"9134",e273c56f:"9328","7df34bbb":"9517",e0d0da10:"9526","5e95c892":"9647","9ab5d69a":"9962"}[e]||e,r.p+r.u(e)},(()=>{var e={5354:0,1869:0};r.f.j=(a,c)=>{var d=r.o(e,a)?e[a]:void 0;if(0!==d)if(d)c.push(d[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var f=new Promise(((c,f)=>d=e[a]=[c,f]));c.push(d[2]=f);var b=r.p+r.u(a),t=new Error;r.l(b,(c=>{if(r.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var f=c&&("load"===c.type?"missing":c.type),b=c&&c.target&&c.target.src;t.message="Loading chunk "+a+" failed.\n("+f+": "+b+")",t.name="ChunkLoadError",t.type=f,t.request=b,d[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,c)=>{var d,f,b=c[0],t=c[1],o=c[2],n=0;if(b.some((a=>0!==e[a]))){for(d in t)r.o(t,d)&&(r.m[d]=t[d]);if(o)var i=o(r)}for(a&&a(c);n{"use strict";var e,a,c,f,d,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var c=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(c.exports,c,c.exports,r),c.loaded=!0,c.exports}r.m=b,r.c=t,e=[],r.O=(a,c,f,d)=>{if(!c){var b=1/0;for(i=0;i=d)&&Object.keys(r.O).every((e=>r.O[e](c[o])))?c.splice(o--,1):(t=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[c,f,d]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},c=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var b={};a=a||[null,c({}),c([]),c(c)];for(var t=2&f&&e;"object"==typeof t&&!~a.indexOf(t);t=c(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(d,b),d},r.d=(e,a)=>{for(var c in a)r.o(a,c)&&!r.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,get:a[c]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,c)=>(r.f[c](e,a),a)),[])),r.u=e=>"assets/js/"+({198:"80c59f1c",264:"ea12cc33",443:"f2c338ba",446:"d3d02afc",465:"2f562218",601:"813fc4fc",946:"157b43d7",1175:"30190227",1263:"93114ff6",1491:"ae2c20d1",1762:"0ad602a3",1802:"85d0e959",1906:"9e9e5dc3",1972:"73664a40",2134:"bca29e14",2151:"026b6497",2168:"e18865ea",2495:"3d8d21df",2634:"c4f5d8e4",2711:"9e4087bc",2725:"34394f23",3033:"bb2b24ca",3053:"37215f68",3074:"d218451f",3081:"ed02e42b",3249:"ccc49370",3321:"f8e71678",3342:"ca0ee234",3637:"f4f34a3a",3640:"01b2dc8e",3694:"8717b14a",3725:"e6fad545",3822:"8070e160",3888:"988a9ec2",4134:"393be207",4142:"47858b5b",4175:"668a584f",4180:"65a06cd2",4319:"4024efc6",4489:"a1c9fa83",4813:"6875c492",4904:"bb794e0f",4970:"ea36b7af",5206:"ecf69a7b",5549:"95d3ae45",5557:"d9f32620",5564:"5ddfb2db",5688:"66e41a3c",5703:"1ad74b2a",6061:"1f391b9e",6148:"7bc189c8",6421:"2e160ebc",6528:"a0294a64",6810:"60a40192",6864:"0d5331fe",6965:"d34a9e91",7098:"a7bd4aaa",7229:"b6626e7d",7300:"c851cccc",7432:"4097e48d",7472:"814f3328",7643:"a6aa9e1f",7708:"d983a1fe",7871:"421a4f33",7984:"60ba8b2f",8209:"01a85c17",8377:"dfd6eece",8401:"17896441",8581:"935f2afb",8609:"925b3f96",8737:"7661071f",8904:"716a26bf",9048:"a94703ab",9062:"d02179b4",9134:"612df78a",9325:"59362658",9328:"e273c56f",9517:"7df34bbb",9526:"e0d0da10",9647:"5e95c892",9962:"9ab5d69a"}[e]||e)+"."+{198:"344637f8",264:"52b55c5a",443:"a7765925",446:"e95b0a91",465:"aa45011b",601:"73171865",946:"e8655316",1175:"62d9c926",1263:"71cb0609",1491:"7c193388",1762:"b6746202",1802:"61986c88",1906:"d8a1809e",1972:"a4ef91f2",2134:"936227a9",2151:"546e87fc",2168:"d6f8f67c",2237:"1e49fb3f",2495:"8d0760e8",2634:"81c6fd88",2711:"de2031e6",2725:"0972cb91",3033:"96a46db9",3053:"f53601d5",3074:"c9dbd492",3081:"9d898c18",3249:"d0a2795e",3321:"a2c3aca2",3342:"3308fd79",3637:"b292bc20",3640:"69676f04",3694:"245f52f6",3725:"bb54d28d",3822:"663eadec",3888:"f824068e",4134:"47732dc0",4142:"5462a49d",4175:"654a54db",4180:"75824a7a",4319:"3c6f993d",4489:"bd20f2bb",4813:"8cd178c4",4904:"fa9ea807",4970:"c01186ca",5206:"fe64180f",5533:"3ab0d269",5549:"f82d3dbf",5557:"dbc9062b",5564:"23791b33",5688:"02f01a55",5703:"01d1c3a6",6061:"e28a5fc5",6148:"1f2567bf",6421:"b05f1c22",6528:"d1e80cd5",6810:"284026b8",6864:"2ef940e4",6965:"282efbbf",7098:"953cf14b",7229:"daa4709a",7300:"7a07885e",7432:"1c729374",7472:"40cd5ca9",7643:"bf894e6a",7708:"b449d51d",7871:"f9188117",7984:"d1db5fb7",8209:"fd5da3ee",8377:"05879dad",8401:"59e900b6",8581:"31c01839",8609:"116a3d31",8737:"62b47ab6",8747:"6f862e33",8904:"2c169ee1",9048:"d439e849",9062:"1c91c09f",9134:"65bed5e0",9325:"6d00cdbf",9328:"b6a6338d",9517:"01bc3ced",9526:"a0ee43c7",9647:"f3398b3a",9962:"6b391ba8"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},d="characterstudio-docs:",r.l=(e,a,c,b)=>{if(f[e])f[e].push(a);else{var t,o;if(void 0!==c)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var d=f[e];if(delete f[e],t.parentNode&&t.parentNode.removeChild(t),d&&d.forEach((e=>e(c))),a)return a(c)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/characterstudio-docs/",r.gca=function(e){return e={17896441:"8401",30190227:"1175",59362658:"9325","80c59f1c":"198",ea12cc33:"264",f2c338ba:"443",d3d02afc:"446","2f562218":"465","813fc4fc":"601","157b43d7":"946","93114ff6":"1263",ae2c20d1:"1491","0ad602a3":"1762","85d0e959":"1802","9e9e5dc3":"1906","73664a40":"1972",bca29e14:"2134","026b6497":"2151",e18865ea:"2168","3d8d21df":"2495",c4f5d8e4:"2634","9e4087bc":"2711","34394f23":"2725",bb2b24ca:"3033","37215f68":"3053",d218451f:"3074",ed02e42b:"3081",ccc49370:"3249",f8e71678:"3321",ca0ee234:"3342",f4f34a3a:"3637","01b2dc8e":"3640","8717b14a":"3694",e6fad545:"3725","8070e160":"3822","988a9ec2":"3888","393be207":"4134","47858b5b":"4142","668a584f":"4175","65a06cd2":"4180","4024efc6":"4319",a1c9fa83:"4489","6875c492":"4813",bb794e0f:"4904",ea36b7af:"4970",ecf69a7b:"5206","95d3ae45":"5549",d9f32620:"5557","5ddfb2db":"5564","66e41a3c":"5688","1ad74b2a":"5703","1f391b9e":"6061","7bc189c8":"6148","2e160ebc":"6421",a0294a64:"6528","60a40192":"6810","0d5331fe":"6864",d34a9e91:"6965",a7bd4aaa:"7098",b6626e7d:"7229",c851cccc:"7300","4097e48d":"7432","814f3328":"7472",a6aa9e1f:"7643",d983a1fe:"7708","421a4f33":"7871","60ba8b2f":"7984","01a85c17":"8209",dfd6eece:"8377","935f2afb":"8581","925b3f96":"8609","7661071f":"8737","716a26bf":"8904",a94703ab:"9048",d02179b4:"9062","612df78a":"9134",e273c56f:"9328","7df34bbb":"9517",e0d0da10:"9526","5e95c892":"9647","9ab5d69a":"9962"}[e]||e,r.p+r.u(e)},(()=>{var e={5354:0,1869:0};r.f.j=(a,c)=>{var f=r.o(e,a)?e[a]:void 0;if(0!==f)if(f)c.push(f[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var d=new Promise(((c,d)=>f=e[a]=[c,d]));c.push(f[2]=d);var b=r.p+r.u(a),t=new Error;r.l(b,(c=>{if(r.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var d=c&&("load"===c.type?"missing":c.type),b=c&&c.target&&c.target.src;t.message="Loading chunk "+a+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,f[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,c)=>{var f,d,b=c[0],t=c[1],o=c[2],n=0;if(b.some((a=>0!==e[a]))){for(f in t)r.o(t,f)&&(r.m[f]=t[f]);if(o)var i=o(r)}for(a&&a(c);n Archive | Character Studio - + diff --git a/blog/first-blog-post/index.html b/blog/first-blog-post/index.html index 2c8d150b..1d48e4ae 100644 --- a/blog/first-blog-post/index.html +++ b/blog/first-blog-post/index.html @@ -5,7 +5,7 @@ First Blog Post | Character Studio - + diff --git a/blog/greetings/index.html b/blog/greetings/index.html index 394915fc..05d50f33 100644 --- a/blog/greetings/index.html +++ b/blog/greetings/index.html @@ -5,7 +5,7 @@ Greetings! | Character Studio - + diff --git a/blog/index.html b/blog/index.html index d15f147f..c302e430 100644 --- a/blog/index.html +++ b/blog/index.html @@ -5,7 +5,7 @@ Blog | Character Studio - + diff --git a/blog/long-blog-post/index.html b/blog/long-blog-post/index.html index 86dc9e1b..84566a6a 100644 --- a/blog/long-blog-post/index.html +++ b/blog/long-blog-post/index.html @@ -5,7 +5,7 @@ Long Blog Post | Character Studio - + diff --git a/blog/mdx-blog-post/index.html b/blog/mdx-blog-post/index.html index e830b6f2..00f211af 100644 --- a/blog/mdx-blog-post/index.html +++ b/blog/mdx-blog-post/index.html @@ -5,7 +5,7 @@ MDX Blog Post | Character Studio - + diff --git a/blog/tags/docusaurus/index.html b/blog/tags/docusaurus/index.html index 57250d20..d7a4f60f 100644 --- a/blog/tags/docusaurus/index.html +++ b/blog/tags/docusaurus/index.html @@ -5,7 +5,7 @@ 4 posts tagged with "docusaurus" | Character Studio - + diff --git a/blog/tags/facebook/index.html b/blog/tags/facebook/index.html index f8d4f841..3bcf3d8d 100644 --- a/blog/tags/facebook/index.html +++ b/blog/tags/facebook/index.html @@ -5,7 +5,7 @@ One post tagged with "facebook" | Character Studio - + diff --git a/blog/tags/greetings/index.html b/blog/tags/greetings/index.html index 5bb54e60..b11c2bb5 100644 --- a/blog/tags/greetings/index.html +++ b/blog/tags/greetings/index.html @@ -5,7 +5,7 @@ One post tagged with "greetings" | Character Studio - + diff --git a/blog/tags/hello/index.html b/blog/tags/hello/index.html index f25f5b55..a9ed3361 100644 --- a/blog/tags/hello/index.html +++ b/blog/tags/hello/index.html @@ -5,7 +5,7 @@ 2 posts tagged with "hello" | Character Studio - + diff --git a/blog/tags/hola/index.html b/blog/tags/hola/index.html index 39eb6ad0..a2b59e1e 100644 --- a/blog/tags/hola/index.html +++ b/blog/tags/hola/index.html @@ -5,7 +5,7 @@ One post tagged with "hola" | Character Studio - + diff --git a/blog/tags/index.html b/blog/tags/index.html index 82a1ceb5..d1307ae0 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -5,7 +5,7 @@ Tags | Character Studio - + diff --git a/blog/welcome/index.html b/blog/welcome/index.html index 02cff439..dce877ab 100644 --- a/blog/welcome/index.html +++ b/blog/welcome/index.html @@ -5,7 +5,7 @@ Welcome | Character Studio - + diff --git a/docs/Developers/Contexts/audio-context/index.html b/docs/Developers/Contexts/audio-context/index.html index 9f85e30b..e371a1ba 100644 --- a/docs/Developers/Contexts/audio-context/index.html +++ b/docs/Developers/Contexts/audio-context/index.html @@ -5,7 +5,7 @@ Audio Context | Character Studio - + diff --git a/docs/Developers/Contexts/language-context/index.html b/docs/Developers/Contexts/language-context/index.html index d9c58573..7212dd2a 100644 --- a/docs/Developers/Contexts/language-context/index.html +++ b/docs/Developers/Contexts/language-context/index.html @@ -5,7 +5,7 @@ Language Context | Character Studio - + diff --git a/docs/Developers/Contexts/scene-context/index.html b/docs/Developers/Contexts/scene-context/index.html index 04386dd2..9765369b 100644 --- a/docs/Developers/Contexts/scene-context/index.html +++ b/docs/Developers/Contexts/scene-context/index.html @@ -5,7 +5,7 @@ Scene Context | Character Studio - + diff --git a/docs/Developers/Contexts/sound-context/index.html b/docs/Developers/Contexts/sound-context/index.html index e01d9bc3..51515a5e 100644 --- a/docs/Developers/Contexts/sound-context/index.html +++ b/docs/Developers/Contexts/sound-context/index.html @@ -5,7 +5,7 @@ Sound Context | Character Studio - + diff --git a/docs/Developers/Contexts/view-context/index.html b/docs/Developers/Contexts/view-context/index.html index 9f04c413..88248655 100644 --- a/docs/Developers/Contexts/view-context/index.html +++ b/docs/Developers/Contexts/view-context/index.html @@ -5,7 +5,7 @@ View Context | Character Studio - + diff --git a/docs/Developers/Managers/animation-manager/index.html b/docs/Developers/Managers/animation-manager/index.html index 6522e396..122fd2c7 100644 --- a/docs/Developers/Managers/animation-manager/index.html +++ b/docs/Developers/Managers/animation-manager/index.html @@ -5,7 +5,7 @@ Animation Manager | Character Studio - + diff --git a/docs/Developers/Managers/blink-manager/index.html b/docs/Developers/Managers/blink-manager/index.html index 27915faf..df5341c9 100644 --- a/docs/Developers/Managers/blink-manager/index.html +++ b/docs/Developers/Managers/blink-manager/index.html @@ -5,7 +5,7 @@ Blink Manager | Character Studio - + diff --git a/docs/Developers/Managers/character-manager/index.html b/docs/Developers/Managers/character-manager/index.html index 567beb26..fc54bc16 100644 --- a/docs/Developers/Managers/character-manager/index.html +++ b/docs/Developers/Managers/character-manager/index.html @@ -5,7 +5,7 @@ Character Manager | Character Studio - + diff --git a/docs/Developers/Managers/look-at-manager/index.html b/docs/Developers/Managers/look-at-manager/index.html index 74417406..2030c85f 100644 --- a/docs/Developers/Managers/look-at-manager/index.html +++ b/docs/Developers/Managers/look-at-manager/index.html @@ -5,7 +5,7 @@ LookAt Manager | Character Studio - + diff --git a/docs/Developers/Managers/lora-data-generator/index.html b/docs/Developers/Managers/lora-data-generator/index.html index ad92b42e..792ea056 100644 --- a/docs/Developers/Managers/lora-data-generator/index.html +++ b/docs/Developers/Managers/lora-data-generator/index.html @@ -5,7 +5,7 @@ LoRa Data Generator | Character Studio - + diff --git a/docs/Developers/Managers/screenshot-manager/index.html b/docs/Developers/Managers/screenshot-manager/index.html index 3ad29c38..81c96ab1 100644 --- a/docs/Developers/Managers/screenshot-manager/index.html +++ b/docs/Developers/Managers/screenshot-manager/index.html @@ -5,7 +5,7 @@ Screenshot Manager | Character Studio - + diff --git a/docs/Developers/Managers/sprite-atlas-generator/index.html b/docs/Developers/Managers/sprite-atlas-generator/index.html index 527eb4df..67c25ab4 100644 --- a/docs/Developers/Managers/sprite-atlas-generator/index.html +++ b/docs/Developers/Managers/sprite-atlas-generator/index.html @@ -5,7 +5,7 @@ Sprite Atlas Generator | Character Studio - + @@ -32,7 +32,7 @@

Properties<

The blink manager used for managing blinking animations.

  • -

    .animationManager: Object**

    +

    .yarnanimationManager: Object**

    The animation manager used for loading and managing animations.

  • @@ -41,6 +41,6 @@

    + \ No newline at end of file diff --git a/docs/Developers/Pages/appearance/index.html b/docs/Developers/Pages/appearance/index.html index d56541a7..0db5f984 100644 --- a/docs/Developers/Pages/appearance/index.html +++ b/docs/Developers/Pages/appearance/index.html @@ -5,7 +5,7 @@ Appearance | Character Studio - + @@ -13,7 +13,7 @@

    To Access this menu, go to Create Character menu button, then select any option displayed there.

    Important: if no option is present in this menu, you need to setup VITE_ASSET_PATH in the .env file, to point to character manifest.json location, and point were to fetch manifest options.

    Summary

    -

    The Appearance component, allows you to load and select different character traits (models), animations, and textures, as well as entering debug mode and fine tune details on your avatar. It provides buttons based on a pre-defined character-manifest to dress-up and customize your character.

    +

    The Appearance page, allows you to load and select different character traits (models), animations, and textures, as well as entering debug mode and fine tune details on your avatar. It provides buttons based on a pre-defined character-manifest to dress-up and customize your character.

    Logic

    For this component, we want the user to be able to access the characterManager functions by providing ui buttons to select trait models or textures, play animations, and set culling layers for selected character.

    Select character functions

    @@ -69,6 +69,6 @@
  • next: Go to download page.

  • - + \ No newline at end of file diff --git a/docs/Developers/Pages/batch-download/index.html b/docs/Developers/Pages/batch-download/index.html index 4de2f838..cac26806 100644 --- a/docs/Developers/Pages/batch-download/index.html +++ b/docs/Developers/Pages/batch-download/index.html @@ -5,7 +5,7 @@ Batch Download | Character Studio - + @@ -17,8 +17,6 @@

    Once these nft json objects are added, for each json file dropped, user may preview each loaded trait by clicking the right or left arrow on the Trait Selection menu that will pop open in the right side of the screen, or download them all by clicking the download button that will appear in the lower right screen.

    Important note If multiple files are not being downloaded, browser might not support/allow this feature. Please switch to a web browser that support this feature (Chrome), or allow it on your current browser

    -

    Import Statements

    -
    import React, { useContext, useEffect, useState } from "react"
    import styles from "./Optimizer.module.css"
    import { ViewMode, ViewContext } from "../context/ViewContext"
    import { SceneContext } from "../context/SceneContext"
    import CustomButton from "../components/custom-button"
    import { LanguageContext } from "../context/LanguageContext"
    import { SoundContext } from "../context/SoundContext"
    import { AudioContext } from "../context/AudioContext"
    import FileDropComponent from "../components/FileDropComponent"
    import { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils"
    import JsonAttributes from "../components/JsonAttributes"
    import ModelInformation from "../components/ModelInformation"
    import MergeOptions from "../components/MergeOptions"
    import { local } from "../library/store"

    Logic

    For this component we want the user to be able to drag and drop a file with FileDropComponent and detect wether the user dropped an nft json file (.json), animation file (.fbx) or .vrm file to start the batch download process accodrdingly.

    Pre-process Functions:

    @@ -51,6 +49,6 @@

    Util Functions:

    • back: Go to the previous menu
    • -
    + \ No newline at end of file diff --git a/docs/Developers/Pages/batch-manifest/index.html b/docs/Developers/Pages/batch-manifest/index.html index 7dab9808..6511a818 100644 --- a/docs/Developers/Pages/batch-manifest/index.html +++ b/docs/Developers/Pages/batch-manifest/index.html @@ -5,7 +5,7 @@ Batch Manifest | Character Studio - + @@ -20,8 +20,6 @@ The user can batch the process to download a preview image with the initialTraits defined in each manifest ( same as before traits will be randomly selected from the trait options of that manifest ). The process will create a medium shot image with the character using the random chosen intital traits and download it.

    Important note If multiple images/files are not being downloaded, browser might not support/allow this feature. Please switch to a web browser that support this feature (Chrome), or allow it on your current browser

    -

    Import Statements

    -
    import React, { useContext, useEffect, useState } from "react"
    import styles from "./Optimizer.module.css"
    import { ViewMode, ViewContext } from "../context/ViewContext"
    import { SceneContext } from "../context/SceneContext"
    import CustomButton from "../components/custom-button"
    import { LanguageContext } from "../context/LanguageContext"
    import { SoundContext } from "../context/SoundContext"
    import { AudioContext } from "../context/AudioContext"
    import FileDropComponent from "../components/FileDropComponent"
    import { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils"
    import JsonAttributes from "../components/JsonAttributes"
    import ModelInformation from "../components/ModelInformation"
    import MergeOptions from "../components/MergeOptions"
    import { local } from "../library/store"

    Logic

    For this component we want the user to be able to drag and drop a file with FileDropComponent and detect wether the user dropped Manifest file (.json), animation file (.fbx) or .vrm file to start the batch download process accodrdingly.

    Pre-process Functions:

    @@ -62,6 +60,6 @@
  • back: Go to the previous menu

  • - + \ No newline at end of file diff --git a/docs/Developers/Pages/bio/index.html b/docs/Developers/Pages/bio/index.html index 7bc6790e..ce16fbcd 100644 --- a/docs/Developers/Pages/bio/index.html +++ b/docs/Developers/Pages/bio/index.html @@ -5,7 +5,7 @@ Bio | Character Studio - + diff --git a/docs/Developers/Pages/claim/index.html b/docs/Developers/Pages/claim/index.html index 0c83cc3f..e21994e8 100644 --- a/docs/Developers/Pages/claim/index.html +++ b/docs/Developers/Pages/claim/index.html @@ -5,7 +5,7 @@ Claim | Character Studio - + diff --git a/docs/Developers/Pages/create/index.html b/docs/Developers/Pages/create/index.html index 4cf093a6..db59bdaa 100644 --- a/docs/Developers/Pages/create/index.html +++ b/docs/Developers/Pages/create/index.html @@ -5,7 +5,7 @@ Create | Character Studio - + diff --git a/docs/Developers/Pages/landing/index.html b/docs/Developers/Pages/landing/index.html index f7f4b1be..f5bbc11a 100644 --- a/docs/Developers/Pages/landing/index.html +++ b/docs/Developers/Pages/landing/index.html @@ -5,7 +5,7 @@ Landing | Character Studio - + diff --git a/docs/Developers/Pages/load/index.html b/docs/Developers/Pages/load/index.html index fb1823bd..e1372b01 100644 --- a/docs/Developers/Pages/load/index.html +++ b/docs/Developers/Pages/load/index.html @@ -3,29 +3,27 @@ -Load | Character Studio +Load | Character Studio - +

    Load

    -

    The Load component is a part of a React application that interacts with the Ethereum blockchain. It allows users to connect their Ethereum wallet, fetches the NFTs (Non-Fungible Tokens) owned by the user, and displays them. The user can then select a character (NFT) to load. The component also provides audio feedback based on the user's actions and allows the user to navigate back to the landing page.

    -

    In simpler terms, this component is like a personal locker for users where they can see all the unique digital assets (NFTs) they own. They can connect their digital wallet, see their assets, and choose one to interact with.

    -

    Imports

    -
    import React, { useEffect, useState } from 'react';
    import styles from './Load.module.css';
    import { ethers } from 'ethers';
    import { useWeb3React } from '@web3-react/core';
    import { InjectedConnector } from "@web3-react/injected-connector"
    import { ViewContext, ViewMode } from '../context/ViewContext';
    import { SoundContext } from "../context/SoundContext"
    import { AudioContext } from "../context/AudioContext"
    -

    The component imports necessary libraries and contexts. ethers is a library to interact with Ethereum blockchain. useWeb3React and InjectedConnector are used to connect to the user's Ethereum wallet. ViewContext, SoundContext, and AudioContext are React contexts used to manage global state related to view mode, sound, and audio settings.

    -

    Component State and Contexts

    -
    function Load() {
    const { account, library, activate } = useWeb3React();
    const [characters, setCharacters] = useState([]);
    const { setViewMode } = React.useContext(ViewContext);
    const { playSound } = React.useContext(SoundContext)
    const { isMute } = React.useContext(AudioContext)
    ...
    }
    -

    The component uses useWeb3React to get the user's Ethereum account, the Ethereum library instance, and the activate function to connect the wallet. It also uses useState to manage a local state characters which stores the NFTs owned by the user. It uses useContext to get the necessary functions and values from the global state.

    -

    Fetching NFTs

    -
    useEffect(() => {
    ...
    }, [account, library]);
    -

    The useEffect hook is used to fetch the NFTs owned by the user whenever the account or library changes. It interacts with a smart contract on the Ethereum blockchain to get the balance and details of each NFT.

    -

    Wallet Connection and Character Loading

    -
    const connectWallet = () => {
    activate(injectedConnector)
    }

    const loadCharacter = (character) => {
    !isMute && playSound('backNextButton');
    setViewMode(ViewMode.APPEARANCE)
    }
    -

    The connectWallet function is used to connect the user's Ethereum wallet. The loadCharacter function is used to load a selected character (NFT), play a sound if not muted, and change the view mode to APPEARANCE.

    -

    Rendering

    -
    return (
    ...
    );
    -

    The component renders a message to connect the wallet if not connected, a list of characters (NFTs) owned by the user, and a back button to navigate back to the landing page. The styles are applied using CSS modules.

    +

    (wip) The Load page is currently hidden, but should be accessible from the Landing page to allow user quickly load their saved characters.

    +

    Summary

    +

    The Load page allows to load an existing character from your wallet or page preferences into the character studio viewer.

    +

    Functions

    +
      +
    • +

      loadCharacter: loads target character with given string, it searched in user preferences cache to get this data.

      +
    • +
    • +

      connectWallet: Connects Wallet to fetch nfts from a collection (wip)

      +
    • +
    • +

      back: Goes back to the previous menu.

      +
    • +
    \ No newline at end of file diff --git a/docs/Developers/Pages/mint/index.html b/docs/Developers/Pages/mint/index.html index 010e11fb..2c565755 100644 --- a/docs/Developers/Pages/mint/index.html +++ b/docs/Developers/Pages/mint/index.html @@ -3,41 +3,27 @@ -Mint | Character Studio +Mint | Character Studio - +

    Mint

    -

    The MintComponent is a React component that provides the functionality for minting a digital asset. In layman's terms, it's like a factory machine interface where you can create your own unique digital item (like a character in a game). This component handles the process of creating the item, showing the status of the creation process, and providing buttons to navigate to other parts of the application.

    -

    Imports

    -

    The component imports several dependencies, including styles, contexts, a custom button component, and a utility function for minting assets.

    -
    import React from "react"
    import styles from "./Mint.module.scss"
    import { ViewMode, ViewContext } from "../context/ViewContext"
    import { SceneContext } from "../context/SceneContext"
    import CustomButton from "../components/custom-button"
    import { SoundContext } from "../context/SoundContext"
    import { AudioContext } from "../context/AudioContext"
    import { mintAsset } from "../library/mint-utils"
    -

    Component Definition

    -

    The MintComponent is a functional component that takes a getFaceScreenshot prop. It uses several contexts to get and set various application states.

    -
    function MintComponent({getFaceScreenshot}) {
    const { templateInfo, model, avatar } = React.useContext(SceneContext)
    const { setViewMode } = React.useContext(ViewContext)
    const { playSound } = React.useContext(SoundContext)
    const { isMute } = React.useContext(AudioContext)
    ...
    }
    -

    State Variables

    -

    The component uses two state variables: status to store the current status of the minting process, and minting to store whether the minting process is currently ongoing.

    -
    const [status, setStatus] = React.useState("")
    const [minting, setMinting]= React.useState(false)
    +

    (wip) The Mint Page is currently hidden, but should be accessed after user finished creating his character from the appearance menu.

    +

    Summary

    +

    The Mint Page purpose is to allow the user an easy way to mint into an existing collection their selected character.

    Functions

    -

    The component defines several functions:

      -
    • back and next are used to navigate to other views in the application.
    • -
    • MenuTitle is a sub-component that renders the title of the menu.
    • -
    • Mint is an asynchronous function that handles the minting process.
    • -
    -
    const back = () => {...}
    const next = () => {...}
    function MenuTitle() {...}
    async function Mint(){...}
    -

    Render

    -

    The component returns a JSX structure that includes:

    -
      -
    • A title for the section.
    • -
    • A container for the minting process, which includes the MenuTitle sub-component, two CustomButton components for the minting options, and a status message.
    • -
    • A container for navigation buttons.
    • -
    -
    return (
    <div className={styles.container}>
    ...
    </div>
    )
    -

    Export

    -

    Finally, the MintComponent is exported for use in other parts of the application.

    -
    export default MintComponent
    +
  • +

    backgo back to the previous page.

    +
  • +
  • +

    next move forward to the next page.

    +
  • +
  • +

    Mint is an asynchronous function that handles the minting process.

    +
  • + \ No newline at end of file diff --git a/docs/Developers/Pages/optimizer/index.html b/docs/Developers/Pages/optimizer/index.html index 86d3b5c3..403bb20c 100644 --- a/docs/Developers/Pages/optimizer/index.html +++ b/docs/Developers/Pages/optimizer/index.html @@ -3,40 +3,38 @@ -Optimizer | Character Studio +Optimizer | Character Studio - +

    Optimizer

    -

    The Optimizer component is a part of a React application that provides an interface for users to optimize their 3D character models. Users can drop their character files into the component, which then processes the file, optimizes it, and allows the user to download the optimized version. The component also provides options for merging and creating texture atlases, and displays information about the current model.

    -

    In layman's terms, this component is like a workshop for 3D character models. Users can bring their models in, tweak some settings, and then get a more optimized version of their model to use in their projects.

    -

    Imports

    -

    The component imports various hooks from React, styles, contexts, components, and utility functions from different modules.

    -
    import React, { useContext, useEffect, useState } from "react"
    import styles from "./Optimizer.module.css"
    import { ViewMode, ViewContext } from "../context/ViewContext"
    import { SceneContext } from "../context/SceneContext"
    import CustomButton from "../components/custom-button"
    import { LanguageContext } from "../context/LanguageContext"
    import { SoundContext } from "../context/SoundContext"
    import { AudioContext } from "../context/AudioContext"
    import FileDropComponent from "../components/FileDropComponent"
    import { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils"
    import ModelInformation from "../components/ModelInformation"
    import MergeOptions from "../components/MergeOptions"
    import { local } from "../library/store"
    -

    Component Definition

    -

    The Optimizer component is defined as a functional, no props are required.

    -
    function Optimizer() {
    // Component body
    }
    -

    State and Context

    -

    The component uses several pieces of state and context to manage its behavior and data.

    -
    const { 
    isLoading,
    setViewMode
    } = React.useContext(ViewContext)
    const {
    characterManager,
    animationManager,
    sceneElements,
    loraDataGenerator,
    spriteAtlasGenerator
    } = React.useContext(SceneContext)
    const { playSound } = React.useContext(SoundContext)
    const { isMute } = React.useContext(AudioContext)

    const [model, setModel] = useState(null);
    const [nameVRM, setNameVRM] = useState("");
    -

    characterManager is the class that holds the logic to load/append vrm models and custom character manifests.

    -

    animationManager is the class that holds the logic to load animations to current loaded traits.

    -

    sceneElements all the elements within the scene that dont belong to the character traits.

    -

    loraDataGenerator is the class that holds the logic to create lora data from loaded vrm files.

    -

    spriteAtlasGenerator is the class that holds the logic to create 2d animated sprites and spritesheets from the currently loaded vrm files.

    -

    Helper Functions

    -

    Several helper functions are defined within the component to handle various tasks such as getting options, downloading the VRM, handling file drops, and more.

    -
    const back = () => { /* Function body */ }
    const getOptions = () => { /* Function body */ }
    const download = () => { /* Function body */ }
    const handleAnimationDrop = async (file) => { /* Function body */ }
    const handleVRMDrop = async (file) => { /* Function body */ }
    const handleFilesDrop = async(files) => { /* Function body */ };
    -

    useEffect Hook

    -

    A useEffect hook is used to perform side effects when the currentVRM state changes.

    -
    useEffect(() => {
    const fetchData = async () => { /* Function body */ }
    fetchData();
    }, [currentVRM])
    -

    Render

    -

    The component returns a JSX structure that includes a loading indicator, a section title, a FileDropComponent, a MergeOptions component, a ModelInformation component, and a set of CustomButton components.

    -
    return (
    <div className={styles.container}>
    {/* JSX structure */}
    </div>
    )
    -

    Export

    -

    Finally, the Optimizer component is exported for use in other parts of the application.

    -
    export default Optimizer
    +

    You can access this page by going to Optimize Character menu button.

    +

    Summary

    +

    The Optimizer page, allows you to drag and drop an existing vrm file and add optimzation options, such as reducing meshes, manual face culling, reducing material count, and reducing file size by applying sparse accessors to expression shapes.

    +

    It uses the drag and drop component to allow the user to drop any vrm file model or animation file into the window.

    +

    Logic

    +

    For this component we want the user to be able to drag and drop a file with FileDropComponent and detect wether the user dropped an nft json file (.json), animation file (.fbx) or .vrm file to start the optimization process.

    +

    Pre-process Functions:

    +
      +
    • +

      handleFilesDrop: Function to detect wether the user dropped a manifest, animation, or vrm file(s).

      +
    • +
    • +

      handleVRMDrop: User dropped a VRM file, load the vrm file into the current view. (if multiple files are added, only the first one will be used)

      +
    • +
    • +

      handleAnimationDrop: User dropped an animation file, load the animation into the current displayed character, if no vrm or manifest has been added, this will have no effect. (if multiple files are added, only the first one will be used)

      +
    • +
    +

    Process Functions:

    +
      +
    • download: Start optimization and download process for current loaded character.
    • +
    +

    Util Functions:

    +
      +
    • back: Go to the previous menu
    • +
    \ No newline at end of file diff --git a/docs/Developers/Pages/save/index.html b/docs/Developers/Pages/save/index.html index eeb20ee6..139d8c8c 100644 --- a/docs/Developers/Pages/save/index.html +++ b/docs/Developers/Pages/save/index.html @@ -5,7 +5,7 @@ Save | Character Studio - + diff --git a/docs/Developers/Pages/view/index.html b/docs/Developers/Pages/view/index.html index e0cd7c8c..ef3a3d76 100644 --- a/docs/Developers/Pages/view/index.html +++ b/docs/Developers/Pages/view/index.html @@ -3,39 +3,19 @@ -View | Character Studio +View | Character Studio - +

    View

    -

    The View component is a part of a React application that handles the user interface for a chat feature. It uses various contexts to manage state and behavior, such as view mode, sound, audio, and language settings. The component also controls a microphone feature and speech recognition. In layman's terms, this component is like the control center for a chat room where users can interact with each other, and it manages how the chat room looks, sounds, and behaves.

    -

    Imports

    -
    import React, { useContext } from "react"
    import styles from "./View.module.css"
    import { ViewMode, ViewContext } from "../context/ViewContext"
    import Chat from "../components/Chat"
    import CustomButton from "../components/custom-button"
    import { LanguageContext } from "../context/LanguageContext"
    import { SoundContext } from "../context/SoundContext"
    import { AudioContext } from "../context/AudioContext"
    -

    The component imports necessary modules, styles, and contexts. useContext is a React hook that allows the component to access the state and functions provided by the imported contexts.

    -

    Component Function

    -
    function View({templateInfo}) {
    ...
    }
    -

    The View component receives templateInfo as a prop.

    -

    State and Context

    -
    const { setViewMode } = React.useContext(ViewContext)
    const [micEnabled, setMicEnabled] = React.useState(false)
    const [speechRecognition, setSpeechRecognition] = React.useState(false)
    const { playSound } = React.useContext(SoundContext)
    const { isMute } = React.useContext(AudioContext)
    const { t } = useContext(LanguageContext);
    -

    The component uses several pieces of state and context:

    +

    This menu is currently hidden, but it can be shown after character bio page, after the personality of the character has been selected.

    +

    Summary

    +

    The View page, allows you to chat with the current created character, turning on the Chat component and allowing microphone to be used.

    +

    Util Functions:

      -
    • setViewMode: A function from ViewContext to change the view mode.
    • -
    • micEnabled and setMicEnabled: State variables to manage the microphone status.
    • -
    • speechRecognition and setSpeechRecognition: State variables to manage the speech recognition status.
    • -
    • playSound: A function from SoundContext to play a sound.
    • -
    • isMute: A state variable from AudioContext to check if the audio is muted.
    • -
    • t: A function from LanguageContext to translate text.
    • -
    -

    Back Function

    -
    const back = () => {
    setViewMode(ViewMode.SAVE)
    !isMute && playSound('backNextButton');
    if (speechRecognition)
    speechRecognition.stop()
    setMicEnabled(false)
    }
    -

    The back function changes the view mode to SAVE, plays a sound if audio is not muted, stops speech recognition if it's active, and disables the microphone.

    -

    Render

    -
    return (
    ...
    )
    -

    The component renders a chat interface with a title, a Chat component, and a CustomButton component. The Chat component receives several props related to the microphone and speech recognition. The CustomButton component is configured to act as a back button.

    -

    Export

    -
    export default View
    -

    The View component is exported for use in other parts of the application.

    +
  • back: Go to the previous menu
  • + \ No newline at end of file diff --git a/docs/Developers/Pages/wallet/index.html b/docs/Developers/Pages/wallet/index.html index ebf34d5c..b55d4261 100644 --- a/docs/Developers/Pages/wallet/index.html +++ b/docs/Developers/Pages/wallet/index.html @@ -5,7 +5,7 @@ Wallet | Character Studio - + diff --git a/docs/Developers/overview/index.html b/docs/Developers/overview/index.html index d4aeb015..b08e6c19 100644 --- a/docs/Developers/overview/index.html +++ b/docs/Developers/overview/index.html @@ -5,7 +5,7 @@ Overview | Character Studio - + diff --git a/docs/Developers/sdk/index.html b/docs/Developers/sdk/index.html index dd28b65e..d5c08f04 100644 --- a/docs/Developers/sdk/index.html +++ b/docs/Developers/sdk/index.html @@ -5,7 +5,7 @@ SDK | Character Studio - + diff --git a/docs/General/create-an-avatar/index.html b/docs/General/create-an-avatar/index.html index f878c560..8cb6e550 100644 --- a/docs/General/create-an-avatar/index.html +++ b/docs/General/create-an-avatar/index.html @@ -5,7 +5,7 @@ Create an Avatar | Character Studio - + diff --git a/docs/General/optimize-avatars/index.html b/docs/General/optimize-avatars/index.html index 7ec8ae91..718ee689 100644 --- a/docs/General/optimize-avatars/index.html +++ b/docs/General/optimize-avatars/index.html @@ -5,7 +5,7 @@ Optimize avatars | Character Studio - + diff --git a/docs/Modders/change-animations/index.html b/docs/Modders/change-animations/index.html index 4c73c259..c0b88b01 100644 --- a/docs/Modders/change-animations/index.html +++ b/docs/Modders/change-animations/index.html @@ -5,7 +5,7 @@ Change animations | Character Studio - + diff --git a/docs/Modders/manifest-files/ai-personalities/index.html b/docs/Modders/manifest-files/ai-personalities/index.html index c6bcec6e..db2e8085 100644 --- a/docs/Modders/manifest-files/ai-personalities/index.html +++ b/docs/Modders/manifest-files/ai-personalities/index.html @@ -5,7 +5,7 @@ AI Personality | Character Studio - + diff --git a/docs/Modders/manifest-files/character-select/index.html b/docs/Modders/manifest-files/character-select/index.html index 35111105..919d1bc2 100644 --- a/docs/Modders/manifest-files/character-select/index.html +++ b/docs/Modders/manifest-files/character-select/index.html @@ -5,7 +5,7 @@ Character Select | Character Studio - + diff --git a/docs/Modders/manifest-files/character-traits/index.html b/docs/Modders/manifest-files/character-traits/index.html index 5e3634a4..46d177e1 100644 --- a/docs/Modders/manifest-files/character-traits/index.html +++ b/docs/Modders/manifest-files/character-traits/index.html @@ -5,7 +5,7 @@ Character Traits | Character Studio - + diff --git a/docs/Modders/manifest-files/generate-manifest-files/index.html b/docs/Modders/manifest-files/generate-manifest-files/index.html index 8ad9da06..183d8dfc 100644 --- a/docs/Modders/manifest-files/generate-manifest-files/index.html +++ b/docs/Modders/manifest-files/generate-manifest-files/index.html @@ -5,7 +5,7 @@ Useful Scripts | Character Studio - + diff --git a/docs/Modders/manifest-files/overview/index.html b/docs/Modders/manifest-files/overview/index.html index 73b2edeb..ee15ea6b 100644 --- a/docs/Modders/manifest-files/overview/index.html +++ b/docs/Modders/manifest-files/overview/index.html @@ -5,7 +5,7 @@ Overview | Character Studio - + diff --git a/docs/Modders/manifest-files/vrm-to-lora/index.html b/docs/Modders/manifest-files/vrm-to-lora/index.html index 0fd350ef..603900de 100644 --- a/docs/Modders/manifest-files/vrm-to-lora/index.html +++ b/docs/Modders/manifest-files/vrm-to-lora/index.html @@ -5,7 +5,7 @@ VRM to LoRA data | Character Studio - + diff --git a/docs/Modders/manifest-files/vrm-to-spritesheet/index.html b/docs/Modders/manifest-files/vrm-to-spritesheet/index.html index a58b9a00..8ec8b464 100644 --- a/docs/Modders/manifest-files/vrm-to-spritesheet/index.html +++ b/docs/Modders/manifest-files/vrm-to-spritesheet/index.html @@ -5,7 +5,7 @@ VRM to Spritesheet | Character Studio - + diff --git a/docs/Modders/process-avatars/index.html b/docs/Modders/process-avatars/index.html index 9cb15634..c5842fe8 100644 --- a/docs/Modders/process-avatars/index.html +++ b/docs/Modders/process-avatars/index.html @@ -5,7 +5,7 @@ Preparing Assets | Character Studio - + diff --git a/docs/about/index.html b/docs/about/index.html index 58d0f66a..ab12b2e1 100644 --- a/docs/about/index.html +++ b/docs/about/index.html @@ -5,7 +5,7 @@ About | Character Studio - + diff --git a/docs/history/index.html b/docs/history/index.html index 0275d925..baa82768 100644 --- a/docs/history/index.html +++ b/docs/history/index.html @@ -5,7 +5,7 @@ History | Character Studio - + diff --git a/docs/quickstart/index.html b/docs/quickstart/index.html index 6520dace..fbbdeeab 100644 --- a/docs/quickstart/index.html +++ b/docs/quickstart/index.html @@ -5,7 +5,7 @@ Quickstart | Character Studio - + diff --git a/index.html b/index.html index 588fc4f0..b27f1e53 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Docs | Character Studio - + diff --git a/markdown-page/index.html b/markdown-page/index.html index 57c48616..8cf094dd 100644 --- a/markdown-page/index.html +++ b/markdown-page/index.html @@ -5,7 +5,7 @@ Markdown page example | Character Studio - +