next »

[happymonster]

Tixel Editor (Work in Progress – Step 1: Introduction)

I am starting work on a new project which is based on an expanded and much more powerful version of the Tixel Engine I used in my WIP SpaceHero Command.

A tixel is a Tiled Pixel and means that each pixel is represented by a small tile which can be recoloured and drawn in different orientations (rotated, flipped, etc..) This is done on program start-up to create the sprites used in the game and means there is no performance penalty in using the resulting images as they are just normal textures.



I originally created the engine as an effective way to be able to do graphics at multiple screen resolutions without the graphics becoming pixelated or blurred as the resolution increases. This works because the tiles used are bilinear filtered to a specified scaling size when the images are constructed so that different sized graphics can be created. By using curved and angled tixel shapes to smooth corners and edges we can create smooth edged graphics at multiple sizes (when scaled by an integer factor). One additional benefit is that graphics are automatically anti-aliased at lower scale factors due to the curved and angled tixel shapes being bilinear filtered down while solid pixels are untouched.



This system in effect becomes a hybrid of vector and raster based graphics. It’s definitely not as flexible as vector graphics in terms of resizing or rotation but allows smooth vector style graphics to be built and scaled in integer steps while still using a raster style pixel editor.

The engine used in SpaceHero Command was a bit inflexible and limited and had some hard-coded elements to suit the game. The new engine I am creating for this Tixel Editor will be much more flexible and powerful and will let you create images as art or for use in your games.

I intend for the editor to be completely free to use and I’d like to make a free DLL library for C / C++ so that people can load and create tixel graphics directly in their own programs. I would love to see people using this to make some beautiful art and see this editor and engine being used to create the graphics for their games.  

EDIT:
Download links:
Tixel Editor - http://www.retroidea.com/Tixel_Release.zip
Tixel Library - http://www.retroidea.com/Tixel_Library_Release.zip

[happymonster]

Tixel Editor (Work in Progress – Step 2: Tixel Specification Design)

As I said previously the engine used in SpaceHero Command had several hard coded elements. For example there were fixed palette entries which were turned into forms of transparency or vertical gradient shading within the engine. These were implemented as the game developed and so were then hardcoded into the engine which was never designed for transparency or shading in the first place.

The old engine used had one background colour and one foreground colour per tixel (from a palette of 64 colours) and upto 256 different shapes were supported per tixel.

For the new engine to be used in the Tixel Editor I want it to be much more powerful. So I have designed the following specifications for the new tixel format:

• A fixed colour palette of upto 2048 colours, each of which can have 16 levels of transparency.
• 3 layers per tixels - each with 2 colours to be used for shading effects. These layers consist of a background layer with no shape data, then two layers of overlapped shapes (so a kind of 2.5 layer system).
• Upto 256 shapes to use, all of which can be rotated 0, 90, 180 or 270 degrees, flipped horizontally and/or vertically, and the shape can also be inverted. This means 32 different orientation possibilities per shape.
• Upto 256 patterns to use within the shapes, which define how to blend between the two colours used in each tixel layer. Each of these patterns can also be rotated 0, 90, 180 or 270 degrees, flipped horizontally and/or vertically, and the shape can also be inverted. This means 32 different orientation possibilities per pattern

This might not make sense without an image to show you how it looks unfortunately, and I am not the clearest writer when it comes to technical explanations. But I have tested the implementation of this specification and it all works ok in practice. You will just have to try to imagine how it will work for now and what the possibilities are..

[happymonster]

Tixel Editor (Work in Progress – Step 3: Programming Language and Library)

For the Tixel Editor I will use SDL for the first time. I have previously used a friend’s library but got increasingly frustrated with bugs and other missing functionality. I tried out SDL recently and have been impressed with how easy it is to use. For this kind of project I don’t need high-level features and so SDL seems just what I need. I’ve done some test programs and like how it works.

I have done some prototyping and all the features I will need for the Tixel Editor work so I can’t see any issues at the moment from using SDL. As normal I will use C with a bit of C++ for the programming language.

I intend to make a publically available DLL so that people can use Tixel images in their own programs. This won’t need the SDL library, but may need the Zlib DLL to decompress the Tixel image files.

[Paul Jeffries]

This is awesome.  I always thought SHC had a cool and unique aesthetic, so I'll be interested to see where this goes.

[happymonster]

Thank you!

It is artists that will really sell it if they use it to make some good stuff.

[happymonster]

Tixel Editor (Work in Progress – Step 4: User Interface Elements)

Like paint programs there are certain user elements that are needed to be displayed on the screen that a user can interact with. Because some of these may be quite large I’ve tried different sizes and positions on the screen to see what both looks and works best. I’ve been experimenting with various graphical styles as well. I don’t like programming User Interfaces but there is something that I like about the design of them and seeing how they develop and change for phones (Android, Windows, iPhones) and for computer based operating systems as well.

The elements we need for the tixel editor are:

• Colours
• Patterns
• Pattern Orientation
• Shapes
• Shape Orientation
• Tools
• Canvas

Based on my testing I have combined Pattern and Pattern Orientation into one UI panel and I have done the same with Shapes and Shape Orientation. This means the interface appear less cluttered and more cohesive (at least to me), so it now is:

• Colours
• Patterns (and Orientation)
• Shapes (and Orientation)
• Tools
• Canvas

[happymonster]

Tixel Editor (Work in Progress – Step 5: Importing & Exporting)

I know from experience that writing a paint program with all the tools that people expect is a big undertaking. Things will be no different for this tixel editor. However to make it easier (and for a way I imagine a lot of people would like to work) is that I am going to add the ability to import a bitmap image into the editor as solid tixel blocks.

From there I can add the ability to export the tixel colour data out as a bitmap and the ability to merge colour information back into the editor into an existing tixel image so that only the colours are changed rather than the tiles and other details.

This will make it easier to edit between a paint program of your choice and work with the graphics in the tixel editor.

I've already been working on this and can now convert a BMP image into a tixel one in the editor.

[happymonster]

Tixel Editor (Work in Progress – Step 6: Automatic loading and saving)

Like my paint program D-Pixel I will have automatic loading and saving of the current tixel worked on on startup and exit. This will be saved separately (a different file location) from manually saved tixel files but will mean it's easier to resume work and quit without forgetting to save files.

In other news, I'm really liking SDL and it fixes several bugs I tried to workaround in the previous engine I used for my other projects to do with opening a window or the windows file selector. I should have moved to it ages ago really!

The editor is now taking shape and I'll be looking to implement loading and saving next I think.

[pmprog]

I too like the look of this. Any chance to have a play with the editor?

[happymonster]

It's not quite ready for that yet - although I've just implemented loading and saving via pressing L or S. I need to draw icons and add them into the Tools for loading and saving though.

[pmprog]

Cool, well I'll be keeping an eye on this thread

[happymonster]

 

[happymonster]

I've been busy these last few days with my family, but have been working on the first rough icons when I've had some spare time..

[Snow]

I'm very interested in this and will definitely be following development. Will the program have a sizable thumbnail window while creating art? So that you can see what your sprites look like at a certain size while you're editing. It's a dumb question I know, but I'm asking anyway.

I also like that you're going to be releasing a free library as well. It just means I have to learn C++ but I've been meaning to anyway.

Thank you for this awesome work!

[happymonster]

Thanks

At the moment it has a canvas window which you draw on that you can zoom from x1 to x64 with a slider or by using the mousewheel while pressing control.

All of this is still up in the air as I see what works and what doesn't.

(Icons are taking shape - only basic icons needed for the first version)

[happymonster]

Tixel Editor (Work in Progress – Step 7: Taking shape)

Ok, I've got a lot more done in the last few days. So I thought it would be interesting for people to read where we are with the Editor so far.

At the moment you can select colours, patterns and shapes and then draw with them on the canvas.
You can change the orientation of the patterns and shapes as well.
You can alter the canvas zoom amount from x1 to x64.
You can load and save tixel files as well as import bitmap graphics into the editor.
I have exporting bitmaps as PNG's partially working (no transparency yet).
You can also clear the canvas and apply a visual grid over the canvas to help with drawing.

Todo:
I have 14 icons for the tools done, but need to implement some of these drawing tools in the program.
Need to add in support for transparency when exporting bitmaps.
Layer 2 tixels needs some work still.
Need to add in scrolling around the canvas.
More error checking needed..

[happymonster]

You can now export PNG files with transparency.
Scrolling now works.

[happymonster]

I seem to have a bit of a mental block with how to do some of the drawing tools. Trying to think though what would be the most intuitive and easy to use way to do things and not getting anywhere. Maybe it would be easier to just have the basic tools in first and see how it works and what other people think would help?

In other news I've added some more shapes and fixed a few bugs. Hopefully I will work out how best to do things soon so I can start the drawing tools.

[pmprog]

Maybe it would be easier to just have the basic tools in first and see how it works and what other people think would help?

Yeah, you might find you're trying to add tools which just aren't needed.

[happymonster]

Tixel Editor (Work in Progress – Step 8: A bit more going on behind the scenes)

Ok, so I thought it would be interesting to show you an example of what I've just added to make editing tixels easier and more intuitive..

Let's say you draw an area of solid blue tiles on the canvas and then you draw some white solid tiles over those. You then decide you want to smooth one of the squares of by using one of the straight diagonal lines or curve tiles, like this:

Code:

....
./##
####

. = blue, # = white and / = white diagonal tile.

Now we know that the tile should be white on a blue background, but how does the program know that? As far as it can see you have a white solid background tile and now you want to overlay a white diagonal tile. There is no blue colour information in this tixel. The answer of course is to add some extra coding to make the editor look at the surrounding tiles for the background colour. It does this based on what the orientation is of the tixel tile and if it can't find a different colour in that direction it looks at a secondary direction, then a 3rd or a 4th direction if it can't find any different colours. If it still can't find different colours in any of the surrounding tixels then it makes the background transparent instead:

Code:

.1
2/3
.4

(Order of directions: 1st, 2nd, 3rd and 4th to look at. This changes based on rotation, flipping and inverting of the tixel shape)

This is the kind of thing I've been adding on that you don't necessarily see but which makes it all work more naturally when drawing.