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
Other software
Files. The HTML5 GDK includes the following files (folders in bold):
|
html5gdk_v09 - documentation.htm - this file (documentation) readme.txt - HTML5 GDK readme file android - HTML5GDKApp - an Android Studio project app-debug.apk - Try it out on your Android! compiled from the HTML5GDKApp project. read-me-first.txt - how to get the Android stuff to work 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-readme.txt - taken from Pre3D's readme file 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) testtex.png - a smiley face (game asset) testtex.htm - a spinning sphere that demonstrates texture mapping 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) tools - objcruncher.htm - a utility to turn Wavefront OBJ (triangles only, no quads) 3D model files into single-line strings rawcruncher.htm - a utility to turn RAW 3D model files into single-line strings |
Getting started. The first thing you probably want to do is try out the demos (here, here, 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.
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[,importScale=1.0]) meshExist(number) loadObject(file,number[,importScale=1.0]) 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)
loadSound(file,number) playSound(number) loopSound(number) stopSound(number) soundExist(number) loadMusic(file,number) playMusic(number) loopMusic(number) stopMusic(number) musicExist(number)
Other software
This is a personal, unsorted, and non-comprehensive list of other free and open source software that can be used to make games for PC and Android.
Babylon.js - WebGL game library made by Microsoft employees, even higher level than DarkBASIC so there's a lot of single-line functionality (though somehow it's not easier than DarkBASIC), typical easy-to-use Microsoft bloatware with a late '90s vibe and late 2000s graphics. One of the demos is a classy Microsoft-themed coffee bar that looks more like an Apple store. The idea of the whole thing is that you tinker a little but Babylon.js does most of the work, so getting under the hood is impossible but at least it does everything for you. Might make a good backend for the HTML5 GDK if WebGL is ready to replace drawing 2D HTML5 canvas polygons as 3D, and at this point in time it definitely is.
PhoneGap - Just as Babylon.js is like the HTML5 GDK's Pre3D, PhoneGap is like the HTML5 GDK's HTML5GDKApp, except it also targets more platforms than Android. I've only avoided using it because it feels like overkill, not to mention iOS has no interest in using web technology over Objective C. There's still Blackberry though. if you want to put your HTML5 GDK game on Blackberry, PhoneGap will do it. Oh yeah, there's also Windows Phone. I forgot about that one. Really I've just avoided using PhoneGap because I prefer code over a GUI.
Node-Webkit - This thing is great. I love it. It's the only way to distribute your HTML5 GDK games on PC (or Mac). It also works very well for Babylon.js. It's basically PhoneGap for PCs (and Macs).
Godot - This up-and-comer is like Unity but better in almost every way (exept I think it does GDscript instead of JavaScript), though as of this writing it hasn't yet hit a 2.0 stable release. When it does, reality will implode. Imagine using this with the HoloLens or at least one of those virtual reality attachments you can order for $10 that attach to your phone. VR hardware can be kind of expensive and it's not unheard of for Godot to lag on mobile devices just a little bit more than Unity, but I think that's just the nature of the demos it ships with. Needs more demos and documentation, but this thing is actually functional and well-developed. It's not another Maratis.
QB64 - Development seems to have halted though it does technically do 3D and it does technically work on Android.