next »

[pmprog]

Interesting way of doing it. But could make certain things quite difficult to produce.

For example

Code:

 |.|
 |.|
 |/|
 |#|
 |#|
 |@|
 |.|
 |.|

| = Black
. = White
/ = Diagonal white
# = Red
@ = Diagonal red

So, it's  barber's pole with a black border.

So the diagonals will look above for a colour (which will be the same), then left/right which will pick up black.

How diffficult would it be to just add a "background colour" field to your data structures? That field would also reduce any computation, and remove any abiguity of what colour would appear

[happymonster]

I think in the case you illustrated the diagonals would normally be composed of two tixels:
 

./.|
/_|
__
| /
|/

So the top triangle would pick up the colour above and the bottom one would pick up the colour below.

There is a background field colour used, but if you import a picture into the tixel editor then there is still no other information to use besides the one colour per pixel, or the surrounding colours.

It's a tricky problem!

[happymonster]

Tixel Editor (Work in Progress – Step 9: When is transparency not transparency?)

Another issue I've just ran into.. The editor allows you to set a colour's transparency from fully opaque to fully transparent. Why would you want to draw a fully transparent shape though? Well, if you import a bitmap with a black background and you want to turn the black pixels into transparent ones you would need this. However if you move your cursor over the black tixel the editor would try to draw a fully transparent shape over the black tixel with the result that you would see nothing!

In this case I've made the editor turn the black tixel into a fully transparent solid one for the cursor and when you draw over the canvas.

[happymonster]

Tixel Editor (Work in Progress – Step 10: Tool icons)

The best way to test the editor is to actually use it to draw and edit a tixel image. So I drew the Editor's two colour icons in a paint program, imported the image into the editor and then edited the icons themselves. This helps me find and fix any bugs and improve how it works.

Here's how the icons look in the editor canvas (slightly bigger than would be displayed on screen at 1920 x 1080):


(They all have tooltips that appear when you move over them in the editor with the mouse)

[happymonster]

I've implemented 3 drawing modes:

• Normal drawing mode (Left mouse button : Draw a shape, Right mouse button : Draw a solid square)
• Colour drawing mode (Left mouse button : colour in shape under mouse cursor - can work on tixel shape or background, Right mouse button : Get colour from pixel underneath mouse cursor)
• Shape drawing mode (Left mouse button : Change shape - whilst keeping orientation, Right mouse button : Get shape from tixel) - Only partially implemented.

I've added in keyboard shortcuts for these and help text which is displayed above the canvas.

Also bug fixes, and other bits and pieces.

[happymonster]

I now have export colours to bitmap and merge colours from bitmap implemented. This lets you edit colours and add new drawing with a drawing program and then reload back into the Tixel Editor. I realised when I added it that some paint programs don't really deal with transparency so I've made these options export pure transparency as bright pink (Red: 255, Green: 0, Blue: 255). This colour was used historically in early PC development anyway.. Then the editor converts any pixels of these colours into pure transparent tixels.

These two features now means that I have 3 different Load and Save icons to show, which are proving difficult to draw! Although I wanted single colour icons I might have to use colours to differentiate between the Load / Save types.

[happymonster]

Tixel Editor (Work in Progress – Step 11: Screenshot)

I've got a lot more done on the Editor although I still have a few things I need to add / fix before any release. Since I haven't given you many images, here is a screenshot of the editor at a minimum screen resolution (1366 x 768). In this screenshot I am copying out some nice animal designs from a card. Doing this helps me see what works and what doesn't when trying to do the shapes for the designs.

[happymonster]

From doing this test I found a few more bugs that I've fixed and also realised I needed some 3 x 3 circle shapes as well as a few others. So I've added those now (as well as 5 x 5 circle shapes). I have a few more things I've noticed still need fixing as well.

[Kenney]

Really excited about this! I've had to create razor sharp icons in the past, I've used Fonstruct back then which is far from ideal. Will you support export to SVG or any other vector format?

[happymonster]

Hi Kenney,

It can't save to vector format as the tiles themselves are bitmaps. But I suppose you could try running it through a vectorising program?

Glad to hear you are looking forward to it though! Didn't seem like there was much interest before you posted.

[Kenney]

But I suppose you could try running it through a vectorising program?

Sounds like a plan! Could you post a high resolution example output? I can try get it through the vectorising program I normally use, would be cool to see the results of that.

[happymonster]

Try this:

http://www.retroidea.com/test.png

[Kenney]

That went really well! Can't find an error in the vector result. I've used Vector Magic btw.



Output SVG:
http://ge.tt/7nL0Rr62/v/0?c

[happymonster]

[Gtoknu]

Instead of a pass through another program, maybe you could implement the vectorization right into Tixel Editor? "Export SVG" could save a PNG temporarily, convert it to SVG and delete the temp image. I'm pretty sure I've seen some papers on converting images to vector before...

[happymonster]

Yes, but that's beyond the scope of what I'm able to do easily.

Besides which I thought these kind of programs had a lot of work put into them to deal with uncertainties in vectorising in some situations?

[Kenney]

Yep, Vector Magic is pretty dang advanced. It isn't called magic for nothing!
Also, Adobe Illustrator does a horrible job of converting to vector.

[happymonster]

I added in a 256 level undo system last night (no redo yet), which is something I felt was really important before people try to use it.

I'm tentatively looking at an Alpha release within the next few days. 

[happymonster]

Things I've done today:

• Fixed bug where second layer tixels weren't being drawn correctly (strange colours).
• Added in more help text when drawing in the canvas.
• Added a small highlight square in the palette swatch for the colour your mouse pointer is currently over.
• When in pattern mode, Pressing X, Y, I and Z on the keyboard (or scrolling the mouse wheel) now alter the orientation of the pattern, not the shape.
• When drawing with the second layer option on, a tixel is drawn instead to layer 1 if there is no shape currently there. This then lets you overlay a second tixel over that without wasting a layer.
• In normal drawing, left mouse button draws a shape and right mouse button draws a solid square tixel. But if you right click over a solid square tixel instead of any empty one or a shape tixel, then the drawing goes into erase mode where you can erase tixels from the canvas. It's a quick and easy to use erase mode without having to touch the keyboard.

[Kenney]

Nice job!