{"id":83435,"date":"2019-04-01T18:45:22","date_gmt":"2019-04-01T09:45:22","guid":{"rendered":"https:\/\/www.webtech.co.jp\/help\/?page_id=83435"},"modified":"2019-05-09T18:09:28","modified_gmt":"2019-05-09T09:09:28","slug":"layoutinfo","status":"publish","type":"page","link":"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/main\/layoutinfo\/","title":{"rendered":"Layout Info Window"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2019\/03\/LayoutInfo_01.png\" alt=\"\" width=\"337\" height=\"408\" class=\"alignright size-full wp-image-84311\" \/>The Layout Info Window sets various settings for the layout display area of the Layout Window.<\/p>\n<ul>\n<li><a href=\"#basic\">General<\/a><br \/><span style=\"font-size: small;\">Sets layout preferences.<\/span><\/li>\n<li><a href=\"#temp_image\">Overlay Image, Background Image<\/a><br \/>\n<span style=\"font-size: small;\">Set the auxiliary image.<\/span><\/li>\n<li><a href=\"#Relation\">Related Pages<\/a><\/li>\n<\/ul>\n<h2><a id=\"basic\"><\/a>General<\/h2>\n<h3>Reference Frame<\/h3>\n<p>The Reference Frame is used as a guide for layout within the set size when creating an animation.<br \/>\nThe rendering function uses the frame of reference settings to render.<\/p>\n<table>\n<tbody>\n<tr>\n<th scope=\"row\">Size<\/th>\n<td>Sets the size of the Reference Frame displayed in the Layout Window.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Origin Point<\/th>\n<td>\n<p>Sets &#8220;Origine Point&#8221; which is the origin of the Reference Frame displayed in the Layout Window.<br \/>\nThe position set as the Origin Point becomes the (0, 0) coordinate. Click the 3&#215;3 block to set the Origin Point.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"text-align: center;\">Top Left\u00a0<\/td>\n<td style=\"text-align: center;\">Top<\/td>\n<td style=\"text-align: center;\" scope=\"row\">Top Right\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Left<\/td>\n<td style=\"text-align: center;\">Center<\/td>\n<td style=\"text-align: center;\">Right<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Bottom Left\u00a0<\/td>\n<td style=\"text-align: center;\">Bottom<\/td>\n<td style=\"text-align: center;\">Bottom Right\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>When Grid Display is set in the Layout Window, a green dotted line appears. The Reference Frame is placed so that the intersection of the dotted lines becomes the Origin Point.<br \/>\nFor example, if the Origin Point is set to &#8220;Top Left&#8221;, the intersection of the dotted lines is displayed in the upper left of the Reference Frame.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Parts Sort Mode<\/h4>\n<p>Sets the sort method that determines the order in which Parts are displayed in the Layout Window.<\/p>\n<p>For sorting the display order, select &#8220;Priority&#8221; or &#8220;Z Position&#8221; from the pull-down menu. The default setting is &#8220;Priority&#8221;.<br \/>\nNote that in some playback environments, selecting &#8220;Z Position&#8221; may change the display state and not play the same as in SpriteStudio.<\/p>\n<h4>IK Link<\/h4>\n<p>Lets you specify the extent of influence for the Parts IK (Inverse Kinematics) animation editor.<\/p>\n<p>Sets the extent of influence of the parent part in Parts IK operations. Specify a number between 1 and 16.<br \/>\nParts IK is done by selecting the Parts in the Layout Window and pressing &#8220;drag&#8221; + &#8220;Alt&#8221;.<\/p>\n<h2><a id=\"temp_image\"><\/a>Overlay Image, Background Image<\/h2>\n<p>The items for the Overlay Image and Background Image are items for setting the auxiliary image to be displayed in the Layout Window.<br \/>\nBy setting an image to be displayed at the same time in the playback environment, you can edit the animation while checking how it looks in the playback environment beforehand.<\/p>\n<p>Images set as Overlay or Background images are displayed only in SpriteStudio, and are not displayed when imported into the playback environment or output during rendering.<\/p>\n<p><a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2019\/03\/LayoutInfo_02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2019\/03\/LayoutInfo_02.png\" alt=\"\" width=\"779\" height=\"652\" class=\"alignnone size-full wp-image-84317\" srcset=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2019\/03\/LayoutInfo_02.png 779w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2019\/03\/LayoutInfo_02-768x643.png 768w, https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2019\/03\/LayoutInfo_02-624x522.png 624w\" sizes=\"auto, (max-width: 779px) 100vw, 779px\" \/><\/a><\/p>\n<h3>Settings<\/h3>\n<p>The settings are the same for the Overlay and Background images.<\/p>\n<table>\n<tbody>\n<tr>\n<th scope=\"row\">\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/07\/icon_layoutinfo_01.png\" alt=\"\" width=\"20\" height=\"20\" class=\"alignnone size-full wp-image-78916 aligncenter\" \/><\/p>\n<p style=\"text-align: center;\">Show\/Hide<\/p>\n<\/th>\n<td>Use the eye icon to toggle between visible and invisible states.<\/td>\n<\/tr>\n<tr>\n<th>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/07\/icon_layoutinfo_02.png\" alt=\"\" width=\"30\" height=\"30\" class=\"alignnone size-full wp-image-78917 aligncenter\" \/><\/p>\n<p style=\"text-align: center;\">Image File Settings<\/p>\n<\/th>\n<td>\n<p>The Select image file to reference Window opens.<\/p>\n<p>Select an image file to display as the Overlay \/Background image.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2019\/03\/LayoutInfo_03.png\" alt=\"\" width=\"121\" height=\"36\" class=\"aligncenter size-full wp-image-84393\" \/><\/p>\n<p style=\"text-align: center;\">Origin Position<\/p>\n<\/th>\n<td>\n<p>Sets the display position of the image.<\/p>\n<p>Aligns the Pivot of the image to one of the 9 positions of the Reference Frame. The default is Center.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"text-align: center;\">Top Left\u00a0<\/td>\n<td style=\"text-align: center;\">Top<\/td>\n<td style=\"text-align: center;\" scope=\"row\">Top Right\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Left<\/td>\n<td style=\"text-align: center;\">Center<\/td>\n<td style=\"text-align: center;\">Right<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Bottom Left\u00a0<\/td>\n<td style=\"text-align: center;\">Bottom<\/td>\n<td style=\"text-align: center;\">Bottom Right\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<\/td>\n<\/tr>\n<tr>\n<th>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2019\/03\/LayoutInfo_04.png\" alt=\"\" width=\"90\" height=\"35\" class=\"aligncenter size-full wp-image-84394\" \/><\/p>\n<p style=\"text-align: center;\">Pivot<\/p>\n<\/th>\n<td>\n<p>The Pivot of the image can be set. The default is Center.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"text-align: center;\">Top Left\u00a0<\/td>\n<td style=\"text-align: center;\">Top<\/td>\n<td style=\"text-align: center;\" scope=\"row\">Top Right\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Left<\/td>\n<td style=\"text-align: center;\">Center<\/td>\n<td style=\"text-align: center;\">Right<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Bottom Left\u00a0<\/td>\n<td style=\"text-align: center;\">Bottom<\/td>\n<td style=\"text-align: center;\">Bottom Right\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<th>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2018\/07\/icon_layoutinfo_05.png\" alt=\"\" width=\"26\" height=\"26\" class=\"alignnone size-full wp-image-78915 aligncenter\" \/><\/p>\n<p style=\"text-align: center;\">Clear the settings<\/p>\n<\/th>\n<td>\n<p>Click the trash can icon to clear the setting.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><a id=\"Relation\"><\/a>Related Pages<\/h2>\n<ul class=\"link\">\n<li><a href=\"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/guide\/window6\/main\/layout\/\">Layout Window<\/a><br \/><span style=\"font-size: small;\">Describes the Layout Window.<\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Layout Info Window sets various settings for the layout display area of the Layout Window. GeneralSets lay..<\/p>\n","protected":false},"author":33,"featured_media":0,"parent":83389,"menu_order":52,"comment_status":"closed","ping_status":"closed","template":"page_eng_ss.php","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-83435","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/83435","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=83435"}],"version-history":[{"count":0,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/83435\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/83389"}],"wp:attachment":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/media?parent=83435"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/tags?post=83435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}