Creating images on the fly

The Pixie
Did you know you can create images in code? It is a technique called Scalable Vector Graphics (SVG) and is XML, just like Quest, and gets interpreted by the browser, just like Quest.

There is a tutorial on SVG here (I would advise getting familiar with XML first):
http://www.w3schools.com/svg/

This is the example on the first page; it draws a green circle.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

To convert that to Quest, just put backslashes before each double quote, and print it out!
msg("<svg width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" /></svg>")

For more complex drawings, building up a string is a good idea:
// step 1, the svg element defines the drawing board
s = "<svg width=\"200\" height=\"100\">"
// step 2, draw a circle
s = s + "<circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" />"
// step 3 draw a transparent rectangle
s = s + "<rect x=\"50\" y=\"20\" width=\"150\" height=\"150\" style=\"fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.3;stroke-opacity:0.9\" />"
// step 4 end the svg element
s = s + "</svg>"
// step 5 print it out
msg (s)


svg.png


For really complicated shapes, you might want to look at using InkScape, a drawing program that will produce output in SVG format (disclaimer: while I have used InkScape, but never tried to convert the output to Quest).

You can even capture mouse events to make the image interactive. Here is the start of a strategy game, go to the Stars & Planets section, to see a galactic map. Click on the side arrows to move and the + and - to zoom in and out.
http://textadventures.co.uk/games/view/ ... mpire-v0-1

stars.png

lightwriter
Interesting... I was unaware of this, not something I will be using though for my current project but maybe in the future.

jaynabonne
Instead of building up a string to msg in code, it can be simpler (if the image is static) to do what we've done for CSS; put the SVG in an object attribute. Then you can just enter it as is. No quoting of strings required... (Just be sure to put CDATA around it.)

This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums