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