Quests Explained

About the "house.htm" sample quest

Basically, positioning here is done via CSS (Cascading Style Sheets), that is the right tab in the style view. You can create class-names here, like

    <image class="chair" source="..."/>

Now you can use the class like this

    chair |   | position: absolute;
    left: [number chairX]px; top: [number chairY]px;

So now when you move around the chair in code, you just write something like

    <number name="chairX" value="230"/>
    <number name="chairY" value="120"/>

The chair in the picture will be updated according to the new positions, because what actually happens is that you output the number into the class definition, which would now look like this:

    position: absolute; left: 230px; top: 120px;

Since the chair shouldn't be hanging anywhere in mid-air, the x and y values are set in the beginning station "start" (which uses the "choose" command to redirect directly to the houseEntrance-station). Now behind everything in the sample is the house image. (It's also an absolutely positioned image, defined by class "house".) The house is a single station which is included in every station of which the name starts with house. To do that I used the include-in command:

    <include>
        <in station="house*"/>
    </include>

The content of "house" also has the image of the chair, the computer. The computer can be turned on and off, actually the image source of computer will change (the computer is also an absolutely positioned image, layered over the house image). The source of this image is like this:

    <image class="computer"
            source="media/map/computer_[string computer]"/>

In the "start"-station, we initialized this with

    <string name="computer" value="on"/>

If we want to give the choices to turn on or off the computer we can use

    <choice station="computerOn" string="computer is off"/>
        Turn on the computer
    </choice>
    <choice station="computerOff" string="computer is on"/>
        Turn off the computer
    </choice>

What is actually tested in the above is not a state, but a string value. Since it's a single word, we don't have to use single-quotes, like "computer is 'on'". (To the interpreting program, the concept "computer" and "on" and "off" are not known; it simply checks if a string of the name "computer" is containing the value "on" or not and displays a choice accordingly.) The station "computerOn" now would look like the following:

    <text>You turned on the computer.</text>
    <string name="computer" value="on"/>
    <choice station="back">Continue</choice>

Also, every "house" station includes a positioning of the sprite. The sprite is the picture of the guy moving around. This is done similar to the methods described above.

As you can see, it is good to always structure station names like this:

    main location | sub location |
        sub location of sub location | ...

For example, if there's a house with a drawer in the basement, the station would be named:

    houseBasementDrawer

This approach has two advantages; first of all, the station display in QML-Edit (which lists names in alphabetic order) is intuitively sorted. Second, you can make use of the wildcard-character in the include-in command to easily "grab" locations and sub-locations of the game world.