API

CastorGUI V2.0 (ECEMAScript 6)

Library to display a GUI game as a layer on top of the canvas HTML/CSS.

Features:

Select or create themes.

Create GUI (element html5 and css3):

  • texture
  • text
  • textLink
  • label
  • window draggable (with title & button close)
  • dialog (with button close)
  • panel (simple dialog without button close)
  • button
  • slider
  • progress
  • meter (jauge de measure)
  • select color (with compatitility IE and Edge)
  • spinner
  • radio button
  • checkbox
  • textfield
  • textarea
  • fieldset
  • select with options
  • system of database (localStorage and sessionStorage)

Quick overview of use GUI

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. You can also options to add a theme in the third parameter.

let canvas = document.getElementById("game");
let css = "button {cursor:pointer;}";
let options = { themeRoot: "../style/", themeGUI: "default", pixel: false };
let guisystem = new GUIManager(canvas, css, options);

Then we create interfaces items. eg textures and dialog with text:

let myFunction = function () {
  alert("Yes, this work!");
};
let guiTexture = new GUITexture("life", "data/image.png", { w: 50, h: 50, x: 10, y: 0 }, guisystem, myFunction);


let optionsDialog = { w: guisystem.getCanvasSize().width - 20, h: 100, x: 8, y: guisystem.getCanvasSize().height - 110 };
let dialog = new GUIDialog("dialog", optionsDialog, guisystem);
dialog.setVisible(true);


let text = new 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.

Demo PG: Castor GUI Playground Demo

For use Database

let db = new DataBase(false); // true if use sessionStorage else use localStorage (stockage temporary)
db.addTable("user"); // create table
db.createField("user", "member", { pseudo: "dad72" }); // create field


db.selectItem("user", "member", "pseudo"); // return dad72
db.updateItem("user", "member", "pseudo", "Romeo"); // update pseudo
db.selectItem("user", "member", "pseudo"); // return Romeo


//if delete table:
db.deleteTable("member");
// if delete database:
db.deleteDataBase();

Demo PG: Castor GUI database Demo

Coming next

GUIButton
Creates a new GUIButton
GUIButton
GUICheckbox
Creates a new GUICheckbox.
GUICheckbox
GUIColor
Creates a new GUIColor
GUIColor
GUIDialog
Creates a new GUIDialog
GUIDialog
GUIFieldset
Creates a new GUIFieldset
GUIFieldset
GUIGroup
Creates a new GUIGroup.
GUIGroup
GUILabel
Creates a new GUILabel
GUILabel
GUIManager
Creates a new GUIManager
GUIManager
GUIMeter
Creates a new GUIMeter.
GUIMeter
GUIPanel
Creates a new GUIPanel.
GUIPanel
GUIProgress
Creates a new GUIProgress.
GUIProgress
GUIRadio
Creates a new GUIRadio.
GUIRadio
GUISelect
Creates a new GUISelect
GUISelect
GUISlider
Creates a new GUISlider.
GUISlider
GUISpinner
Creates a new GUISpinner
GUISpinner
GUIText
Library extension for displaying Castor GUI elements as a layer on top of the canvas.
GUIText
GUITextarea
Creates a new GUITextarea.
GUITextarea
GUITextfield
Creates a new GUITextfield.
GUITextfield
GUITexture
Creates a new GUITexture.
GUITexture
GUIWindow
Creates a new GUIWindow.
GUIWindow