Saturday, December 17, 2016

text - Creating a sprite sheet of letters and numbers for a mobile word game


I would like to ask for a general advice on how to use Inkscape to create a "sprite sheet" of letters and numbers.


I am developing a Scrabble-like word game and initially was planning to display the letters and values on the letter tiles programmatically:


emulator screenshot



Unfortunately, while it seemed to work at the emulator (see above) - it fails on real devices (see below):


real devices photo


So my new plan is to create an SVG file in Inkscape and then export it as PNG files (Android wants different resolutions of asset images for different classes of devices)...


For this I have enabled grid 15x15 in Inkscape Document Properties:


Doc props dialog


and have toggled the Snap bounding box corners.


I have 2 kind of tiles - the small tiles at the game board are 45x45 (here and further - for the drawable-mdpi class of devices) and the big tiles are being dragged and should be 128x128.


That is why I have set the grid to 15x15 when creating small tiles: I'd like to put a letter in the 30x30 cell and its value in the 15x15 cell (at the right and below the letter).


My question is: how to approach this problem in Inkscape in the most effective way and so that I can alway return to the SVG file and adjust it?


I have created 2 text strings - "ABCDEFG...XYZ" and "12345678910":



Inkscape screenshot


But how to split and resize them (without distorting the font)?


I have tried selecting in the menu Path - Break Apart and also Object - Ungroup - but there is no effect.


(I was hoping this would split the text strings into letters and I would drag them around in my grid and also resize them).



Answer



I am not entirely sure that I unterstood correctly what you want to do, but I suggest the following:



  1. Create one sample tile with every text aligned as you wish using the corresponding text alignment. I.e., your letter is not only centred optically but also the text-alignment is centred. Your number should be probably right-aligned.

  2. Replace the letter with XXX and the number by YYY.

  3. Save that file.


  4. Write a small program that goes through all letters and for each:

    1. Creates a copy of your file.

    2. Replaces XXX with the letter and YYY with the value in the XML source of the file in that copy. You can always change this file if desired.

    3. Export that copy to whatever format you need using command-line options to Inkscape.




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...