Skip to content

Feature Set & Implementation

Jump to bottom
malulleybovo edited this page Apr 11, 2022 · 5 revisions

MOTIVATION

Symbol Art Editor emerged from the repetitiveness and lack of user-friendly mechanics in the original PSO2 editor, with the purpose of simplifying the creation process and make it more enjoyable.

Version 2.0.0 is an overhaul of the legacy version 1. In its development lifecycle, product management practices were employed to define a clear value proposition and feature set based on the legacy version coupled with user feedback. Having defined those, they led to a complete redesign of the user interface focused on cleanliness and streamlined usage, run on a stable modular event-driven architecture. The end result is a product of thorough planning, reviewing, implementation, and testing. The effort was distributed over a couple of months using my spare time every now and then to sharpen up my skills in product management, web development, and computer graphics. The overhaul was completed in Oct 2021 after testing and now enables potential artists to create amazing images using the new version of the Symbol Art Editor.

CORE APPLICATION

STRUCTURE

Viewport

  • Fullscreen ThreeJS Canvas (background)
  • Clear Sidebar
    • Vertical action icon list
  • Any other UI needed

Canvas Structure (3D + Orthographic camera)

  • 3D Scene
    • Background helper image container
      • green screen
      • helper image
      • Control buttons if selected
    • main group for global rotation
      • SA container
        • Symbols, and/or
          • Control buttons if selected
        • Containers
          • Symbols and/or containers
          • Control buttons if selected
    • Symbol Art frame to delimit viewing

UI

  • Use canvas containing frame for Symbol Art
  • Drop-down menu with action icons (project settings, helper image mode, audio settings, help)
  • Action bar with mode-specific actions
  • Button to change tap interaction mode
  • History state buttons (undo, redo)

FEATURE SET

  • Start new Symbol Art
  • Load existing Symbol Art (SAR/SAML)
  • Import another Symbol Art as a component
  • Pan main view to move entire editor
  • Zoom in/out of 3D scene
  • Change application mode
  • Toggle between tap interaction modes (tap&hold or tap)
  • Undo and redo
  • Change audio settings
  • Toggle between Symbol Art and alliance flag
  • User help

RULES

  • Any symbol has a maximum and a minimum height and width between any of its adjacent vertices (191 units)
  • Any edge of any symbol has discrete locations it can be placed at
  • Symbol Art and alliance flag have bound size of 254 units by 254 units
  • Symbol Art viewing frame has a size of 193 units by 128 units
  • Alliance flag viewing frame has a size of 64 units by 64 units
  • Application scales Symbol Art dimensions by a factor of 2 to simplify origin calculations
  • Any symbol must show all of its content within the Symbol Art bounds
  • Any container must show all of its content within the Symbol Art bounds
  • The visual representation of any container must have the minimum size to fit the symbols and sub-containers within it
  • Symbol Art bounds must not be panned away by too much from the viewport
  • Helper image must not be panned away by too much from the viewport
  • Opacity must have an index in range [0-7] and corresponding transparency percentage to [0.0392156863, 0.105882353, 0.196078431, 0.309803922, 0.447058824, 0.607843137, 0.792156863, 1]
  • The coordinate system has Y-axis pointing up and X-axis pointing to the right, with 1 unit corresponding to 1 DOM pixel scaled by a zoom factor
  • Vertex coordinates are always multiples of 2 (application scaling) such that the center of every symbol lies in a discrete point in the coordinate system
  • Container nesting must not exceed 5
  • Container must contain at least 1 symbol/container (excluding the root container)
  • Symbol Art must contain at most 100 containers (excluding the root container)
  • Symbol Art must contain at most 225 symbols
  • Alliance flag must contain at most 25 containers (excluding the root container)
  • Alliance flag must contain at most 25 symbols

MODE - SIDE VIEW MODE (LAYER EDITOR)

PURPOSE

  • Modify order of symbols and containers in the stack

UI

  • Display stack of symbols from side perspective, separating symbols to easily see which is on top of which
  • Display rectangle for containers, covering child symbols and sub-containers in a meaningful way
  • Display respective name under each container
  • Display hide/show button under each container
  • Display copy button under each container
  • Highlight selection
  • Display mini front view perspective
  • Action button to add new symbol into the stack
  • Action button to create container
  • Action button to delete selection
  • Layer picker listing name and symbol to rename, delete, search, and navigate through layers

FEATURE SET

  • Drag drop symbols and containers to another part of the stack
  • Drag drop to select contiguous list of layers in the stack (similar to windows rectangle selection)
  • Create new container from a contiguous list of layers in the stack (symbols and containers)
  • Delete container and its content
  • Drag drop to add symbol
  • Delete symbol
  • Tap to select symbol or container
  • Hide/show symbols and containers
  • Highlight selected symbol/container
  • Rename container
  • Rename layer via layer picker
  • Delete layer via layer picker
  • Search layer by name via layer picker
  • Navigate through layers via layer picker
  • Resize layer picker
  • Clone symbols and containers
  • Mini symbol art preview
  • Symbol and container usage count

MODE - FRONT VIEW MODE (SYMBOL EDITOR)

PURPOSE

  • Modify a single symbol or container while viewing the final image

UI

  • Display stack of symbols from front perspective, so that the final image is shown
  • Display helper image on background
  • Action button for selecting color and opacity
  • Action button for selecting type of symbol, flipping horizontally and vertically, and rotate by 90 degrees
  • Action button for focusing the view on the selection
  • Button on all sides of selection to stretch its sides
  • Button on all corners of selection to stretch its corner
  • Button above the selection to rotate it
  • Button in the center of selection to resize it
  • Access to layer picker from layer mode

FEATURE SET

  • Drag drop symbols and containers to another position of the image
  • Resize symbols and containers horizontally, vertically, and both
  • Stretch corners of symbols
  • Rotate symbols and containers
  • Recolor symbols and containers
  • Change type of symbols
  • Compare Symbol Art to the helper image
  • Change opacity of symbols and containers
  • Select symbol by proximity
  • Clone selected layer
  • Create a new layer when nothing is selected

MODE - HELPER IMAGE MODE

PURPOSE

  • Set target image to guide in the creation of the Symbol Art

UI

  • Resize button in the center of the helper image
  • Rotate button on top of the helper image
  • Action button for adding helper image
  • Action button for changing opacity of helper image, using green screen, and peeking at helper image when behind other things
  • Action button for removing helper image

FEATURE SET

  • Set new helper image
  • Drag drop helper image to move
  • Resize helper image
  • Rotate helper image
  • Change opacity of helper image
  • Toggle green screen
  • Peek at helper image



v2.2.0

© 2021 malulleybovo

Clone this wiki locally