Adding to the toolset
Having finished the graphics for the tileset I now have to think about getting the data inside the game. Luckily Multipaint offers a handy option of exporting an image as a text file with byte data.
And as I know which cells I use for the tiles I would just need to copy and paste the respective tiles from the byte data and reformat it a bit to fit my code. But that would be pretty tedious. Especially when I really get to creating the game with multiple different dungeon tilesets.
So I decided I would need a tool that can do that for me.
Getting Angular with it
As I am a frontend developer in my day job and angular is the weapon of choice in my team I started a little project using that language.
My goal was it to create a tool which automatically cuts and formats the exported data from Multipaint into a tileset dataset I can use in my games code.
So to start easy I just created a simple webform with two text areas, one for inputting the file and one for outputting the data. Going from here I wrote a simple parsing algorithm. Not very pretty but it gets the job done.
I attached the starting script to the input event of the text area in which the user is supposed to paste the data from the exported file.
I read the value from the event and split it at the ‘;’ character. Next I use that array to split the text into an array of lines. One for the bitmap data and two for the different colors for each cell.
Finally I arrange the bytes in a way that resembles the matrix of a strip.
For the colors I use a similar method. First I split the string at the blank so I get an array with just the byte word and one with just the data. I filter the byte part so I just get the data and join them with a comma and split the data again so I get an array of just the numbers.
To output the data I use an observable, so that any changes to the input data immediately updates the result.
I build the output string by iterating through the data arrays and inserting comments at appropriate positions. First the bitmap data followed by the appropriate two colors.
Refining and preview
So far the app does what I need it to but there definitely is some room for improvement. For starters I want to try if I can show a preview of the data.
So I created a new component to which I input the tilesetdata observable. I map the tilestdata into three new observables for the pixel and color data.
For the pixel data I create a multidimensional array and convert the strings into numbers.
The colors are a similar affair. I traverse the array and create a new cut for every four colors which is the tiles cell width.
Inside the component is another that creates the individual pixels of the image. I iterate over every pixel line and do a binary comparison to see if a pixel is set or not. And I check the corresponding colors to see which to pick.
Style and substance
The preview area is a nice gimmick, but it could be far more useful. And the app could use some styling.
My idea was that it would be nice to be able to just click on the tiles I want to export in the preview. So I tried to make that happen.
I added a click event to every tile that emits its column and row number. That get’s picked up by the main component and added to an observable that collects the currently selected tiles.
Next I wanted to make the app more appealing to the eye so I worked on the styling of the app and restricted myself to the colors of the C64.
Leave A Comment