The HTML5 GDK / game development kit

Thank you for downloading the HTML5 GDK. This software makes it easy to make 3D games for the worldwide web. The command set is inspired by a programming language called DarkBASIC, and a software rendering library called Pre3D is used as a backend. This guide is designed to make it easy for you to quickly get started in the HTML5 GDK and understand the command set.

Contents:
Files
Getting started
Commands
Conclusion

Files. The HTML5 GDK includes the following files:

Root directory -

android - folder which contains a ready-to-use Eclipse Android project
documentation.htm - this file (documentation)
pre3d-readme.txt - taken from Pre3D's readme file
rawcruncher.htm - a utility to turn RAW 3D model files into single-line strings
readme.txt - HTML5 GDK readme file

api

pre3d.js - the original Pre3D library file (you should probably use pre3d-fixed_lighting.js instead)
pre3d_path_utils.js - part of the Pre3D distribution which is not used by the HTML5 GDK
pre3d_shape_utils.js - part of the Pre3D distribution which lets you make boxes, planes, and spheres
pre3d-fixed_lighting.js - modified Pre3D library file which fixes lighting bug and adds renderer.draw_lighting=true
retainedmode.js - HTML5 GDK 3D graphics library (this is what gives you easy commands like makeObjectCube)
sound.js - HTML5 GDK sound library (supports MP3 and OGG Vorbis files)

demos

raw - folder which contains RAW 3D model files
background.png - sky gradient backdrop (just a game asset)
hellomababy.mp3/.ogg - sung by Arthur Collins and in the public domain (also a game asset)
swish.mp3/.ogg - a sound effect (game asset)
tree.js - contains single-line string versions of RAW 3D tree models to form a single pine tree (a game asset)
collisions.htm - a game demo that demonstrates sliding collisions (move the cube around by clicking/touching and dragging on the view)
trees.htm - a game demo (walk around the environment by clicking/touching and dragging on the view)
trees-nosound.htm - a sound-free version of trees.htm (some users might want this)
xyz.htm - a spinning 3D model of the X, Y, and Z axis which demonstrates how loaded models are rotated 90 degrees to make the vertical (Z) axis vertical
xyzarrows.js - contains single-line string versions of RAW 3D axis models (game asset)

Getting started. The first thing you probably want to do is try out the demos (here, here and here). Then, the only thing to do is jump right into it and start making games. Make a copy of trees.htm which you can modify and ruin if you want to. When you open it up in your favorite text editor, the things you should pay attention to are the script tags and the canvas tag. The script tags in the <head> section of the document load the files pre3d-fixed_lighting.js, pre3d_shape_utils.js, retainedmode.js, sound.js, and tree.js. The first 4 script files you will need for almost every HTML5 GDK game that you make. The formatting of the document is essential for the screen scaling to work correctly, plus the embedded/inline script provides mouse/touch input functionality. Therefore, it is best for most users to just copy trees.htm and modify it as you see fit. Towards the end of it in the embedded script, there are comments indicating where you should type in your game code. In particular, there is the setup section and the main loop. If you don't understand these concepts, you need to read up on basic game programming. To do anything meaningful here, refer to the list of DarkBASIC-inspired commands below.

Commands:

Graphics commands

cameraPositionX

cameraPositionY

cameraPositionZ

cameraAngleX

cameraAngleY

cameraAngleZ

getObjectCollisionX

getObjectCollisionY

getObjectCollisionZ

wrapvalue(angle)

RGBA(red,green,blue,alpha)

RGB(red,green,blue)

loadImage(file,number)

imageExist(number)

loadMesh(file,number)

meshExist(number)

loadObject(file,number)

makeObjectBox(number,width,height,depth)

makeObjectCube(number,size)

makeObjectPlane(number,width,height)

makeObjectTriangle(number,x1,y1,z1,x2,y2,z2,x3,y3,z3)

makeObjectSphere(number,size)

makeObjectColorBox(number,width,height,depth,rightRGBColor,leftRGBColor,upRGBColor,downRGBColor,frontRGBColor,backRGBColor)

makeObject(objectNumber,meshNumber[,imageNumber=0])

appendObjectMesh(objectNumber,meshNumber,RGBcolor)

colorObject(number,RGBcolor)

setObjectCull(number[,backfaceCulling=true])

textureObject(objectNumber,imageNumber)

positionObject(number,X,Y,Z)

rotateObject(number,X,Y,Z)

scaleObject(number,Xpercent,Ypercent,Zpercent)

moveObject(number,amount)

showObject(number)

hideObject(number)

objectVisible(number)

deleteObject(number)

objectPositionX(number)

objectPositionY(number)

objectPositionZ(number)

objectAngleX(number)

objectAngleY(number)

objectAngleZ(number)

objectExist(number)

makeObjectCollisionBox(objectNumber,x1,y1,z1,x2,y2,z2)

deleteObjectCollisionBox(objectNumber)

setObjectCollisionOn(objectNumber)

setObjectCollisionOff(objectNumber)

objectCollision(objectNumber1[,objectNumber2=0])

cloneObject(objectNumber2,objectNumber1)

positionCamera(X,Y,Z)

rotateCamera(X,Y,Z)

moveCamera(amount)

setCameraFOV(fov)

sync(renderer)

Sound commands

loadSound(file,number)

playSound(number)

loopSound(number)

stopSound(number)

soundExist(number)

loadMusic(file,number)

playMusic(number)

loopMusic(number)

stopMusic(number)

musicExist(number)

Conclusion. I hope that you now understand how to use the HTML5 GDK. Have fun making games.