Skip to content

Latest commit

 

History

History
85 lines (70 loc) · 5.71 KB

README.md

File metadata and controls

85 lines (70 loc) · 5.71 KB
Raw

Symbol Art Editor Online

Version 1.5.0

forked from https://github.com/malulleybovo/SymbolArtEditorOnline, who has since overhauled the UI

If you don't know how to use this old version, I do not provide support.

Play with it Here

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).

[Importing Symbol Art Into Phantasy Star Online 2]:

  • 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.

[Features]:

  • 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).

[Acknowledgement]:

  • 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.

[Disclaimer]

  • 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 !