If you know a little something about HTML, this page should make it easy for you to add a Haptek character to your website. Be sure you've downloaded the Haptek Player, too. Once the basics seem clear, you may wish to download the complete Haptek Authoring and Development Guide (aka, the Haptek Player SDK), as well as purchase PeoplePutty to begin building your own interactive, exciting content.

If you know absolutely nothing about HTML but still want to make a fun 3-D character, you can try using the templates available in PeoplePutty.

Making a Simple Page

Putting a Haptek character in a webpage requires only two simple things: a javascript wrapper file (HapPlayer411.js) and a viewer window (VFBox). The numbers following the VFBox indicates its size (400 pixels x 400 pixels).

Presenting the World's Simplest Haptek Web Page:

That's all there is to it! Click here to view the webpage in action.



Morphs, Textures, Sounds

Of course, you might want your character to do more than just sit there. The Haptek Player makes use of commands like UseMorph, UseTexture, and UseFile to change the character's shape or skin, or load a sound file or script. A full list of commands and their functions can be found in the Haptek Player SDK. Adding commands is just like adding a link:

The actual name of the file, including its location, would go in place of 'name_of_file.' The 'R' tells the player the file location is relative(and .ogg, in case you're wondering, is a sound format we like to use). Really, most any kind of file can be used here. Here's a working example:

Because this example uses a specific (or absolute) URL (it's got 'http://' and 'www' in it), the R (for 'relative) is replaced by and 'A' (for absolute). Click here to see it for real.

If you would like to try out Haptek Player commands, click here to view a very special webpage (Or, type any old words in the command line to make the character speak in a charming robot voice.)



Making Your Own Character

You can make your own character using PeoplePutty, then save that character as an .htr file (an .htr file stores all the information about a character--skin, shape, emotions, etc.) and load that character in place of our default character.

First, add "none" to the VFBox line, so the default character will no longer load:

Then, add to the Body of the HTML a javascript instruction telling to the Player to load your character:

AddToInitQueue is a command the Haptek Player will always recognize. The Player will load whatever is in the parentheses, in this case the javascript command StartupCharacter which is then defined below it to mean, "use the file MyCharacter.htr." Both StartupCharacter and MyCharacter are placeholder names that you, the user, may change to whatever you want.

Below is a specific example (Click here to see it). Note that the texture is loaded separately, as it was not part of the initial .htr file (either way is acceptable; any number of files can be loaded on startup):

More Complex Pages/Putting it all together

If you feel this looks fairly easy and want to learn more, download and read the Haptek Player SDK (aka Haptek Guide 4-- an updated version is coming soon!). Purchase PeoplePutty to build your own characters, make skits, record and lipsync voices, and in general make interesting things to put on a page. PeoplePutty also includes a template-based web-builder, if you are not the type who likes HTML.

Click here to see an example of a page that combines content made with PeoplePutty with a little old-fashioned HTML tinkering. Or, download an entire page in .zip format for you to take apart and tinker with.