Documentation:
Adding classes and CSS styling
set-any-class "your_class_name_here" allows you to give passages any ‘style’ you want. It behaves just like say italic type, and is turned off with say roman type like usual.
It adds a class called Style_your_class_name_here to each span and Buffer_your_class_name_here to each div that contains text of this style.
css-set-fast "element_name;property_name;value_name" appends some css to the html header, giving all elements of the name ‘element_name’ the property ‘property_name’ with the value ‘value_name’. For instance, to make the .BufferWindow yellow:
css-set-fast ".BufferWindow;background-color;yellow"
is equivalent to
.BufferWindow {
background-color: yellow;
}
The more you use css-set-fast, the longer your header gets, but it works instantly. It’s best used early on in ‘When play begins’, and then later you can just set things to the style you defined earlier.
css-set-slow does the same thing but works by using jquery to find all pre-existing elements with the given id and changing their css to the given property. It generally only changes things already on the screen. It is useful for changing text or background colors all at once.
Google Fonts
import-google-fonts lets you import google fonts. Due to space limitations on strings, the only text you need to enter is the part in the url after the first ‘family=’ and before ‘&display=swap’. So, for instance, if google says to use this import:
<style>
@import url('https://fonts.googleapis.com/css2?family=Kalnia:wght@300&family=Rubik+Bubbles&display=swap');
</style>
You only need to type:
import-google-fonts "Kalnia:wght@300&family=Rubik+Bubbles"
Hyperlinks
hyperlink "name" as "command" creates a hyperlink that, when clicked, executes the given command. So, you could say
hyperlink "north" as "north"
and it prints out the word ‘north’ as a hyperlink. This works in gargoyle and similar interpreters, too!
“zzxvm” is a special phrase. Any command starting with zzxvm is not printed. Thus, if you want the hyperlink commands not to show up on the screen, preface them with zzxvm. An example is given in the Fake Twine game.
Sound
Sound is done using Inform’s native sound capability, so it works both in the web interpreter and in Gargoyle. The special command to be used is upload-audio [name of file] with internal name [whatever name you named it];. This should be done when play begins. It creates an audio element with name ‘Snd[number of the audio file]’. If you don’t know the number of the audio file, you can check it in Inform where it is stored as ‘Glulx resource ID of _____’.
Sounds are added to a new Sounds folder you must create in BOTH the materials folder and in the release folder. Inform does not use .mp3s, but online play for most browsers do, so you need two copies of each sound (one in an Inform-friendly format like .ogg and one as an .mp3). You technically only need the .oggs in the materials/Sounds folder just to get it to compile and the .mp3s in the release/Sounds folder to get it to run online.
Here is a typical declaration and playing of sounds:
Sound of bells is the file "Bells1.ogg".
When play begins:
upload-audio "Bells1" with internal name sound of bells;
Instead of taking inventory:
play sound of bells;
This implements all of the standard glk functions, including fancy stuff like sound-notify events, volume-notify events (which have to be manually added to Glulx Entry Point’s list of g-events), but also simpler stuff like channels. This means that pre-existing sound extensions should work; I’ve tested this and everything in Music by Daniel Stelzer works except that cross fades use an older format that should be updated by someone using this.
Images
Quixe already has full image code. Bisquixe doesn’t have to do anything!
Except setting up the images ahead of time in the play.html page. There is a python script to do that, but it can be a little intimidating.
The new functionality is:
add-image (Temp - a text) with alttext (tempalt - a text) with id (Temp1 - a number) with width (Temp2 - a number) with height (Temp3 - a number) :
An example is:
Summary
Figure of pikachu is the file "pikachu.jpg".
Figure of Rembrandt is the file "Rembrandt.jpg".
Release along with a "Bisquixe" interpreter.
Include Simple Multimedia Effects by Mathbrush.
Sandbox is a room.
When play begins:
let temp be the glulx resource id of the figure of pikachu;
add-image "pikachu.jpg" with alttext "surprised pikachu face" with id temp with width 320 with height 320;
let temp be the glulx resource id of the figure of Rembrandt;
add-image "Rembrandt.jpg" with alttext "Rembrandt" with id temp with width 342 with height 423;
Instead of thinking:
display the figure of pikachu;
display the figure of Rembrandt;
The only caveat is to get inform to compile, you need your images in a folder called Figures in the materials folder, and to get bisquixe to work, you need to copy that folder to your release folder as well.
Internal Links
Internal links (i.e links to the same folder) can now be added by the phrase ‘link-page’ like so:
link-page "/index.html" with TabOption 1;
This manually opens a new page. To go up one in the directory, add a single period before the title (not two periods like usual). So “./uponefolder.html”.
TabOption 1 opens in a new tab, TabOption 0 opens in the same tab.
This doesn’t generate a hyperlink, it literally opens the page. To make a hyperlink, you need to combine the pre-existing hyperlinks with the ‘invisible’ commands and this new functionality:
Link Code
Sandbox is a room. "Hello! To try various features, try clicking links, typing Z to see text alignment, typing JUMP to see various colors used in the same paragraph, or typing I to hear a sound. J plays some music, K stops it, while P and M fade the music in and out when it's playing.
Here's a link to the homepage: [homelink].
Here's a link to the homepage, but opening in a new tab: [homelink2].
From here, you can go [boldnorth]."
To say homelink:
hyperlink "link" as "zzxvm home";
To say homelink2:
hyperlink "link" as "zzxvm home2";
Jumphoming is an action applying to nothing. Understand "zzxvm home" as jumphoming.
Carry out jumphoming:
link-page "/index.html" with TabOption 0;
Jump2homing is an action applying to nothing. Understand "zzxvm home2" as jump2homing.
Carry out jump2homing:
link-page "/index.html" with TabOption 1;
Command Bar
This is an example of how to provide a menu of links for a player above the command prompt which disappears once one is chosen. (This example is for v10 of Inform).
"Barroom" by mathbrush
Release along with a "Bisquixe" interpreter.
Include Simple Multimedia Effects for v10 by Mathbrush.
Include Basic Screen Effects by Emily Short.
The Bar is a room. "The bar is clean and all surfaces are made of wood."
To say link1:
hyperlink "x me" as "x me"
To say link2:
hyperlink "inventory" as "inventory"
Onlinecounter is initially 1.
Sessionid is a number that varies.
To say inline-status-style:
css-set-fast ".Buffer_inline-status-style[onlinecounter][sessionid]; display; none";
increment onlinecounter;
set-any-class "inline-status-style[onlinecounter][sessionid]";
When play begins:
now sessionid is a random number from 1111111111 to 2147483647;
now the command prompt is "[inline-status-style][link1] [link2][line break][roman type]>"
The restore the game rule response (B) is "Ok[resetseed]."
To say resetseed:
now sessionid is a random number from 1111111111 to 2147483647;