# Stickman Studio Stickman studio will allow a user to create one to more stickmen in a scene and script them to do various actions. The user will direct the stickmen through actions like walk, run, speak (textbox), and various other animations. To accomplish these tasks, the user must create stickmen. ## Properties of a stickman 1. A stickman will have a head, torso, left upper leg, left lower leg, right upper leg, right lower leg, left upper arm, and right upper arm. 2. Each figure on the stickman will be it's own vector shape (probably a Line2D) with various widths 3. A stickman can be rigged (using Skeleton2D) so that real time animation can be used. ## Stickman editor (Phase 1) The user should be able to use Godot Controls to create / edit a stickman. The main editor window should be broken up into 11 smaller windows: ``` |---------------|---------------|---------------| | | | | | Head | Torso | | |---------------|---------------| | | | | | | Left Upper Arm|Right Upper Arm| | |---------------|---------------| | | | | Whole Stickman| | Left Lower Arm|Right Lower Arm| | |---------------|---------------| | | | | | | Left Upper Leg|Right Upper Leg| | |---------------|---------------| | | | | | | Left Lower Leg|Right Lower Leg| | |---------------|---------------|---------------| ``` The left and center columns will allow the user to create a vector shape to use as that specific body part. The body part that gets created will also show up in the 'Whole Stickman' window. In the 'Whole Stickman' window the user can preview what the stickman will look like and also be able to drag parts around to orient them into position. ### Left 2 columns The left 2 column windows will allow the user to create vector shapes by right clicking and selecting a 'starter shape' (line, rectangle, circle) ### Menu bar There will be a menu bar at the top of the screen that will allow the user to save, load, and clear stickmen. #### Save When the user saves a stickman, a window should appear allowing the user to save the data from the stickman into a file. It should be able to create a new file or overwrite another file. I would like the default extention to be .stk The file format that gets saved should be JSON. It will include the vector shapes (which ones they are), and their position in the 'whole stickman' picture. That should be enough for now, but leave the format expandable for adding rigging, colors, rotation, and scale #### Load When a user clicks load, a window should appear allowing the user to open a .stk file. If the file loads correctly, the parts should show in the windows as well as the 'Whole Stickman' window. If the file fails to load, inform the user. #### Clear If the user clicks clear, warn the user that the current stickman will be cleared. If the user proceeds, clear the windows. ## Stickman editor (Phase 2) ### Custom shapes In each of the windows in the left 2 columns, the user should be able to click on the object in a single window. Once clicked the following should happen 1. The shape will be outlined with a white color. 2. Right clicking on any point in the path of the outline will show a context menu. For now the context menu will have one entry called 'create point' 3. If the user clicks 'create point' a small hollow rectangle will appear in the outline where the user clicked - this is not a point(vertex) 4. The user will be able to left click and drag a node which will cause the shape to conform to the path created with the moved vertex. A rectangle for example will have by default 4 verticies, but if a user creates a new vertex, the rectangle becomes a pentagon. 5. The user will be able to select and drag each node to modify the shape created. #### Shape refactor Since shapes will be defined by verticies, we have to rethink line2d and circles. A 2D line could just be 2 verticies by default and the user can add new verticies, but the shape stays 'open'. Shapes like rectangles stay 'closed' Circles probably should be converted to a polygon with multiple verticies. For now let's make the default 12 verticies that are equal distant from each other. ### Window Zoom Each window in the editor should be able to be zoomed in/out by the user. Use the following rules: 1. If the user scrolls the mouse wheel in/up, zoom in by 10% 2. If the user scrolls the mouse wheel out/down, zoom out by 10% 3. Verticies hints should remain visible whether the window is zooomed in or out. 4. For now make the maximum zoom in to 300% and zoom out to 30% 5. For the 'whole stickman' window, it has the same zoom contraints, but it won't show verticies for now, so that doesn't need modified. ### Saving New items need to be added to the stickman save files 1. The definition of each shape (verticies/etc) 2. Open vs closed shape? ## Stickman editor (Phase 3) ### Grid system The stickman editor windows should have a grid system displayed in that background that can be used for vertex placement in shapes. The grid should be noticable, but not obtrusive. The grid can have user defined width, height (x,y) intervals defined in a new menu drop down called 'Edit' (placed next to 'File') Edit will have 2 options for now 'Configure Grid' and 'Snap to Grid' 1. Configure Grid - selecting this will open a dialog allowing the user to set the grid width and height equally (one inputbox) in pixels. Fill the input with the current value. 2. Snap to Grid - When the user moves verticies around the window, they will snap to the nearest grid intersection only -> (with a grid of 5 pixels, if a vertext is at (0,0) and the user moves it up slightly it will go to (0,5)). This will make it easier for the user to align the ends of shapes. 3. In the 'whole stickman' window, snap to grid will cause the dragging of object to move in intervals of the grid size (use the mouse pointer position as reference) The default grid width and height should be 5 pixels. By default snap is off. ### Panning All windows will allow panning - When the user hold the middle mouse button down, the 'camera' for each window will be able to pan in the inverse direction. (middle button hold - drag up results in the camera movind down) This will allow the user to be able to center the objects in the window after zooming, etc. There should be a new menu called 'View' (placed next to 'Edit' from above). This will have an item called 'Reset Views'. When the user clicks it, the cameras in each view will reset to their original positions. ### Global setting save Since the grid system is now configurable, there should be a settings file created and updated when the user updates options. Call the file settings.json. Right now it will just store the grid size and snap to grid status. ### Color changing The user should be able to right click on a shape and display the context menu. There should be a new entry (with seperator called 'Color') When the user clicks color a dialog color picker will display allowing the user to select a new color for the shape. When the user clicks a color, the shape should change color (as a preview) When the user clicks OK, the shape will become that color. When the user clicks Cancel, the shape's color will be restored to the previous color. Godot should have a ColorPicker control already. ### Save Color for each shape should be added to the save file for the stickmen. ### Shape delete When a user right clicks in a window on the left 2 columns, there should be a new menu item in the context menu called 'Delete' (there should be a seperator between this item and the previous items) This item should only show up when the user have the mouse over a shape or a shape is 'selected' Clicking on 'Delete' removes the shape. ### Vertex delete If the user right clicks on a vertex, there should be a dropdown context menu with the entry 'Remove Point'. If the user clicks 'Remove Point', that vertex will be deleted from the shape. If there are only 2 remaining verticies, the shape becomes a line. If there is only 1 vertex, remove the shape altogether. ## Stickman editor (Phase 4) ### Object manipulation #### Selection In the 'whole stickman' window, and object should be selectable when it is clicked. When the user clicks an object, a white bounding box will display on the object, this is so the user knows that object is selected #### Translation If the user holds the click on an object and drags the mouse, the object will move - this behavior should already be implemented #### Rotation When an object is selected and the user moves the cursor just below the selected object, a filled circle should appear centered under the selection. The user should be able to click and drag this circle and cause the object to rotate in the direction of the drag. The 'rotation' selection box should resemble: ``` |-------------| | | | Object | |-------------- o <- rotation circle ``` Should grid snapping effect object rotation? When the user holds the ctrl(control) key down while rotating, the object will rotate in 15 degree increments in relation to the rotation when the object rotation circle was first clicked (this is standard behavior in many image manipulation programs.) An object's rotation should be absolute - meaning that 0 degrees is the original position the object had when it was created - no matter how many times it is rotated The object's rotation should be saved in the .stk file #### Scale When an object is selected and the user moves the cursor to the corner of the bounding box, a cross at the corner should appear on the selection. This will let the user know that if the cross is clicked and dragged, the object's size will scale The 'scale' selection box should resemble: ``` x-------------x | | | Object | x-------------x <- scale marking ``` The object can scale freely, but must follow the rules for grid snapping if enabled. If ctrl(control) is held while scaling, the original aspect ratio of the object is kept (scaled on x and y equally.) Otherwise, the scale moves more in the direction of the drag. (also similar to other image manipulation programs.) An object's scale is relative to it's created scale. The scale should be saved in the .stk save file ### Multiple shapes Currently, the first two column windows allow one shape per window. The user should now be able to create multiple shapes in a window by right clicking and selecting a new shape. Each shape will follow the same rules as the previous phases Each shape will be definined in the .stk save file #### Z ordering Each shape in a window will maintain a z-order. When the user selects a shape and right click's two new items will show in the context menu (with seperator first) The items are 'Send Back' and 'Bring Forward' Clicking 'Send Back' will move the shape further away in the ordering (moving behind other shapes) Clicking 'Bring Forward' will do the opposite Z-order should be maintained in the .stk save file #### One object Even though multiple shapes can be created in each window of the first 2 columns, the 'whole stickman' view will still treat the shapes in each window as ONE object. That means the bounding box for each created set of shapes must bound all the shapes together. ## Stickman editor (Phase 5) ### Graphical bugs 1. When dragging an object on the 'whole stickman' window, the object can be moved outside the window. This ends up cover all the other windows, menu bar, etc. The object should be clipped by the bounds of the window. 2. The windows in the left 2 columns can have verticies being dragged outside the window. This ends up going over the padding borders and behind the next window. The shape should be clipped by the borders of the window. 3. Panning the windows causes both objects and shapes to go outside the boarder of the window. The objects should be clipped by the border of the window. ### Shape translation In the left two column windows, selected shape should now be able to be dragged around the window. Since multiple shapes can be added, the user needs to be able to drag a shape to place it where it needs to go. ### Grid size default modification The new default grid size should be 15 pixels. ### Snap to grid menu item bug When the user selects 'snap to grid' from the Edit drop down, the checkbox never gets checked. The functionality works, but the user has no way to tell from the menu item whether snapping is enabled or disabled. ### Shape copy and paste For the left 2 columns, when a shape is selected and the right mouse button is clicked there should be 2 potential items in the menu (with a seperator before) 1. 'Copy' - this will copy the shape, color, etc onto a 'clipboard' 2. 'Paste' - This will add the shape that is in the 'clipboard' to the current window where the context menu was called. 'Paste' should only be visible if there is a shape in the clipboard. A shaped that is copied from any of the left 2 column windows can be pasted in any of the other windows in the left 2 columns or it's own window. Once a shape is pasted, it is NOT cleared out of the clipboard. Only a new copy will overwrite the clipboard. ### Object z-ordering In the 'whole stickman' window when an object is selected and the right mouse button is clicked, there should be a context menu that appears. The context menu will contain an item for 'Send Back' and 'Bring Forward'. This should function similar to z-ordering from Phase 4. Object selection in the 'whole stickman' window will take z-order into account. If a larger object with a large bounding box is obstructing a smaller object, the smaller object and still be selected if it has a lower z order (closer to the camera) ### Object mirroring In the 'whole stickman' window when an object is selected and the right mouse button is clicked, there should be a context menu that appears. The context menu will contain an item for 'Mirror X' and 'Mirror Y'. (with a seperator) If the user clicks on 'Mirror X', the object will mirror on the X-axis along it's center bounding box. If the user clicks on 'Mirror Y', the object will mirror on the Y-axis along it's center bounding box. This should be similar to how many image manipulation programs work. ### Shape mirroring In the 2 left column windows when a shape is selected and the right mouse button is clicked, there should be a context menu that appears. The context menu will contain an item for 'Mirror X' and 'Mirror Y'. (with a seperator) If the user clicks on 'Mirror X', the shape will mirror on the X-axis along it's center bounding box. If the user clicks on 'Mirror Y', the shape will mirror on the Y-axis along it's center bounding box. This should be similar to how many image manipulation programs work. ### Mirroring question to the architect Should mirroring be a flag, or should be object / shape verticies be recomputed when mirrored? ### Save The .stk file should account for the new attributes introduced in this phase. - Object's z-order - Object's mirror status? - Shape's mirror status? ## Stickman editor (Phase 6) ### Touchpad controls Currently the mouse handles most of the controls. We need to adapt the controls to a touchpad as well. We should make the following adaptions: - Panning in each window is handled by holding down the middle mouse button and moving the mouse. This should be done on a touchpad by using a 2 finger drag. - Zoom in handled by the scroll wheel on the mouse. It should also be handled by pinch zooming on the touchpad. ### Color picker recent colors The color picker currently is not storing recent colors. It should keep track of at least 8 colors that were used previously in the project so that the user can reuse colors. ### Bottom of screen status bar Just like the menu bar at the top of the screen, the bottom of the screen should have a status bar that will hold information about the project, current operation, etc. It should be easily readable ### Pixel (x, y) display on the status bar In the status bar described above, we should display the current coordinates of the cursor in the current window in pixels. The coordinates should be based off of which window the cursor is currently over. Make sure to take into account panning and zooming, so the windows should probably have a set coordinate limit. Maybe (0, 0) to (large x, large y) This coordinate display should be on the left side of the status bar. ### Snap status In the status bar mentioned above, there should a display that shows if snapping is on or off. Label it as "SNAP: OFF" or "SNAP: ON". That display should be on the right side of the status bar. ## Rules 1. Try to use standard Godot controls when applicable 2. We are using Godot 4.4 3. Any scripting should be in GDScript