{"id":3370,"date":"2021-05-24T19:01:33","date_gmt":"2021-05-24T10:01:33","guid":{"rendered":"https:\/\/blog.criware.com\/?p=3370"},"modified":"2021-09-29T16:08:17","modified_gmt":"2021-09-29T07:08:17","slug":"introduction-to-spritestudio-assets-import-and-animation-setup","status":"publish","type":"post","link":"https:\/\/blog.criware.com\/index.php\/2021\/05\/24\/introduction-to-spritestudio-assets-import-and-animation-setup\/","title":{"rendered":"Introduction to SpriteStudio: Assets Import and Animation Setup"},"content":{"rendered":"<p>Last month, in the <a href=\"https:\/\/blog.criware.com\/index.php\/2021\/04\/27\/introduction-to-spritestudio\/\">first post of this series<\/a> dedicated to <a href=\"https:\/\/www.webtech.co.jp\/eng\/spritestudio\/\">SpriteStudio<\/a>, we gave an overview of the workflow and features available when working with the tool.\n<\/p>\n<p>This month let&#8217;s dive right into the first step of animation creation: importing our graphic assets and setting them up in SpriteStudio.\n<\/p>\n<p>There are 3 steps:<\/p>\n<ul>\n<li>The preparation of the graphic files containing the animation parts.<\/li>\n<li>The import of these graphic files into SpriteStudio as cell maps, and the definition of the cells.<\/li>\n<li>The setup of an animation that references the right cells.<\/li>\n<\/ul>\n<p>In this series, we will create animations based on the little gothic witch depicted below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/Assets-Import-and-Animation-Setup.gif\" alt=\"Assets Import and Animation Setup\" width=\"240\" height=\"247\" class=\"alignnone size-full wp-image-3373\" \/><\/p>\n<h2 style=\"font-size: 150%; font-weight: bold; margin-top: 40px;\">\n1. Preparing the graphic assets<\/h2>\n<p>The picture on the left below shows how the character should look. After planning our animation and deciding what the moving parts will be, we draw them and organize them in different graphic files. Of course, you can organize your graphic data as you want, with one big picture containing everything or many small ones containing just a few parts.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/2.png\" alt=\"2\" width=\"900\" height=\"287\" class=\"alignnone size-full wp-image-3374\" srcset=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/2.png 900w, https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/2-300x96.png 300w, https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/2-768x245.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<p>Here we have organized the graphics assets in two files. Since we are planning on changing the facial expression of our character during the animation, we have prepared multiple variations of parts such as eyes and mouth (visible on the second graphic file).<\/p>\n<p>This is only for the character, but of course for a full animation, you may have another graphic file containing background elements and so on\u2026 <\/p>\n<p>SpriteStudio accepts many types of file formats such as bmp, gif, jpg, png, tiff, tga, etc\u2026 or even Photoshop files (.psd).<\/p>\n<h2 style=\"font-size: 150%; font-weight: bold; margin-top: 40px;\">2. Import and creation of cells<\/h2>\n<p>The easiest way to import your assets in SpriteStudio is to drop the image files you prepared anywhere onto the main window.<\/p>\n<p>Once imported, your graphics files will appear in the \u2018References Images\u2019 folder of the project, while the corresponding cell maps are automatically created in the \u2018Cell Maps\u2019 folder. The tool will ask you for the names of these files (cell maps are saved on disk as .ssce files).<\/p>\n<p>Note that if the width or the height of one of your graphic files is not a power of two, you may see a warning. Don\u2019t worry about this for now, as it only matters if you want to use your assets to create effects (e.g., particles), or if you are planning to play back your animations using specific run-time player.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"max-width:650px;width: 100%;\" src=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/import.jpg\" alt=\"import\" width=\"932\" height=\"647\" class=\"alignnone size-full wp-image-3375\" srcset=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/import.jpg 932w, https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/import-300x208.jpg 300w, https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/import-768x533.jpg 768w, https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/import-392x272.jpg 392w, https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/import-130x90.jpg 130w\" sizes=\"auto, (max-width: 932px) 100vw, 932px\" \/><\/p>\n<p>Once your Cell Maps have been created, you can define each cell by selecting it with the mouse, as shown in the video below.<\/p>\n<div style=\"margin-top:20px; margin-bottom:20px; max-width:932px;\" >\n<div style=\"width: 800px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-3370-1\" width=\"800\" height=\"429\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/2.mp4?_=1\" \/><a href=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/2.mp4\">https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/2.mp4<\/a><\/video><\/div>\n<\/div>\n<p>The cells you define will appear in the &#8220;Cell List&#8221; pane located under the project treeview.<\/p>\n<h2 style=\"font-size: 150%; font-weight: bold; margin-top: 40px;\">3. Animation setup<\/h2>\n<p>You have our cells, so it\u2019s now time to set up the animation itself! Let\u2019s check the workflow in this video.<\/p>\n<div style=\"margin-top:20px; margin-bottom:20px; max-width:932px;\" >\n<div style=\"width: 800px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-3370-2\" width=\"800\" height=\"429\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/3.mp4?_=2\" \/><a href=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/3.mp4\">https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/3.mp4<\/a><\/video><\/div>\n<\/div>\n<p>Here are the steps:<\/p>\n<ul>\n<li>\n<p>First, we create a new animation. There can be several of them in a SpriteStudio project. Right-click on the \u2018Animations\u2019 folder in the project tree and select \u2018New File(X)\u2019. A new animation file (.ssae) is created and added to the project. A Setup node and an Animation node (called \u2018anime_1\u2019) are created.<\/li>\n<li>\n<p>Then we drag and drop all the cells we want to use in our animation on the \u2018Animation\u2019 or \u2018Setup\u2019 pane (for this example, it does not matter which one is selected).<\/li>\n<li>\n<p>This is also a good time to select the center of rotation of the various animation parts if we haven\u2019t done it when defining the cells (at 00:10 in the video).<\/li>\n<li>\n<p>The position of cells, their size and rotation can of course be adjusted.<\/p>\n<\/li>\n<li>\n<p>\n\tFinally, we can create a cell hierarchy. For example, for a character we may want to make the arm a child of the shoulder, and the hand a child of the arm. This way, whenever the shoulder moves, the arm and the hand will follow.<\/p>\n<p>This is done very easily by dropping the cells at the right location in the hierarchical tree at the bottom of the screen (you can see it at 00:23 in the video). In this tree, you can easily move the cells around with the mouse and use the Tab and Shift+Tab shortcuts to change the parent-child relationships.<\/li>\n<\/ul>\n<p>Once all the necessary elements have been placed, our character looks like below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.criware.com\/wp-content\/uploads\/2021\/05\/Assets-Import-and-Animation-Setup.gif\" alt=\"Assets Import and Animation Setup\" width=\"240\" height=\"247\" class=\"alignnone size-full wp-image-3373\" \/><\/p>\n<p>That\u2019s all for now! In the next blog, we will learn how to create a simple running animation for our little witch by using keyframes!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last month, in the first post of this series dedicated to SpriteStudio, we gave an overview of the workflow and<\/p>\n","protected":false},"author":2,"featured_media":3411,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[13,7],"tags":[],"class_list":["post-3370","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sprite-studio","category-tutorials"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/posts\/3370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/comments?post=3370"}],"version-history":[{"count":15,"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/posts\/3370\/revisions"}],"predecessor-version":[{"id":3389,"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/posts\/3370\/revisions\/3389"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/media\/3411"}],"wp:attachment":[{"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/media?parent=3370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/categories?post=3370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.criware.com\/index.php\/wp-json\/wp\/v2\/tags?post=3370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}