This is a post about how kcmap draw a SVG using map SWF only.
In order to understand this post, you may need these knowledge.
Flash (AS3) renders its display from a
A container is isolated system, having self-governed coordinate system, child containers and so on.
These are common container:
Coordinate of flash allow interger only, while one point equals to 0.05 pixel.
(8000, 6000) is
(400, 300) on screen.
Usage of JPEXS Free Flash Decompiler (ffdec).
According to the decompilation of map swf, a Sprite named
map contains entire data inside the swf.
When game client calls
api_no value in response is used to indicates the route.
api_no: 11 indicates child Sprite
line11 of Sprite
line11 isn’t a start spot, it will contain a Shape which contain the route Bitmap.
The container structure is as follows.
├─┬ child[@name=line11][@id=32] => Sprite@id=32
│ └─┬ child@id=31 => Shape@id=31
│ └─┬ shapeBounds
│ └ child@id=30 => Bitmap@id=30
├─┬ child[@name=line12][@id=34] => ...
│ └── ...
As said, each container has its owned coordinate system.
The real coordinate of current container is got by summing up
y from root to current container.
Let’s mark line 11 of map 2-3 for an intuitive feeling.
- The GREEN cross is the origin of Sprite
line11in its parent Sprite
- The CYAN cross is the origin of Shape (line11) in its parent Sprite
- The RED rectangle is bounds of Shape (line11) which consists of Bitmap (line11).
Take a look at all container marked map 2-3.
It shows routes’ end position, routes’ image position, routes’ image size, …
Wait, where do routes start?
In fact, start position of routes don’t appear inside SWF.
Guessing is required to find out routes’ start position.
Here’s my method to guess start coordinate, using line 11 of map 2-3 as exmaple again.
- Take all routes’ end coordinate as map spots.
- Calculate the coordinate of route image center(named C).
- Draw a line from
line11end spot (named E) to C stopped at S with twice length of EC.
- The spot nearest S is start spot.
Then, we can draw the map image.
Spot is named as ABC letter by KanColle community to facilitate communication.
They’re not offical map information, so aren’t included in SWF.
Manual operation is required for assigning spot name.
Since a time I don’t know, KanColle production team begin to name spot as community did.
However, they embed the letters into the background, making it impossible to extract letters from SWF.
So, manual operation is also required.
After the steps above, information for drawing a map is complete.
Let’s take a look at the title image again.