{"id":4247,"date":"2013-09-18T14:15:05","date_gmt":"2013-09-18T05:15:05","guid":{"rendered":"http:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/workflow\/to-create-animations\/"},"modified":"2014-06-03T16:49:57","modified_gmt":"2014-06-03T07:49:57","slug":"create_animation","status":"publish","type":"page","link":"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/workflow\/create_animation\/","title":{"rendered":"To create animations"},"content":{"rendered":"<p>The \u201cAnimation\u201d is the frame data for creating a certain \u201csingle movement\u201d by using one or plural \u201cCells\u201d.<\/p>\n<ol>\n<li>First, an animation file is created in order to store data. Select either menu of the following:\n<ul>\n<li class=\"first\">Choose [Project]-[Add New File]-[Animation] from the upper menu<img decoding=\"async\" alt=\"\" class=\"size-full wp-image-558 aligncenter\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/createNewAnimation_en.png\" style=\"width: 498px; height: 198px;\" title=\"\" \/><\/li>\n<li class=\"first\">Or, right-click the cell map of the \u201cProject\u201d window and choose [New]<img decoding=\"async\" alt=\"\" class=\"size-full wp-image-553 aligncenter\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/createNewAnimation02_en.png\" style=\"width: 223px; height: 163px;\" title=\"\" \/><\/li>\n<\/ul>\n<\/li>\n<li>The window for selecting the folder and the file will open. Specify the animation filename. The filename specified herein will become the name to be displayed in the \u201cAnimation\u201d of the \u201cProject\u201d window.<img decoding=\"async\" alt=\"\" class=\"size-full wp-image-557 aligncenter\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/panime_01_en.png\" style=\"width: 201px; height: 231px;\" title=\"\" \/><\/li>\n<li>After the animation was created, the \u201cFrame Control\u201d operation will be enabled. At the \u201cTotal Number of Frames\u201d located at the lower part of the \u201cFrame Control\u201d window, the whole length of the animation is set based on the \u201cNumber of Renewal Frames per second (FPS)\u201d of the \u201cunit time\u201d.<img decoding=\"async\" alt=\"\" class=\"size-full wp-image-555 aligncenter\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/frameFps_01_en.png\" style=\"width: 463px; height: 71px;\" title=\"\" \/><\/li>\n<li>In the \u201cLayout Info\u201d window, the whole size of the animation (the size of animation-exclusive screen frame) to be created is set.<\/li>\n<li>Then, select the cell from the \u201cCell List\u201d window, which is used for animation, and drag and drop it in the \u201cLayout\u201d window.<img decoding=\"async\" alt=\"\" class=\"size-full wp-image-556 aligncenter\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/layout_01_en.png\" style=\"width: 541px; height: 482px;\" title=\"\" \/>\n<p>If dropped normally, the cell is displayed at the dropped location and the dropped cell name is displayed as \u201cParts\u201d in the \u201cFrame Control\u201d window.<\/p>\n<p>When the cell is dragged and dropped and made to be parts, care must be taken that the part\u2019s initial information (the first Key-Frame) is placed at the frame position selected on the \u201cFrame Control\u201d window.<\/p>\n<\/li>\n<li>Select the parts to be set in the \u201cLayout\u201d window or in the \u201cFrame Control\u201d window.<\/li>\n<li>The inheritance relation with other parts is set.\n<p>The inheritance relation (also said \u201cparent-child relation\u201d) is to string other parts when the parts is required to jointly work with other parts\u2019 movements On the \u201cFrame Control\u201d window, a inheritance relation can be created by dragging and dropping the parts onto the parts of origin of inheritance.<\/p>\n<p>With the parts with the relation of inheritance, the origin of inheritance is called \u201cParent Parts\u201d, and the parts placed under the inheritance is called \u201cChild Parts\u201d. In principle, the setting value of the child parts is a relative value from the parent parts.<\/p>\n<p>To remove the relation of inheritance, by dragging the child parts in the \u201cFrame Control\u201d window, drop it just under the child parts (the blue and dim underline appears), then the relation is canceled.<\/p>\n<\/li>\n<li>After clicking the frame position needed on the \u201cFrame Control Window\u201d, the Key-Frame can be created by doing the \u201cAdd Key\u201d from the right click menu.<img decoding=\"async\" alt=\"\" class=\"size-full wp-image-554 aligncenter\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/frameC_01_en.png\" style=\"width: 467px; height: 216px;\" title=\"\" \/>\n<p>At this Key-Frame position, a variety of parts\u2019 information can be set. The Key-Frame can also be created from other various functions. For example, it can be created also by the method of clicking within the Interpolation curve during specifying \u201cInterpolation\u201d of the \u201cAttribute\u201d window.<\/p>\n<\/li>\n<li>The position and size of the parts are set either by visually set the position, the scaling rate and the twirl angle, or their values are set by values, etc. which are displayed in the \u201cGeneral\u201d of the \u201cAttribute\u201d window.\n<p>In case of visually adjusting in the \u201cLayout Window\u201d, the Move, Scale and Rotate can be easily implemented by using \u201cGizmo\u201d. In case of making adjustments of values in the \u201cGeneral\u201d in the \u201cAttribute\u201d window, proceed with the following method.<\/p>\n<ul>\n<li>Click the position of the value of the setting attribute. Then, the value can be input directly.<\/li>\n<li>By keeping the click action (the button is kept pressed) to the \u201cEach Part of Attributes\u201d of the setting attribute and by moving the mouse vertically, the value can be changed continuously, I.e., upwards =&gt; + and downwards =&gt; -.<\/li>\n<li>As for the attribute, the value of which unnecessary to be fixed at its Key-Frame, it is recommended that the \u201cO\u201d mark located at the front of each attribute of the \u201cGeneral\u201d in the \u201cAttribute\u201d window. (The final data is made small.)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>By repeating these procedures, animation can be created. For a single animation, the procedural order of 3. to 9. can be changed with no problem. Just remember the above as one of the operational example.<\/p>\n<div class=\"admonition note\">\n<blockquote>\n<p class=\"first admonition-title\"><strong>Note\uff1a<\/strong><\/p>\n<ul class=\"last\">\n<li>\n<p class=\"first\">At the initial state of starting \u201cOPTPiX SpriteStudio\u201d, many attributes of the \u201cAttribute\u201d window \u201cGeneral\u201d are displayed. If the object attribute is difficult to find during editing, select [File]-[Project Settings]-[Compatibility] of the upper menu bar and choose the object platform or \u201cCustom\u201d. Then, only the necessary attributes can be displayed.<\/p>\n<p>In that instance, it is possible to select \u201cthe attribute \u2018making the setting state\u2019 upon placing the key-Frame at first\u201d, but if the attribute holding check therein has been made to no display at the [Compatibility], the value cannot be changed at any time. So, care must be taken as for the correlation of the set values.<\/p>\n<p>To be more, the setting for the editing project must be done from the [File]-[Project Setting]. There is a similar kind of setting with the [File]-[Preference], but this is for the object of the \u201cNewly Created Project\u201d. Therefore, it is not reflected upon the editing project.<\/p>\n<\/li>\n<li>\n<p class=\"first\">The setting and operational methods of the \u201cFrame Control\u201d window and the \u201cLayout\u201d window cover a lot of ground, so please the related pages of the help explanation.<\/p>\n<\/li>\n<li>\n<p class=\"first\">In principle, in case of not setting the priority of attributes, parts located downwards at the frame control shall be displayed nearer side. When the parent-child setting, etc. is done, or when there is the definite display order per every parts, be always sure to set the priority. In particular, when the output is made to other game engines such as Unity, there is no guarantee that the row of parts are just as it is with \u201cOPTPiX SpriteStudio\u201d. So, please remember that the priority always must be set.<\/p>\n<\/li>\n<\/ul>\n<\/blockquote>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The \u201cAnimation\u201d is the frame data for creating a certain \u201csingle movement\u201d by using one or plural \u201cCells\u201d. Fir..<\/p>\n","protected":false},"author":33,"featured_media":0,"parent":4162,"menu_order":357,"comment_status":"closed","ping_status":"closed","template":"page_eng_ss.php","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-4247","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/4247","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=4247"}],"version-history":[{"count":0,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/4247\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/4162"}],"wp:attachment":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/media?parent=4247"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/tags?post=4247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}