Added the Events system, created proper Graphics.Display backends and made them selectable on start, created Graphics.Drawable stubs, tidied up and messied up some of them codes
kts
parent
cb336968a7
commit
7ad8029abf
97
CBDL.js
97
CBDL.js
|
|
@ -8,7 +8,6 @@ CBDL.version = 0.1;
|
|||
|
||||
// TODO: completely redo requires & library includes. At the moment, it is broken and disallows multiple Apps from starting if they both require libraries.
|
||||
|
||||
|
||||
CBDL.dump = function() {
|
||||
console.log("CBDL version "+CBDL.version);
|
||||
}
|
||||
|
|
@ -422,15 +421,89 @@ CBDL.loadInclude = function(include) {
|
|||
*/
|
||||
}
|
||||
|
||||
/* Event object which is used to poll a variety of events, as defined through
|
||||
* the passed event_masks bitmask, or by calling Event's addEvent method.
|
||||
*/
|
||||
CBDL.Event = function(event_masks) {
|
||||
this.pollEvents = function() {
|
||||
if (event_pool.isEmpty()) {
|
||||
return -1;
|
||||
} else {
|
||||
return event_pool.getNext();
|
||||
}
|
||||
/*
|
||||
===============================================================================
|
||||
CBDL.Event(event_masks)
|
||||
|
||||
Object that can be instantized to monitor a variety of event types, either
|
||||
through the passed event_masks bitmask, or by calling the Event Object's
|
||||
addEvent method.
|
||||
|
||||
Remake:
|
||||
Given that the JavaScript Event model uses string values for identifying
|
||||
event types(event.type), it makes little sense to use a bitmask for managing
|
||||
multiple event types. This is somewhat sad, as bitmasks are certainly more
|
||||
efficient than strings (and doing string comparisons).
|
||||
|
||||
TODO: Do a performance test of straight Event string comparison vs. an
|
||||
associative array comparison. e.g.:
|
||||
if (event.type == 'mousemove') {
|
||||
console.log('yea');
|
||||
}
|
||||
}
|
||||
|
||||
// bit comparison
|
||||
if (events[event.type] == MOUSEMOVE) {
|
||||
|
||||
}
|
||||
|
||||
===============================================================================
|
||||
*/
|
||||
CBDL.Event = CBDL.Event || function(event_types, context) {
|
||||
context = (typeof context !== 'undefined' ? context : window);
|
||||
this.event_pool = new CBDL.Event.EventPool;
|
||||
for (event_type in event_types) {
|
||||
console.log(context);
|
||||
CBDL.addEvent(context, event_types[event_type], (function(scope) {
|
||||
return function(event) {
|
||||
scope.handleEvent(event);
|
||||
}
|
||||
})(this));
|
||||
}
|
||||
};
|
||||
|
||||
CBDL.Event.prototype.handleEvent = function(event) {
|
||||
this.event_pool.push(event);
|
||||
};
|
||||
|
||||
CBDL.Event.prototype.pollEvent = function() {
|
||||
if (this.event_pool.isEmpty()) {
|
||||
return false;
|
||||
} else {
|
||||
return this.event_pool.getNext();
|
||||
}
|
||||
};
|
||||
|
||||
CBDL.Event.EventPool = CBDL.Event.EventPool || function() {};
|
||||
|
||||
CBDL.Event.EventPool.prototype.events = [];
|
||||
|
||||
CBDL.Event.EventPool.prototype.isEmpty = function() {
|
||||
if (this.events.length <= 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
CBDL.Event.EventPool.prototype.getNext = function() {
|
||||
if (this.events.length > 0) {
|
||||
return this.events.shift();
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
|
||||
CBDL.Event.EventPool.prototype.push = function(event) {
|
||||
this.events.push(event);
|
||||
};
|
||||
|
||||
// CROSS-BROWSER GLUE
|
||||
CBDL.addEvent = (typeof window.attachEvent !== 'undefined' ?
|
||||
function(target, event_type, callback, bubble) {
|
||||
var bubble = (typeof bubble === 'undefined' ? true : bubble);
|
||||
target.attachEvent('on'+event_type, callback);
|
||||
}
|
||||
:
|
||||
function(target, event_type, callback, bubble) {
|
||||
var bubble = (typeof bubble === 'undefined' ? true : bubble);
|
||||
target.addEventListener(event_type, callback, bubble);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
155
CBDL_graphics.js
155
CBDL_graphics.js
|
|
@ -3,16 +3,15 @@ CBDL.include("excanvas.js");
|
|||
*
|
||||
*
|
||||
* */
|
||||
CBDL.Graphics = CBDL.Graphics || {};
|
||||
CBDL.Graphics.version = 0.1;
|
||||
|
||||
CBDL.Graphics.DisplayType = {DIV: 0x00, CANVAS_2D:0x01};
|
||||
CBDL.Graphics.backends = {DIV: 0x00, CANVAS_2D:0x01};
|
||||
|
||||
CBDL.Graphics = CBDL.Graphics || {
|
||||
version: 0.1,
|
||||
BACKEND: {DIV: 0x00, CANVAS_2D:0x01},
|
||||
VM: {SCALE: 0x01}
|
||||
};
|
||||
/*
|
||||
===============================================================================
|
||||
|
||||
CBDL.Graphics.DisplaySkeleton
|
||||
CBDL.Graphics.BaseDisplay
|
||||
|
||||
Basic Display skeleton from which all Display backends should be derived
|
||||
from. It is through the backend detection that the Display backend, being named
|
||||
|
|
@ -22,16 +21,37 @@ bulk.
|
|||
|
||||
===============================================================================
|
||||
*/
|
||||
CBDL.Graphics.DisplaySkeleton = function(video_mode, target_element) {
|
||||
CBDL.Graphics.BaseDisplay = function(video_mode, target_element) {
|
||||
this.video_mode = video_mode;
|
||||
this.target_element = target_element;
|
||||
};
|
||||
|
||||
CBDL.Graphics.DisplaySkeleton.prototype.Init = function() {
|
||||
CBDL.Graphics.BaseDisplay.prototype.Init = function() {
|
||||
|
||||
};
|
||||
CBDL.Graphics.DisplaySkeleton.prototype.Fill = function(red, green, blue) {
|
||||
CBDL.Graphics.BaseDisplay.prototype.Fill = function(red, green, blue) {
|
||||
|
||||
};
|
||||
|
||||
CBDL.Graphics.BaseDisplay.prototype.Drawable = function() {
|
||||
console.log("BaseDrawable");
|
||||
};
|
||||
|
||||
CBDL.Graphics.getBackend = function() {
|
||||
var supports = [];
|
||||
try { var element = document.createElement("div"); }
|
||||
catch (err) { element = null; }
|
||||
if (element != null) {
|
||||
supports.push(CBDL.Graphics.BACKEND.DIV);
|
||||
}
|
||||
try { var element = document.createElement("canvas"); }
|
||||
catch (err) { element = null; }
|
||||
if (element != null) {
|
||||
supports.push(CBDL.Graphics.BACKEND.CANVAS_2D);
|
||||
}
|
||||
return supports[supports.length-1];
|
||||
};
|
||||
|
||||
/*
|
||||
===============================================================================
|
||||
|
||||
|
|
@ -48,7 +68,104 @@ Usage:
|
|||
|
||||
===============================================================================
|
||||
*/
|
||||
CBDL.Graphics.Display = function(video_mode, target_element) {
|
||||
|
||||
CBDL.Graphics.Display = function(target_element, video_mode, backend) {
|
||||
backend = (typeof backend !== 'undefined' ? backend : CBDL.Graphics.getBackend());
|
||||
target_element = (typeof target_element !== 'undefined' ? target_element : document.body);
|
||||
switch (backend) {
|
||||
case CBDL.Graphics.BACKEND.CANVAS_2D:
|
||||
return (new CBDL.Graphics.Canvas2dDisplay(target_element, video_mode));
|
||||
break;
|
||||
case CBDL.Graphics.BACKEND.DIV:
|
||||
return (new CBDL.Graphics.DivDisplay(target_element, video_mode));
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay = function(target_element, video_mode) {
|
||||
this.video_mode = video_mode;
|
||||
this.target_element = target_element;
|
||||
this.type = 'Canvas2dDisplay';
|
||||
}; CBDL.extend(CBDL.Graphics.BaseDisplay, CBDL.Graphics.Canvas2dDisplay);
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype.Init = function() {
|
||||
this.element = document.createElement("canvas");
|
||||
this.element.style.width = this.video_mode.width;
|
||||
this.element.style.height = this.video_mode.height;
|
||||
this.element_context = this.element.getContext("2d");
|
||||
this.target_element.appendChild(this.element);
|
||||
};
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype.Fill = function(red, green, blue) {
|
||||
var hex_value = ((1 << 24) + (red << 16) + (green << 8) + blue);
|
||||
var hex_string = hex_value.toString(16).substr(1);
|
||||
this.element_context.fillStyle = "#"+hex_string;
|
||||
this.element_context.fillRect(0, 0, this.video_mode.width, this.video_mode.height);
|
||||
};
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype.Drawable = function(v_position, v_scale, v_rotation, color) {
|
||||
return (new CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_(this, v_position, v_scale, v_rotation, color));
|
||||
};
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_ = function(display, v_position, v_scale, v_rotation, color) {
|
||||
this.display = display;
|
||||
this.position = v_position;
|
||||
this.scale = v_scale;
|
||||
this.rotation = v_rotation;
|
||||
this.color = color;
|
||||
|
||||
console.log("created");
|
||||
};
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.setX = function(x) {
|
||||
this.x = x;
|
||||
};
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.setY = function(y) {
|
||||
this.y = y;
|
||||
};
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.testFunc = function() {
|
||||
console.log("augh");
|
||||
};
|
||||
|
||||
/*
|
||||
===============================================================================
|
||||
|
||||
CBDL.Graphics.DivDisplay
|
||||
|
||||
The div element based backend. This is the least capable backend of all default
|
||||
backends, supporting only the most basic drawing operations, not including
|
||||
rotation, shearing, or other such operations.
|
||||
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
CBDL.Graphics.DivDisplay = function(target_element, video_mode) {
|
||||
this.target_element = target_element;
|
||||
this.video_mode = video_mode;
|
||||
this.type = 'DivDisplay';
|
||||
}; CBDL.extend(CBDL.Graphics.BaseDisplay, CBDL.Graphics.DivDisplay);
|
||||
|
||||
CBDL.Graphics.DivDisplay.prototype.Init = function() {
|
||||
this.element = document.createElement("div");
|
||||
this.element.style.width = this.video_mode.width;
|
||||
this.element.style.height = this.video_mode.height;
|
||||
this.target_element.appendChild(this.element);
|
||||
};
|
||||
|
||||
CBDL.Graphics.DivDisplay.prototype.Fill = function(red, green, blue) {
|
||||
var hex_value = ((1 << 24) + (red << 16) + (green << 8) + blue);
|
||||
var hex_string = hex_value.toString(16).substr(1);
|
||||
this.element.style.backgroundColor = "#"+hex_string;
|
||||
};
|
||||
|
||||
CBDL.Graphics.DivDisplay.prototype.Drawable = function() {
|
||||
this.lol = "lol";
|
||||
console.log("buh");
|
||||
};
|
||||
|
||||
CBDL.Graphics.Dispray = function(video_mode, target_element) {
|
||||
var _context = CBDL.Graphics;
|
||||
this.context = null;
|
||||
this.init = function() {
|
||||
|
|
@ -106,10 +223,11 @@ defining the width and height of the Display.
|
|||
|
||||
===============================================================================
|
||||
*/
|
||||
CBDL.Graphics.VideoMode = function(width, height) {
|
||||
CBDL.Graphics.VideoMode = function(width, height, flags) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
}
|
||||
this.flags = flags;
|
||||
};
|
||||
|
||||
/*
|
||||
===============================================================================
|
||||
|
|
@ -138,14 +256,3 @@ CBDL.Graphics.Drawable = function(position, scale, rotation) {
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
===============================================================================
|
||||
|
||||
===============================================================================
|
||||
*/
|
||||
CBDL._Graphics_ = function() {};
|
||||
CBDL._Graphics_.prototype.VideoMode = function(width, height) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
};
|
||||
|
|
|
|||
129
cbdl.html
129
cbdl.html
|
|
@ -2,55 +2,134 @@
|
|||
<head>
|
||||
<script type="text/javascript" src="CBDL.js"></script>
|
||||
<script type="text/javascript">
|
||||
myApp = function() {
|
||||
this.name = "myApp";
|
||||
this.requires = ["CBDL_graphics.js"];
|
||||
var main_display; // private member
|
||||
var main_loop; // private member
|
||||
myBenchmark = function() {
|
||||
var events;
|
||||
|
||||
|
||||
this.Main = function() { // override parent's Main
|
||||
main_display = new CBDL.Graphics.Display(new CBDL.Graphics.VideoMode(800, 600));
|
||||
(main_loop = new CBDL.Loop(this, this.Loop)).start();
|
||||
this.Main = function() {
|
||||
var results = 0;
|
||||
events = new CBDL.Event();
|
||||
console.log("first test, 50 iterations of 1000:");
|
||||
for(var i=0;i<50;i++) {
|
||||
results += this.firstTest();
|
||||
}
|
||||
console.log("results: "+(results/50));
|
||||
console.log("second test, 50 iterations of 1000:");
|
||||
results = 0;
|
||||
for(var i=0;i<50;i++) {
|
||||
results += this.secondTest();
|
||||
}
|
||||
console.log("results: "+(results/50));
|
||||
};
|
||||
|
||||
this.Loop = function(delta) { // our custom Loop member :)
|
||||
main_display.Fill(0xFF, 0xF0, 0xF0);
|
||||
console.log("l: "+this.name);
|
||||
return(1000);
|
||||
this.firstTest = function() {
|
||||
var time_start = new Date().getTime();
|
||||
for(var i=0;i<1000;i++) {
|
||||
var object = {};
|
||||
object.type = "test";
|
||||
events.event_pool.push(object);
|
||||
}
|
||||
while(event = events.pollEvent()) {
|
||||
if (object.type == "test") {
|
||||
// just a test
|
||||
} else if (object.type == "mousemove") {
|
||||
// doot doot
|
||||
} else if (object.type == "keypress") {
|
||||
//la la
|
||||
}
|
||||
}
|
||||
var time_end = new Date().getTime();
|
||||
return(time_end-time_start);
|
||||
};
|
||||
|
||||
}; CBDL.extend(CBDL.App, myApp); // Don't forget this line! sets up prototypal inheritance
|
||||
TEST = 0x01;
|
||||
MOUSEMOVE = 0x02;
|
||||
KEYPRESS = 0x03;
|
||||
|
||||
this.events_list = {
|
||||
"test": TEST,
|
||||
"mousemove": MOUSEMOVE,
|
||||
"keypress": KEYPRESS
|
||||
};
|
||||
|
||||
this.secondTest = function() {
|
||||
var time_start = new Date().getTime();
|
||||
for(var i=0;i<1000;i++) {
|
||||
var object = {};
|
||||
object.type = "test";
|
||||
events.event_pool.push(object);
|
||||
}
|
||||
while(event = events.pollEvent()) {
|
||||
switch(this.events_list[object.type]) {
|
||||
case TEST:
|
||||
// something
|
||||
break;
|
||||
case MOUSEMOVE:
|
||||
// something else
|
||||
break;
|
||||
case KEYPRESS:
|
||||
// doop doop
|
||||
break;
|
||||
}
|
||||
}
|
||||
var time_end = new Date().getTime();
|
||||
return(time_end-time_start);
|
||||
};
|
||||
}; CBDL.extend(CBDL.App, myBenchmark);
|
||||
|
||||
myApp2 = function() {
|
||||
this.name = "myApp2";
|
||||
var main_display; // private member
|
||||
this.requires = ["CBDL_graphics.js"];
|
||||
var display; // private member
|
||||
var main_loop; // private member
|
||||
var events;
|
||||
var event;
|
||||
|
||||
this.Main = function() { // override parent's Main
|
||||
// main_display = new CBDL.Graphics.Display(new CBDL.Graphics.VideoMode(1000, 240));
|
||||
(main_loop = new CBDL.Loop(this, this.Loop)).start();
|
||||
this.Main = function() {
|
||||
display = new CBDL.Graphics.Display(document.body, new CBDL.Graphics.VideoMode(320, 240, CBDL.Graphics.VM_SCALE), CBDL.Graphics.BACKEND.CANVAS_2D);
|
||||
display.Init();
|
||||
display.Fill(0x00, 0x00, 0x00);
|
||||
|
||||
var drawable = new display.Drawable();
|
||||
console.log(drawable.testFunc);
|
||||
drawable.testFunc();
|
||||
|
||||
events = new CBDL.Event(["keydown", "keyup", "focus", "blur"]);
|
||||
|
||||
(main_loop = new CBDL.Loop(this, onLoop)).start();
|
||||
};
|
||||
|
||||
this.Loop = function(delta) { // our custom Loop member :)
|
||||
//main_display.Fill(0xFF, 0xF0, 0xF0);
|
||||
console.log("l: "+this.name);
|
||||
function onLoop(delta) {
|
||||
while(event = events.pollEvent()) {
|
||||
if (event.type == "blur") {
|
||||
onBlur();
|
||||
} else if (event.type == "focus") {
|
||||
onFocus();
|
||||
} else if (event.type == "keydown") {
|
||||
console.log("keydown: "+event.keyCode);
|
||||
} else if (event.type == "keyup") {
|
||||
console.log("keyup: "+event.keyCode);
|
||||
}
|
||||
}
|
||||
return(10);
|
||||
};
|
||||
|
||||
}; CBDL.extend(CBDL.App, myApp2); // Don't forget this line! sets up prototypal inheritance
|
||||
function onFocus() {
|
||||
display.Fill(0x00, 0x00, 0x00);
|
||||
};
|
||||
|
||||
function onBlur() {
|
||||
display.Fill(0x4F, 0x4F, 0x4F);
|
||||
};
|
||||
|
||||
}; CBDL.extend(CBDL.App, myApp2);
|
||||
|
||||
init = function() {
|
||||
var app_2 = new myApp2();
|
||||
app_2.Go();
|
||||
var app = new myApp();
|
||||
app.Go();
|
||||
}
|
||||
CBDL.addEvent(window, 'load', init);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="init()">init()</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue