Liquid was created because there was no markup language available to create sophisticated interactive animations that could be displayed in a web browser. * If you don’t know anything about scripting, but have a basic understanding of HTML, you will still be able to use Liquid to create both sophisticated presentations and all kinds of 2D games.
This article is intended to give you an introduction to Liquid and show you how to use it. It also includes a quick tutorial on how to create a basic Pong game at the end.
(* Without using binary multimedia, which excludes SMIL.)
How Liquid Is Set Up
To use this language you will have to link to http://www.naltabyte.se?run.liquid, or some other place where the runtime instructions for the language can be found.
2: Sand-boxing Liquid, to avoid conflicts between other scripts and Liquid.
This tweaking only happens as long as Liquid is linked to – as soon as the visitor leaves a page using it, the browser reverts back to its normal state. No longterm changes are made or software installed that that could damage the browser or the computer.
The Principle Behind Liquid
An element is known by most people a ‘tag’ . A HTML document is made up of many HTML tags’, which describe the layout and formatting of a web page. Unlike a script, elements can be used several times on a page at the same time.
This is the case because scripts are what is commonly known as ‘single-threaded’. If a script is called to do something while still occupied with a task already, it will not be able to handle both requests concurrently.
To get around this problem, Liquid is sliced, which means that the single-threaded environment has been cut up, or sliced, into intervals known as ‘slices’. Each “slice” is then assigned a “context”, running like a thread inter-cut with other threads. In a very loose sense of the word, Liquid is multithreaded.
Put simply, slicing means that an application can start a long lasting process without locking out the user or other shorter processes, since it is running as if it was an independent thread.
Defining the functions as elements means that they can be reused many times on the same page. You can nest elements and combine them in Liquid, just like you would in HTML. For example:-
A closing tag is represented by a / before the name of the tag. Note that the parameters of the tag are not required in the closing tag.
When you use Liquid, you can do the same with animations.
This example moves all the text to the right. While the nested text also moves to the right, it simultaneously moves in a circle. The two different motions combine because the elements are nested. Had these functions been scripted, this casual throwing together might have crashed both scripts.
Even if we nest 10, 20 or more of these tags, they still will all run simultaneously, each set behaving differently depending on their settings and how they where nested.
Essentially Liquid works like HTML, but instead of dealing with the appearance of things, it deals with the behaviour of things. By nesting these behaviours we can describe complex motion with relative ease.
Liquid is also designed to be a development platform for web applications. Any application can be described as a markup language and made accessible as such to clients. This includes applications relying on databases and using SQL, or other server-dependent technologies. Remember that HTML as a language can make up an unlimited number of web pages, and any application defined as a language will have the same features as HTML has regarding this. Such an application (language) can be adjusted, changed and updated, or even completely rewritten using an application such as Notepad, since HTML/XML is a plain text format.
This means that the potential to save time and money when developing applications is significant. How well this claim holds true in real life depends on how well thought out the application is. It’s a design problem, really.
Different Liquid applications can also be merged with one another. It is no different from running Liquid together with HTML. You can Liquid elements with other Liquid elements from another application, or add new elements to Liquid and have them run together with all the pre-existing ones. In fact, Liquid is all about combinations, so everything is always compatible with everything else by default.
Then you just declare what elements you want to use in the meta tag in the header of the HTML document:
Here we use the move’ element to move some text from the upper left corner to the lower right corner of the screen. If you wish to use multiple tags, you simply add them to the custom meta tag, separating them by commas (and not spaces). The meta tag makes it possible to add new elements that you yourself have created and defined during runtime, and Liquid needs some way to recognize these. This approach also makes it possible for future search engines to extract this information.
Now, lets get to work on something more useful than a simple animation…
Below is the (crude) pong game that was mentioned at the beginning of this article. A working example can be found online here. Note that this code is the bare essentials to make it work in order to keep it simple for beginners.
First, open Notepad or any other text-editor that you feel comfortable with. Copy and paste the following code and save the file as “pong.htm”.
If you are connected to the internet when you open this page in Internet Explorer, you will have a working pong game!
As we take a closer look at this code, we can see that we only need four elements (clip, move, motioncontrol and trigger) to create a working pong game. Now let’s step through these four elements, and see what they do.
1: The element <clip />.
Clip monitors its own content (its children – e.g. the elements it contains). Whenever any of these reaches the borders of clip’s defined height and width, it takes action.
What action is taken is defined by the ‘assign’ attribute of the element that has reached the boundary. This instructs the clip element to either allow it to reappear on the other side, bounce off, or simply stop. If no such attribute is found, the element disappears.
2: The element <move />.
This element moves objects in the direction set by the x, y and z attributes relative to their current position. It doesn’t move objects from a to b specifically, because things might get in the way, or derail the movement somehow. In a game, we can count on this to happen…
3: The element <motioncontrol />.
This element picks up all keyboard events and makes these available to the object referred to in the attribute “run”.
The left arrow key results in a movement to the left for that element since it’s x-attribute has been set to “8” and it’s y-attribute to “0”. The motioncontrol’ tag has a range of other attributes, giving it total control over all keyboard events.
4: The element <trigger />.
This tag watches the specified elements to see if they collide or cross each others path. If they do, the code in the onevent’ attribute is executed. In the example below, element (a), carrying the id set in the attribute “run” is checked to see if it ever crosses paths with element (b), carrying the id set in the attribute “from”. When this happens, it triggers the event defined in the attribute “onevent”. In this case we bounce the element, the ball, by reversing the x/y, and increase the points-value with one.
By using these four simple tags, we have been able to make a simple pong game. Anyone familiar with HTML will be able to use this to create his or her own animations or games without any prior knowledge of scripting. We have some scripting here for points, but that isn’t really needed for the game to work; it’s just spicing things up a bit.
Adding Your Own Elements
All of the elements currently available for Liquid are documented online at http://www.naltabyte.se/space/liquid.htm. This address works as an online manual, and has live samples of all the elements for you to study. It also gives you a quick rundown on how to write your own new elements and have them run by Liquid.
Liquid has been around *officially* for a little more than 30 days at the time of writing, but already some sites have picked up on it. The following list are a few of the places where you can find Liquid online already.
The first are all Naltabyte sites, but further down the list, you’ll find other sites that are using it.
This is a sample-page from Naltabyte.
This may be a very simple game, but it shows the nesting very well.
2: air hockey
This is a sample-page from Naltabyte also.
It demonstrates how to handle synchronous events, like dragging something while another function still executes.
An online tutorial with all tags listed, alongside live samples showing what they do.
It also allows editing and experimenting with them online.
Naltabyte central, where we inform the visitors of what projects we currently are involved in, and what progress we have made.
This online VML editor uses Liquid to animate the art you create online.
Several games on this site are made using Liquid. Space mission, Deep sea, Airbud & Airbud2, and others will soon be added to that list. Generally, a new game appears there every two weeks.
Visicommedia has an online directory, showing of the new MIO-format developed by MIOplanet. They have chosen to use Liquid for ALL 20 of their online samples in that directory, for various types of dynamic presentations.
8: http://www.helicontract.com/vmlsource/vmldemo.htm & http://www.helicontract.com/vmlsource/vmllinks.htm
This site is actively supporting http://www.naltabyte.se/space & http://www.naltabyte.se/art, and has several links leading there.
If you look under scripting/dirty e-learning you’ll find both an article and a spreadsheet that is defined using this technology as a sample of a more advanced internet application.
Wrox, who are a major force in publishing articles about, and revolving around, ASP/ASP net-technologies publish Asptoday.com.
Quick Facts About Liquid
The current version is 1.0. Liquid 1.0 was launched in February 2003.
There are several add-ins available for Liquid, including the 3D-interface Space5 and the wap-emulator WapX.
There is also a tool for creating and editing Liquid applications available, free of charge, advertisements and restrictions. It runs under windows 98, windows ME, windows 2000 and windows XP.
It can be found in the Web Development section of Programmers Heaven; this is a direct link to it’s download page: http://www.programmersheaven.com/search/download.asp?FileID=27166
The file is roughly 500 KB.
This editor displays the results of your coding live, giving you immediate feedback on how Liquid works.
The complete SDK replacing this editor will launch later in 2003. Note that you can also work with Liquid in Notepad or any other text editor, just as you would with ordinary HTML.
The current browser support is limited to IE5 and higher at this time. Liquid will soon be released for all major browsers, and a version for mobile phones and PDA’s is also currently under development.
There is a commercial licence available for Liquid.
If you do not wish to link to the naltabytes server for the language runtime, you can install it on your own server and run it from there. The commercial version has more elements in the library and comes with detailed documentation on support for other languages, e.g. C++ and Java/Java MIDlets. The following table describes the extra features available with the commercial licence.
For more information on a commercial license contact:
Support and online help is available at http://www.naltabyte.se/space/liquid.htm
The SDK will be published at this address later this spring.
Direct requests or questions can be sent to:
Liquid is a client side markup language. It’s simple bits and pieces of functionality can be pieced together to make up larger, more sophisticated applications. The user can add new elements to this language at will, since it’s extensible. By doing this they make the functionality represented by this element globally accessible in all of their web-applications. The functionality of such an element is as good as any script, but unlike scripts, it can be reused and nested to form complex applications.
It has similarities with Lego, a familiar toy consisting of several pieces that can be pieced together into any form, shape or function that the child can imagine. They say that we all have an inner child somewhere, so this should be rather fun to work with.
Current occupation: Developer for, and part owner of Naltabyte AB. Main interest: Women, XML, logic and comics, in any given order. Previous work: Not computer-related, more of logic & art, also written a comic or two.;-) Previous articles: developersdex.com & AspToday.com, (scripting/’Quick & dirty e-learning’) Currently doing: A version of Liquid for the multimedia/developer/design-application MioFactory 2.1, (
http://www.mioplanet.com ) and preparing Liquid 3, which will launch in a few days. By the way: Unless you noticed already, Liquid now installs itself permanently as a plugin for IE5x.