Library to display a GUI game as a layer on top of the canvas HTML/CSS. This library has been created for CastorEngine, the editor of game and as extention for BabylonJS, the game engine 3d.
- Create texture
- Create text
- Create window draggable (with title & button close)
- Create dialog (with button close)
- Create panel (simple dialog without button close)
- Create button
- Create slider
- Create progress
- Create spinner
- Create meter
- Create radio button
- Create checkbox
- Create textfield
- Create textarea
- Create label
- Create fieldset
- Create select with options
We must create a GUIManager that allows to recover the origin of the canvas and provides other basic thing. A GUIManager can have a CSS that Formatted anything you want to customize your GUI.
var canvas = document.getElementById("game");
var css = "button {cursor:pointer;}";
var guisystem = new CASTORGUI.GUIManager(canvas, css);
Then we create interfaces items. eg textures and dialog with text:
var myFunction = function() { alert("Yes, this work!"); };
var guiTexture = new CASTORGUI.GUITexture("life", "data/image.png", {w:50,h:50,x:10,y:0}, guisystem, myFunction);
var optionsDialog = {w: (guisystem.getCanvasWidth().width - 20), h: 100, x: 8, y: (guisystem.getCanvasWidth().height - 110)};
var dialog = new CASTORGUI.GUIDialog("dialog", optionsDialog, guisystem);
dialog.setVisible(true);
var text = new CASTORGUI.GUIText("textDialog", {size:15, text:"Display text here"}, guisystem, false);
dialog.add(text);
That's it. Everything works the same way with the same simplicity.