{"id":4866,"date":"2018-11-30T01:29:23","date_gmt":"2018-11-29T17:29:23","guid":{"rendered":"https:\/\/unitycoder.com\/blog\/?p=4866"},"modified":"2018-11-30T21:56:52","modified_gmt":"2018-11-30T13:56:52","slug":"sprite-sheet-flip-book-shader","status":"publish","type":"post","link":"https:\/\/unitycoder.com\/blog\/2018\/11\/30\/sprite-sheet-flip-book-shader\/","title":{"rendered":"Sprite Sheet Flip Book Shader"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"4875\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2018\/11\/30\/sprite-sheet-flip-book-shader\/sprite-flipbook-shader-new\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/sprite-flipbook-shader-new.gif?fit=209%2C208&amp;ssl=1\" data-orig-size=\"209,208\" data-comments-opened=\"1\" data-image-title=\"sprite-flipbook-shader-new\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/sprite-flipbook-shader-new.gif?fit=209%2C208&amp;ssl=1\" class=\"alignnone size-full wp-image-4875\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/sprite-flipbook-shader-new.gif?resize=209%2C208&#038;ssl=1\" alt=\"\" width=\"209\" height=\"208\" \/><\/p>\n<p>Converted this old <a href=\"http:\/\/wiki.unity3d.com\/index.php?title=Animating_Tiled_texture\" target=\"_blank\" rel=\"noopener\">animated sprite sheet script<\/a> into shader,<br \/>\nits useful for animating sprites from sprite sheet. (when Animator is too heavy for simple sprite animation)<\/p>\n<p>Could be extended to have billboard option.<\/p>\n<p><strong>Shader source: *Updated: 30\/11\/18 to fix index wrapping and UV direction<br \/>\n<\/strong><a href=\"https:\/\/github.com\/UnityCommunity\/UnityLibrary\/blob\/master\/Assets\/Shaders\/2D\/Sprites\/FlipBook.shader\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/UnityCommunity\/UnityLibrary\/blob\/master\/Assets\/Shaders\/2D\/Sprites\/FlipBook.shader<\/a><\/p>\n<p><strong>Note:<\/strong><br \/>\n<del>&#8211; Texture should have wrap mode: Repeat<\/del> *Now works with both wrapping modes (and index 0,0 start from top now)<\/p>\n<p><strong>Resources:<\/strong><br \/>\n&#8211; Used this sprite sheet for the explosion <a href=\"https:\/\/opengameart.org\/content\/explosion-sprite\" target=\"_blank\" rel=\"noopener\">https:\/\/opengameart.org\/content\/explosion-sprite<\/a><\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"4870\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2018\/11\/30\/sprite-sheet-flip-book-shader\/explosionfullprev\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/explosionFullPrev.png?fit=512%2C256&amp;ssl=1\" data-orig-size=\"512,256\" data-comments-opened=\"1\" data-image-title=\"explosionFullPrev\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/explosionFullPrev.png?fit=512%2C256&amp;ssl=1\" class=\"alignnone size-full wp-image-4870\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/explosionFullPrev.png?resize=512%2C256&#038;ssl=1\" alt=\"\" width=\"512\" height=\"256\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/explosionFullPrev.png?w=512&amp;ssl=1 512w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/explosionFullPrev.png?resize=300%2C150&amp;ssl=1 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<hr \/>\n<p>Some debugging drawings in excel..<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"4873\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2018\/11\/30\/sprite-sheet-flip-book-shader\/uv-sprite-sheet-debugging\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/uv-sprite-sheet-debugging.jpg?fit=680%2C307&amp;ssl=1\" data-orig-size=\"680,307\" data-comments-opened=\"1\" data-image-title=\"uv-sprite-sheet-debugging\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/uv-sprite-sheet-debugging.jpg?fit=680%2C307&amp;ssl=1\" class=\"alignnone size-full wp-image-4873\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/uv-sprite-sheet-debugging.jpg?resize=680%2C307&#038;ssl=1\" alt=\"\" width=\"680\" height=\"307\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/uv-sprite-sheet-debugging.jpg?w=680&amp;ssl=1 680w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/uv-sprite-sheet-debugging.jpg?resize=300%2C135&amp;ssl=1 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Converted this old animated sprite sheet script into shader, its useful for animating sprites from sprite sheet. (when Animator is too heavy for simple sprite animation) Could be extended to have billboard option. Shader source: *Updated: 30\/11\/18 to fix index wrapping and UV direction https:\/\/github.com\/UnityCommunity\/UnityLibrary\/blob\/master\/Assets\/Shaders\/2D\/Sprites\/FlipBook.shader [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4875,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Sprite Sheet Flip Book Shader","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[13,3],"tags":[270,552,712,1069,1071,14,728,357,1070,142,147],"class_list":["post-4866","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shaders","category-unity3d","tag-animated","tag-book","tag-cutout","tag-flip","tag-flip-book","tag-shader","tag-sheet","tag-sprite","tag-switch","tag-texture","tag-tiled"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p1KTaT-1gu","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2018\/11\/sprite-flipbook-shader-new.gif?fit=209%2C208&ssl=1","_links":{"self":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/4866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/comments?post=4866"}],"version-history":[{"count":7,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/4866\/revisions"}],"predecessor-version":[{"id":4877,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/4866\/revisions\/4877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media\/4875"}],"wp:attachment":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media?parent=4866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/categories?post=4866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/tags?post=4866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}