{"id":4096,"date":"2021-01-24T09:29:45","date_gmt":"2021-01-24T09:29:45","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=4096"},"modified":"2023-09-07T15:51:41","modified_gmt":"2023-09-07T14:51:41","slug":"animated-accessory","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/animated-accessory\/","title":{"rendered":"Animated Accessory"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a06f9b83fa88\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a06f9b83fa88\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.katsbits.com\/codex\/animated-accessory\/#description\" >Description<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/codex\/animated-accessory\/#time-stamps\" >Time Stamps<\/a><\/li><\/ul><\/nav><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/z4rVxH_ALhk\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/oSwVXSGTAqY\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<h3><span class=\"ez-toc-section\" id=\"description\"><\/span>Description<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Starting with Blenders default scene we make a simple low poly &#8216;coin&#8217; (vcoin) that&#8217;s duplicated to create a high resolution version with some detailing that&#8217;s in turn used to generates a coin-blank texture set &#8211; normal map, shininess map and diffuse map. This is then imported into the <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-starter-files\/\">Accessory Starter File<\/a>, rigged and animated before export to FBX and assembly in IMVU Studio (<i>recorded live, may include off-topic chat<\/i>).<\/p>\n<blockquote><p><b>Design note<\/b>: for more information on creating normal maps read &#8220;<a href=\"https:\/\/www.katsbits.com\/tutorials\/textures\/how-not-to-make-normal-maps-from-photos-or-images.php\">How not to make normal maps<\/a>&#8221; here.<\/p><\/blockquote>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><b>Download<\/b>: software or tools for converting images to normal maps; <a href=\"https:\/\/www.gimp.org\/\">GIMP<\/a>, <a href=\"http:\/\/charles.hollemeersch.net\/njob\/\">nJob<\/a>.<\/p><\/blockquote>\n<p><b>Duration<\/b> c. 3 hrs 30 mins mins (03:30:00).<br \/>\n<b>Info<\/b>: 1080p.<br \/>\n<b>Source<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/imvu\/katsbits - vcoin blank.zip\">KatsBits &#8211; vcoin blank<\/a> (zip c. 2 MB &#8211; *.fbx, *.blend, *.png, *.psd, *.tga).<br \/>\n<b>Product ID<\/b>: <a href=\"https:\/\/www.imvu.com\/shop\/product.php?products_id=52970249\" rel=\"noopener\" target=\"_blank\">Vcoin Head Spinner<\/a> | <a href=\"https:\/\/www.imvu.com\/shop\/product.php?products_id=52970825\" rel=\"noopener\" target=\"_blank\">Vcoin Overhead Spinner<\/a><\/p>\n<p><b>Video I<\/b><br \/>\nTo make the animated coin blank accessory the process is split into two main parts; 1) make the low\/high resolution coins and <a href=\"https:\/\/www.katsbits.com\/codex\/bake-normal-maps\/\">Bake<\/a> the basic normal map texture (low resolution has material assignment and is UV unwrapped and mapped); 2) Append into the <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-starter-files\/\">Accessory Starter File<\/a> to position, rig, and animate the low resolution version in situ. Once these steps are done the item can be exported to FBX, animation included, and assembled in IMVU Studio.<\/p>\n<blockquote><p><b>Design note<\/b>: for animation the rig, the skeletal structure that controls an associated mesh,  can be as simple as adding an extra bone to the default &#8216;accessory&#8217; Armature object (e.g. &#8216;Head (AttachmentRoot)&#8217;). This bone is then animated &#8211; <b>AttachmentRoot and AttachmentNode should not be animated<\/b> as they anchor the accessory to a particular bone in the avatar skeleton.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/animated-accessory-rig.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/animated-accessory-rig.jpg\" alt=\"Animated 'coin' rig in Blender\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>For simple animated objects skeletons can simply be the addition of an extra bone that controls the mesh object that animates for example a single bone linked to AttachmentRoot that animates the coin.<\/i><\/p><\/blockquote>\n<p><b>Video II<\/b><br \/>\nFor ordinary derivation the coin mesh needs to be modifiable so the effect provided for by the inclusion of the normal map itself can be changed. Without access to the original source file this is typically done <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-studio-normal-map\/#normal-map-from-image\">generating an overlay normal map from a grey-scale image<\/a>. Using an image editor then, a grey-scale image is created &#8211; white = height, black = depth &#8211; and &#8216;normalised&#8217; using a image filter &#8211; this can be done in GIMP natively, using a Photoshop plugin, or a third-party application. This new map can then be blended with the original to proved new detailing for the coin that only requires updating the image assets as normal.<\/p>\n<blockquote><p><b>Design note<\/b>: when making products for derivation their normal maps should be generic and including only the very barest of details, edges for a coin for example, to accommodate derivers the freedom to create custom detailing using <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-studio-normal-map\/#normal-map-from-image\">image-based normal maps<\/a>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/animated-accessory-normal-maps.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/animated-accessory-normal-maps.jpg\" alt=\"Image-based normal map modifications\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The coin blank, and its generic normal map (image left above), can be modified overlaying another normal map that includes details, edge knurling, face designs etc., made by converting a grey-scale image using a &#8216;normalisation&#8217; filter or third-party application (image right, upper and lower).<\/i><\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"time-stamps\"><\/span>Time Stamps<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Times are approximate.<br \/>\n<b>Video I<\/b> : Meshing, Baking &#038; Animation \u2013 c. 2 hrs 10 mins (02:10:00).<br \/>\n&#8211; 00:00 : Overview &#038; Start.<br \/>\n&#8211; 02:00 : Meshing, Materials &#038; UV&#8217;s<br \/>\n&#8211; 16:00 : High Res Coin &#038; Baking.<br \/>\n&#8211; 47:00 : Append, Accessory Set-up &#038; 1st Export.<br \/>\n&#8211; 01:20:00 : Rigging &#038; Animation.<br \/>\n&#8211; 01:50:00 : Root Bone &#038; Misc.<\/p>\n<p><b>Video II<\/b> : Generated Assets &#038; Skeleton Selection &#8211; c 1 hr 30 mins (01:30:00)<br \/>\n&#8211; 00:00 : Overview &#038; Start<br \/>\n&#8211; 04:00 : UV Export &#038; Channel Swizzle.<br \/>\n&#8211; 14:00 : Import &#038; Assembly.<br \/>\n&#8211; 23:00 : Derivation Assets.<br \/>\n&#8211; 38:00 : Normal Map from Image.<br \/>\n&#8211; 01:08:00 : Armature Root &#038; Animation.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":4100,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,37,230],"tags":[575,217,622,687,194,172,761,696],"class_list":["post-4096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-imvu","category-tutorials","tag-accessory","tag-action-editor","tag-animation","tag-armatures","tag-imvu","tag-normal-map","tag-rigging","tag-texture-bake"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/comments?post=4096"}],"version-history":[{"count":22,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4096\/revisions"}],"predecessor-version":[{"id":5047,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4096\/revisions\/5047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/4100"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=4096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=4096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=4096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}