Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Work in Progress / PainTex | 2D Sprite/Texture Editor

Author
Message
ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 3rd Dec 2014 21:48
Since last week I've been working on a small image editor which is supposed to increase the asset quality of a game I'm working on by letting me add details and shading to sprites and textures without too much effort.

This is mainly achieved by editing a bumpmap and then baking the resulting specular light on top of the very simple original image. It works quite well so far, and while the output certainly isn't perfect, it's a step into the right direction.


General layout of the editor: Colored image on the left (the red/yellow squares here indicate that certain parts of the image are masked out and hence will not affected by the drawing tools), bumpmap on the right


Generally, the workflow looks like this:
1. Create a very rough first draft of your image with any image editing software (say MS Paint)
2. Import into the editor
3. Draw bumpmap
4. Adjust light settings until the desired look is achieved
5. Save the project, which will automatically export the final composition as well as the bumpmap



Left: Simple bed shape made in Paint; Right: Result after spending about 3 minutes on it with PainTex


This video demonstrates how such a bed sprite can be obtained in the software.

Right now there are quite a few drawing tools available to edit the bumpmap, most notably a standard brush, lighten/darken, blur and a pattern brush - the latter can be used to apply certain predefined textures to the bumpmap as depicted in the image below or in this video.



The two "snake" shapes were created with a standard brush, the four texture types in the corners were added using the pattern brush.



Finally, the editor allows editing the image and bumpmap using multiple layers. While one layer is enough in many cases, sometimes you want to divide individual aspects of the bumpmap. Each layer has its own bumpmap as well as its own light settings. One way to use multiple layers is to define the general structure of an object in layer 1, and use the second one to add the finer details. This way high and low frequency aspects of the texture can be manipulated independently.
This concept, as well as the useful color gradient tool are demonstrated in the video below.






Obviously the GUI isn't final yet, and generally controls and interaction aren't perfect. I might fix a few things, add a bunch of tools if any useful ones come to mind, make sure it's a bit more appealing visually and ideally release it sooner or later. Can't promise anything though, I've got a lot of things to deal with other than this, and for now I'm happy I got it to a usable state before this weekend's Ludum Dare competition (which I intend to take part in, probably using this editor to create my assets).

Any kind of input and feedback is very welcome. Otherwise I'll just update this thread every now and then - if there will be any updates, that is.


- Shellfish Games



Sidenote: The patterns (metal, bricks and cracks) used to create these images were taken from different sources and are not made by me. I just had them stored somewhere on my hard disk, so I'll have to replace them eventually.

Chris Tate
DBPro Master
8
Years of Service
User Offline
Joined: 29th Aug 2008
Location: London, England
Posted: 4th Dec 2014 12:04 Edited at: 4th Dec 2014 12:17
Wow, I enjoyed every second of that video; great stuff. Kicks Photoshop's layer style's ass. I also like the music.

Why did you not choose to use windows GUI? Are you intending to focus on building your own GUI system for the game aswell as the tool?

I am looking forward to seeing more of your stuff. I like your website and your games, would be nice to see where this is all going.

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 4th Dec 2014 17:25
I experimented a bit with Photoshop last month, so I might have taken some inspiration from there.. already thought about implementing layer masks as well, but I'm not too sure if they'd even be that useful.

I don't know honestly, that's the usual way I create GUIs. I simply write those slider and button functions as that's usually faster than setting everything up with BlueGUI or any other GUI system I'm not familiar with. Certainly not the best idea, but well, it's just an advanced form of lazyness I guess. (Also, the same way I prefer paste sprite over persistent sprites, I like to have my GUI elements exist only when I call the respective function within the main loop, instead of having to set them up initially and let them "exist on their own". Can't even tell why, I just prefer the other way, so I just write those GUI functions using that method)

About my stuff, well, apart from Ludum Dare this weekend there are two games relatively far in development which I'm going to present here sooner rather than later. Possibly my last bigger projects made in DBP, so I'm giving everything.

Chris Tate
DBPro Master
8
Years of Service
User Offline
Joined: 29th Aug 2008
Location: London, England
Posted: 4th Dec 2014 18:56 Edited at: 4th Dec 2014 18:59
Quote: "I prefer paste sprite over persistent sprites"


I tend to use sprites for pasting aswell. I have still got to implement the advanced sprites functions, it seems like a useful commandset.

Quote: "I'm going to present here sooner rather than later. Possibly my last bigger projects made in DBP"


So, are you moving on from DBP, or moving on from large projects?


Quote: "I simply write those slider and button functions as that's usually faster than setting everything up with BlueGUI or any other GUI system"


Well as long as you are getting what you want from your GUI, you have succeed. Sometimes using a GUI system makes a complexity what would have been easier without it; other times the GUI system makes light work of what would have been a pain without it.

After spending a year working on GUI alone, I can honestly say that the first month of using GUI systems is irritating to the stomach and often a depressing unlearning process because the usual routine becomes a distraction from learning someone else's. The usual method becomes redundant and your programming style has to adapt to the third party system.

But it is worth a little patience with these systems; one day they end up being a third hand when it comes to tool development; adding a new component becomes a matter of copying and pasting a bit of code which once confused you, but now seems like a walk in the park; programming new interfaces in minutes, being able to interact with the operating systems UI functions, taking advantage of the operating system's component features and upgrades etc etc.

Either way, what you are doing looks promising.

seppgirty
FPSC Reloaded Backer
7
Years of Service
User Offline
Joined: 3rd Jul 2009
Location: pittsburgh, pa.
Posted: 5th Dec 2014 00:24
WOW, This is really good! Do you plan on releasing it?

gamer, lover, filmmaker
ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 5th Dec 2014 00:26 Edited at: 5th Dec 2014 00:30
I'm using Advanced Sprites for pretty much all my projects for almost a year now, very fast and the rendered sprites look much better than DBP sprites due to the inbuilt antialiasing, so I can surely recommend it. I posted a small library for it a while ago, including camera commands etc., in case that helps you in any way.

Quote: "So, are you moving on from DBP, or moving on from large projects?"


From DBP, at least when it comes to these large long term projects. Well at least that's the plan. I'll probably still use it for game jams and prototyping.


Regarding the GUI systems, I absolutely see what you mean, and you're certainly right. In this specific case, I initially wasn't planning on spending more than two or three days on the program and just wanted the basic functionality for me personally, so I just took the quickest route there was, and that was spending 5 minutes on writing a simple slider function. As it turned out though the program became promising enough for me to spend more time on it and eventually post it here, so I might replace those quickly hacked in sliders (and the GUI in general) with something more suitable eventually.


Edit: Thank you seppgirty! I posted this thread intending to release the program at some point (i.e. it's not definitely gonna happen, but I hope so). It's not my top priority though, so it's more of a way to find out if there's any actual demand for it, and if I should spend the time required to bring it to a releasable state.

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 5th Dec 2014 17:25 Edited at: 5th Dec 2014 17:34
Ludum Dare starts in about 10 hours, so I'm adding the finishing touches right now - at least for the build I'm gonna use (which probably isn't that far away from a release build).

Apart from proper saving and loading, which wasn't really implemented until now, I've mainly worked on two things.
Firstly the brushes can handle quick mouse movements now and will be applied to a certain number of steps between the old and new mouse position, on top of that the user can now define the drawing behaviour (when pressing the mouse button, only when the mouse is moved, or only once when clicking the button).
Secondly, this:



When working with several layers, a layer can now be displaced by refering to the bump map of the layer below. The displacement can be scaled up and down arbitrarily. Right now this is applied directly when drawing to the top layer, so changes to the bottom layer afterwards would not affect the top layer's displacement and it has to be redrawn. I'm gonna change that eventually to make sure the displacement is dynamic, but certainly not before this weekend.

What remains to be done today is an improved selection tool and that's more or less it.


Also, regarding the initial post's sidenote, I remade the textures now and the program uses my own ones. They might not be as good as the previous ones, but at least I've got the right to use them (and they're proper bump maps instead of colored textures. And they're seamless (at least the original ones, these are cropped down)).



Brick Wall



Cracked Ground - small 'behind the scenes' story: I made this one in DBP, took quite a while, and due to small bugs in the algorithm and/or badly chosen parameters,
produced these fancy side products: Img1 Img2



That's it for now. I assume there won't be any news over the weekend as I'll be busy making a game, but who knows.

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 5th Dec 2014 23:35 Edited at: 5th Dec 2014 23:37
Edit: a wild triple post appears. Totally unintended.


Well, one more update before LD starts.

I just remade a table sprite for another project I'm working on. Top down perspective, so, well, from above. The old one, carefully designed in Paint:



And now the new one, quickly put together with PainTex:



tl;dr: It's useful!

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 11th Dec 2014 00:09
And on it goes!

Firstly, improved shading, now allows for more shiny materials as well:



Secondly, as I said I was using it for the Ludum Dare game - not as extensively as I thought since the game turned out to be mostly 3D, but it did its job.



..the game's title graphic, obviously.



Spikes for a 2D platformer game within the 3D game.



..a snowflake.

And finally, both the snowman and the fancy wall texture in this screenshot were made with PainTex:




Got a few things on my list now that I'm going to implement next, most notably editing in realtime without downscaling the image (right now it's usually drawn in 50% width and height to make sure the lighting works fast enough, so that will be sorted out to avoid basically working on thumbnails..).

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 14th Dec 2014 01:36
Editing in default size is now possible which unsurprisingly makes things a lot easier. It's also possible to assign color gradients depending on the bump maps slope rather than height, which, when combined with each other, is pretty useful for texturing landscape heightmaps. However, right now only colors can be assigned to those gradients and I'd like to use textures instead, which will require some extra work.

The light settings can be altered further now, you can set intensity of both highlights and shadows separately. I'm considering adding actual hard shadows as well for better results (right now it's just that phong illumination kind of thing checking surface angle vs light source angle, but no actual shadows).

Finally a lot of optimization remains to be done. It's fine most of the time, but changing the light settings usually requires the full image to be updated, which takes about half a second for a size of 512x512 pixels and that's not quite as responsive as it should be.

Anyway, in the meantime here's a picture of a rusty metal thing. Sort of. Not realistic rust or anything, but I think it's nice how the combination of light settings, height gradients and surface textures creates these very tactile looking materials.



seppgirty
FPSC Reloaded Backer
7
Years of Service
User Offline
Joined: 3rd Jul 2009
Location: pittsburgh, pa.
Posted: 14th Dec 2014 16:32
Great work! Keep us updated.

gamer, lover, filmmaker
ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 16th Dec 2014 16:53
I sure will!

Just wrote a new brush to simulate erosion for easier landscaping (although that's still not meant to be a central aspect of the software) and while it doesn't behave perfect yet the results are still pretty good. Also the program can now render hard shadows - not yet in real time (i.e. updating the shadows directly when painting) but after pressing a button it calculates them which takes about .5 seconds.



Chris Tate
DBPro Master
8
Years of Service
User Offline
Joined: 29th Aug 2008
Location: London, England
Posted: 16th Dec 2014 21:45
It looks lovely. There is so much you could achieve with your effect.

seppgirty
FPSC Reloaded Backer
7
Years of Service
User Offline
Joined: 3rd Jul 2009
Location: pittsburgh, pa.
Posted: 18th Dec 2014 01:34
This would be great for texturing clothing on a 3d mesh. Can you import a jpeg/bmp/png... image as a background and paint layers over it?

I'm attaching a sample of a uv map in this post so you can see what i mean.

gamer, lover, filmmaker

Attachments

Login to view attachments
ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 18th Dec 2014 14:10
Generally, yes. Currently the workflow isn't great though, in this case I had to reduce the image to 512² first (the original size caused a crash for some reason, will have to look into that ), copy it into a new project's folder as there is no actual import function yet, just loading existing projects. And while changing the surface texture is pretty simple, changing the color right now is not - you can't paint colors yet, you can just use the height based color gradient and bring a part of the texture to a certain height to colorize it. I'm planning to add a "layer 0" where you don't edit a bumpmap, but the base image directly using RGBA values.

So what it comes down to: I hope this will work well in the future, but right now you need the support of additional software to get good results, and it's generally quite a struggle.



seppgirty
FPSC Reloaded Backer
7
Years of Service
User Offline
Joined: 3rd Jul 2009
Location: pittsburgh, pa.
Posted: 19th Dec 2014 01:03
Sounds like you have a lot to do. (not sure how far and what you want to do.) Bit lookin' good though.

gamer, lover, filmmaker
ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 19th Dec 2014 20:43
Heh, yes indeed. Turns out I decided to restart from scratch. Due to the fact that I started relatively small and kept adding new stuff afterwards (including the somewhat complex layer system) the whole code is a mess. I've got a pretty clear picture of what I'm going to do now and how to improve performance. I'll probably use shader effects for the specular components of the images to benefit from hardware acceleration, and change the layer system in a way that gives you much more control over structure, coloring and transparency.
Furthermore the old code for tools and brushes will be replaced my something more flexible, allowing you to use custom brush shapes and different blend modes. And lastly I'll implement relatively simple spline based graphs (basically smooth mappings from [0,1] to [0,1]) to make pretty much everything more flexible, including brushes, gradients and the auto bumping.
Well, at least this way I've got some exciting work for the rest of the year.

Also, here's a small football.. soccer ball.. whatever you like to call it.



seppgirty
FPSC Reloaded Backer
7
Years of Service
User Offline
Joined: 3rd Jul 2009
Location: pittsburgh, pa.
Posted: 20th Dec 2014 17:38
The football looks great. Glad you have a clearer picture on what you want to achieve. Keep up the hard work and keep us updated. I hope you see your way to the end on this project.

gamer, lover, filmmaker
ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 21st Dec 2014 22:14 Edited at: 21st Dec 2014 22:22
It's slowly (..well rather quickly actually) taking shape.



Instead of just bumpmap and the output you now see a bunch of images at once. Base Image is the coloring (which previously had to be imported), the Layer Mask is basically the layer's alpha channel, bump base and bump detail are combined (as in added) to create the normal map (which, just as the remaining two images, can't be altered directly but is a product of the first 4 images), layer out is the result of the current layer when combining all the pieces and Full Composition is the composition of all existing layers.
In the screenshot you see just a single layer, so each layer has all these images, you can (not yet but soon) define the placement, rotation, scaling and possible blend mode of each layer within the final composition.
The yellow and red frame around the bump maps in the image above show which image you're drawing in and to which image it will be directed respectively. This allows for instance to edit the bump maps or layer mask directly within the Layer Out panel, or any other combination.. although editing Bump Detail within Bump Base doesn't make much sense admittedly.

The specularity effect is now realized using a shader effect, so even when constantly changing the light position the software runs at about 1000FPS, which obviously is much smoother than the ~10FPS I had with the non hardware accelerated solution. Note however that using a brush reduces the FPS significantly, depending on its size, but it's still running smoothly.

There's still a lot of stuff from the previous version that isn't implemented yet in the new one, but I'm getting there. And, well, the code is beautiful!

Oh right, and you can move the camera freely - so zooming onto the image you want to edit is completely possible. I guess reordering them depending on your personal preference will also be a thing. For instance there's not really any need to see the normal map while editing stuff, so you could just hide it or move it to the side in order to focus on the panels you actually need.

Chris Tate
DBPro Master
8
Years of Service
User Offline
Joined: 29th Aug 2008
Location: London, England
Posted: 21st Dec 2014 23:05
Great idea, being able to edit the parts of the composition will be very convenient.

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 22nd Dec 2014 01:18 Edited at: 22nd Dec 2014 01:19
Indeed, and the way I see it this solves the problem of artifacts on the edges of objects within the image. They're pretty easy to see on the second screenshot at the top of the thread, at the edges of the blanket and pillow - due to the selection masks I used, there were no smooth transitions. Using different layers and layer masks however, that's not an issue anymore.

Anyway, I'm through for today. Added a bunch of stuff that was still missing, like the pattern brush, several sliders on the right and usable color gradients. There's a set of easily extendable default gradients now for things such as landscapes that you might need more often.

This is the "explosion" gradient applied on a weird brick metal hybrid texture:



So.. we'll see what I get done tomorrow. Planning to work on support for multiple layers which isn't in yet, plus seamless and symmetric editing, and maybe reintroducing selection masks and that useful autobump feature.

Chris Tate
DBPro Master
8
Years of Service
User Offline
Joined: 29th Aug 2008
Location: London, England
Posted: 22nd Dec 2014 10:49
Are you using imagekit for the layers or 3D objects?

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 22nd Dec 2014 12:06
Yes indeed ImageKit. Both for effects (lighting and applying the layer mask as alpha channel to several images) and pasting the images with proper filtering to avoid DBPs typical pixelization when zooming out.
For a few things I use memblocks and calculate the pixel data manually, e.g. the height gradients and the normal map.
For the layer composition I'll probably just paste the individual layer out images on top of each other in their respective order.

Chris Tate
DBPro Master
8
Years of Service
User Offline
Joined: 29th Aug 2008
Location: London, England
Posted: 22nd Dec 2014 12:29 Edited at: 22nd Dec 2014 12:31
Image kit must be brilliant for this kind of stuff. I thought about using it for my editor, but opted to do everything in the shaders, windows UI functions and another development tool.

Your brick material looks good, and the app looks like alot of fun to work on.

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 23rd Dec 2014 01:41
Didn't have much time today, but multiple layers are now implemented. The composition isn't however, so I've got nothing to show.

Quote: "Image kit must be brilliant for this kind of stuff."


Absolutely, I can't even imagine working without it in DBP, use it for pretty much every project. If SvenB was still around, I'd write him a personal thank you note.

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 23rd Dec 2014 16:21
Selection Masks and AutoBumping are working now. Also I reordered the individual components within the workspace - the 3 you'll need the most (Base Color, Base Bump and Layer Out) are in the middle row, the rest around them where it makes sense. I guess I'm going to swap Bump Base and Layer Out though in order to have the result right in the center, so it's always on the screen no matter which component you're currently editing, even if you're zoomed in.



ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 31st Dec 2014 13:22
I haven't had that much time this previous week due to certain cultural events and stuff, but I added another handy small feature today - you can now link components to each other, so they will sort of clone each other's data. This can be pretty useful in some cases, for instance if you want your alpha channel to depend on the bump map. In that case you can now connect these two components and also assign a spline to map the bump maps values to a different range if required.

As an example, take this explosion sprite:



Here the layer mask (i.e. alpha channel) depends directly on the Bump Base component. You wouldn't necessarily need a spline here, but I assigned a sqrt(x) function to make it not quite as transparent. If you edit the bump map these changes will be applied to the layer mask and hence the layer's alpha channel in real time.

seppgirty
FPSC Reloaded Backer
7
Years of Service
User Offline
Joined: 3rd Jul 2009
Location: pittsburgh, pa.
Posted: 1st Jan 2015 19:24
Looking good. Keep it up.

gamer, lover, filmmaker
ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 8th Jan 2015 16:56 Edited at: 8th Jan 2015 16:57
Not too many news unfortunately as a strange, strange bug kept (and still keeps) me busy. Pasting a completely white image with variations in the alpha channel only for some reason changes the color values of render target when pasted into it in ways that don't make the slightest bit of sense (i.e. the render target gets darker proportionally to the alpha value of each pixel, despite the pasted image being 0xFFFFFF white). I haven't got a clue what causes this and how to prevent it, but well, I guess I'll figure it out eventually. (The most obvious cause would be a wrong blend mode, but that's not it)

Meanwhile I got all the previously existing brushes implemented in the new version in a slightly optimized manner. The erosion is still lacking a few randomization features to make it more natural, but I guess it already looks better than the version I posted earlier.



Furthermore I worked on a small prototype for procedural texture editing within the editor that might be added to the software sooner or later to make the whole thing more flexible. But that'll take some time and isn't too important for the program in its current state.

seppgirty
FPSC Reloaded Backer
7
Years of Service
User Offline
Joined: 3rd Jul 2009
Location: pittsburgh, pa.
Posted: 9th Jan 2015 00:36
Wow, looks great. Looks like things are really shaping up.

gamer, lover, filmmaker
Chris Tate
DBPro Master
8
Years of Service
User Offline
Joined: 29th Aug 2008
Location: London, England
Posted: 9th Jan 2015 08:56 Edited at: 9th Jan 2015 08:57
Quote: "the render target gets darker proportionally to the alpha value of each pixel, despite the pasted image being 0xFFFFFF"


I think that should be 0xFFFFFFFF (8 hexidecimal digits instead of 6 for the 4 colour channels )

ShellfishGames
4
Years of Service
User Offline
Joined: 6th Feb 2013
Location:
Posted: 9th Jan 2015 12:34
The alpha channel doesn't have a single value but it varies throughout the image, so 0xFFFFFF is the "constant" part. I'm going to try creating a reduced example of that weird behaviour outside the program, maybe it'll solve the problem.

baxslash
10
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 5th Feb 2015 17:19
Wow, this is awesome! Will you be releasing it? I'd be very interested in owning a copy.


Using AppGameKit V2 Tier 1

Login to post a reply

Server time is: 2017-06-23 19:47:23
Your offset time is: 2017-06-23 19:47:23