How do I represent tiles in XML?

Question

So, I'm writing an AS3 program that tiles floor tiles. I want the user to be to be able to create their own floor schematic represented by different rectangles. It'll be drag-and-drop. They will lay out their schematic (which is composed of different size rectangular tiles) and drop colors/patterns onto them.

This schematic will then be tiled on a 3D plane to represent what the actual floor would look like.

I've got the 3D part working, drag-and-drop working, etc. What I'm missing is the floor schematic stuff. I've spent a lot of time trying to figure out the best solution, but I can't QUITE get there.

Here are some examples (out of a WHOLE bunch of possible combinations) of how the floor schematics could look:

The different tiles within the schematic are the droppable regions. My problem: How can represent these schematics in XML? Don't worry about tiling, sizing, etc. I've got that all figured out already. I just literally do not know how I can represent a tile schematic in XML and draw it correctly with AS3. Any ideas?

Answer 1

It looks to me like your tiles really boil down to layouts on a grid. Given that, I would have the xml for the tile be comprised of a list of elements, each element would have properties for the row/column of the upper left square of the element, the row span and column span for that element, and the fill for that element. Something like this:

<Tile>
    <Cell row="0" col="0" rowSpan="1" colSpan="4" fill="#a0a0a0"/>
    <Cell row="1" col="0" rowSpan="1" colSpan="4" fill="#b0b0b0"/>
    <Cell row="0" col="4" rowSpan="2" colSpan="2" fill="#c0c0c0"/>
    <Cell row="2" col="2" rowSpan="1" colSpan="4" fill="#a0a0a0"/>
    <Cell row="3" col="2" rowSpan="1" colSpan="4" fill="#b0b0b0"/>
    <Cell row="2" col="0" rowSpan="2" colSpan="2" fill="#c0c0c0"/>
</Tile> 

The above would represent your first example (I made up the colors though). Hope that helps.

Answer 2

For the sake of simplicity, you might want to consider using the x, y, width, height values. That is the format that flash.geom.Rectangle and flash.display.Graphics.drawRect() use.

<tile x="20" y="20" width="400" height="200" pattern="1" />
<tile x="20" y="220" width="100" height="100" pattern="2" />

Answer 3

Disclaimer: I am not the best person at writing XML. For instance, <Cell x="0" y="1" tile="no"/> can be a pain, for it makes xsd schema more complicated - which is: if tile = no, it should not have children. If tile = yes, then it must have children. Also note that you need to rework <RgbColor>LightGrey</RgbColor>. Also note that I do not know what is the best trade-off between elements and attributes. Also note that I do not like having <Cells> as well as <Cell> - typo opportunity. However, I do not know a better way, but would like to find out what that might be. Also, perhaps this format is too verbose. Also, I did not include an xsd schema, but you can get started with it here: http://www.google.com/search?hl=en&q=xsd+schema+generator&aq=f&aqi=&aql=&oq=&gs_rfai=

Also inspired by another answer, you might want to define pattern colors separately and then refer to them ... can be error-prone.

<?xml version="1.0" encoding="utf-8"?>
<TileSchematics name="Blah" comment="This starts to describe second one.">
  <BoundingBox>
    <Width>8</Width>
    <Height>3</Height>
    <StackHorizontally>yes</StackHorizontally>
    <StackVertically>no</StackVertically>
  </BoundingBox>
  <Cells>
    <Cell x="0" y="0" tile="yes">
      <RgbColor>LightGrey</RgbColor>
      <Border>
        <Right>yes</Right>
        <Left>yes</Left>
        <Top>yes</Top>
        <Bottom>yes</Bottom>
      </Border>
    </Cell>
    ...
    <Cell x="0" y="1" tile="no"/>
    ...
  </Cells>
</TileSchematics>

Answer 4

why XML? why not just serialize it using AMF3? or if you need something human readable, JSON should do it. JSON has exactly the same object semantics as ECMA-script, being a subset of ECMA-script, while XML doesn't, which makes working with XML quite annoying.

representation of the first schematic as object structure:

[
    {"x":0, "y":0, "width":100, "height":25, "pattern":0 },
    {"x":0, "y":25, "width":100, "height":25, "pattern":1 },
    {"x":100, "y":0, "width": 50, "height":50, "pattern":2 },
    {"x":50, "y":50, "width":100, "height":25, "pattern":0 },
    {"x":50, "y":75, "width":100, "height":25, "pattern":1 },   
    {"x":0, "y":50, "width": 50, "height":50, "pattern":2 }
]
//this is both valid JSON and ActionScript, although in ActionScript, you would
//typically use identifiers instead of strings for property names

You can use the as3corelib for serialization.

greetz
back2dos