{"id":150619,"date":"2022-04-05T13:23:35","date_gmt":"2022-04-05T04:23:35","guid":{"rendered":"https:\/\/www.webtech.co.jp\/help\/?page_id=150619"},"modified":"2022-04-06T09:36:51","modified_gmt":"2022-04-06T00:36:51","slug":"edit","status":"publish","type":"page","link":"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio7\/beginners\/edit\/","title":{"rendered":"Edit animation"},"content":{"rendered":"<p><a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio7\/beginners\/create\/\">&#8220;Create Animation&#8221;<\/a> created a variety of SpriteStudio files to prepare you for creating animations.<br \/>\nThis page takes you a little deeper into how animation is edited in SpriteStudio and how it is represented in many ways.<\/p>\n<ul>\n<li><a href=\"#key_attribute\">About Key and Attribute<\/a><br \/><span style=\"font-size: small;\">Explanation of &#8220;Key&#8221; and &#8220;Attribute&#8221; that you should know when editing an animation<\/span><\/li>\n<li><a href=\"#keyflame_animetion\">Interpolate Animation<\/a><br \/><span style=\"font-size: small;\">How to create looping animations.<\/span><\/li>\n<li><a href=\"#coma_animetion\">&#8220;Reference Cell&#8221; Settings<\/a><br \/><span style=\"font-size: small;\">How to use &#8220;Reference Cell&#8221; to create an animation in which the eye blink.<\/span><\/li>\n<li><a href=\"#Range_selection\">&#8220;Range Selection&#8221; of the frame<\/a><br \/><span style=\"font-size: small;\">How to edit parts together.<\/span><\/li>\n<li><a href=\"#instans\">Instance Parts<\/a><br \/><span style=\"font-size: small;\">How to work with parts that reference animation information.<\/span><\/li>\n<li><a href=\"#effect\">Effect Feature<\/a><br \/><span style=\"font-size: small;\">I will introduce the Effect Feature.<\/span><\/li>\n<li><a href=\"#mask\">Mask Feature<\/a><br \/><span style=\"font-size: small;\">I will introduce the Mask Feature.<\/span><\/li>\n<li><a href=\"#meshborn\">Bone Mesh Feature<\/a><br \/><span style=\"font-size: small;\">I will introduce the Bone Mesh Feature.<\/span><\/li>\n<\/ul>\n<h2><a id=\"key_attribute\"><\/a>About Key and Attribute<\/h2>\n<p>OPTPiX SpriteStudio creates animation by editing &#8220;Key&#8221; and &#8220;attribute&#8221;. &#8220;Key&#8221; appears at the frame where the attribute (Information describing the state of a parts in a particular frame) is set.<br \/>\nSet this &#8220;Key&#8221; on a per-parts basis to create the animation.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-19336\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/Window_FrameControl_keyon.png\" alt=\"Window_FrameControl_keyon\" width=\"15\" height=\"19\" \/> that appears in the timeline area of the frame controls window indicates &#8220;Key&#8221;.<\/p>\n<p>&#8220;Key&#8221; and &#8220;Attribute&#8221; are also described on the <a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/window\/main\/framecontrol\/\">&#8220;frame control window (Japanese)&#8221;<\/a> and <a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/window\/main\/attribute\/\">&#8220;Attribute window (Japanese)&#8221;<\/a> pages. Please take a look at this as well.<\/p>\n<h4>Organize &#8220;Attribute&#8221; for viewing<\/h4>\n<p class=\"first\">By default, many &#8220;Attribute&#8221; appear under the &#8220;General&#8221; heading in the attribute window.<br \/>\nSelect &#8220;File&#8221; &#8211; &#8220;Project Settings&#8221; from the menu bar to open the Project Settings window. You can also show only the attributes you want by selecting &#8220;Custom&#8221; under &#8220;Playback target platform&#8221; under &#8220;compatibility&#8221;.<br \/>\nFor details, see &#8220;<a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio7\/guide\/tips\/attribute_organize\/\">About Attribute display settings<\/a>&#8220;.<\/p>\n<p>Note: The &#8220;Misc&#8221; item in the Project Settings window lets you select which attributes are automatically enabled when you set key. If you hide an attribute checked with this setting, you cannot change the value of the attribute.<\/p>\n<h2><a id=\"keyflame_animetion\"><\/a>Interpolate Animation<\/h2>\n<p>SpriteStudio sets the parameters for each attribute in frames as &#8220;Key&#8221;. The parameters are automatically computed and applied for the frames between the key.<br \/>\nThis method of animation is called &#8220;Interpolate Animation&#8221;.<\/p>\n<h4>Create looping animations with interpolated animation<\/h4>\n<p>SpriteStudio makes it easy to create looping animations. As an example, I&#8217;ll show you how to create a &#8220;to wave one&#8217;s arm&#8221; animation.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>The parts were arranged in the layout window, and the parent-child relationships of the parts and the <a href=\"#priority\">&#8220;Priority (attribute)&#8221;<\/a> of each part were set.<br \/>\nCurrently, there is only a key set at the first frame.<\/p>\n<p>Add key from here and edit attributes to create looped animation.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Interpolate_01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Interpolate_01.png\" alt=\"\" width=\"492\" height=\"714\" class=\"alignnone size-full wp-image-83123\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>You selected a parts &#8220;FrontShoulder&#8221; in the Frame Controls window, then selected frame 5 of the Timeline to place a key.<\/p>\n<p>You can set key by selecting &#8220;Add Key&#8221; in the Frame Controls window context menu, editing parts in the Layout window, or double-clicking on the Frame controls.<\/p>\n<p>This time you have edited the attribute &#8220;Rotate Z&#8221; to set the angle for the &#8220;front shoulder&#8221; parts.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Interpolate_02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Interpolate_02.png\" alt=\"\" width=\"786\" height=\"714\" class=\"alignnone size-full wp-image-83127\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Interpolate_02.png 786w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Interpolate_02-768x698.png 768w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Interpolate_02-624x567.png 624w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>Next, duplicate the Key. This time, you&#8217;ll duplicate the Key from frame 1 to frame 10.<br \/>\nTo duplicate a Key, select &#8220;Copy(All)&#8221; in the context menu of the key you want to duplicate, and select &#8220;Paste (Overwrite)&#8221; in the context menu of the frame at which you want to paste the Key.<\/p>\n<p>The &#8220;to wave one&#8217;s arm&#8221; loop animation is now complete.<\/p>\n<p>&#8220;Paste&#8221; has &#8220;Paste (Insert)&#8221; in addition to &#8220;Paste (Overwrite)&#8221;.<br \/>\nIf you select &#8220;Paste (Insert)&#8221;, the Key are pasted after frames are added.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Interpolate_02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Interpolate_03.png\" alt=\"\" width=\"490\" height=\"687\" class=\"alignnone size-full wp-image-83128\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote>\n<p><a id=\"priority\"><\/a>If you do not set the &#8220;Priority&#8221; of the attribute, the hierarchy of parts placed in the frame controls determines the display order. The parts at the bottom is displayed in front. <br \/>\nWhen setting the &#8220;Parent-Child Relationship&#8221; of a Parts or when there is a clear display order for each Parta, be sure to set &#8220;Priority&#8221;.<br \/>\nIf &#8220;Priority&#8221; is not set and viewed in a game engine such as Unity, the Parts may not match the &#8220;OPTPiX SpriteStudio&#8221; display.<br \/>\nWhen handling data in other environments, be sure to set &#8220;Priority&#8221;.<\/p>\n<\/blockquote>\n<h3>Edit interpolation methods in &#8220;Curve Editor&#8221;<\/h3>\n<p>You can vary the movement of your animation using &#8220;Curve Editor&#8221;.<br \/>\nPress <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-19518\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/Window_Attribute_icon04_ver5.6.1.png\" alt=\"Window_Attribute_icon04_ver5.6.1\" width=\"26\" height=\"18\" \/> in the attribute window to display the &#8220;Curve Editor&#8221; window.<\/p>\n<p>The default interpolation method is &#8220;Alignment&#8221;, which interpolates an animation at a constant change.<br \/>\nSee the following pages for more information about the Curve Editor and interpolation methods.<\/p>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/window\/other\/curveeditor\/\">&#8220;Curve Editor&#8221; window (Japanese)<\/a><br \/><span style=\"font-size: small;\">Describes the function of the curve editor window.<\/span><\/li>\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/tips\/interpolation\/\">How to set up interpolation and the difference between each interpolation (Japanese)<\/a><br \/><span style=\"font-size: small;\">Describes how to set up interpolation and how different interpolation can affect your animation.<\/span><\/li>\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/tips\/anime_making\/\">Tips for creating character animation (Japanese)<\/a><br \/><span style=\"font-size: small;\">This section describes the key points of creating animated characters by using actual animations.<\/span><\/li>\n<\/ul>\n<h2><a id=\"coma_animetion\"><\/a>&#8220;Reference Cell&#8221; Settings<\/h2>\n<p>The &#8220;Reference Cell&#8221; attribute lets you modify the cells referenced by a parts to create an animation in a frame-by-frame fashion.<\/p>\n<h4>Create eye blink animation using the attribute &#8220;Reference Cell&#8221;<\/h4>\n<p>You can use &#8220;Reference Cell&#8221; to create &#8220;eye blink&#8221; animations, for example.<br \/>\nHow to create an animation using a pattern of eye changes.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>Place the parts in the layout window.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_01.png\" alt=\"\" width=\"494\" height=\"562\" class=\"alignnone size-full wp-image-83115\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>Select the pupil part in the frame control window. Then select the frame where you want to change the eye pattern.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_02.png\" alt=\"\" width=\"494\" height=\"258\" class=\"alignnone size-full wp-image-83116\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>Select &#8220;Edit&#8221; under the &#8220;Reference Cell&#8221; item in the attribute window.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_03.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_03.png\" alt=\"\" width=\"281\" height=\"389\" class=\"alignnone size-full wp-image-83117\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>In the &#8220;Select reference cell&#8221; dialog that appears, select the cell you want to change.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_04.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_04.png\" alt=\"\" width=\"384\" height=\"592\" class=\"alignnone size-full wp-image-83118\" \/><\/a><\/td>\n<\/tr>\n<td style=\"vertical-align: top;\">\n<p>When &#8220;Reference Cell&#8221; is set, the circle next to the name turns blue.<\/p>\n<p>Since you are creating a &#8220;eye blink&#8221; animation this time, set &#8220;Reference Cell&#8221; so that it switches to &#8220;a closed picture of the eyelids&#8221; after &#8220;a picture with open eyelids&#8221;.<br \/>\nAdjusts the timing of the transition by varying the frame interval to give the animation a natural &#8220;eye blink&#8221; look.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_05.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Reference_Cell_05.png\" alt=\"\" width=\"281\" height=\"389\" class=\"alignnone size-full wp-image-83120\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">Sets the last frame to the &#8220;a painting with open eyelids&#8221; cell set in the first frame.<br \/>\nThis completes the looping animation of &#8220;eye blink&#8221;.<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/stopmotion_anime_c.gif\" alt=\"\" width=\"262\" height=\"277\" class=\"alignnone size-full wp-image-25269\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><a id=\"Range_selection\"><\/a>&#8220;Range Selection&#8221; of the frame<\/h2>\n<p>An introduction to the ability to edit in bulk by selecting a range of frames.<br \/>\n&#8220;Range Selection&#8221; is useful when you have more parts or frames and have difficulty adjusting frame by frame.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-19468\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/Window_FrameControl_label03_ver5.6.1.png\" alt=\"Window_FrameControl_label03_ver5.6.1\" width=\"337\" height=\"45\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/Window_FrameControl_label03_ver5.6.1.png 337w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/Window_FrameControl_label03_ver5.6.1-300x40.png 300w\" sizes=\"auto, (max-width: 337px) 100vw, 337px\" \/><\/p>\n<p>In the Frame Controls window at the &#8220;ruler part&#8221; position, drag &#8220;<button>Shift<\/button> + click&#8221; to the start and end frames you want. This highlights the specified range in yellow.<br \/>\nIf you edit the part in this state, the keys at the selected frame are manipulated in bulk and the animation reflects the changes.<\/p>\n<p>Also, if you play while &#8220;Range Selection&#8221;, only the &#8220;Range Selection&#8221; frames will be played. This is useful when you want to play and see a portion of a long animation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/ClearPlaybackRange.png\" alt=\"\" width=\"313\" height=\"210\" class=\"alignnone size-full wp-image-83074 alignright\" \/>To cancel &#8220;Range Selection&#8221;, right-click &#8220;ruler part&#8221; and select &#8220;Clear Playback Range&#8221; from the context menu.<\/p>\n<h2><a id=\"instans\"><\/a>Instance Parts<\/h2>\n<p>An Instance Parts is a Parts that has a special behavior called &#8220;Referencing an Animation&#8221;.<br \/>\nThis function is very useful when you want to animation multiple characters with different animation contents separately.<\/p>\n<p>This section describes the basic usage of &#8220;Instance Parts&#8221;. <br \/>Please refer to the following page for details on &#8220;Instance Parts&#8221;.<\/p>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/instance\/howtouse\/\">Using the Instance Feature (Japanese)<\/a><br \/><span style=\"font-size: small;\">This page describes the instance features, including &#8220;Instance Parts&#8221;.<\/span><\/li>\n<\/ul>\n<h3>Creating an Animation Using &#8220;Instance Parts&#8221;<\/h3>\n<h4>Create animation data referenced by &#8220;Instance Parts&#8221;<\/h4>\n<p>A &#8220;Instance Parts&#8221; is a part that references animation data.<br \/>\nTo use it, you must create the animation data you want to reference.<br \/>\nThe procedure for creating animation data is the same as for creating a normal ssae (Animation File).<\/p>\n<p>This time, you will create an animation that incorporates the animation of a spinning ball and the animation of a character walking as a &#8220;Instance Parts&#8221;.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>Add a new ssae (Animation File).<br \/>\nThe animation data added here becomes the &#8220;Source Animation&#8221; referenced by &#8220;Instance Parts&#8221;.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_01.png\" alt=\"\" width=\"261\" height=\"280\" class=\"alignnone size-full wp-image-83102\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">Create an animation of the spinning ball.<br \/>\nBy setting the Z rotation parameter to -360 at the last frame, you created an animation of 1 rotation to the left.<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_02.png\" alt=\"\" width=\"1039\" height=\"414\" class=\"alignnone size-full wp-image-83094\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Create animations using &#8220;Instance Parts&#8221;<\/h4>\n<p>Position the rotated ball animation as a &#8220;Instance Parts&#8221; in your animation.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>Select the animation data you want &#8220;Instance Parts&#8221; to position.<br \/>\nThe animation data must be ssae different from ssae used in &#8220;Instance Parts&#8221;.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_03.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_03.png\" alt=\"\" width=\"253\" height=\"261\" class=\"alignnone size-full wp-image-83104\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>Click <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18921\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/09\/Window_celllist_icon03_ver5.6.1.png\" alt=\"Window_celllist_icon03_ver5.6.1\" width=\"32\" height=\"32\" \/> in the Cell List window to switch the list displayed to &#8220;Anime List&#8221;.<br \/>\nVerify that the animation data you created appears in &#8220;Anime List&#8221;.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_04.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_04.png\" alt=\"\" width=\"289\" height=\"380\" class=\"alignnone size-full wp-image-83106\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">\n<p>Drag from &#8220;Anime List&#8221; to place just as you would place a cell.<br \/>\nIn the image on the right, you drag it to the Frame Controls window, but you can also drag it onto the Layout window.<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_05.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_05.png\" alt=\"\" width=\"700\" height=\"376\" class=\"alignnone size-full wp-image-83112\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_05.png 700w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_05-624x335.png 624w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">You have positioned the animation of the spinning ball as a &#8220;Instance Part&#8221;. Animations of characters walking are also arranged as &#8220;Instance Part&#8221;.<br \/>\nAdjust the position, priority, and other attributes of each &#8220;Instance Part&#8221; you placed to complete the animation.<\/td>\n<td><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_06.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_06.png\" alt=\"\" width=\"760\" height=\"543\" class=\"alignnone size-full wp-image-83113\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_06.png 760w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/12\/Instance_Parts_06-624x446.png 624w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&#8220;Instance Parts&#8221; is a special part that can be modified like a Normal Parts.<br \/>\nYou can use animation data as a &#8220;Instance Parts&#8221; and set its &#8220;Instance Parts&#8221; to various attributes to achieve different effects.<\/p>\n<h2><a id=\"effect\"><\/a>Effect Feature<\/h2>\n<p>You can create an animation of a parts with random element movement, such as a particle effect, using the Effects feature.<\/p>\n<p>Animation data created using the Effects Feature is saved in a file called &#8220;ssee (Effect files)&#8221;.<br \/>\nOnce you have created an ssee, you can incorporate it into your animation data as a &#8220;Effect Parts&#8221;.<\/p>\n<h4>Related page of the Effect Feature<\/h4>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/window\/other\/effecteditor\/\">Effect Editor window (Japanese)<\/a><br \/><span style=\"font-size: small;\">Provides detailed descriptions of the functions in the &#8220;Effects Editor&#8221; window.<\/span><\/li>\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/effect\/howtouse\/\">Using the Effect Feature  (Japanese)<\/a><br \/><span style=\"font-size: small;\">Describes how to use the Effect Feature.<\/span><\/li>\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/effect\/sample\/\">Effect Samples Descriptions (Japanese)<\/a><br \/><span style=\"font-size: small;\">Describes the particle effect sample data provided with <a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio\/download\/ss5download\/sample58\/\">&#8220;Ver.5 Download page&#8221; (Japanese)<\/a>. The data was created in SpriteStudio 5, but is also available in SpriteStudio ver.6.<\/span><\/li>\n<\/ul>\n<h2><a id=\"mask\"><\/a>Mask Feature<\/h2>\n<p>You can use &#8220;Mask Parts&#8221; to mask an animation so that parts of it are obscured.<\/p>\n<h4>Related page of the Mask Feature<\/h4>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/mask\/howtouse\/\">Using the Mask Feature (Japanese)<\/a><br \/><span style=\"font-size: small;\">Describes how to use the Mask Feature when creating animations.<\/span><\/li>\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/tips\/ver6_making\/\">SpriteStudio Ver.6 Application Example &#8220;Tenohira no B\u014dken&#8221; (Japanese)<\/a><br \/><span style=\"font-size: small;\">It introduces short films that use the Mask Feature and explains how to use the mask function.<\/span><\/li>\n<\/ul>\n<h2><a id=\"meshborn\"><\/a>Bone Mesh Feature<\/h2>\n<p>You can use the Bone Mesh Feature in creating animation. It is possible to express the soft movement such as the way the cloth or hair is waving.<\/p>\n<h4>Related page of the Bone Mesh Feature<\/h4>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/meshbone\/howtouse\/\">Using the Bone Mesh Feature (Japanese)<\/a><br \/><span style=\"font-size: small;\">How to create animation using the Bone Mesh Feature.<\/span><\/li>\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/window\/other\/editmesh\/\">Mesh Editor window (Japanese)<\/a><br \/><span style=\"font-size: small;\">Describes creating and editing mesh cells &#8220;Mesh Editor Window&#8221;.<\/span><\/li>\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/ja\/spritestudio7\/guide\/tips\/ver6_making\/\">SpriteStudio Ver.6 Application Example &#8220;Tenohira no B\u014dken (Japanese)<\/a><br \/><span style=\"font-size: small;\">It introduces short films that use the Bone Mesh Feature and explains how to use the mask function.<\/span><\/li>\n<\/ul>\n<h2>When you finish editing the animation&#8230;<\/h2>\n<p><a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio7\/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-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","protected":false},"excerpt":{"rendered":"<p>&#8220;Create Animation&#8221; created a variety of SpriteStudio files to prepare you for creating animations&#8230;<\/p>\n","protected":false},"author":33,"featured_media":0,"parent":150616,"menu_order":29,"comment_status":"closed","ping_status":"closed","template":"page_eng_ss.php","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-150619","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/150619","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=150619"}],"version-history":[{"count":0,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/150619\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/150616"}],"wp:attachment":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/media?parent=150619"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/tags?post=150619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}