{"id":4224,"date":"2013-09-18T14:12:06","date_gmt":"2013-09-18T05:12:06","guid":{"rendered":"http:\/\/www.webtech.co.jp\/help\/?page_id=4224"},"modified":"2015-03-10T15:15:08","modified_gmt":"2015-03-10T06:15:08","slug":"layoutwindow","status":"publish","type":"page","link":"https:\/\/www.webtech.co.jp\/help\/en\/spritestudio\/help\/layoutwindow\/","title":{"rendered":"Layout Window"},"content":{"rendered":"<p>The \u201cLayout\u201d window is the window to show the state of the currently-working animation.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" alt=\"Window_Layout\" class=\"size-full wp-image-674 aligncenter\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_Layout_en.png\" style=\"width: 586px; height: 534px;\" title=\"\" \/><\/p>\n<p>This window is largely comprised of two parts.<\/p>\n<ul>\n<li><a href=\"#toolbar\">Toolbar<\/a><\/li>\n<li><a href=\"#image\">Image Display Part<\/a><\/li>\n<\/ul>\n<h2><a id=\"toolbar\" name=\"toolbar\"><\/a>Toolbar<\/h2>\n<p>On the toolbar of the layout window, accommodated buttons are mainly for changing the state of the layout window\u2019s image display.<\/p>\n<p><img decoding=\"async\" alt=\"Window_Layout_Icon\" class=\"size-full wp-image-677 aligncenter\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_Layout_Icon_en.png\" style=\"width: 586px; height: 37px;\" title=\"\" \/><\/p>\n<table>\n<tbody>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon01\" class=\"size-full wp-image-685 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon01.png\" style=\"\" title=\"\" width=\"32\" \/>Zoom In<\/th>\n<td>It enlarges the image and shows. The image can be enlarged up to 1600%.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon02\" class=\"size-full wp-image-686 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon02.png\" style=\"\" title=\"\" width=\"32\" \/>Zoom out<\/th>\n<td>It reduces the image and shows. The image can be reduced down to 25%.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon03\" class=\"size-full wp-image-687 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon03.png\" style=\"\" title=\"\" width=\"32\" \/>Show Grid<\/th>\n<td>It switches Show\/Hide of the grid of the image display part. When the button\u2019s background color is blue, Show. When it is gray, Hide. With every click, this display switches alternately.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon04\" class=\"size-full wp-image-688 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon04.png\" style=\"\" title=\"\" width=\"32\" \/>Snap to Grid<\/th>\n<td>When the Specified Range and the Rectangle are moved, it snaps them to Grid. When the button\u2019s background color is blue, Snap to Grid. When gray, Not Snap to Grid. The state is switched alternately by clicking the button. Also, even when the grid is not shown, it is possible to snap (meaning that it is separate from the grid\u2019s shown state).<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon05\" class=\"size-full wp-image-689 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon05.png\" style=\"\" title=\"\" width=\"32\" \/>Show Outline Frame<\/th>\n<td>It switches Show\/Hide of other parts than selected currently, only in the outline frame. When the button\u2019s background color is blue, Show in Outline Frame. When gray, Display by Pattern Design. The display switches with every click of the button.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon06\" class=\"size-full wp-image-690 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon06.png\" style=\"\" title=\"\" width=\"32\" \/>Show Reference Frame<\/th>\n<td>It switches Show\/Hide of the reference frame set by the layout information. When the button\u2019s background color is blue, Show. When it is gray, Hide. With every click, this display switches alternately.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon07\" class=\"size-full wp-image-691 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon07.png\" style=\"\" title=\"\" width=\"32\" \/>Show Focus Frame<\/th>\n<td>It shows the focus frame (i.e., simple deformation-operating handle) in the currently-selected parts. When the button\u2019s background color is blue, Show. When it is gray, Hide. With every click, this display switches alternately. To be noted, the herein-said \u201csimple deformation operating handle\u201d is meant that \u201cdisplay (show) is simpler\u201d, compared with the \u201cGizmo\u201d.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon08\" class=\"size-full wp-image-692 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon08.png\" style=\"\" title=\"\" width=\"32\" \/>Show Collision Range<\/th>\n<td>It shows the collision detection area that is set with the group of parts. The collision detection area is shown in the translucent color. When the button\u2019s background color is blue, the collision detection frame is shown. When it is gray, Hide. With every click, the display switches alternately. When it is gray, it is not shown.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon09\" class=\"size-full wp-image-693 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon09.png\" style=\"\" title=\"\" width=\"32\" \/>Show Gizmo<\/th>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"288\" height=\"347\" alt=\"Window_LayoutGizmo\" class=\"alignnone size-full wp-image-680\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_LayoutGizmo.png\" style=\"width: 288px; height: 347px; float: right; margin: 10px;\" \/>It shows the Gizmo (Operating handle) which is used to operate parts. When the button\u2019s background color is blue, Gizmo is shown. When it is gray, Hide. With every click, the display switches alternately.<\/p>\n<p>The Gizmo is shown, taking the origin point of the currently-selected parts as its central position. By dragging the arrow mark (triangular part) located at the cruciform spearhead, the translation of Up\/Down and Right\/Left of parts is enabled. By dragging the round mark located at the cruciform spearhead, the Zoom\/Reduce of Up\/Down and Right\/Left of parts is enabled. By dragging the left-lower slant arrow mark (triangles at both edges, the Zoom\/Reduce is possible, maintaining the aspect ratio as is). By dragging the circle located as if winding the cruciform, it is possible to rotate parts.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon10\" class=\"size-full wp-image-681 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon10.png\" style=\"\" title=\"\" width=\"32\" \/>Change Grid Size<\/th>\n<td>\n<p>It changes pixel intervals of the grid. The dialog setting for input of grid\u2019s pixel intervals will open. So, input pixel intervals with the positive number therein.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Window_Layout_GlidSize\" class=\"size-full wp-image-697 aligncenter\" height=\"127\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_Layout_GlidSize_en.png\" style=\"width: 436px; height: 159px;\" title=\"\" width=\"349\" \/><\/p>\n<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon11\" class=\"size-full wp-image-682 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon11.png\" style=\"\" title=\"\" width=\"32\" \/>Change Grid Color<\/th>\n<td>It changes the color of the grid line. With a click of the button, the color picker is show. So, specify the color therein.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon12\" class=\"size-full wp-image-683 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon12.png\" style=\"\" title=\"\" width=\"32\" \/>Change Background Color<\/th>\n<td>It changes the background color of the image display part. With a click of the button, the color picker is show. So, specify the color therein. The background color will change.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_layout_icon13\" class=\"size-full wp-image-684 aligncenter\" height=\"32\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_layout_icon13.png\" style=\"\" title=\"\" width=\"32\" \/>Change number of links for IK impact range<\/th>\n<td>\n<p>In case of operating the pseudo-IK (inverse kinematics), it specifies, with the positive number, parent parts of how many stages to be affected.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Window_Layout_IKLink\" class=\"size-full wp-image-696 aligncenter\" height=\"127\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_Layout_IKLink_en.png\" style=\"width: 436px; height: 159px;\" title=\"\" width=\"349\" \/><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><img decoding=\"async\" alt=\"Window_Layout_click\" class=\"size-full wp-image-698 alignnone\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_Layout_click_en.png\" style=\"width: 357px; height: 197px; float: right; margin: 10px;\" title=\"\" \/>Also, when the whole cannot be shown such as the window\u2019s breadth is too narrow, the two-triangle mark <a href=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_celllist_icon03.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"Window_celllist_icon03\" class=\"noshadow\" height=\"36\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_celllist_icon03.png\" width=\"35\" \/><\/a>is shown at the right side of the toolbar. By clicking this mark, the menu of the hidden buttons will open. By selecting from this menu, functions of the respective buttons can be implemented.<\/p>\n<p>The above figure is the menu of all the hidden buttons. In actual case, only the hidden buttons are shown.<\/p>\n<h2><a id=\"image\" name=\"image\"><\/a>Image Display Part<\/h2>\n<p>In the image display part, animation\u2019s parts (cell) can be selected directly, and the settings of Move\/Rotation\/Zoom\/Reduce, etc. can be done intuitively.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Window_Layout_Body\" class=\"size-full wp-image-675 aligncenter\" height=\"496\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_Layout_Body.png\" style=\"\" title=\"\" width=\"585\" \/><\/p>\n<p>The following are the basic operations of the image display part.<\/p>\n<h3>Basic Operation<\/h3>\n<h4>Select Parts<\/h4>\n<p class=\"indent20\">By clicking the parts shown, it is possible to make the there-existing parts at the selected state.<\/p>\n<h4>Select Plural Parts<\/h4>\n<p class=\"indent20\">By repeating CTRL+Click, the parts existing there can be selected in addition to the selected parts until then.<\/p>\n<h4>Select Plural Parts inside Area<\/h4>\n<p class=\"indent20\">When the range is selected in the image display part, parts existing in the range can all be selected at a time.<\/p>\n<h4>Move Display Range<\/h4>\n<p class=\"indent20\">With Space Key+Drag, the area displayed can be moved.<\/p>\n<h3>Operation of Selected Parts<\/h3>\n<p>With the parts selected by the basic operation, the following operations are possible. The results will be reflected upon the frame position shown on \u201cFrame Control Window\u201d of the selected parts.<\/p>\n<h4>Move, Deformation, etc.<\/h4>\n<p class=\"indent20\">By dragging parts, the Move of parts is enabled, and by gripping and dragging the four corners and the edge of parts (i.e., spots where the mouse cursor changes to the up-and-down and right-and-left arrows), the deformation is enabled. When the frames of Gizmo and Focus are displayed, the Deformation and Move are enabled by using these available functions.<\/p>\n<h4>Simple IK Operation<\/h4>\n<p class=\"indent20\">With ALT+dragging at the parts\u2019 selected state, the Move is possible in conjunction with the parent parts having the inheritance relation at \u201cSimple IK (inverse kinetics)\u201d.<\/p>\n<h4>Parts\u2019 Right Click Menu<\/h4>\n<p class=\"indent20\"><img decoding=\"async\" alt=\"Window_Layout_MenuParts\" class=\"alignnone size-full wp-image-679\" src=\"https:\/\/www.webtech.co.jp\/help\/wp-content\/uploads\/2013\/06\/Window_Layout_MenuParts_en.png\" style=\"width: 197px; height: 135px; float: right; margin: 10px;\" title=\"\" \/>With right click of the selected parts, the exclusive-use menu will open.<\/p>\n<table align=\"right\"     style=\"width: 95%;\">\n<tbody>\n<tr>\n<th scope=\"row\">Cut<\/th>\n<td>It deletes the currently selected parts and its child parts after copying them to the clipboard.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Copy<\/th>\n<td>It copies the currently selected parts and its child parts to the clipboard.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Paste<\/th>\n<td>It adds the \u201cCut\u201d or \u201cCopy\u201d parts to the new layout window.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h4>Show\/Play of Animation Information<\/h4>\n<p class=\"indent20\">By clicking the long buttons located at the four corners of the image display part, it can open and close the small window which shows and plays the information of the currently-working animation.<\/p>\n<table align=\"right\"     style=\"width: 95%;\">\n<tbody>\n<tr>\n<th scope=\"row\">fps<\/th>\n<td>It shows the present FPS during playing animation.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">information<\/th>\n<td>It shows attributes related to coordinates and sizes of the selected parts.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">time<\/th>\n<td>The buttons related to the play of animation are accommodated, same as those located on the toolbar of the lower part of the Frame Control Window.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"clearfix\">&nbsp;<\/div>\n<blockquote>\n<p style=\"clear:both;\"><strong>Note:<\/strong>In order to operate the NULL parts on the layout window, start after showing the Gizmo or Focus frame. When the click on the layout window is implemented, the parts located at the cursor position on the layout window is automatically selected. So, a care must be taken.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>The \u201cLayout\u201d window is the window to show the state of the currently-working animation. This window is largely..<\/p>\n","protected":false},"author":33,"featured_media":0,"parent":4160,"menu_order":360,"comment_status":"closed","ping_status":"closed","template":"page_eng_ss.php","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-4224","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/4224","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=4224"}],"version-history":[{"count":0,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/4224\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/pages\/4160"}],"wp:attachment":[{"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/media?parent=4224"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webtech.co.jp\/help\/wp-json\/wp\/v2\/tags?post=4224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}