GDR Forum Index
Podcast Podcast
Dev Dev Logs
Search Search
RSS RSS
Register Register
Log in Log in
Reply to topic GDR Forum Index -> Game Developer's Refuge -> Development Log - a pixel editor thing Page Previous  1, 2, 3  Next
View previous topic :: View next topic  
Author Message
IMakeGames
Contributor

Joined: 13 Apr 2011
Posts: 499
Location: Austria
PostPosted: Wed Jul 16, 2014 3:20 pm    Post subject: Reply with quote

WOW, you're a jack of all trades it seems! Awesome stuff! :) Care to share some details about your rotation algorithm?
_________________
My current project: Hook'd
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Wed Jul 16, 2014 6:22 pm    Post subject: Reply with quote

Thanks, Gil. I assume you're using a canvas element to allow crisp images, right?

IMake, with the help of the internet I can be. My code is probably very convoluted though.
I've actually been dabbling with code of some kind since 1998 or so, I just never ever release anything worth noting. I plan to change that though.
I spent all day trying to improve my resize handles. I won't be satisfied until it works as one expects. At the moment I have the handles able to be dragged while the selection is rotated and it will resize accordingly within the same rotated space. The handles align with your mouse as well, and there is no weird disconnect like I described before. However, I had to break the centering ability when you hold alt key down. But that should be fixable once I get some rest.

The rotation algorithm. It's mainly inspired by the rotsprite algorithm.
I do a modified scale2x algorithm 3 times to get an image that is 8 times the size of the original.
The purpose of that is to attain a resampled image that has its edges smoothed so that when you go to rotate it, it'll result with corresponding pixels that can be referenced more accurately than a jagged blocky version would. When you rotate a square it covered more than one pixel, so it's a bit ambiguous which pixel to fill in when this happens. Having it smoothed to be less of a square helps prevent it from choosing the wrong color to fill a pixel basically..
So it gets rotated with the 8x size and then scaled down by referencing the big version to fill in the small version.
After it does that, I comb through the small version for any weird pixel patterns and fix those(I still need to improve this part)..
That's basically it.
The modified scale2x algorithm I found here: https://code.google.com/p/grafx2/issues/detail?id=385#c3
As far as fixing pixel patterns, I basically am looking at the results and see what kinds of patterns can emerge that don't look good. Then I'll add special instructions for handling each.
Let me know if that's not clear enough.
I don't really know how the rotsprite algorithm works apart from that modified scale2x algorithm, but since I'm able to attain pretty decent results without the full rotsprite algorithm, I'm guessing there isn't much to it.

The selection tool handles have probably been one of the more difficult things to implement. It's like I'm implementing a robot hand so I can grab and modify the image.
View user's profile Send private message Visit poster's website
Gil
Developer

Joined: 14 Nov 2005
Posts: 2341
Location: Belgium
PostPosted: Thu Jul 17, 2014 5:14 pm    Post subject: Reply with quote

Alex wrote:
Thanks, Gil. I assume you're using a canvas element to allow crisp images, right?
Yeah, there's a beta on Pixelation you can try btw, it's open-source.

http://wayofthepixel.net/index.php?topic=16963.0
_________________
PoV: I had to wear pants today. Fo shame!
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Thu Jul 17, 2014 7:39 pm    Post subject: Reply with quote

cool, I'll check it out.

I managed to fix the centering while resizing(holding alt key) when rotated, plus you can flip it by dragging the handles so that it becomes inverted.
It was a huge pain organizing everything to work correctly, and it's rather forced. There are a few things that aren't perfect, like having some of the selection clipped while resizing at certain angles(but it gets unclipped when you release). This is due to the pixels being drawn to a canvas element that is smaller than the selected portion. It's difficult to fix because I'm juggling lots of coordinates, so it isn't easy to visualize what is happening. A lot of what I did was through trial and error to get things to align correctly. Regardless, the end result is what one expects. The other things that has a bit of a disconnect is the selection dotted line that surrounds an object- it doesn't stay surrounding the selection when you resize.. I'll have to decide whether to hide that when resizing, or if there's an easy way to adjust that. Easiest solution would be to hide it...
actually. I think I can just hide it and draw a separate generic dotted box connecting the handles(which are in the correct position). That would solve a bit of the disconnect.
selection tools are tough!!
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Fri Jul 18, 2014 12:26 pm    Post subject: Reply with quote

Rotation and Resize is looking and functioning great now!
View user's profile Send private message Visit poster's website
sonrisu
Moderator

Joined: 31 Aug 2005
Posts: 4998
Location: Silicon Valley!
PostPosted: Fri Jul 18, 2014 1:51 pm    Post subject: Reply with quote

That rotation smoothing business is pretty amazing. Why don't other apps do it this nice looking? I guess they're not pixel-oriented. Still. Should be an option!
_________________
loomsoft :]
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Fri Jul 18, 2014 3:26 pm    Post subject: Reply with quote

I'm not sure why it isn't more common. Probably just an oversight if a developer isn't proficient in dealing with all the pixel nuances involved with making pixel-art. I think a developer has less motivation to implement something if they can't see the use for it.
I try to limit my use of any rotation when I'm pixeling for two reasons- one; it can promote bad habits like rotating limbs and things when animating(I prefer redrawing everything to get a more animated/illustrative feel), and two; rotating stuff tends to mess the pixels up and force you to redraw things anyways.
So the ability to rotate stuff wasn't high on my priorities. I had 90 degree rotation, but somehow that evolved into this, and I figure if there's rotation, I better make it work really well- some people will want to use it, so now it's in.
View user's profile Send private message Visit poster's website
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9459
Location: Not Finland
PostPosted: Fri Jul 18, 2014 8:04 pm    Post subject: Reply with quote

Quote:

That rotation smoothing business is pretty amazing. Why don't other apps do it this nice looking? I guess they're not pixel-oriented. Still. Should be an option!


Rotation plus pixeling is ultimately impractical outside of ~45 degree increments. A lot of programs don't bother doing anything fancy with that op since the results are super nasty. Photo editing stuff like Gimp/PS give you more sophisticated approaches because it's assumed your input is high(er) fidelity.

Nearest neighbor was essentially free with Allegro so I stuck with that for the time being. If I'm really, really bored one day I might offer some other approaches, but for me at least, real world usage of my rotation tool has been zero... I've just used the xform tool to flip or mirror the sprite :)
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sun Jul 20, 2014 3:53 pm    Post subject: Reply with quote

Since all the basic tools/features are pretty much done, I've went and added a secondary viewport one can use to view their work at 100% or whichever magnification they choose while they work in the main viewport. That was a request.
I'm also using the secondary viewport to allow tilemap creation. You'll be able to select tiles from the main viewport and draw them in the secondary viewport. It'll be simple- primarily to help with tileset creation, so that you can see how your tiles tile with each other while you draw them.
I'm tempted to add more map creation features, but I think that sort of thing relies upon knowing what a specific game needs. Maybe I'll just implement the ability to export the array responsible for defining which tile each coordinate is, and maybe a collision array. Maybe I'll get feedback from others as to what else it needs, but my intent isn't to make a full fledged map editor.
What do you guys think?
View user's profile Send private message Visit poster's website
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9459
Location: Not Finland
PostPosted: Mon Jul 21, 2014 2:10 pm    Post subject: Reply with quote

Quote:

I'm tempted to add more map creation features, but I think that sort of thing relies upon knowing what a specific game needs. Maybe I'll just implement the ability to export the array responsible for defining which tile each coordinate is, and maybe a collision array. Maybe I'll get feedback from others as to what else it needs, but my intent isn't to make a full fledged map editor.
What do you guys think?


There are plenty of existing tile map utilities. My gut says this would just end up being bloat.

When in doubt, adhere to the Single Responsibility Principle.
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1670
Location: Your consciousness.
PostPosted: Mon Jul 21, 2014 10:47 pm    Post subject: Reply with quote

A tile map editor is only really useful if it comes with

a) detailed documentation about the map file format, bonus points for including sample code for loading a map

or

b) an easy to use plugin system which gives access to ALL the data (pixels, tiles, layers, colors, ...) inside the editor itself, allowing each user to write their own map data export routine

or both.
_________________
0xDB
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Tue Jul 22, 2014 11:03 am    Post subject: Reply with quote

hm.. good points.
I think I'll limit the map related stuff for simply allowing a preview of your tileset capabilities while you're drawing it; it's something I want to have when I make tilesets.
As for more map editor related functionality, there won't be any unless there are lots of requests for it, but I won't get ahead of myself if the work isn't necessary.

At the moment I'm cleaning up various things, and trying to find all those smaller details I've delayed implementing, etc. Before the end of the month, everyone should be able to start messing with it if I don't run into any unexpected issues.
I'm starting to have those feelings of nervousness about whether it'll be accepted or not by people. I guess it doesn't matter either way- I just have to continue doing what I enjoy.
View user's profile Send private message Visit poster's website
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9459
Location: Not Finland
PostPosted: Tue Jul 22, 2014 4:05 pm    Post subject: Reply with quote

Quote:

I'm starting to have those feelings of nervousness about whether it'll be accepted or not by people. I guess it doesn't matter either way- I just have to continue doing what I enjoy.


Don't worry about it, and don't worry with tending to every suggestion that comes along. Come up with a mission for your application, and make sure everything you add helps it fulfill that. Extraneous stuff will just get in the way. Then put it out there and people will nibble at it as the years go by. You'll always have a small batch of people that will absolutely love what you've done with it.
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Tue Jul 22, 2014 7:29 pm    Post subject: Reply with quote

Yea, you're absolutely right. My mind has a habit of glorifying things and making everything seem bigger than it actually is. Realistically, there will only be a small number of people who might use it, because I am me and I make what I make- I don't have great success or resources, so I know it's best to start small. Give it for free, let it be what it is and not try to be something it's not. That's a big shift from the perspective I had a couple years ago. I think the more a person fails at something, the more they understand what results to expect. Failure is mostly a psychological thing related to what expectations you have about something. The more I lower my expectations, or the more I let go of everything- the less I can lose, the shorter I can fall. Life becomes more enjoyable this way.
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sun Jul 27, 2014 8:23 pm    Post subject: Reply with quote

okay.. I'm taking the leap and letting anyone try my editor now.
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.
View user's profile Send private message Visit poster's website
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9459
Location: Not Finland
PostPosted: Mon Jul 28, 2014 4:54 pm    Post subject: Reply with quote

Everyone has their own drawing/pixeling workflow, and it's difficult to critique something that's far away from your baseline. Mine is particularly archaic :) I grew up using Dr. Halo, Koala Paint, and Animator. Parts of that never worked their way out of my system... heh!

I think the immediately intriguing part of this project is it being web-based. That gives it portability out the wazoo.

I'm using the latest Firefox beta (32?) Performance is generally snappy but it lags badly when I up the size of the drawing tool. I presume the brush tool isn't working? I never got it to do anything. Being able to daub color onto a virtual palette was a neat idea. I haven't even touched the animation stuff yet. More to come as I continue playing.
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Mon Jul 28, 2014 6:01 pm    Post subject: Reply with quote

The brush tool is used in conjunction with the colordex. Draw your color ramps in the colordex, and hold ctrl and left and right click the colors to define the brush's palette start and end points. Then the brush tool and magic erasor will work.

Yea, a larger brush size tends to go slower because it has to check each underlying pixel as it draws. If you're doing pixel-art work, your brush strokes tend to be short or slow anyways, or you use smaller size brushes, so I don't think it'd a big deal.
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Thu Jul 31, 2014 1:28 pm    Post subject: Reply with quote

Here's a quick run-through of some features:
http://youtu.be/0io_Dl8yKmM
Not sure why the quality is bad, but it should serve its purpose for now. I'll make a better one with audio when my jaw heals and I'm able to talk clear.
edit: oh I guess quality is okay.. higher quality ones uploaded after lower quality one.
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Fri Aug 01, 2014 8:39 am    Post subject: Reply with quote

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)..
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sat Aug 02, 2014 5:36 pm    Post subject: Reply with quote

Added one Undo for crop/image resize/canvas resize.
Previously, they couldn't be undone, but now they can. Although, if you use these operations multiple times, you'll only be able to undo the last.

Added options under Edit for manually cutting/copying/pasting/clearing selections with selection tools.

fixed bug with bucket tool related to 1x1 pixels not filling.
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sun Aug 10, 2014 9:44 pm    Post subject: Reply with quote

Apparently someone who uses linux is encountering a bug with the editor. When they draw on the canvas, it doesn't update it for some reason.
If anyone here uses linux or has access to test it, if they could let me know if it draws or not for them? I can't seem to figure out what the issue could be. This is encountered in firefox & midori, but not chrome.
View user's profile Send private message Visit poster's website
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1670
Location: Your consciousness.
PostPosted: Sun Aug 10, 2014 10:21 pm    Post subject: Reply with quote

Alex wrote:
This is encountered in firefox & midori, but not chrome.
Ok this is not a helpful comment here but that's the one reason I despise web development: There just does not seem to be a standard, whether it is javascript or html, to rely on. You always end up having to write extra code for different browsers and that is just completely against the whole idea of easy portability. At least, that's how it was a couple of years ago, maybe things have changed.

On that issue: The first thing you need to know from that person is which Firefox Version he/she is using. Then you can check if the canvas element is even properly supported in that version.
_________________
0xDB
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sun Aug 10, 2014 10:34 pm    Post subject: Reply with quote

well, the strange thing is that if I comment out some code, it apparently draws for them. I just haven't figured out why- I need to find exactly which part of it is involved with the issue, and I've been working with the person to test it out, but it's a back and forth exchange waiting for them to test it, etc.. I was just wondering if it's reproducible for anyone else.
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10902
Location: Canadia
PostPosted: Mon Aug 11, 2014 6:26 am    Post subject: Reply with quote

I too just ran in to some Firefox problems. Chrome works wonderfully (the best). I'm goofing off with a mix of canvas and DOM elements. I have a DIV I'm measuring the dimensions of via clientWidth, clientHeight, and that getClientRect function (whatever the correct name is), and none of these are working the same as chrome (I.e. chrome the values change to correct sizes as soon as they are added to the document). Looking in to that today.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Fri Aug 15, 2014 5:02 pm    Post subject: Reply with quote

The verdict isn't completely out yet.. but so far it is pointing to an odd case where I can't use the same variable name in cases like this:
Code:

brushlayers.forEach(function(entry){
     //code stuff
});
                
historylist.forEach(function(entry){
    //code stuff
});

I think the "entry" portion needs to be unique. Since I changed those to be entry1 entry2 entry3, etc, and it started working for the person using linux.
Anyone have any ideas as to why that might be the case???
View user's profile Send private message Visit poster's website
Reply to topic GDR Forum Index -> Game Developer's Refuge -> Development Log - a pixel editor thing Page Previous  1, 2, 3  Next
Game Developer's Refuge
is proudly hosted by,

HostGator

All trademarks and copyrights on this page are owned by their respective owners. All comments owned by their respective posters.
phpBB code © 2001, 2005 phpBB Group. Other message board code © Kevin Reems.