{"id":82741,"date":"2018-12-27T17:45:54","date_gmt":"2018-12-27T08:45:54","guid":{"rendered":"https:\/\/www.webtech.co.jp\/help\/?page_id=82741"},"modified":"2021-05-26T12:33:08","modified_gmt":"2021-05-26T03:33:08","slug":"create","status":"publish","type":"page","link":"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/beginners\/create\/","title":{"rendered":"Create Animation"},"content":{"rendered":"<p>This page introduces the flow of creating basic animation data in SpriteStudio.<\/p>\n<ul>\n<li><a href=\"#window\">Description of each window<\/a><\/li>\n<li><a href=\"#create_project\">Create a new project<\/a>\n<ul>\n<li><a href=\"#new_sspj\">Create a new project (sspj (Project Files))<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#texture\">Creating image data<\/a><\/li>\n<li><a href=\"#create_cellmap\">Create a new Cell map and add new Cells<\/a>\n<ul>\n<li><a href=\"#new_ssce\">Create a new ssce (Cell map file)<\/a><\/li>\n<li><a href=\"#new_cell\">Creating and Registering New Cells<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#create_animation\">Placing Parts<\/a>\n<ul>\n<li><a href=\"#new_ssae\">Create ssae (animation file)<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#save\">Save a file<\/a><\/li>\n<\/ul>\n<h2 id=\"mov01\"><a id=\"window\"><\/a>Description of each window<\/h2>\n<p>SpriteStudio consists of various window combinations.<br \/>\nFor details of each window, please see the following page.<\/p>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio\/guide\/window6\/\">Window Description (Japanese)<\/a><\/li>\n<\/ul>\n<h2><a id=\"create_project\"><\/a>Create a new project<\/h2>\n<p>A &#8220;sspj (Project Files)&#8221; is a file that contains all the information such as animation data, ssce (cell map file), cell lists, and editing information.<br \/>\nThis file is used as a reference for creating animations in &#8220;OPTPiX SpriteStudio&#8221;.<\/p>\n<h3><a id=\"new_sspj\"><\/a>Create a new project (sspj (Project Files))<\/h3>\n<h4>Select &#8220;File&#8221; &#8211; &#8220;New Project&#8221; from the menu bar<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/MainMenu_File.png\" alt=\"\" width=\"268\" height=\"295\" class=\"alignnone size-full wp-image-82787 alignright\" \/>You can create sspj (Project Files) by selecting &#8220;New Project&#8221; from the menu bar or by pressing the <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20070\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/starter_CreateProject_icon.png\" alt=\"starter_CreateProject_icon\" width=\"32\" height=\"32\" \/>.<\/p>\n<p>&nbsp;<\/p>\n<h4>Specify the folder and file name to save<\/h4>\n<p>A window will open where you can specify the folder and file name.<br \/>\nPlease specify the folder and file name and click &#8220;Save&#8221;.<br \/>\nThe folder you specify here will be the base folder where all new files created in this project will be saved.<br \/>\nIn addition, the file name specified here is displayed as the project name being edited in the title bar at the top of the window.<\/p>\n<p>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/ProjectWindow.png\" alt=\"Window_ProjectCategory\" width=\"251\" height=\"166\" class=\"alignnone size-full wp-image-82799 alignright\" \/>After you have created a new project, the &#8220;Animations&#8221;, <br \/>\n&#8220;Cell Maps&#8221;, <br \/>\n&#8220;Reference Images&#8221;, and <br \/>\n&#8220;Effects&#8221;<br \/>\ncategories are created within the &#8220;Category&#8221; tab of the project window.<br \/>\nEach item is preceded by a folder icon.<\/p>\n<p>Now you have sspj (Project Files) for creating the animation.<br \/>\nBy adding &#8220;ssce (cell map file)&#8221;, &#8220;Cell&#8221;, &#8220;ssae (Animation File)&#8221; and &#8220;ssee (Effect files)&#8221; to this sspj, you can create and edit animations.<\/p>\n<h4>Set &#8220;Compatibility&#8221; in &#8220;Project Settings&#8221;<\/h4>\n<p>Once you&#8217;ve created sspj, before you start creating animation, let&#8217;s take a look at &#8220;<a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/other\/projectsettings\/compatibility\/\">Compatibility<\/a>&#8220;. You can set &#8220;compatibility&#8221; by selecting &#8220;Project Settings&#8221; from &#8220;File&#8221; on the menu bar, opening the &#8220;<a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/other\/projectsettings\/\">Project Settings<\/a>&#8221; window, and selecting &#8220;<a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/other\/projectsettings\/compatibility\/\">Compatibility<\/a>&#8220;.<\/p>\n<p>For details, see the page of the <a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/other\/projectsettings\/\">&#8220;Project Settings Window&#8221;<\/a>.<\/p>\n<h2><a id=\"texture\"><\/a>Creating image data<\/h2>\n<p>SpriteStudio requires image data (Texture) to create an animation.<br \/>\nUse image editing software to create image data.<\/p>\n<p>Creates a texture with the pixel size of a power of 2.<br \/>\nSpriteStudio can work with images that are not a power of two, but game engine specifications may not allow this.<\/p>\n<p>You can create more variety of animations with SpriteStudio by drawing and preparing joint and decorative images separately.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"text-align: center;\"><strong>After layout<\/strong><\/td>\n<td style=\"text-align: center;\"><strong>Used Texture\uff08512\u00d7512\uff09<\/strong><\/td>\n<\/tr>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20290\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/starter_makepicture_01.png\" alt=\"starter_makepicture_01\" width=\"204\" height=\"243\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20292\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/samplerobo_01.png\" alt=\"samplerobo_01\" width=\"512\" height=\"512\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/samplerobo_01.png 512w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/samplerobo_01-150x150.png 150w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/samplerobo_01-300x300.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Related Page<\/h4>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio\/guide\/tips\/partsdivision\/\">Divide the illustration into parts(Japanese)<\/a><br \/>\nDemonstrates how to split parts when creating textures.<\/li>\n<\/ul>\n<h2><a id=\"create_cellmap\"><\/a>Create a new Cell Map and add new Cells<\/h2>\n<p>A &#8220;CellMap&#8221; is data that contains the &#8220;Texture&#8221; that SpriteStudio uses to create an animation, and the &#8220;Cell&#8221; information that SpriteStudio uses to create the animation. The file extension is &#8220;.ssce&#8221;.<br \/>\n&#8220;CellMap&#8221; is sometimes referred to as &#8220;ssce&#8221; in the Help Center.<\/p>\n<p>The cut-out part of an animation from a texture is called a &#8220;Cell&#8221;.<br \/>\nAssemble your animation by positioning and editing &#8220;Cell&#8221; as &#8220;Parts&#8221; in the <a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/main\/layout\/\">Layout Window<\/a>.<\/p>\n<h3><a id=\"new_ssce\"><\/a>Create a new ssce (Cell Map file)<\/h3>\n<h4>Add ssce to sspj<\/h4>\n<p>ssce creates it by reading the image file.<br \/>\nCreate or add a new ssce to sspj using one of the following methods.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"vertical-align: top;\">Select &#8220;Project&#8221; &#8211; &#8220;Add New File&#8221; &#8211; &#8220;Cell Map&#8221; on the menu bar.<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssce_01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssce_01.png\" alt=\"\" width=\"671\" height=\"153\" class=\"alignnone size-full wp-image-82823\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssce_01.png 671w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssce_01-624x142.png 624w\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">Right-click on the &#8220;Cell Maps&#8221; in the Project window and select &#8220;New File&#8221; from the contextual menu.<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssce_02.png\" alt=\"\" width=\"251\" height=\"152\" class=\"alignnone size-full wp-image-82828\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>Select &#8220;Project&#8221; &#8211; &#8220;Import&#8221; on the menu bar.<\/p>\n<p>The differences between &#8220;Import&#8221; and &#8220;New File&#8221; can be found on the following pages.<\/p>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio\/guide\/reference\/import_addfile\/\">I want to use textures and animation from other projects(Japanese)<\/a><\/li>\n<\/ul>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssce_03.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssce_03.png\" alt=\"\" width=\"532\" height=\"150\" class=\"alignnone size-full wp-image-82830\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Specify &#8220;Reference Image&#8221; for ssce<\/h4>\n<p>&#8220;Reference Image&#8221; refers to the &#8220;Texture Image&#8221; referenced by ssce.<br \/>\nWhen you create a new ssce, the &#8220;Select image file to reference&#8221; dialog appears. Specify the texture to use.<br \/>\nImage data that can be imported are &#8220;<strong>bmp<\/strong>&#8220;, &#8220;<strong>gif<\/strong>&#8220;, &#8220;<strong>jpg<\/strong>&#8220;, &#8220;<strong>psd<\/strong>&#8220;, &#8220;<strong>png<\/strong>&#8220;, &#8220;<strong>pvr<\/strong>&#8220;, &#8220;<strong>tga<\/strong>&#8221; and &#8220;<strong>tif<\/strong>&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssce_04.png\" alt=\"\" width=\"235\" height=\"158\" class=\"alignnone size-full wp-image-82837  alignright\" \/>The new ssce is added to the <a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/main\/project\/\">Project Window<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>If you use more than one &#8220;ssce&#8221;, repeat &#8220;Create a new ssce&#8221; to add more.<br \/>\nYou can add a ssce while creating the animation.<\/p>\n<h3><a id=\"new_cell\"><\/a>Creating and Registering New Cells<\/h3>\n<div class=\"entry-content\">\n<p>Once you have registered ssce with your project, you can select a range in the Cell Map window and register &#8220;Cell&#8221; to be used for animation production.<\/p>\n<p>&#8220;Cell&#8221; is the data from which you place &#8220;Parts&#8221; in an animation. If you register &#8220;Cell&#8221;, you will be added to &#8220;Cell List&#8221;.<br \/>\n&#8220;Cell List&#8221; data is managed by &#8220;Cell Map&#8221;.<br \/>\nSelect &#8220;Cell Map&#8221; to switch the display of the Cell List window.<\/p>\n<h4>Registering Cells from the Cell Map<\/h4>\n<p>From the Project window, select the ssce for which you want to create a &#8220;Cell&#8221;.<br \/>\nThe Cell Map window displays the &#8220;Reference Image&#8221; associated with the selected ssce.<\/p>\n<p><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_cell_01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_cell_01.png\" alt=\"\" width=\"686\" height=\"501\" class=\"alignnone size-full wp-image-82843\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_cell_01.png 686w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_cell_01-624x456.png 624w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_cell_02.png\" alt=\"\" width=\"133\" height=\"111\" class=\"alignnone size-full wp-image-82845 alignright\" \/>In the Cell Map window, select the rectangle that you want to designate as the &#8220;Cell&#8221;.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div class=\"entry-content\">\n<p>When you finish specifying the range, double-click the range to register the new &#8220;Cell&#8221; in &#8220;Cell List&#8221;.<br \/>\nRepeat this process until you have registered all the required &#8220;Cell&#8221;.<\/p>\n<p><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_cell_03.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_cell_03.png\" alt=\"\" width=\"685\" height=\"527\" class=\"alignnone size-full wp-image-82849\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_cell_03.png 685w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_cell_03-624x480.png 624w\" sizes=\"auto, (max-width: 685px) 100vw, 685px\" \/><\/a><\/p>\n<p>You can rename and set tags from the context menu in the Cell List window.<br \/>\nYou can open the Edit Cell window by double-clicking &#8220;Cell&#8221; in the cell list window. In the Edit Cell Window, you can set the &#8220;Pivot&#8221; on which cells are animated to rotate, scale, or scale.<br \/>\n<a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/other\/editcell\/\">See here for an explanation of the Edit Cell Window.<\/a><\/p>\n<p>Repeat this process to create multiple cells.<br \/>\nYou can add cells in the middle of creating an animation.<\/p>\n<blockquote>\n<p>The following tools are useful for registering cells.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio\/guide\/tool\/psdtoss6\/\">PSDtoSS6(Japanese)<\/a><br \/>\nA tool that generates a set of data for SpriteStudio from PSD.<br \/>\nYou can use it for free.<\/li>\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio\/guide\/tool\/texturepacker\/\">TexturePackerToSS(Japanese)<\/a><br \/>\nA tool that allows you to create ssce and texture images from a TexturePacker.<br \/>\nRecommended for people who already use TexturePacker.<\/li>\n<\/ul>\n<\/blockquote>\n<\/div>\n<h4><strong>About &#8220;Pivot&#8221; in Cells<\/strong><\/h4>\n<p>The cell has a parameter called &#8220;pivot&#8221;.<br \/>\n&#8220;pivot&#8221; is the point about which the parts is placed, scaled, rotated, and so on.<br \/>\nWhen you create a cell, &#8220;pivot&#8221; is set to the middle of the parts.<br \/>\nAs you create the animation, adjust it to suit your parts usage.<br \/>\nYou can set the position of &#8220;pivot&#8221; in the Edit cell window.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Editcell_01.png\" alt=\"\" width=\"601\" height=\"450\" class=\"alignnone size-full wp-image-82908 aligncenter\" \/><\/p>\n<h2><a id=\"create_animation\"><\/a>Placing Parts<\/h2>\n<p>After creating &#8220;ssae (Animation File)&#8221;, arrange &#8220;Cell&#8221; in the <a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/main\/layout\/\">Layout Window<\/a> as &#8220;Parts&#8221;.<br \/>\nMove this &#8220;Parts&#8221; to create an animation.<\/p>\n<p>&#8220;ssae (Animation File)&#8221; is a file containing animation related data (setup data, animation data). The file extension is &#8220;.ssae&#8221;. This Help Center uses the term &#8220;ssae&#8221;.<\/p>\n<h3><a id=\"new_ssae\"><\/a>Create ssae (animation file)<\/h3>\n<p>First create a new ssae (Animation File) to store the data.<br \/>\nAdd ssae to sspj in one of the following ways.<\/p>\n<table>\n<tbody>\n<tr>\n<td>Select &#8220;Project&#8221; &#8211; &#8220;Add New File&#8221; &#8211; &#8220;Animation&#8221; on the menu bar.<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssae_01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssae_01.png\" alt=\"\" width=\"671\" height=\"151\" class=\"alignnone size-full wp-image-82858\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssae_01.png 671w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssae_01-624x140.png 624w\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>Right-click on the &#8220;Animation&#8221; in the Project window and select &#8220;New File&#8221; from the contextual menu.<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssae_02.png\" alt=\"\" width=\"236\" height=\"216\" class=\"alignnone size-full wp-image-82865\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The &#8220;Create New Animation&#8221; window will open. Specify a file name and save.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/new_ssae_03.png\" alt=\"\" width=\"235\" height=\"263\" class=\"alignnone size-full wp-image-82871 alignright\" \/>The file name you specify is the name that appears in the &#8220;Animations&#8221; section of the Project window.<\/p>\n<h4>Differences Between Setup and Animation Data<\/h4>\n<p>When you create ssae, it is called &#8220;Setup&#8221; and there is always one setup data. &#8220;Rename&#8221; cannot be done.<br \/>\n&#8220;Setup&#8221; is the data that is the source of animation data.<br \/>\n&#8220;Animation Data&#8221; is created based on the data set in &#8220;Setup&#8221;.<\/p>\n<p>&#8220;Animation Data&#8221; is data for editing animation. You can change the name.<br \/>\nIt can exist multiple times within ssae and is based on &#8220;Setup&#8221;.<\/p>\n<blockquote>\n<p>Setting setup data is required when using &#8220;Mesh and Bone Features&#8221; of &#8220;SpriteStudio&#8221;. For instructions on creating an animation using &#8220;Mesh and Bone Features&#8221;, see the following pages.<\/p>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio\/guide\/meshbone\/howtouse\/\">Using &#8220;Mesh and Bone Features&#8221;(Japanese)<\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<h4>Setting the Layout Window in the Layout Info Window<\/h4>\n<p>In the Layout Info window, set the size of the &#8220;Reference Frame&#8221; and the position of the &#8220;Origin Point&#8221;.<\/p>\n<p>&#8220;Reference Frame&#8221; is the screen size of the animation to be created.<br \/>\n&#8220;Origin Point&#8221; sets the location of the &#8220;Reference Frame&#8221; coordinate (0, 0).<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/LayoutInfo.png\" alt=\"\" width=\"334\" height=\"273\" class=\"alignnone size-full wp-image-82888 aligncenter\" \/><\/p>\n<h4>Select setup data to position the parts on the Layout window<\/h4>\n<p>Parts can be positioned by selecting the &#8220;Cell&#8221; used for the animation from the Cell List window and dragging and dropping it into the Layout window.<\/p>\n<p>&#8220;Cell&#8221; placed in the Layout window are called &#8220;Parts&#8221;.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p>In the Project window, select &#8220;Setup&#8221;.<br \/>\nYou can also switch to &#8220;Setup&#8221; from the Cell List, Frame Control, and Layout windows.<\/p>\n<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_01.png\" alt=\"\" width=\"239\" height=\"213\" class=\"alignnone size-full wp-image-82895\" \/><\/td>\n<\/tr>\n<tr>\n<td>When the setup data is switched, the background of the layout window turns red, and &#8220;Animation&#8221; displayed in the upper left of the window changes to &#8220;Setup&#8221;.<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_02.png\" alt=\"\" width=\"422\" height=\"414\" class=\"alignnone size-full wp-image-82896\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>Drag and drop &#8220;Cell&#8221; from the Cell List window onto the Layout window.<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_03.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_03.png\" alt=\"\" width=\"665\" height=\"587\" class=\"alignnone size-full wp-image-82897\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_03.png 665w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_03-624x551.png 624w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>&#8220;Part&#8221; has been deployed.<br \/>\nRepeat this process to position the parts you want to see in the animation.<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_04.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_04.png\" alt=\"\" width=\"429\" height=\"663\" class=\"alignnone size-full wp-image-82898\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Building Parent-Child Relationships for Parts<\/h4>\n<p>Once you have placed all the parts on the layout window, set the &#8220;parent-child relationship&#8221; of the parts on the Frame Controls window as desired.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_05.png\" alt=\"\" width=\"545\" height=\"754\" class=\"alignnone size-full wp-image-82903 aligncenter\" \/><\/p>\n<p>&#8220;Parent-Child Relationship&#8221; refers to the hierarchical relationship between parts.<br \/>\nA parts that contains other parts is called a &#8220;Parent Part&#8221;, and a part that contains a parent part is called a &#8220;Child Parts&#8221;. This relationship is called a &#8220;Parent-Child Relationship&#8221;.<br \/>\nEditing the parent parts synchronizes the child parts, but the parent part is not affected by edits to the child parts.<\/p>\n<p>For example, in the above figure, the parent parts named &#8220;UpperBody&#8221; has a parent-child relationship with the part named &#8220;PenguinFoot&#8221; as a child part.<br \/>\nWhen you edit &#8220;UpperBody&#8221;, &#8220;PenguinFoot&#8221; is synchronously affected by the edit.<\/p>\n<p>To create a Parent-Child Relationship, you can create a Parent-Child Relationship by dragging and dropping the parts you want to be a child on top of the parts you want to be the parent in the Frame Controls window.<\/p>\n<p>To change the Parent-Child Relationship, drag the child parts you want to change to the hierarchy you want to move it to in the Frame Controls window. The border between the parts is highlighted in blue and the parts is placed in that position.<\/p>\n<p>Once you have completed the basic configuration of the parts in the setup data, such as layout, parenting, and so on, switch to animation data to create the animation.<\/p>\n<h4>Preparing Animation Data<\/h4>\n<p>After preparing the setup data, prepare the animation data.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_data_01.png\" alt=\"\" width=\"239\" height=\"223\" class=\"alignnone size-full wp-image-82915 alignright\" \/>Data that is prefaced with <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_frame_icon11.png\" alt=\"\" width=\"16\" height=\"16\" class=\"alignnone size-full wp-image-754\" \/> in the Project window is &#8220;Animation Data&#8221;. You can edit the animation data by selecting this.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Animation settings and playback control are available on the toolbar at the bottom of the Frame Controls window.<br \/>\nHere, check and set 2 items.<\/p>\n<ul>\n<li><strong>Total Frames\uff1a<\/strong>Number of animation playback frames<\/li>\n<li><strong>Frames Per Second\uff1a<\/strong>Frames updated per second (fps)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_data_02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/animation_data_02.png\" alt=\"\" width=\"786\" height=\"314\" class=\"alignnone size-full wp-image-82918\" \/><\/a><\/p>\n<p>When you are ready to create an animation, save the data.<\/p>\n<h2><a id=\"save\"><\/a>Save a file<\/h2>\n<p>There are two main ways to save files containing data.<\/p>\n<h4>How to save only &#8220;ssae&#8221; or &#8220;ssce&#8221;<\/h4>\n<p>How to save only the selected ssae or ssce.<\/p>\n<table>\n<tbody>\n<tr>\n<td>In the project window, select the ssae or ssce you want to save, then select &#8220;File&#8221; &#8211; &#8220;Save&#8221; from the menu bar.<\/td>\n<td>\u00a0<a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/FileSave_01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/FileSave_01.png\" alt=\"\" width=\"270\" height=\"299\" class=\"alignnone size-full wp-image-82961\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>Click the Save icon in the toolbar<\/td>\n<td>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18623\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/mainmenu_toolbar_icon03_ver5.6.1.png\" alt=\"mainmenu_toolbar_icon03_ver5.6.1\" width=\"32\" height=\"32\" \/><\/td>\n<\/tr>\n<tr>\n<td>Use shortcut keys<\/td>\n<td>\u00a0<button>Ctrl<\/button>+<button>S<\/button><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>How to save the entire sspj<\/h4>\n<p>Save all files managed by sspj, including sspj.<\/p>\n<table>\n<tbody>\n<tr>\n<td>Select &#8220;File&#8221; &#8211; &#8220;Save All&#8221; from the menu bar.<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/FileSave_02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/FileSave_02.png\" alt=\"\" width=\"269\" height=\"298\" class=\"alignnone size-full wp-image-82962\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>Click the Save All icon in the toolbar<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18620\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/mainmenu_toolbar_icon06_ver5.6.1.png\" alt=\"mainmenu_toolbar_icon06_ver5.6.1\" width=\"32\" height=\"32\" \/><\/td>\n<\/tr>\n<tr>\n<td>Use shortcut keys<\/td>\n<td><button>Shift<\/button>+<button>Ctrl<\/button>+<button>S<\/button><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div>\n<p>Once you have saved the data, you are ready to create the animation in SpriteStudio.<\/p>\n<h2>When you are ready to create an animation,&#8230;<\/h2>\n<p><a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/beginners\/edit\/\" class=\"su-button su-button-style-soft\" style=\"color:#ffffff;background-color:#be80d2;border-color:#9867a8;border-radius:5px\" target=\"_self\"><span style=\"color:#ffffff;padding:7px 20px;font-size:16px;line-height:24px;border-color:#d2a7e0;border-radius:5px;text-shadow:0px 0px 0px #000000\"><i class=\"sui sui-arrow-circle-right\" style=\"font-size:16px;color:#ffffff\"><\/i>  Edit animation <\/span><\/a><br \/>\nHow to edit the prepared data and create an animation.<\/p>\n<p><a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/beginners\/output\/\" class=\"su-button su-button-style-soft\" style=\"color:#ffffff;background-color:#be80d2;border-color:#9867a8;border-radius:5px\" target=\"_self\"><span style=\"color:#ffffff;padding:7px 20px;font-size:16px;line-height:24px;border-color:#d2a7e0;border-radius:5px;text-shadow:0px 0px 0px #000000\"><i class=\"sui sui-arrow-circle-right\" style=\"font-size:16px;color:#ffffff\"><\/i>  Output animation <\/span><\/a><br \/>\nProvides a summary of how to output and display completed animation data in various formats.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This page introduces the flow of creating basic animation data in SpriteStudio. Description of each window Cre..<\/p>\n","protected":false},"author":33,"featured_media":0,"parent":82728,"menu_order":26,"comment_status":"closed","ping_status":"closed","template":"page_eng_ss.php","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-82741","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/82741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/comments?post=82741"}],"version-history":[{"count":0,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/82741\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/82728"}],"wp:attachment":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/media?parent=82741"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/tags?post=82741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}