piskelapp / piskel Goto Github PK
View Code? Open in Web Editor NEWA simple web-based tool for Spriting and Pixel art.
Home Page: http://piskelapp.com
License: Apache License 2.0
A simple web-based tool for Spriting and Pixel art.
Home Page: http://piskelapp.com
License: Apache License 2.0
Tested on Firefox Nightly (24.0a1), the right hand side drawer is not positioned correctly.
The display: table property here
https://github.com/juliandescottes/piskel/blob/master/css/style.css#L58
seems to be the reason for it.
Cheers
DPI is changed, but drawing controller won't redraw until the next frame/overlay change.
Need to force redraw for DrawingController in case of DrawingConfiguration change
We spoke about having tests to ease refactoring and robustness.
Another complementary and cheaper approach could be to have jsdoc tags combined with a closure compiler validation pass. It will give us a kind of type validation and it's a time-saver to smoke test big refactor.
Note that I don't really care about compressing the code size, I just want to use the compiler validation.
What do you think?
Do something that resembles more paint, paint.net etc ... Users need to quickly understand that this is about primary/secondary color selection.
So I propose this new interaction to allow quick access to previously used colors and tools.
This interaction is based on the right click in two different modes:
Spec for the 'previously used tools/color' wheel:
That's an initial implementation proposal to see how it flies. Lot of stuff can be changed depending on UX feedback, eg:
Thought, strong feelings against that?
Zoom level is for now hardcoded to 20 in piskel.js
User should be able to dynamically change this.
On Chrome Version 22.0.1229.26 beta-m .
When hovering on tools, there are MAJOR slowdowns on this version of chrome. It seems to be linked to the display of the 'title' attribute.
Removing the title attribute fixes the issue but maybe we should first refactor the redraw loop.
From @captainbrosset :
What about a bigger, more obvious, color palette, very close the the canvas, where simply hovering over one of the colors would assign it to the current tool? Would make the need for a secondary color less important and would bring a very fast and smooth (no freaking click or cumbersome keystroke in the way) way of switching color, which is, I guess, is what you end up doing most often.
Ability to create and label palettes that could be used across different framesheets (skin colors, glass/wood colors etc).
They have to be persisted independently from a given framesheet model.
When loading an animation with speed != from 12FPS, the speed is correct, but the slider always initialized at 12FPS.
See http://juliandescottes.github.com/piskel/?frameId=agxzfnBpc2tlbC1hcHByEgsSCkZyYW1lc2hlZXQYme8CDA
Would be nice to have this, to automatically see the latest version of the app running, without having to redeploy manually.
Maybe should be deployed in a subfolder (/latest) to avoid automatically overriding the "stable" version.
Transformations:
Raised during PR #109
Which browsers do we aim to support ?
Let's keep the discussion around desktop browsers, since piskel is not mobile/tablet ready.
My take :
Do we test all of them ? Or do we just try not to break the browser compatibility voluntarily (and fix bugs when reported)
Again inspired by what all image edition tools do
(OK I did too much GAE and want to puke but ...)
I found that:
https://github.com/h5bp/mothereffinganimatedgif
https://github.com/antimatter15/jsgif
Not really perfect but we could probably improve it (currently no support for multiple colors/palette and the trasnparency looks really bad)?
Using the Canvas toDataURL API :
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
Concatenate all frames in a single sequence of images and export/save as a single PNG file.
Would be nice to see somewhere the position of the cursor in terms of "frame" pixels.
Cursor at : 10x05
Also when using tools such as rectangle/circle/selection, could be good to have contextual information about the area being selected.
Similar to rectangle tool, but for circles.
I need to draw bubbles !
For now stroke thickness is hardcoded to 1px.
Bring ability to make it bigger (for any tool: stroke, pen, rect, circle, etc).
with some transparency
Before the palette was initialized with all the colors used in the animation.
Doesn't work anymore (example : http://juliandescottes.github.com/piskel/?frameId=agxzfnBpc2tlbC1hcHByEQsSCkZyYW1lc2hlZXQY4V0M)
So we need some tests.
Ideally, we need:
Go to http://juliandescottes.github.com/piskel/?frameId=agxzfnBpc2tlbC1hcHByEgsSCkZyYW1lc2hlZXQY6YQBDA
The frame selected by default is not displayed inside the drawing canvas.
I really like the new icons, but I would prefer if the tools were in their zone of 'action' :
It might be cool and also useful to edit a single frame by computing several layers
Try selection tools at http://juliandescottes.github.com/piskel/?frameId=agxzfnBpc2tlbC1hcHByEgsSCkZyYW1lc2hlZXQY6f4CDA
The selectionManager is caching low level objects (frames).
When the application loads an existing piskel, we first set a picture size of 32x32 and then change the size when we receive the info.
However the Selection Manager is directly using (and caching) framesheet objects. Therefore it's not compatible with this use case.
Need to be able to edit several frames at the same time.
Looks like transparent color created by the ERASER tool is not identical to the default transparent color (the one you get with an empty frame for instance).
Try to use the paint bucket inside the PINK zone here : http://juliandescottes.github.com/piskel/?frameId=agxzfnBpc2tlbC1hcHByEgsSCkZyYW1lc2hlZXQY6YQBDA . The bucket doesn't expand as expected :)
Either that or a multi-edit batch mode. But I think a selection tool with copy/paste/move will come in handy
When using tools like pen or eraser, could be nice to slightly highlight the target pixel that may be affected. It should be really subtle (like opacity 90% for a real color or white/opacity 10% for a transparent target pixel).
Animations are 32*32 only. This obviously needs to be configurable.
Our first official backend bug. awesome...
I just did an animated sprite and I'm getting 500 from gae when trying to save it. The sprite is pretty big (a lots of frame) and the serialized framesheet is around 1.1mb.
I can't see any 500 log from GAE console and I know there is a 1MB limit on GAE.
I saw this as well (non scalable workaround using zlib compression):
http://atastypixel.com/blog/breaking-the-limits-storing-data-bigger-than-1-mb-in-google-app-engines-datastore/
or scalable technics:
http://stackoverflow.com/questions/5081502/memcache-1-mb-limit-in-google-app-engine
Have a look at : http://www.humanbalance.net/gale/us/spec.html
Basically this feature displays the previous and next frame on the drawing canvas, in semi transparent mode. Looks awesome for animating characters !
On a new piskel :
http://juliandescottes.github.com/piskel/?size=24x24
it works fine but on an already created one :
http://juliandescottes.github.com/piskel/?frameId=agxzfnBpc2tlbC1hcHByEgsSCkZyYW1lc2hlZXQYo5kCDA
The tool doesn't work.
Load http://juliandescottes.github.com/piskel/?frameId=agxzfnBpc2tlbC1hcHByEgsSCkZyYW1lc2hlZXQY8agCDA (16x16), using the pen tool you can see the "hover" effect displayed outside of the drawing canvas.
If you inspect the DOM you can see the overlay canvas is twice the size of the drawing canvas.
The rendering is heavy : need to explicitely call the controller responsible for a given area of the layout, and ask it to redraw its components. And there is no common redraw or render method : for each controller you have to call different methods.
The goal of this task is to make the rendering process automatic.
A drawing loop based on request animation frame will run in the background, and will call the different controllers. The controllers will be responsible for checking the models they are relying upon and will choose the most appropriate way to redraw their UI components.
Transformations:
:(
:(
For now, we don't support partial opacity for colors. We either show 100% opacity colored or totally transparent pixels.
Do we want to support opacity pixels in the future?
May lead to a bunch of problems/new challenges:
Evident benefits are:
For now, I'm good not supporting that but I'm curious of your point of view, pros and cons on this one.
When activated, whatever you do on the one side is reimpacted on the other one. It makes only sense for subset of tools (simplepen, eraser, eventually stroke)
Regression in Chrome cursor handling: https://code.google.com/p/chromium/issues/detail?id=172857.
How do we mark private JavaScript function?
I saw some prefix or suffix underscore in our current code base. We could as well use the private jsdoc tag?
I'm used to suffixing and and adding a private but I don't have any preferences.
When copying a savedState to the frame, the reference is passed. If the frame is edited, the state gets modified.
Dirty fix for this is to reuse the _clonePixels method on the Frame as follows :
ns.Frame.prototype.loadPreviousState = function () {
if (this.stateIndex > 0) {
this.stateIndex--;
this.pixels = this.previousStates[this.stateIndex];
this.pixels = this._clonePixels();
console.log(this.stateIndex);
}
};
But I'll try to spend some more time on it this evening to find a proper solution.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.