Pixel.tools editor Pixel with others! <Try it now>
Printed From: Pixel Joint
Category: The Lounge
Forum Name: Resources and Support
Forum Discription: Help your fellow pixel artists out with links to good tutorials, other forums, software, fonts, etc. Bugs and support issues should go here as well.
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=19225
Printed Date: 07 September 2025 at 4:51pm
Topic: Pixel.tools editor Pixel with others! <Try it now>
Posted By: AlexHW
Subject: Pixel.tools editor Pixel with others! <Try it now>
Date Posted: 04 July 2014 at 1:04pm
|
You can try it now: http://pixel.tools/ - http://pixel.tools/ https://github.com/prominentdetail/Pixel.Tools - Pixel.Tools is on github edit: video demonstration of the Colordex system: http://youtu.be/QGLg-N9RT44 - http://youtu.be/QGLg-N9RT44 To celebrate the 4th of july, I've decided to open up more about what I'm developing.I've been developing a tool to create pixel-art.I'll be posting more about it, but you can make stuff like this (these gifs were also made with the tool):   
I also made all these with it: http://www.pixeljoint.com/pixelart/87308.htm - http://www.pixeljoint.com/pixelart/87308.htm |
Replies:
Posted By: AlexHW
Date Posted: 04 July 2014 at 1:18pm
here's a screenshot.. |
Posted By: BlueMagma
Date Posted: 04 July 2014 at 9:10pm
|
I'm liking what I'm seeing so far! I'm also developing a pixel art suite with Game Maker Studio but it looks like your way ahead of me in terms of development! xD What are you using for development? SDL? |
Posted By: AlexHW
Date Posted: 04 July 2014 at 9:24pm
|
thanks.. I'm coding it in javascript. It'll be free for everyone. It'll have everything that I normally use to make pixel-art, plus a lot of extra/new features. So it should be pretty versatile. |
Posted By: BlueMagma
Date Posted: 04 July 2014 at 9:55pm
|
Hmm, was considering doing a javascript suite, especially since it would save me the trouble of making a dll for http://www.wacomeng.com/web/index.html - Wacom tablet support . I went with Game Maker Studio for the cross platform compatability and been using the Engine for like 12 years. xD Now since you're using javascript, you should try using WebGL with http://threejs.org/ - Three.js for some post-processing effects in the future. I made a few http://www.alaingalvan.com/blog/?p=17 - GLSL shaders designed for pixel art that I'll be using in my editor, but they're open source so you're open to use them too. One is for alternative palettes and the other is to set the bitrate of an image so you could say, set your game to the GBC's screen bitrate. The other is to make a base image match a palette you provide as a texture, and from there you can do some extra effects. |
Posted By: AlexHW
Date Posted: 04 July 2014 at 11:24pm
|
Thanks for the suggestions. I haven't thought too deeply about post-processing effects- I've been focusing on the essentials. Is there anything you'd consider essential to pixel-art that requires post-processing? I haven't tried Game Maker, but I hear it's pretty cool. |
Posted By: BlueMagma
Date Posted: 05 July 2014 at 1:13am
|
Are shaders and post processing effects essential? No, after all, anything could be done with pixel art with enough time and effort. The point is to reduce the time and effort by providing some standard workflows. Say for example, using the bitrate shader to force an image to conform to a set bitrate for a project to get that extra level of dedication to hardware limitations. Or creating some rendered effects like perlin noise and forcing it to follow a set pallete, creating a voxel mesh from pixel art, generating normal maps and applying phong lighting to pixel art, generating a dithered low color image from a high color digital painting for tasks that might be too daunting for pixel art, like a 960x640 sky. The list can go on. Stuff that might help bridge the gap between digital painting and pixel art. Game Maker's programming language is practically the same thing as javascript, so if you're comfortable there, you'll find it pretty easy. Bad news is, it's not an object oriented language, but more like a "GameObject" oriented language, so there's no classes, but rather GameObjects, and you cannot create methods inside these GameObjects, but must use scripts, making your code feel a bit segregated. Still, PC, Mac, Linux, iOS, Android, Windows Phone, Windows 8, HTML5, PS4, all supported on it. |
Posted By: jalonso
Date Posted: 05 July 2014 at 2:57am
|
Looking good. Will this be an online app or downloadable too?
If possible, maybe you want to move the erasers below the paint bucket because erasers first sets the mood that mistakes, errors and the fuglys come first. In file output, unless this is a .gif output only, and if at all possible include .png8 output instead of .png24 Another feature that can be so helpful in planning is the option to have layers. ------------- |
Posted By: AlexHW
Date Posted: 05 July 2014 at 9:37am
|
I guess that makes sense bluemagma. I don't really have any plans to implement those types of features since I'm not well versed in programming that sort of thing, but if I get more comfortable with it I may consider it. I think the target audience can probably live without those things anyways, but who knows.. Yeah, game makers are fun to play with. I've used a lot in the past- klik-n-play, the gamesfactory, multimedia fusion, darkbasic, blitzbasic, construct2, unity3d, xna and various other less popular ones which I forget what they're called. Jalonso, I'm developing it as an online app. I haven't looking into downloadable. Everything works in firefox offline, but in chrome the gif export doesn't work offline(it works online though). Also, the wacom tablet web plugin only works in firefox. The main browsers that I'm focusing on are firefox and chrome. It might work in others but I haven't been able to test it. I'll look into the png thing. You can currently output pngs with 3 ways(all frames combined/layered , each frame a separate image, or as a spritesheet).. I'm not sure about the 8bit versus 24, I think it defaults to 24. You can use the frames as layers. So yes, you'll have layers. |
Posted By: DawnBringer
Date Posted: 05 July 2014 at 10:16am
| Cool. Is this pure JS or are you making use of other stuff like Ajax or whatever those gizmos are called? I only used Canvas long before it was cool (and it couldn't do that much)! ;) ...and I'm soo not up-to-date on JS/HTML5 :( |
Posted By: jalonso
Date Posted: 05 July 2014 at 10:30am
|
The thing about png8 vs png24 is that default png (truecolor) is that it alters all colors and is not as pixel friendly as you'd think.
Whenever we have fixed color challenges most entries are wrong because most apps output png24. Most PJers are not even aware of this and color shifting questions and confusion abounds. png8(indexed) is the gif equivalent. This image shows the exact same native (psd) file output in the three options. Notice the color changes on the png24.  ------------- |
Posted By: yrizoud
Date Posted: 05 July 2014 at 11:54am
|
I see no reason in the file format itself to lose precision. Do you know which program(s) cause this difference ? |
Posted By: AlexHW
Date Posted: 05 July 2014 at 12:20pm
|
Dawnbringer, It's pure js. Jalonso, I'm not well versed with that sort of thing, but wouldn't the higher bit depth be more accurate? Isn't a lower bit depth clamped in some way to hold less data if you are converting to it? |
Posted By: BlueMagma
Date Posted: 05 July 2014 at 12:41pm
|
Colors are adjusted ever so slightly when saving an image that was made
in TrueColor (32 bit images, 8 bits per channel [rgba]) to an image
format that has less bits and is thus less accurate. Also, Photoshop manages the colors of an image with it's color profiles. It's the reason why some images look bland and desaturated when viewed on the web vs. on a PC image viewer, and why you have to export an image with "Save for Web" in Photoshop. For the most part, you shouldn't have to worry about managing colors yourself, since your program doesn't have color profiles, similar to how GIMP doesn't need to have a "Save for Web" option. Here's a http://www.ryanjuckett.com/programming/rgb-color-space-conversion/ - good blog post on color space/theory in relation to programming for more details. ;D |
Posted By: DawnBringer
Date Posted: 05 July 2014 at 12:51pm
| 0 (Black) could never become anything but 0 unless the program is doing something it shouldn't. |
Posted By: jalonso
Date Posted: 05 July 2014 at 2:11pm
|
From what I understand all apps/programs will do that on png24 because the file contains less color data in its code or whatever images code into them.
I have tested this and indeed even black 000000 changes. Even Photoshop which is widely considered the best image app defaults to png24 if you just save a file. png8 you have to actually go in and choose. 
The reason png8 was developed was to create the encoding to be 'indexed'. Because colors in pixelart can be almost the most important thing in output then png8 is better than png24. I get questions about shifting colors all the time from PJers and have been collecting data and info and is the reason I brought it up to AlexHW for his app. ------------- |
Posted By: DawnBringer
Date Posted: 05 July 2014 at 3:37pm
| Then your program is doing something to corrupt it. 0 can never change due to conversion or transformations, only by deliberate additions. Must be some funky color-profile screwing things up!? My Photoshop preserves the correct colors as far as I know. |
Posted By: yrizoud
Date Posted: 05 July 2014 at 4:23pm
|
Originally posted by BlueMagma Colors are adjusted ever so slightly when saving an image that was made in TrueColor (32 bit images, 8 bits per channel [rgba]) to an image format that has less bits and is thus less accurate. GIF and PNG-8 store color exactly the same way as PNG-24 : a triplet of 3 bytes, allowing 256 levels of R, G and B. As long as your image uses <= 256 different colors, it can be saved as PNG8 with absolutely no loss of information. I just tested with an image saved as png8 by grafx2. I used XnView to convert it to 24bit color space, and save it as PNG again (the program has to switch to png24 variant). The resulting image is identical to the original. So Xnview is not a program which can cause such problem. |
Posted By: jalonso
Date Posted: 05 July 2014 at 6:34pm
|
This is very confusing and happens to many here. I get PMs on this all the time :'(
I don't want Alex's app thread being highjacked so I'll open a thread just for this issue. ------------- |
Posted By: BlueMagma
Date Posted: 05 July 2014 at 8:12pm
|
@yrizoud - I
saw the "8" in "PNG-8" and I'm thinking bitrate, but then 8 bits per
channel is the usual way a truecolor image is represented. Got a bit confused. :S After checking out http://helpx.adobe.com/photoshop-elements/using/optimizing-images-gif-or-png.html#about_the_png_8_format - Adobe's documentation , looks like PNG-8 is a more efficient GIF, but lacks legacy compatibility. Back on Topic: Is that brush tool circular regardless of sizing? What's the Softening attribute all about? |
Posted By: AlexHW
Date Posted: 05 July 2014 at 8:31pm
|
I don't mind the png discussion, it's interesting to me. Bluemagma, the tool remains circular when sizing up or down, but I'm considering other shapes as well. The softening attribute does what you'd think it does, basically softens the edge.. It was originally called Hardness, but I wanted to begin all the words with the same letter for fun :P |
Posted By: BlueMagma
Date Posted: 06 July 2014 at 9:29am
| Hmm, but why would you want that? Unless it like, softens the edge but maintains the current palette. Is that what's going on over there in that scratchpad, some sort of linear progression stepping from one color to another? |
Posted By: AlexHW
Date Posted: 06 July 2014 at 10:15am
|
Originally posted by BlueMagma Hmm, but why would you want that? Unless it like, softens the edge but maintains the current palette. Is that what's going on over there in that scratchpad, some sort of linear progression stepping from one color to another? Yes :) I was inspired by the HD indexing technique that Dan discovered for photoshop. I went and implemented my own version of this into my editor. Mine can combine different color gradients together depending upon how you want to connect them (adobe photoshop can't do this):  In the screenshot you can see how I've chose to connect to color ramps.  There's obviously a lot of things photoshop does better, but mine will be free at least. |
Posted By: jalonso
Date Posted: 06 July 2014 at 10:35am
|
Oh, I like that tool idea.
I thought the tool was for making edges semi opaque edges and was concerned. Photoshop is too much for pixelart. As a Mac user I'm limited tho. I wish I could run Photoshop 2.0 or 5.1 :( What is the 1-9 below the colors? ------------- |
Posted By: AlexHW
Date Posted: 06 July 2014 at 11:06am
|
Yea, no worries about the semi-opaque edges, my tool keeps everything opaque. The only way at the moment to get semi-opaque colors is to use a frame/layer that has its transparency set below 100. So if you really need to have something semi-opaque, you can do it that way. The 1-9 are connected to your tool presets. You can select a number(or press a number on your keyboard), and whatever adjustments you make to your tool, such as the size, will be saved to that number, allowing you to quickly change between different tool setups. It also gets saved to your browsers local storage so that they remain saved between sessions. |
Posted By: AlexHW
Date Posted: 07 July 2014 at 5:20pm
|
The other day I implemented the ability to import a spritesheet because I realized I hadn't done that yet. It had the ability to export a spritesheet, so I implemented importing. Also fixed an issue with drawing straight lines. When you held shift down and clicked, it would draw from the wrong location, but now it works correctly. You can also hold shift and drag to draw horizontally or vertically. fixed an issue with resize handles displaying at wrong locations after dragging a selection. I've added the ability to link together frames in-case you want to keep frames/layers separate yet have them combined in a cell during its animation. also made sure that gets checked when filesaving and loading so that links and opacity and whatnot are accurately maintained. |
Posted By: Drazile
Date Posted: 09 July 2014 at 4:44am
| If that brush in the first screenshot does what I think it does, I'm very excited :3 |
Posted By: AlexHW
Date Posted: 09 July 2014 at 12:36pm
|
Originally posted by Drazile If that brush in the first screenshot does what I think it does, I'm very excited :3 If you're thinking what I'm thinking, then yes it does :) found a bug yesterday while I was making an animation:  today I fixed it, plus other issues I found in the process.  It feels nice to be able to make an animated sprite in the editor. |
Posted By: OlegKlishinArt
Date Posted: 09 July 2014 at 1:37pm
|
It looks awesome so far. I like the idea of a free pixel-specific tool. And these brushes could be really cool. I used to do large chunks of dithering by hand and then just copied over and over. Dan's technique look good, but complicated. I am to try it yet.
I'll look forward to your tool. Does it have a name yet? :) |
Posted By: AlexHW
Date Posted: 09 July 2014 at 2:42pm
|
Thanks! Yea, my system makes it a lot easier compared to the method used with photoshop that Dan describes. I've tried that technique, but it's too cumbersome for extensive use. My system that I call the Colordex allows the user to simply draw their color ramps into a palette box(the colordex), and with a couple clicks they're all set to paint with it! edit: as for an official name for the app, I think I have one, but I'm still thinking about it. |
Posted By: Arkan85
Date Posted: 10 July 2014 at 4:24am
|
I have a couple of suggestion/request for your Editor: - the preview should be 1x (I use photoshop and it is always a pain to stretch the preview to be 1x) - the preview could be also 2x (yes... it could be useful for people with a not-so-good sight) - a tiled preview (very useful for tiled elements creation) I hope you found my suggestions useful.  |
Posted By: AlexHW
Date Posted: 10 July 2014 at 12:38pm
|
Thanks for the suggestions- those features will be implemented. I also have other features planned that will help with tileset creation. :) |
Posted By: AlexHW
Date Posted: 11 July 2014 at 9:30pm
okay, been working on implementing an algorithm for better looking rotations, here is what I have so far: looks pretty good.. need to figure a way to speed it up though. |
Posted By: BlueMagma
Date Posted: 12 July 2014 at 5:46am
| Woah nice! Well speed shouldn't been an issue, I'm sure most artists would be more than happy to deal with a delay for that effect. |
Posted By: AlexHW
Date Posted: 12 July 2014 at 8:32pm
|
Yeah, the way I've chose to do it for now is using the fast method while rotating, and then when you stop it'll calculate the more refined result. So there's a little delay on it, but not a problem if you have a sense of the angle already, plus it can cancel the refined calculation if you start rotating again before it completes. It's pretty much working how I want it to, but there are some things that could be improved. One being that if you rotate and then want to resize, it'll revert to the non-rotated version(unless you apply the rotation to the layer first). Reason for this is in relation to wanting to maintain the original detail throughout the modifying process so that you aren't continuing to morph it beyond recognition. I personally can live with that, and I'm unsure how much of an issue that would be for others. Maybe some of you can give me your opinions. Would it bother you if you rotate something and then resize it, that it would revert the rotation(you'd have to resize first if you intend to rotate, because resizing a rotated selection will resize from the non-rotated image). |
Posted By: yrizoud
Date Posted: 13 July 2014 at 8:11am
| Can I ask which rotation algorithm you're using ? |
Posted By: AlexHW
Date Posted: 13 July 2014 at 12:19pm
|
I tried to implement what the rotsprite does, but since there's no full documentation on how that is done I'm adding in my own stuff for cleaning up odd pixels. The resize part of the algorithm should be relatively the same though which uses a version of the scale2x algorithm. So I can't really call it the rotsprite algorithm, though it is inspired from it. |
Posted By: BlueMagma
Date Posted: 14 July 2014 at 12:39pm
|
It would bother me if transforming it reset the rotation, since you could just undo if you wanted a non-rotated version. Don't let that stop you from releasing a public alpha though! xD |
Posted By: AlexHW
Date Posted: 15 July 2014 at 8:54am
|
Originally posted by BlueMagma It would bother me if transforming it reset the rotation, since you could just undo if you wanted a non-rotated version. Don't let that stop you from releasing a public alpha though! xD You motivated me to spend some more time looking at the issue- I think I've figured out a way to maintain the rotation while resizing.  Edit: okay I have it functioning now.  |
Posted By: Sendoushi
Date Posted: 18 July 2014 at 9:23am
|
Damn... If you need help... I'm a developer.
Keep on! |
Posted By: DawnBringer
Date Posted: 18 July 2014 at 10:03am
| I hope you're not getting sidetracked by fancy effects at the expense of basic functionallity...at this early stage. If the basics don't work well, nobody will stay around long enough to try the more advanced features. |
Posted By: AlexHW
Date Posted: 18 July 2014 at 1:29pm
|
DawnBringer, I'm focusing on the essentials foremost. I've been working on the rotation/resize stuff lately.. Now it looks and functions great!  |
Posted By: boogieman
Date Posted: 19 July 2014 at 1:35am
| Wow! This looks like it is going to be a great tool! |
Posted By: jalonso
Date Posted: 19 July 2014 at 4:34am
|
Scaling/rotation is working nicely but to me is not that cool for pixelart. I hope it does not become 'normal' in pixelart:( ------------- |
Posted By: AlexHW
Date Posted: 19 July 2014 at 7:53am
|
Thanks for the offer Sendoushi. boogieman, it'll have everything you need to make pixel-art, so hopefully a lot of people will find it useful. That being said, if anyone has suggestions for what they think are necessities for making pixel-art, let me know. jalonso, yeah, I try to avoid rotation when I create pixel-art because it can promote bad habits if you use it for animation. Also, usually the rotation messes the pixels and you have to redraw it anyways. I prefer just redrawing something instead of rotating it. So It was never high on my priorities to include rotation at arbitrary angles, plus i knew it would be difficult to implement, but somehow it evolved and I figured some people would want it to use it, so I might as well make sure it functions great so that those people don't feel limited if it is something they need. |
Posted By: ui_
Date Posted: 21 July 2014 at 11:41am
|
Hey, please leave me an e-mail whenever you release the tool to include it in this list.
http://iloveui.com/pixelart.html Greetings |
Posted By: AlexHW
Date Posted: 23 July 2014 at 8:40am
|
That's a nice list you've compiled. I'll remember to do so. As to the development, all the main features are pretty much done, so lately I've been going through everything cleaning up any rough edges or things I may have overlooked. I'm sure there will be things that need addressing when more people start playing with it, which shouldn't be too long from now. |
Posted By: Daruda
Date Posted: 23 July 2014 at 6:59pm
|
Well, I would really appreciate a good way to work with the palette and some means to analyze/modify it. Like finding stray pixels of colors unused. (something similar the specs tool)
It will be usable even offline? Because I'm often without internet using a PC... |
Posted By: AlexHW
Date Posted: 23 July 2014 at 7:25pm
|
Yes, it can be used offline. I had some features planned for managing unused colors, but had forgot about those- thanks for reminding me. As to working with the palette, can you give some examples as to what control you want over that? |
Posted By: BlueMagma
Date Posted: 24 July 2014 at 12:04am
|
You could use a wrapper library and make your code into local binaries. A lot of people have been using http://https://github.com/rogerwang/node-webkit - node-webkit , so you could try that. EDIT: It's used by Intel, Koala IDE, PrePros, Game Dev Tycoon, and a bunch of others, so it's got a pretty good standing. Also, any plans of githubing this project? |
Posted By: AlexHW
Date Posted: 24 July 2014 at 9:57am
|
BlueMagma, I tried the node-webkit out. I'm not sure what advantage it offers. Everything already can be used in firefox offline, along with pressure sensitivity if you have a wacom. Using node-webkit doesn't help enable the wacom web plugin, but all the other features that work in firefox works, but I think those can be enabled without node-webkit in chrome anyways(minus the plugin). I've thought about githubing the project. It would probably be nice to get help from others who have better programming ability than me. I've never used it before, so it's something unfamiliar to me. Looks cool though. |
Posted By: Daruda
Date Posted: 24 July 2014 at 3:04pm
|
Something like storing a color and be able to make global changes to that color.
I would really like something to Import/export palette, and have them ready. I know that a lot of artist use universal palette. |
Posted By: AlexHW
Date Posted: 24 July 2014 at 4:15pm
|
Currently you can use the floodfill tool to change a color across the span of the image to a new color. So that's one way to do that. It won't change them if they're on a different layer, but I could implement an option for that. The Colordex allows you to manage your palette. You can create your palette, export and import them, share them, etc. |
Posted By: Daruda
Date Posted: 24 July 2014 at 5:05pm
| Then, I don't think that there are other things that I may need. Seems awesome. |
Posted By: Sendoushi
Date Posted: 25 July 2014 at 1:55am
| node-webkit and atom-shell lets you make a web application (html + css + js) a standalone cross platform app. For most people it's easier to develop in those technologies and it's faster to develop also. I would always prefer a standalone app than one in the browser even if the technology is exactly the same. |
Posted By: AlexHW
Date Posted: 27 July 2014 at 9:23pm
|
okay.. I'm taking the leap and letting anyone try my editor now. http://pixel.tools/ - http://pixel.tools/ save often. I'm not sure what bugs will surface, so let me know if anything strange happens. I'm interested in your feedback. If there are any questions about anything I can help explain things- I haven't completely documented everything yet. There's still various things that need to be implemented. If you don't see something you'd like implemented, let me know, or general feedback, will be useful going forward. I'm at that point where I need it get other hands on it. |
Posted By: Damian
Date Posted: 30 July 2014 at 2:25pm
|
I'm going to try this out. I'll relay my thoughts on the program and maybe show my results tomorrow.
After you make a selection how do move it around? |
Posted By: AlexHW
Date Posted: 30 July 2014 at 3:46pm
|
Looking forward to it! To clip a selection, you can hold Ctrl and click and drag, after you've dragged it you can stop holding ctrl (holding ctrl will snap it to the grid when you move it).. Or you can hold Ctrl and Alt and click and drag to clone the selected portion instead of clipping it completely. I should probably add this to the documentation. Ctrl D deselects, or clicking outside the selection delete key will delete the clipped selection, or clear the selected canvas if nothing has been clipped. edit: okay added to the documentation- you can find it explained under the features tab at the bottom of the page. Also the hotkeys tab has info on what keys you can press.. |
Posted By: rrrod
Date Posted: 31 July 2014 at 2:01am
|
Alex, which tablets are compatible with your plugin? I'm trying to get my Intuos5 to work, but I just can't get the brush to work. It's like nothing's happened.
(Tried with both Chrome and Firefox, same results) |
Posted By: yrizoud
Date Posted: 31 July 2014 at 10:48am
|
rrrod, you can check if you have the wacom plugin installed and working : http://www.wacomeng.com/web/TestFBPluginTable.html |
Posted By: rrrod
Date Posted: 31 July 2014 at 12:13pm
| Thanks for the tip yrizoud, but the plugin's working properly on that link you posted. Also, I just found out that the eraser tool's pressure sensitivity is working, so I'm probably being too noobish at using the brush tool properly. I'll mess around with it a bit more. Thanks! |
Posted By: AlexHW
Date Posted: 31 July 2014 at 12:39pm
|
The brush tool requires first setting up your color ramps in the colordex. Have you done this?.. Then you should make sure to click the icon to the right of the size slider to toggle pressure sensitivity on. I'll start working on a quick video.. seems like it'll help explain things better. |
Posted By: AlexHW
Date Posted: 31 July 2014 at 2:24pm
|
here's a quick run-through of some features.. not sure why the quality is bad, but I think it serves its purpose. I'll make a better one once my jaw heals and I can add audio to explain stuff verbally, it's difficult for me to talk at the moment. http://youtu.be/0io_Dl8yKmM - http://youtu.be/0io_Dl8yKmM edit: oh I guess quality is okay.. higher quality ones uploaded after lower quality one. |
Posted By: AlexHW
Date Posted: 31 July 2014 at 5:49pm
|
realized there is a major bug with the colordex when you try to make complicated combinations of colors, it inserts unecessary black colors.. I'm sorting it out at the moment. |
Posted By: AlexHW
Date Posted: 01 August 2014 at 9:43am
|
Just fixed a major bug with the Colordex!
I had noticed that creating complicated combinations of color ramps caused unexpected black colors to be drawn.. Part of the reason was related to how the canvas data was being managed when it processes the colors. I also realized from this that the control over the magic eraser tool wasn't selecting the correct colors in certain circumstances, so I sorted that out. Now color mixing works super great and everything adjusts in a predictable manner! I also felt like saving the previous version in-case people playback any old files, they should still playback accurately to how they were made (this is something I need to manage as I change core functionality to ensure old files remain true to their creation).. |
Posted By: nivek
Date Posted: 01 August 2014 at 5:29pm
|
I think this is an awesome idea! The ability to pixel with others online is great.
Feed back: - I've tested it and it just works .
- Maybe you could work on a right mouse button option if possible? |
Posted By: AlexHW
Date Posted: 01 August 2014 at 7:20pm
|
Thanks for the feedback nivek, good to know everything is working. What would you see the right mouse button being used for? I think most programs use it for an alternate color. |
Posted By: nivek
Date Posted: 01 August 2014 at 8:20pm
|
I would use it for a second color or eraser..
But my favorite use would be in graphics gale as a color picker. It would also be great if you could use the mouse scroll to zoom in and out. |
Posted By: AlexHW
Date Posted: 01 August 2014 at 8:48pm
|
Okay, those are good ideas. I want to be sure I'm not implementing things that have a similar method already implemented. For example, if you hold down Alt key when you left click it'll act like a color picker. So it might be redundant to make right clicking act like a color picker as well. I guess it could be nice if you don't want to use the keyboard. Hm.. Maybe I can allow the user to define what the right click is used for.. Or maybe there is some other function that suits it most? One idea I have is right clicking could open a mini-menu type thing with previous actions or popular actions you make, that you can select. For the mouse scroll, that sounds doable.. again, Ctrl and - or = keys will zoom, so it might be redundant.. I suppose I can implement these things and if I come up with something better, I can adjust things later and give people the option to choose. |
Posted By: Adcrusher
Date Posted: 01 August 2014 at 9:50pm
|
Awesome idea man! I was messing around in it with two of my friends and it worked pretty well. It was fun being able to see what each other was doing and work on different sections of the pieces. Here's some of the work we made.  Here's a second one we made.  I would submit them to the gallery and easily win monthly top, but collaborations aren't allowed!!!Darn it! No but seriously, the program worked great and seemed to have most of the features needed. Great work so far. Some critique I would give is that the crossair gets in the way a little bit when you are pixelling on a small scale, not too big of a deal. I couldn't figure out how to select something and drag it, I have this problem in photoshop too. In graphics gale if you right click and drag with the pencil it creates a selection box that you can grab and move or rotate or rescale. This one might just be me being dumb. At one point we wanted to make the canvas size larger, so I went into the increase canvas thing and changed the values. I messed up though and forgot to add a 0 and it made the canvas super small, deleting almost the whole image. I couldn't undo it, or go to the history to restore a previous version. The history box just had "New" on it. Luckily we had saved a version just a few minutes earlier, but this would really suck if you were actually working on something important. Thats about all the critique, but I do have a question. Do you have to invite someone to come work with you or can someone just randomly join your drawing? It would be kind of cool just to be able to randomly watch someone draw, and maybe they can give you permission to draw on it too or something. Again, great job and lots of fun. |
Posted By: torridgristle
Date Posted: 01 August 2014 at 9:53pm
|
When I try to set a point on the Colordex using a custom image, Waterfox locks up. Error: Script terminated by timeout at: groupdata/this.checkWaitinglist@http://pixel.tools/palettecanvas.js:429:1 groupdata/this.init@http://pixel.tools/palettecanvas.js:384:1 groupdata@http://pixel.tools/palettecanvas.js:479:2 getColorGroup@http://pixel.tools/palettecanvas.js:239:3 palettecanvas_events/pcanvas.onclick@http://pixel.tools/palettecanvas.js:187:4 Here is one of the images I tried to use. https://www.dropbox.com/s/qs7072vsb64x5f9/some-doom.png |
Posted By: AlexHW
Date Posted: 01 August 2014 at 11:03pm
|
Adcrusher, thanks for the lengthy feedback, and images. Those are the first images made from the editor Ive seen from anyone besides myself. Yes, that canvas resizing and image resizing can be frustrating, I'm going to attempt to find a solution to that. I could probably create a preview mode of the resize and require everyone connected to approve the preview before it is applied. That might at least prevent any mistakes. There is a way to retrieve the previous state, but it requires saving the file, then playing it back until the point before the resize, and then creating a new file from the playback(which will allow you to continue from the point you stopped at in the playback).. That would be done by one person, and then everyone can reconnect to each other and continue working on it. Kind of a hassle, but it's at least a work around for now. I'll try to come up with something to help prevent mistakes. To move a portion of the image, you have to hold Ctrl and clickdrag the selection to clip it out(a little scissors icon should show when you hold ctrl with the selection tool. I should add an option in the selection menu to clip a selection so you don't have to hold ctrl, that might help clear some confusion. In regards to your question, the only way for someone to join you is to invite them. I thought about doing it as you describe, but there are some technical challenges to it that I'm not ready to tackle at this time. Torridgristle.. part of the way the Colordex works is that it procedurally cycles through every unique color touching each other(colors that aren't separated by transparency). It's not meant to be used on an image like the one you tried because it would make way too many cycles trying to connect every single color to every other color.. I will do some tests with it and figure out if there should be a cutoff point for complexity so that timeouts don't occur, but if you use the Colordex appropriately you shouldn't have an issue. Perhaps you can give a suggestion as to how I might better convey the appropriate way of using the Colordex? Thanks again for the feedback, as it brings up various issues I need to address. I'll start working on implementing ways to solve these problems. If anything else comes up, let me know! I could be overlooking things since I'm familiar with how to use everything. |
Posted By: Damian
Date Posted: 02 August 2014 at 2:09pm
|
I tried this the other day but struggled with some of the simplest functionality because I didn't understand how the program worked and didn't know all of its hotkeys. But going to try it again.
One thing that bothers me is that the grid automatically snaps, I'd like to be able to turn that off and just use the grid as a reference point when making making tiles for games. The grid also makes moving images around very awkward. Edit: Just noticed a bug. I'm working in a 32x32 tile and decided to start over again. So I used the paint bucket tool to fill in the 32x32 tile I was working on, making the tile completely grey. I had contiguous selected so as to only fill in the areas within the 32x32 tile, but towards the end I noticed a single pixel hadn't been filled in, so I tried filling it in, the pixel disappeared but another one appeared at another location. Filling this pixel resulted in the last one showing up again and it continued jump between the two pixels if I used the paint bucket tool. The pencil sufficed in the end though. |
Posted By: AlexHW
Date Posted: 02 August 2014 at 3:24pm
|
Damian, I noticed that bug as well yesterday when I was using the paint bucket, I'll try to figure out why it does that. For the grid snapping, it shouldn't snap if you let go of Ctrl key. You're talking about when you move a selected portion of the image with a selection tool right? On a side note, I've been working on implementing a way to undo cropping/imageresize/canvasresize.. Almost have it ready. It'll only be able to undo the previous resize, but at least it's better than not being able to undo at all. |
Posted By: AlexHW
Date Posted: 02 August 2014 at 4:29pm
|
Okay.. I've implemented extra options under the Edit menu for cutting/copying/pasting/clearing any selections with the selection tools for people that might be confused on how to select stuff. Also, I've implemented one Undo for Crop, Image Resize, and Canvas Resize!! So this will hopefully alleviate any frustrations. Due to having to keep things in sync if connected to other users, it poses problems to allow more than one Undo for those operations. Also, this Undo can be made by anyone connected(not just the person who did the operation).. Cropping/Image resizing/canvas resizing will clear the History.. and if you make multiple operations, you can only undo the last one, so you still have to be careful with it. EDIT: okay also solved that bucket fill issue with the pixel reappearing, etc.. Let me know if anything else is weird. |
Posted By: AlexHW
Date Posted: 03 August 2014 at 8:03pm
|
Added a new option under Edit menu; "Insert Clipart" The image file you select will be pasted into your project. This is useful if you want to copy something from another image into your project. Also, I fixed an issue with the selection outlines not showing after the selection was rotated. |
Posted By: Drazelic
Date Posted: 04 August 2014 at 2:07pm
| I don't suppose you could add an option to make the mousewheel a shortcut for magnification, the way Paint Tool SAI does it? I just can't go without that particular shortcut nowadays. |
Posted By: AlexHW
Date Posted: 04 August 2014 at 2:59pm
|
Okay, considering the mouse wheel shortcut for magnification has been suggested to me before, I'll make that the next thing for me to add. I'm also planning to start working on a way to preview all the colors being used in your image. |
Posted By: Drazelic
Date Posted: 04 August 2014 at 3:34pm
Thanks! Here's what me and a friend came up with on your program today.
|
Posted By: AlexHW
Date Posted: 04 August 2014 at 5:17pm
|
Woah! that's amazing. It's really cool seeing people's results with the editor. I've added mousewheel scroll for zoom now.. Let me know if it isn't working how you'd expect it to. |
Posted By: AlexHW
Date Posted: 06 August 2014 at 10:56am
|
I've added a simple method to scan the project for used colors. Theres a new button next to colordex button. You can click the colors to eyedrop them. Feedback is welcome. |
Posted By: nivek
Date Posted: 07 August 2014 at 5:06am
| Zooming in with the mouse wheel is useful, but I think the middle mouse button could be used to move the canvas, like the hand tool. |
Posted By: AlexHW
Date Posted: 07 August 2014 at 7:11pm
|
Originally posted by nivek Zooming in with the mouse wheel is useful, but I think the middle mouse button could be used to move the canvas, like the hand tool. Okay, sounds like a good idea, I've now implemented the middle mouse button for moving the canvas. |
Posted By: Dreamer18982
Date Posted: 07 August 2014 at 9:22pm
|
I felt compelled to join this site just so I could personally thank you for your amazing-- no, phenomenal~ pixel art program. :D This is such a blessing-- I've looked and studied tutorials on this site and I'm glad you put in the effort to achieve effective-looking painting strokes! This is just another great resource for artists everywhere. I've only played around with the program for about a few minutes and it's great. It is a bit of a learning curve but I'm starting to get excited about what I can create with this- thank you! <3 I do have a small suggestion but it's on aesthetics. In Photoshop I love to tweak the 'Transparency & Gamut' all the time when I'm working on my art. It's like this crazy obsession that I have. Because this program heavily relies on tiny pixels, it may help to add an adjustment feature. For example if your doing a scene at night, it might be hard to tell what's transparent and what's your pixels. Anyway... that's just small potatoes in all things considered. I'd be more then happy to post my art when I'm done with it. Again-- Thank you!! |
Posted By: AlexHW
Date Posted: 07 August 2014 at 11:19pm
|
Originally posted by Dreamer18982 I felt compelled to join this site just so I could personally thank you for your amazing-- no, phenomenal~ pixel art program. :D This is such a blessing-- I've looked and studied tutorials on this site and I'm glad you put in the effort to achieve effective-looking painting strokes! This is just another great resource for artists everywhere. I've only played around with the program for about a few minutes and it's great. It is a bit of a learning curve but I'm starting to get excited about what I can create with this- thank you! <3 I do have a small suggestion but it's on aesthetics. In Photoshop I love to tweak the 'Transparency & Gamut' all the time when I'm working on my art. It's like this crazy obsession that I have. Because this program heavily relies on tiny pixels, it may help to add an adjustment feature. For example if your doing a scene at night, it might be hard to tell what's transparent and what's your pixels. Anyway... that's just small potatoes in all things considered. I'd be more then happy to post my art when I'm done with it. Again-- Thank you!! It's great to hear that you're enjoying the editor! I'd love to see what you create with it. As for the transparency&gamut feature you describe, if I understand correctly, there is already a setting you can adjust to make the transparent checker pattern change color so that it is easier to see what is transparent. It's under the settings option in the edit menu. There will be a setting for background color, which you can adjust. Let me know if this isn't what you were describing. Also, if you notice anything else that can be improved, or if you see any bugs, issues, etc, let me know- the editor is fairly new and needs more testing/use from people! |
Posted By: AlexHW
Date Posted: 16 August 2014 at 5:35pm
|
So, there was an issue with users on linux platforms not being able to draw in the editor if they used the firefox or midori browsers. Today I managed to find the bug causing this issue and fix it. If you go to http://www.pixel.tools/ it should now work and you can draw on the canvas, etc.. the issue was: ctx.setLineDash([0]); has to be this instead: ctx.setLineDash([]); While fixing that, I found another bug with the colordex that was causing it to not work, so I fixed that. The colordex should now work as expected. In order to use it, you have to Hold ctrl and click to make the Circle on a color, and the Big square OFF of a color(in the transparent space), and drag the smaller square onto a color.. This will allow you to draw from transparent space.. If you already have color laid down and want to modify it without drawing into transparent space, make the big square on a color instead.. The confusion I have had in the past is thinking I need the big square ontop of a color and the little square off of the color.. Perhaps there is a more intuitive method, and if anyone has suggestions, feel free to share them! ALSO.. if anyone does find other bugs, let me know! I haven't tested everything on linux. |
Posted By: AlexHW
Date Posted: 19 August 2014 at 3:34pm
|
Okay, I've implemented a a secondary color. I also made X key a shortcut for that operation, and made colordex shortcut C key instead (it was using X previously). Reason for this is because photoshop, and gimp use X for swapping colors, so I figured I should keep it stuff like this similar. You can also click on the color box next to the color sliders to switch which color you paint with.. This allows you to set two Colordex ramps as well, and also switch between them. Let me know if anything seems weird with this new stuff. |
Posted By: nivek
Date Posted: 20 August 2014 at 5:02am
| Hey Alex, I've tested it and the color picker isn't working? The mouse wheel and new additions are working great though. |
Posted By: AlexHW
Date Posted: 20 August 2014 at 8:46am
|
Originally posted by nivek Hey Alex, I've tested it and the color picker isn't working? The mouse wheel and new additions are working great though. Thanks for catching that! It was due to the last thing I added- I was using 'And' in an if statement when I should have been using 'Or'.. The color picking should work now. You may need to refresh the page. |
Posted By: Conexion
Date Posted: 26 August 2014 at 6:59pm
|
Awesome tool, really enjoying it so far.
Is there currently any plans for previewing how a tile might repeat? Being able to see how a grass tile might lay out and if the 'seam' is noticeable would save a bit of time. |
Posted By: AlexHW
Date Posted: 26 August 2014 at 7:28pm
|
Yep, you can do this by using the secondary viewport.. Pressing the V key will show/hide the secondary viewport(you can also toggle it in the Windows menu). There is a dropdown list above the viewport that has a 'Tiles' option. Choose that one, and then use the Tile tool (T) to select the tile from the Primary viewport(the section you will be drawing on). Also make sure your grid is setup with the correct dimensions by going into the Settings (the icon in the top right, or under Edit menu).. After selecting a tile, you can draw it to the secondary viewport- there are different layers you can place it on as well in the case you want to preview how tiles look stacked over each other. As you draw on the tile in the primary viewport, the tile will update in the secondary viewport, so you can place a bunch next to each other and see how it tiles while you create it. you can also resize the dimensions of the map area under Edit menu > Map > Map size.. Hope that all makes sense! let me know if you have any trouble with that. Glad you are enjoying it so far! |
Posted By: AlexHW
Date Posted: 27 August 2014 at 10:08am
|
Okay, I finally got around to creating a video demonstration of how to setup and use the Colordex: http://youtu.be/QGLg-N9RT44 - http://youtu.be/QGLg-N9RT44 I also adjust the square markers you use to set it up, so that it doesn't matter which one is off the color ramp when drawing to transparent space as long as one is. |
Posted By: Conexion
Date Posted: 27 August 2014 at 9:35pm
|
Makes perfect sense, awesome. Was playing with the tile functions and thought there might be a way to do it, but couldn't figure it out. Excellent!
I think scheduling a time to have a nice sized group of us working on something together would be a lot of fun. Also, I was able to figure out how to use the colordex yesterday, but I watched the video, and it is very clear. |
Posted By: AlexHW
Date Posted: 28 August 2014 at 10:52am
| Good to hear that. Yea, I don't know how well it'll handle a big group painting together- it should be feasible, but I've never tested it with many people. |
Posted By: rrrod
Date Posted: 31 August 2014 at 2:46pm
| I definitely agree on scheduling a Co-op session. Sounds like some really cool ideas could come out of it! |
Posted By: CandyFace
Date Posted: 01 September 2014 at 3:19am
|
Just joined the forum to ask you Alex, will you be able to support other tablet brands? I'm using a tablet from a company called Huion, a Chinese but quite known company. I have been trying to get the pressure sensitivity to work on my mac and windows machine but nothing works. It is quite unfortunate because i would really like to test out the tool properly.
I know it is using the wacom browser plug-in, so it might be a long shot. |
Posted By: AlexHW
Date Posted: 01 September 2014 at 2:44pm
|
There might be in the future if pointer events become available: http://www.w3.org/TR/pointerevents/ That would allow any tablet to work if I understand correctly. |
Posted By: volter9
Date Posted: 18 September 2014 at 8:08pm
|
Very nice tool! Respect +1
If you need any help, I would be glad to help you, I messed around with Canvas long time and know a lot about it. I looked at the code and you use a lot of depreciated standards. If you wouldn't mind I'll give few suggestions:
I can continue, but I think I need to stop it here. If you interested in refactoring your code or in my advices (maybe), you can PM me. Good luck with this awesome project! 
P.S.: I made some games on Canvas and Internet Meme editor, so I have experience with canvas 
|
Posted By: AlexHW
Date Posted: 19 September 2014 at 2:00am
|
Thanks for the suggestions, volter9! I'll have to sift through everything and try to address your points. Doesn't the else if() give more control over the order of things? Switch case doesn't allow you to give priority over one case versus another from my understanding. But yea, I'll see what I can do about fixing these things if you think it'll improve it- I'm not well versed in what the best practices are, so this is really useful info. |
Posted By: volter9
Date Posted: 19 September 2014 at 8:18am
|
> Doesn't the else if() give more control over the order of things?
Of course it does! However, in your case it's more semantically to use switch..case instead of if..else statement, because you're comparing just same variable to the string. In your case, I would do in another way, but there's a lot of modifications that I would need to do in order to make it happen (change lots of code basically). P.S.: you need to compare string with string with ===, because there's some issue may happen if you wouldn't, for example, if your variable would be integer have the same value as string (that may happen). More about it you can find it http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons - here (StackOverflow question). |