Graphics in the browser

Hi all, Sorry, I’ve sort of asked this before, but am getting nowhere. I want to do a really simple thing. Inject an image from the game into the browser. So in the simple example as follows in the picture, when I examine a dog, the image on the left appears, when I examine a cat, the image on the right appears. I just don’t know where to start. Vorple looks awesome, but doesn’t seem ready for prime-time as yet as the save function seems to be a bit dodgy, and also my game is too big, so it has to be Glulxe. I can’t make head nor tail of Quixe/Gl0tke - as I can’t find any examples that do this really simple thing.

Just a pointer to example code of a game that does a similar thing would be amazing.

THanks in advance,

Ade

n.b. Ignore the deliberate grammatical error in the image!

You mean the sort of thing in th Sensory Jam example?

eblong.com/zarf/glulx/quixe/grap … media.html

I was going to suggest you try this, using the “Display the figure of” phrase from §23.6. Displaying the figures in the manual…

[code]Release along with an interpreter.

Place is a room.

Figure of Dog is the file “dog.jpg”.

Instead of jumping:
Display the figure of Dog.

Test me with “jump”.[/code]

But I get an error when I try to release (Fatal error: unable to read data: filename) even though I have a dog.jpg file in the materials folder, so I can’t test it to tell you whether the code will work.

Such a thing displays an image, yes, but in the central window, in amongst the text. How do I inject it into a cell in a HTML page in the left or right border?

You could try the Simple Graphical Window extension and put that window to the left or right of the main window. I haven’t done much with Simple Graphical Window but I know extra windows will show up in Quixe with Flexible Windows.

To get your game to talk to outside parties, like webpage cells, in a way customisable by you, you definitely need Vorple or something like that (‘something like that’ added only as a qualifier - I don’t think there’s anything else that’s as far along as Vorple on this road.)

So if you forget about Vorple, and then necessarily about HTML cells and such, what you need to do is to create the window yourself in the Glulx environment. Like bg said, I think Simple Graphical Window tries to make this easy.

Quixe is basically running the Glulx project in a web browser, and graphic support is only a recent addition to it. So the non-Vorple path I see is:

  1. Create project offline and as a Glulx standalone. The project should create its own window in which graphics appear.

  2. Run the project online with Quixe (To make it, you just put the line ‘release along with an interpreter.’ in the game source).

On the plus side for this path, there’s nothing additional you need to do with Quixe itself. If your game works in Glulx, and then it happens to work in Quixe, you’re done.

Buuuuut, you should made a simple test case in Glulx first and test it in Quixe to make sure the base mechanism is going to work for you.

-Wade

Since you asked for an example, I think you’d do something like this:

Include Simple Graphical Window by Emily Short.

Release along with an interpreter.

The graphics window position is g-left.

Figure of Dog is the file "dog.jpg".

Place is a room.

A dog is an animal in Place.

Carry out examining the dog:
	 now the currently shown picture is Figure of Dog;
	 follow the current graphics drawing rule.

But of course I’m having trouble getting any picture to show up at all…

I just tried your example, bg, and it worked for me — but only in the IDE and in the Glulx release (which I played in Gargoyle). When I examined dog in Quixe, there was no picture, which is a bummer for purposes of this thread.

This is on OS X 10.11.2, Inform 6M62, and with Simple Graphical Windows I just pulled from the public library.

One thing I did notice is that Inform doesn’t refuse to compile the game if the graphic file is missing. (I have a feeling earlier Informs stopped the compile process and complained.) Its not-failing made it harder to troubleshoot whether I had put the file in the correct place. But checking the Index → Contents tab will show you whether your image has been recognised or is considered to be missing.

-Wade

Hi - this sounds great but in practice, how do I get a graphical window into the left or right column? Or both?

I guess the next step is to find out from zarf if Quixe will support graphics in windows other than the main window. Since my graphical window example worked for Wade in other interpreters but not in Quixe, maybe Quixe doesn’t support it, or maybe there’s something extra you have to do to get it to show up in Quixe. I don’t know what other options you have besides Quixe if you’re wanting to run the game in a browser as opposed to an offline interpreter.

(Thanks Wade – I had put the picture in the materials folder, not the figures folder.)

Oh damn it, I’ve been dumb. The graphics version of Quixe is not the one packed with Inform:

https://intfiction.org/t/experimental-graphics-support-for-quixe/8322/1

And maybe that link’s already in this thread from bg re: sensory jam, but I’m not going to break off this post to look.

So MAYBE the whole thing (her demo, with the picture visible, in an experimental version of Quixe) will run yet.

PS I’m not going to try it right now. It’s way past bedtime here. I hope to wake to find someone else has done it in the meantime : p

-Wade

That’s funny, I thought that 6M62 did come packaged with the latest version of Quixe. Wasn’t that in the changelog?

The thread you linked to is from April 2015, predating 6M62, so… bah, I don’t know.

Thanks all. How would I find out? Is there any sample code anywhere that shows how I include graphical windows for Quixe in Inform?

The latest version of Inform does have the latest version of Quixe, but you still need to run that extra Python script to convert the files. Or at least I still needed to run it.

Oh yeah, and I just remembered that Alabaster uses graphics in a sidebar. Its source code is available. Maybe that will help. You may be able to do the same thing, and then use the new Quixe to load the images into an html file.

Alabaster unfortunately uses a closed-source extension to do the procedural combinations of graphics. But I believe they’re assembled in a Simple Graphical Window.

We still haven’t got McTavish a resolution.

To clarify a couple of things:

  • Inform comes with Quixe 2.1.2
  • Quixe 2.1.2 has experimental graphics support (now confirmed by me from the readme)

The readme doesn’t say anything about needing to run a python script to make the graphics work. It does say that if you take files directly from github (rather than having Inform build your Quixe release, I assume) that you need to python-ise them.

That said, I tested the most basic case of displaying a picture in the main window, online, and it didn’t work.

CMG, might you able to test bg’s code, from this thread, having run the python script on it/parts of it (I’m personally slightly foggy on that part)?

Because if the result of that works, it will work for McTavish.

-Wade

It really shouldn’t be that hard to extract the images out of the blorb. Hopefully we can make it so the python step won’t be needed.

Before the new Inform release, you had to get the newest Quixe from an outside source like Github and then plug that into Inform and use “Release with the Quixe interpreter” or whatnot. Then when Inform did its thing and created the game file, you still had to run this Python script in order to make the graphics work in a browser.

Now the new Inform already has the new Quixe built into it, so there’s no need to go installing it. But you still need to do the second half of the process with the Python script. At least, I had to still do that second half to get my samurai game to display graphics.

I’ll test the script if it’s needed down the line… but it was kinda ugly for me to figure out exactly where I needed to place the individual files to get it to work for my own game, and I’ve also never used extensions before, so I think I might cause more confusion than anything if I try to build a test game. I mainly just wanted to pop in and mention that Python step, since it was being overlooked and it was necessary for me.

No worries Chandler. At least it looks like we collectively know what we have to do now, but we acknowledge that it may be fiddly.

-Wade

I really appreciate you guys thinking about this. It feels like a pretty important thing to me. To be able to control media elements outside of the ‘interpreter window’ in a browser delivered parser game. I know that Vorple is reaching towards this, as is Glotke/Quixe, as are other projects.

McT