Skip to content

michikora/SymbolArtEditorOnline

 
 

Repository files navigation

Symbol Art Editor Online

Version 1.5.0

Inspired by the in-game editor from Phantasy Star Online 2 (SEGA), Symbol Art Editor Online is a browser vector-based image editor used to produce digital art made of symbols. The application supports .sar (Symbol Art files) and .saml (Art project files).

GIFs explaining how to use the editor:

Feature Guide Part 1 Feature Guide Part 2 Feature Guide Part 3 Feature Guide Part 4

New on v1.5.0: Use Color Filters to Change the Color of Various Symbols at Once !

New on v1.4.0: Use Keyboard Key T to Toggle Between Overlay and Underlay Image !

New on v1.3.5: Use Arrow Keys to Navigate Through Layers !

New on v1.3.3: Double Click to Edit Symbols !

New on v1.3.0: Support for .SAR File Format is Here !


  • Save Your Work Within Symbol Art Editor Online Using the Download Button in the Toolbar. This Will Display the Save Options.
  • Select the Option Saying "SAR" to Save Your Work in .sar Format. Save it Into the Folder path/to/directory/SEGA/PHANTASYSTARONLINE2/symbolarts/user/import/ (path/to/directory/ is usually user/Documents/)
  • Login Into the Game, Go to Symbol Arts Menu, Select the Import Tab, and Click the Item Saying "import." The Game Will Load the Symbol Arts in the import/ Folder and You Can Then Save Your Artwork Into Your Account.
  • Touch Screen Support ! ! !
  • Saving Your Creation to .saml Format by Clicking the Download Button on the Toolbar at the Bottom of the Editor
  • Loading .sar Symbol Art Files Saved in PSO2 or the lacking Symbol Art Editor available in www.pso-world.com
  • Loading .saml Project Files Saved in this Application or from the lacking Symbol Art Editor available in www.pso-world.com
  • note: I have not managed to understand how .sar files are formatted (binary file? encrypted?), so no .sar support until then unfortunately
  • Undo / Redo Changes Made (Add, Rename, Move, or Remove Layer/Group; Any Sort of Symbol Reshaping; Changes in Symbol Color)
  • Layer Manager to Organize and Facilitate Your Workflow
  • Drag and Drop Layer/Group to Change Layer Priority
  • (below features can be accessed via context menu opened by right-click, tap and hold, or swipe right)
  • Add Layer (New Symbol)
  • Add Group of Symbols
  • Pick Selected Layer/Group by Clicking (Tapping)
  • Delete Layer/Group
  • Rename Layer/Group
  • Copy / Paste Layers and Groups of Symbols
  • Symbol Edit Box to Manipulate the Symbol
  • Drag to Move Symbol Around
  • Stretch Symbol (Diagonally or by Side) using Respective Draggable Buttons on Screen
  • Resize Symbol using Respective Draggable Button on Screen
  • Rotate Symbol using Respective Draggable Button on Screen
  • Layer Controller on Top Right Corner of Screen
  • Pick from a Huge Selection of Symbols
  • Flip Symbol Horizontally and/or Vertically
  • Perform Fine Changes in the Position of the Symbol Selected
  • Apply Transparency to Symbols
  • Recolor Symbols with a Dedicated Color Picker
  • Colors Used are Saved Inside the Picker for Convenience
  • Symbol Art Sound Effect Manager on Center Bottom of Screen
  • Show/Hide List of Available Sounds and Pick the One You Desire
  • Play Button to Test the Sound
  • Hold Space Bar to View Which Symbol is Currently Selected (Desktop only)
  • Upload an Image to Serve as Overlay to Guide You in Making Art
  • Save Creation as Image File (PNG).
  • PixiJS: For the amazing WebGL renderer that tremendously reduced the amount of work needed to make this application.
  • jQuery: For allowing easy and quick DOM manipulation.
  • jQuery contextMenu Plugin: For providing a browser version of the right click context menu of native apps.
  • Spectrum Color Picker: For providing a great color picking interface.
  • jQuery Sidebar Plugin: For providing a great sidebar for storing a list of symbols and sounds.
  • jQuery Panzoom Plugin: For enabling cross-platform pan and zoom in the application.
  • Toolbar.js: For providing a great addition to the toolbar designed for the application.
  • Intro.js: For providing a beautiful user walkthrough interface.
  • FileSaver.js: For enabling the needed saveAs feature.
  • DatGUI: For becoming the skeleton of the layer controller.
  • perfect-scrollbar: For providing a beautiful scrollbar to override the default
  • Font Awesome: For providing the great variety of icons used in the application.
  • canvas-toBlob.js: For providing cross-browser canvas.toBlob() implementation used for saving Symbol Art as image file.
  • Blob.js: For providing cross-browser Blob implementation used for saving Symbol Art as image file.
  • Symbol Art Editor is a proprietary editor developed and owned by SEGA. I do not own the idea of a Symbol Art Editor. This is purely a fan-made application inspired by SEGA's editor developed to let other fans and any curious artist have fun crafting symbol artwork outside of the game Phantasy Star Online 2 in a dedicated user-friendly editor engineered to be quick to use and that minimizes effort and repetition required to create quality symbol art. The only profit I expect from this application is people's happiness.

Have Fun~

And Happy Art Crafting !

About

Vector-based Image editor for digital art made of symbols. Play now:

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 78.4%
  • CSS 16.2%
  • HTML 5.3%
  • Other 0.1%