SVGImport.wiki
author Wuzzy
Thu, 25 Apr 2019 12:50:10 +0100
changeset 1854 0da81c188327
parent 1682 22a1cfe0eaf3
permissions -rw-r--r--
ControlsRework: More formatting
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
     1
#summary Importing an SVG into Hedgewars
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
     2
749
db0eeafa0cdf SVGImport: Add title
Wuzzy
parents: 385
diff changeset
     3
= Importing from SVG files =
db0eeafa0cdf SVGImport: Add title
Wuzzy
parents: 385
diff changeset
     4
== Introduction ==
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
     5
376
c840baf439ec Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 375
diff changeset
     6
This is a quick and dirty description of converting an SVG into hedgewars HWMAP format.  It is not at all pretty. Hopefully someone will make a prettier process.  It currently makes use of Inkscape, vim, perl, g++ and a bit of manual labour.  It looks best in 0.9.18+ which makes use of the variable brush size (the examples below use the second smallest size, 16px wide)
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
     7
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
     8
749
db0eeafa0cdf SVGImport: Add title
Wuzzy
parents: 385
diff changeset
     9
== Details ==
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    10
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    11
Open Inkscape.
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    12
Go to File->Inkscape Preferences and make sure that
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    13
    * SVG Output->Allow relative coordinates is unchecked
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    14
    * Transforms->Store transformation  is set to Optimized
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    15
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    16
Open an SVG. Ideally one of simple line art, without too much use of fill or filters.
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    17
231
b5780c560285 Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 230
diff changeset
    18
1) Select all in the image and choose ungroup, then combine all paths in the drawing (select them, then choose Path->Combine). 
334
612048d0890b Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 331
diff changeset
    19
Note. I had some difficulty doing that with some images even after repeated use of ungroup. I ended up just going into the SVG file and deleting all the groups.  This usually happens if there are filters in place. Removing all the g tags but keeping the paths inside the groups in the SVG in a text editor might be faster than cleaning up in Inkscape.
234
88f4f75b381c Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 233
diff changeset
    20
Also, some paths might be worth eliminating altogether.  In order to get a better idea of what it'll look like, try: View->Display Mode->Outline.  To simulate occluding, you can try combining individual paths first, and using union to combine into larger groups. This takes a bit more work.  If it still doesn't look right, you're going to have to go in and delete nodes, and generally rework the shape to simulate occlusion.
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    21
1680
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    22
2) Go to File->Document Properties and specify 4096 for W and 2048 for H.  You may want to then reposition the art to be more centred vertically or horizontally. Make sure Scale: X and Y are set to 1.
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    23
385
6f4ad8faeaff Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 376
diff changeset
    24
3) Click on the path, and choose dimensions for W and H that would look good in the game (no more than 4096 for W and 2048 for H).  The Lock button may be helpful here.  Generally resize it and reposition it using the document white area as a guide to how it will look on the in-game drawing area, then save and quit.
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    25
385
6f4ad8faeaff Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 376
diff changeset
    26
4) Open in a text editor and verify there is one path. Change sodipodi:namedview's ID attribute to id="base" - this is to work around a bug in the current stable Inkscape (0.48.3.1) extensions tool which was crashing it.  This is probably fixed in 0.48.4. Note that I haven't tested this workaround. su_v says this is the correct way to do it because apparently id="base" is a reserved name for namedview in sodipodi - which seems like a rather common and collision-likely name.  I had misread him and changed the path's id to base, and that seemed to work fine.  If changing namedview doesn't work, try renaming the path instead.
236
51ce3b455ad7 Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 235
diff changeset
    27
Make sure all those groups are removed.
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    28
385
6f4ad8faeaff Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 376
diff changeset
    29
5) Open the file in Inkscape again, Click on the path again, then go to Extensions->Modify Path->Flatten Beziers and flatten out the curves to your taste. Default of 10 seems fine most of the time, but for small curved objects you might want something like 5.  Keep in mind, the more the approximation, the more points that Hedgewars has to draw, which can be rough on the engine and network communication, then save and quit.
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    30
385
6f4ad8faeaff Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 376
diff changeset
    31
6) Edit the file, and delete everything but the path data.  You should have a one-line file starting with something like  M1234.3 456.78L3298.3 9023.34 and so on.
1680
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    32
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    33
7)
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    34
The coordinates should now be rounded for use by the crude script in (10) unless you plan to handle that yourself in some way.  Here is a vim one-liner to do it.
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    35
{{{:s/[0-9][0-9.]*/\=float2nr(floor(submatch(0)*1))/g}}}
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    36
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    37
8) If in step (6) you have stuff other than just moves in the format listed, you'll have to you'll want to convert if you want to try the crude script in (10) - otherwise a smarter script would be needed.  Here's some Vim commands to try and fix up the paths.
1422
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    38
{{{
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    39
:s/\(\d\) \(\d\)/\1 L\2/g
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    40
:s/,/ /g
1680
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    41
:s/\(\d\+\) \(\d\+\) V/\1 \2 L\1/g
1682
22a1cfe0eaf3 another regex
nemo
parents: 1680
diff changeset
    42
:s/\(\d\+\) \(\d\+\) H/\1 \2 L\2/g
1422
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    43
:s/\([LM]\)\s*/\1/g
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    44
}}}
1682
22a1cfe0eaf3 another regex
nemo
parents: 1680
diff changeset
    45
Note... the V/H fix attempt is for vertical line, horizontal line which Inkscape started emitting recently in optimised mode.  Could try saving as plain SVG instead.  Also depending on how minor the lines are could try just stripping them.
238
d7b867f80284 Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 237
diff changeset
    46
1680
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    47
9) It is probably a good idea to remove duplicate points.  Here's a regex for that. 
1423
39ebd4eac1dd missing brace
nemo
parents: 1422
diff changeset
    48
{{{ s/\(L\d\+ \d\+ \)\1/\1/g}}}  - you should run that a couple of times, then {{{s/M\(\d\+ \d\+ \)L\1/M\1/g}}}.  That just cuts down on a bit of redundancy.  If these regexes match anything, you probably should rerun them.
375
b1b18eeea04e Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 374
diff changeset
    49
Since this page is a mass of hacks, here's one more redundancy reducer, in bash this time.
1422
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    50
{{{
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    51
rm dupes.txt
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    52
PREVXY=(99999 99999)
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    53
sed 's/\([LM]\)/\n\1/g' inputfile | while read f
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    54
do 
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    55
    read -a XY <<< "${f:1}"
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    56
    if [ "${f:0:1}" != "M" ]
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    57
    then
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    58
        if((${XY[0]}-${PREVXY[0]}<3&&${XY[0]}-${PREVXY[0]}>-3&&${XY[1]}-${PREVXY[1]}<3&&${XY[1]}-${PREVXY[1]}>-3))
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    59
        then
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    60
             echo "$f" >> dupes.txt
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    61
        else echo $f
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    62
    fi
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    63
    else echo $f;fi;PREVXY[0]=${XY[0]};PREVXY[1]=${XY[1]}
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    64
done | xargs > inputfile.dedupe
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
    65
}}}
375
b1b18eeea04e Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 374
diff changeset
    66
If dupes.txt has anything in it, you probably should run it again.  Anyway, running these reduced a complex test trace from ~8800 points down to ~6500.
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    67
1680
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    68
10) Convert the path data.  Here is a crude script to do that.  Note this one uses a line size of 1 (that's the 0x01 business).
363
c6e60247e9d4 Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 334
diff changeset
    69
If you want larger lines you can pick anything between 0x00 and 0x3F.  That's 6-636.  See the [DrawnMapFormat] wiki page.
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    70
{{{
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    71
#!/usr/bin/perl
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    72
# just a one-line list of points. at least, it had better be one-line
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    73
open FILE, $ARGV[0];
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    74
while(<FILE>)
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    75
{
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    76
    chomp;
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    77
    s/([LM])(\d+) (\d+)\s*/point($1,$2,$3)/eg;
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    78
    print;
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    79
} 
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    80
sub point
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    81
{
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    82
    ($t, $x, $y) = @_;
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    83
    $x+=0;
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    84
    $y+=0; # just in case
239
91b2ea70aff4 Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 238
diff changeset
    85
    printf("%c%c%c%c%c",$x>>8,$x&0xff,$y>>8,$y&0xff,($t=~m/M/)?(0x80|0x01):0x00);
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    86
    return;
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    87
}
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    88
}}}
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    89
{{{script pointdata > hwpointdata}}}
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    90
1680
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
    91
11) qCompress the data.
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    92
{{{g++ -I /usr/include/qt4 -I /usr/include/qt4/QtCore qcompress.cpp -lQtCore}}}
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    93
{{{
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    94
#include <QFile>
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    95
#include <QByteArray>
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    96
using namespace std;
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    97
int main(int argc, char **argv) 
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    98
{
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
    99
    QFile fromFile(argv[1]);
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   100
    QFile toFile(argv[2]);
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   101
    if(fromFile.open(QIODevice::ReadOnly) && toFile.open(QIODevice::WriteOnly))
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   102
    {
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   103
        toFile.write(qCompress(fromFile.readAll()));
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   104
    }
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   105
}
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   106
}}}
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   107
{{{./a.out hwpointdata hwpointdata.Z}}}
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   108
1680
cec5c4d1cf78 tweak steps a bit based on latest generation
nemo
parents: 1423
diff changeset
   109
12) Convert to base64 and you're done! (whew)
227
c7897b5d10c5 Created wiki page through web user interface.
kyberneticist@gmail.com
parents:
diff changeset
   110
228
13f07e078365 Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 227
diff changeset
   111
{{{base64 -w0 hwpointdata.Z > mynewhedgewars.hwmap}}}
13f07e078365 Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 227
diff changeset
   112
13f07e078365 Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 227
diff changeset
   113
Enjoy.
13f07e078365 Edited wiki page SVGImport through web user interface.
kyberneticist@gmail.com
parents: 227
diff changeset
   114
331
8a16017f175f 0.9.18+
kyberneticist@gmail.com
parents: 240
diff changeset
   115
Here are some example hwmap files from the process above.  They look better in 0.9.18+ due to the added size support, allowing thinner lines.
1422
a6f2064e67a5 make one of the more unreadable bits of this hack slightly more readable
nemo
parents: 749
diff changeset
   116
https://m8y.org/hw/drawn/