lospec / pixel-editor

An online canvas based Pixel Art creation tool for Lospec.com

-DEPRECATED- Lospec Pixel Editor

⚠ The Lospec Pixel Editor is no longer in development and is no longer accepting contributions.
It remains available at https://lospec.com/pixel-editor in it's current state, but may contain bugs.

This is a browser based software for creating pixel art

Before contributing

Before starting to work, please open an issue for discussion so that we can organize the work without creating too many conflicts. If your contribution is going to fix a bug, please make a fork and use the bug-fixes branch. If you want to work on a new feature, please use the new-feature branch instead.

What to Contribute

Any changes that fix bugs or add features are welcome. Check out the issues if you don't know where to start: if you're new to the editor, we suggest you check out the Wiki first.

The next version is mostly focused on adding missing essential features and porting to mobile.

Suggestions / Planned features:

• Documentation

• Possibility to hide and resize menus (layers, palette)

• Tiled mode

• Load palette from LPE file

• Symmetry options (currently being worked on)

• Make a palette grid instead of having a huge stack on the right when colours are too many

• Possibly add collaborate function

• Mobile

  • Touch equivalent for mouse clicks
  • Hide or scale ui
  • Maybe rearrange UI on portrait
  • Fix popups

• Polish:

  • CTRL+A to select everything / selection -> all, same for deselection
  • Warning windows for wrong inputs
  • Palette option remove unused colors
  • Move selection with arrows
  • Update borders by dragging the canvas' edges with the mouse when resizing canvas
  • Move the canvases so they're centered after resizing the canvas (maybe a .center() method in layer class)
  • Scale / rotate selection

How to Contribute

Requirements

No requirements if you want to use Github's Codespaces. If you prefer to setup your environment on desktop, you'll need to have node.js and git installed.

You also need npm in version 7 (because of 2nd version of lockfile which was introduced there) which comes with Node.js 15 or newer. To simplify installation of proper versions you can make use of nvm and run nvm install – it will activate proper Node.js version in your current command prompt session.

Contribution Workflow

Github Codespaces

1. Click Fork above. It will automatically create a copy of this repository and add it to your account.
2. At the top of this page, select the branch you want to work on.
3. Click on "Code". Select the "Codespaces" submenu and click on "Create codespace on branch name".
4. Run npm install. Then run npm run hot: it will open a popup containing the editor, so make sure to disable your adblock if you're using one.

Desktop environment

1. Click Fork above. It will automatically create a copy of this repository and add it to your account.
2. Clone the repository to your computer.
3. Open the folder in command prompt and run npm install
4. Make any changes you would like to suggest.
5. In command prompt run npm run hot which will compile app to the /build folder, serve under http://localhost:3000, then open in your browser. Moreover, it restarts server every time you save your changes in a codebase. You can go even further by running npm run hot:reload, which will also trigger webpage reloads.
6. Add, Commit and Push your changes to your fork.
7. On the github page for your fork, click New Pull Request above the file list.
8. Change the head repository dropdown to your fork.
9. Add a title and description explaining your changes.
10. Click create pull request.

If you have any trouble, see this page: https://help.github.com/en/articles/creating-a-pull-request-from-a-fork

Feature Toggles

Some feature might be hidden by default. Functions to enable/disable them are available inside global featureToggles and operate on a window.localStorage.

For example use featureToggles.enableEllipseTool() to make ellipse tool button visible. Then featureToggles.disableEllipseTool() to hide it.

pixel-editor's Issues

canvas dragging bounds need to detect if layers panel is open

The limits for where the canvas can be dragged on screen do not take into account the new layers panel, so the canvas can get lost underneath it, and is not perfectly centered when first created.

REFACTOR the code

Contact the owner of the repo before starting to work on this

• Use a more object oriented approach
• Avoid frameworks, for now, unless there's a valid reason to use them
• Remove as many global variables as possible
• If possible, keep and reuse the current implementations of features
• Keep the code accessible by contributors
• Refactor the CSS
• Programmatically generate similar objects (tools entry in the tool menu)
• Write a scheme, discuss it and publish it in the repo before actually starting to rework the code

POLISH: brush state and info in the top bar

FEATURE: Rotate selection

FEATURE: Spline tool

After resizing the window and adding a layer, the brush doesn't correctly follow the cursor until a zoom is performed

Related: if the user zooms and creates a layer, the brush has the same behaviour.

TypeError: Cannot read property 'specified' of undefined (on creating new drawing)

I'm seeing this error on trying to create a new drawing. I love lospec! Thanks for an awesome app!

pixel-editor.js:1 Uncaught TypeError: Cannot read property 'specified' of undefined
    at newPixel (pixel-editor.js:1)
    at pixel-editor.js:1
    at HTMLButtonElement.<anonymous> (pixel-editor.js:1)

POLISH: Alt modifier shortcut for eyedropper

When creating a new pixel with a custom palette, the checkerboard is not drawn

Only happens when selecting a palette. In addition, instead of the checkerboard, a colour that is not even in the palette is used as a background colour.

FEATURE: Reference layer

Single, static reference layer: the user can draw over it (could take the place of the checkerboard when used)

Installing on windows suxx because node-gyp

it makes everyone sad

"Export" ignoring scale factor for projects loaded from file.

1. Create an initial 64x64 image and export it. Image is expected correctly as 64 x 64
2. Scale the image up to 320 x 320 and export it. Image is exported correctly as 320 x 320
3. Save the project.
4. Reload the website and load the project.
5. Export the image. Image is expected correctly as 64 x 64
6. Scale the image up to 320 x 320 and export it. Image is exported incorrectly as 64 x 64

DOCUMENTATION: code documentaton

• The app already has comments, they could be improved in some parts, where necessary
• The docs should accurately describe the structure of the code and help contributors understand where to put their hands, giving info about all the components of the app

POLISH; revert to previous tool after using eyedropper with alt + click

Pixel grid is performance-heavy with big files

Enabling the pixel grid on big files with low levels of zoom makes the editor lag a lot: since at said zoom levels the pixel grid is not visible anyway, hiding the grid when the user zooms out too much should be enough.

IMPROVEMENT: open in new layer

Let users open a png image into a new layer. If the file is bigger than the current canvas, the user will have to choose between expanding the canvas or scaling the imported image.

FEATURE: axis locking for selection and shapes

• Axis locking for rect and line tool (lock line tool to 30, 45, 60 degrees)
• Let the user use the rect and the rect selection to draw or select squares
• Let the user lock an axis when moving a selection, so that it only moves vertically or horizontally

Layer Groups

Let the user define a group of layers they can lock, move, hide (...) at once.

BUG: can't draw a single pixel without dragging

FEATURE: round brush

Only render the pixel grid for the current viewport

Since the pixel grid is quite performance-heavy, it might be nice to update it everytime the user pans but only drawing the grid in the current viewport.

FEATURE: tool tutorial

When the user hovers on a tool, a div containing instructions about its use and shortcuts appears.

Switching a color to black makes the color not work

upon turning a color to black in the pixel art editor, it shows as black, but will draw like it is the background color. switching the color does not fix it.

originally opened by Landon Britt on https://bitbucket.org/skeddles/lospec/issues/33/switching-a-color-to-black-makes-the-color

Request: ability to create filename/destination when exporting

When exporting a pixel image in Chrome/Windows, the image instantly goes to my Downloads folder with its own templated "pixel-dimensions date etc." filename. It would be wonderful if I could choose the directory I was saving the image to, and to give it a custom filename as well.

POLISH: history states in the bottom right corner, under the layers panel

IMPROVEMENT: Hot-reloading

Make the local app automatically update every time the code changes: this would speed up the development process

Adding touch events for tablets/phones?

I love this editor! 🎉 ❤️

I'd like to use this on my phone/tablet... how complex would it be to add events for touch interaction? The editor doesn't work super well there now, for example dragging doesn't seem to work.

This might be multi-part; first looking at event handlers, then perhaps some HTML <meta> tags to control page width, and there are some spots where event.preventDefault() and event.stopPropagation() might help to stop touch events from selecting things on the page or triggering menus or copy/paste operations? Not sure.

Just looking around the code, here are some places that could potentially be starting points to improving touch UI:

Event handlers

pixel-editor/js/_mouseEvents.js

Line 6 in f3ce09a

window.addEventListener("mousedown", function (mouseEvent) {

(this also includes mouseup, mousemove and such, 4 handlers total in this file)

And this, maybe also related?

pixel-editor/_ext/scripts/utilities/onClick.js

Line 8 in ed34980

element.addEventListener('click',functionCallback);

BUG: can't zoom out too much when loading big images

If I load a big sprite, I'm basically not able to see it in its entirety

FEATURE: custom grids

Have a way for people to have grids to use, it would help out in ways like spritesheet editing or creating structures

FEATURE: collaboration

Let 2 or more users share an editor instance to draw together. Discussion below, this comment will contain all the things decided in the discussion.

To discuss:

• Autosave
• Locking layers
• Undo / redo
• How to make rooms
• Backend

FEATURE: Polyfill

alt + right click + drag to resize brush also moves cursor

when this feature was written the cursor would stay in place, but some update must have changed it, now the cursor moves around the screen as well as the resizing box, which is weird and confusing

also in firefox alt opens the file menu, so we need a e.preventDefault() somewhere

FEATURE: custom brushes

Loading big sprites takes a huge amount of time

Pan bug after opening a .lpe file

After opening a .lpe file, it looks like the pan speed is not adjusted, probably because of some kind of problem in the zoom reset triggered by the open button.

Mouse Pointer always shows currently active tool when mouse pointer is over canvas

Is your feature request related to a problem? Please describe.
I find detecting the position of the mouse pointer when the background grid is activated quite hard.

Describe the solution you'd like
always show the currently selected tool at mouse pointer position. Like you do for fill tool

Additional context
This is how it look with pen tool activated. not visible enough imho.

even harder to read when zoomed in

BUG: fill tool doesn't work sometimes

Probably because sometimes the currently selected colour is null. After selecting a colour it fills the entire canvas.

• Filling with black doesn't work
• Filling a black area completely ignores the boundaries

IMPROVEMENT: references

Multiple reference images

• The user can drag them around the canvas
• The user can resize them to a certain extent
• When placed on the canvas, the reference image is exactly below the current layer, so that the user can always see the image and draw over it

my fault [del]

I have hidden my text.
I'm sorry, I wrote issues in the wrong repository.

POLISH: make brush crosshair smaller (or remove it?)

DOCUMENTATION: user documentation

• This should both be implemented in the wiki of this repo and in a pop up window in the editor
• The docs should accurately describe the behaviour of the editor and illustrate all its features, possibly with examples if necessary

Аxis locking for selection and shapes

Single, static reference layer: the user can draw over it (could take the place of the checkerboard when used)
Multiple reference images
The user can drag them around the canvas
The user can resize them to a certain extent
When placed on the canvas, the reference image is exactly below the current layer, so that the user can always see the image and draw over it

Axis locking for rect and line tool (lock line tool to 30, 45, 60 degrees)
Let the user use the rect and the rect selection to draw or select squares
Let the user lock an axis when moving a selection, so that it only moves vertically or horizontally

OS: Windows 10
Browser: Chrome, Edge
Thanks in advance

FEATURE: ellipse tool

When deleting a layer (while undoing), the next one isn't automatically selected

When deleting a layer, the editor should automatically select another one. However this does not happen and if the user draws while having no selected layer, the currentLayer.canvas variable will not be assigned since it will still point to the destroyed canvas.

FEATURE: symmetry options

Let the user drag a symettry axis (horizontal or vertical) around the canvas, so that brush strokes are mirrored around those axes

FEATURE: More selection tools

Implement new ways to select a section of a sprite, such as a lasso tool and a magic wand tool.

IMPROVEMENT: bind panning to mouse wheel press

At the moment, pressing the mouse wheel also makes the app draw a brush stroke that is not undoable.

Hex color #000000 exports as transparent, not black

I've been using the Pixel Editor to change the palette of Game Boy Camera photos I take. Sometime in the last several months, any black in the image (#000000) becomes transparent when exporting as a .png, meaning I have to change any blacks to slightly off-black. I feel I didn't used to have to do that..

Can you also support touchscreen?

Is there any way that Lospec Pixel Editor could support touchscreen? I use a Chromebook, and its a lot easier.

Stalled app while uploading a palette?

not sure if it's just me or what, but I tried uploading a slightly large PNG as a palette, and the site is not loading for me now. I'm so sorry if I caused that! I just didn't totally understand the load palette function.

Thank you for lospec, i love it!