Added a buncha display backend stuff. Currently implemented is an HTML5 canvas display and a traditional Div-based display using CSS3 for rotation, scaling, etc.. Stub in-place for WebGL 2D Display
kts
parent
73f99487ea
commit
97b448abe8
75
CBDL.js
75
CBDL.js
|
|
@ -486,6 +486,42 @@ CBDL.Event = CBDL.Event || function(event_types, context) {
|
|||
}
|
||||
};
|
||||
|
||||
CBDL.Event.prototype.addEvent = function(event_types, context) {
|
||||
context = (typeof context !== 'undefined' ? context : window);
|
||||
for (event_type in event_types) {
|
||||
CBDL.addEvent(context, event_types[event_type], (function(scope) {
|
||||
return function(event) {
|
||||
// IE is so broken. After pushing an event to
|
||||
// an array, and even after checking if the
|
||||
// event is still a proper event(check its
|
||||
// .type property) after you PUSH it,
|
||||
// once you attempt to retrieve it, it somehow
|
||||
// reverts to a basic MSEventObj object. WTF
|
||||
// AKA:
|
||||
// event_list.push(event);
|
||||
// console.log(event_list[0].type);
|
||||
// ^-- returns "keydown"
|
||||
// THEN, elsewhere:
|
||||
// console.log(event_list[0].type);
|
||||
// ^-- ERROR, NO SUCH MEMBER
|
||||
// This problem is bypassed if you first create
|
||||
// a new Object, copy the event's properties
|
||||
// to it, then push that new Object to the
|
||||
// array. It can retrieve the data fine
|
||||
// afterwards. This must mean that IE destroys
|
||||
// the Event object, even if you add it to an
|
||||
// array. :(
|
||||
// TODO: make an IE-only CBDL.Event.
|
||||
var _event_ = new Object();
|
||||
for (property in event) {
|
||||
_event_[property] = event[property];
|
||||
}
|
||||
scope.handleEvent(_event_);
|
||||
}
|
||||
})(this));
|
||||
}
|
||||
};
|
||||
|
||||
CBDL.Event.prototype.handleEvent = function(event) {
|
||||
this.event_pool.push(event);
|
||||
};
|
||||
|
|
@ -532,3 +568,42 @@ CBDL.addEvent = (typeof window.attachEvent !== 'undefined' ?
|
|||
target.addEventListener(event_type, callback, bubble);
|
||||
}
|
||||
);
|
||||
|
||||
CBDL.test_div = document.createElement('div');
|
||||
|
||||
if ('WebkitTransform' in CBDL.test_div.style) {
|
||||
CBDL.setElementTransform = function(element, transform) {
|
||||
element.style.webkitTransform = transform;
|
||||
};
|
||||
CBDL.clearElementTransform = function(element) {
|
||||
element.style.webkitTransform = '';
|
||||
}
|
||||
} else if ('MozTransform' in CBDL.test_div.style) {
|
||||
CBDL.setElementTransform = function(element, transform) {
|
||||
element.style.MozTransform = transform;
|
||||
};
|
||||
CBDL.clearElementTransform = function(element) {
|
||||
element.style.MozTransform = '';
|
||||
}
|
||||
} else if ('msTransform' in CBDL.test_div.style) {
|
||||
CBDL.setElementTransform = function(element, transform) {
|
||||
element.style.msTransform = transform;
|
||||
};
|
||||
CBDL.clearElementTransform = function(element) {
|
||||
element.style.msTransform = '';
|
||||
}
|
||||
} else if ('OTransform' in CBDL.test_div.style) {
|
||||
CBDL.setElementTransform = function(element, transform) {
|
||||
element.style.OTransform = transform;
|
||||
};
|
||||
CBDL.clearElementTransform = function(element) {
|
||||
element.style.OTransform = '';
|
||||
}
|
||||
} else if ('transform' in CBDL.test_div.style) {
|
||||
CBDL.setElementTransform = function(element, transform) {
|
||||
element.style.transform = transform;
|
||||
};
|
||||
CBDL.clearElementTransform = function(element) {
|
||||
element.style.transform = '';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
173
CBDL_graphics.js
173
CBDL_graphics.js
|
|
@ -5,8 +5,9 @@ CBDL.include("excanvas.js");
|
|||
* */
|
||||
CBDL.Graphics = CBDL.Graphics || {
|
||||
version: 0.1,
|
||||
BACKEND: {DIV: 0x00, CANVAS_2D:0x01},
|
||||
VM: {SCALE: 0x01}
|
||||
BACKEND: {DIV: 0x00, CANVAS_2D:0x01, WEBGL:0x02},
|
||||
VM: {SCALE: 0x01},
|
||||
RADIAN: (Math.PI/180)
|
||||
};
|
||||
/*
|
||||
===============================================================================
|
||||
|
|
@ -33,10 +34,35 @@ CBDL.Graphics.BaseDisplay.prototype.Fill = function(red, green, blue) {
|
|||
|
||||
};
|
||||
|
||||
CBDL.Graphics.BaseDisplay.prototype.Drawable = function() {
|
||||
console.log("BaseDrawable");
|
||||
CBDL.Graphics.BaseDisplay.prototype._Drawable_ = function(display, size, scale, rotation) {
|
||||
this.display = display;
|
||||
this.size = size;
|
||||
this.scale = scale;
|
||||
this.rotation = rotation;
|
||||
};
|
||||
|
||||
CBDL.Graphics.BaseDisplay.prototype._Drawable_.prototype.setRotation = function(rotation) {
|
||||
this.rotation = rotation;
|
||||
};
|
||||
|
||||
CBDL.Graphics.BaseDisplay.prototype._Drawable_.prototype.setScale = function(scale) {
|
||||
this.scale = scale;
|
||||
};
|
||||
|
||||
CBDL.Graphics.BaseDisplay.prototype._Drawable_.prototype.setSize = function(size) {
|
||||
this.size = size;
|
||||
};
|
||||
|
||||
CBDL.Graphics.BaseDisplay.prototype._Image_ = function(display, image, scale, rotation) {
|
||||
this.display = display;
|
||||
this.data = new Image();
|
||||
this.data.onload = function() {
|
||||
};
|
||||
this.data.src = image;
|
||||
this.scale = scale;
|
||||
this.rotation = rotation;
|
||||
};CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Drawable_, CBDL.Graphics.BaseDisplay.prototype._Image_);
|
||||
|
||||
CBDL.Graphics.getBackend = function() {
|
||||
var supports = [];
|
||||
try { var element = document.createElement("div"); }
|
||||
|
|
@ -48,6 +74,9 @@ CBDL.Graphics.getBackend = function() {
|
|||
catch (err) { element = null; }
|
||||
if (element != null) {
|
||||
supports.push(CBDL.Graphics.BACKEND.CANVAS_2D);
|
||||
if (element.getContext('webgl')) {
|
||||
supports.push(CBDL.Graphics.BACKEND.WEBGL);
|
||||
}
|
||||
}
|
||||
return supports[supports.length-1];
|
||||
};
|
||||
|
|
@ -73,6 +102,9 @@ 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.WEBGL:
|
||||
return (new CBDL.Graphics.WebGlDisplay(target_element, video_mode));
|
||||
break;
|
||||
case CBDL.Graphics.BACKEND.CANVAS_2D:
|
||||
return (new CBDL.Graphics.Canvas2dDisplay(target_element, video_mode));
|
||||
break;
|
||||
|
|
@ -82,6 +114,39 @@ CBDL.Graphics.Display = function(target_element, video_mode, backend) {
|
|||
}
|
||||
};
|
||||
|
||||
CBDL.Graphics.WebGlDisplay = function(target_element, video_mode) {
|
||||
this.video_mode = video_mode;
|
||||
this.target_element = target_element;
|
||||
this.type = 'WebGlDisplay';
|
||||
}; CBDL.extend(CBDL.Graphics.BaseDisplay, CBDL.Graphics.WebGlDisplay);
|
||||
|
||||
CBDL.Graphics.WebGlDisplay.prototype.Init = function() {
|
||||
this.element = document.createElement("canvas");
|
||||
this.element.width = this.video_mode.width;
|
||||
this.element.height = this.video_mode.height;
|
||||
this.element_context = this.element.getContext("webgl") || this.element.getContext("experimental-webgl");
|
||||
this.element_context.viewport(0, 0, this.video_mode.width, this.video_mode.height);
|
||||
this.target_element.appendChild(this.element);
|
||||
};
|
||||
|
||||
CBDL.Graphics.WebGlDisplay.prototype.Image = function(image, scale, rotation) {
|
||||
return (new CBDL.Graphics.BaseDisplay.prototype._Image_(this, image, scale, rotation));
|
||||
};
|
||||
|
||||
CBDL.Graphics.WebGlDisplay.prototype._Image_ = function(display, image, scale, rotation) {
|
||||
this.display = display;
|
||||
this.data = new Image();
|
||||
this.data.texture = display.element_context.createTexture();
|
||||
this.data.onload = (function(image) {
|
||||
return function() {
|
||||
image.loaded = true;
|
||||
};
|
||||
}(this));
|
||||
this.data.src = image;
|
||||
this.scale = scale;
|
||||
this.rotation = rotation;
|
||||
};CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Drawable_, CBDL.Graphics.WebGlDisplay.prototype._Image_);
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay = function(target_element, video_mode) {
|
||||
this.video_mode = video_mode;
|
||||
this.target_element = target_element;
|
||||
|
|
@ -90,8 +155,8 @@ CBDL.Graphics.Canvas2dDisplay = function(target_element, video_mode) {
|
|||
|
||||
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.width = this.video_mode.width;
|
||||
this.element.height = this.video_mode.height;
|
||||
this.element_context = this.element.getContext("2d");
|
||||
this.target_element.appendChild(this.element);
|
||||
};
|
||||
|
|
@ -103,30 +168,42 @@ CBDL.Graphics.Canvas2dDisplay.prototype.Fill = function(red, green, blue) {
|
|||
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.clear = function() {
|
||||
this.element_context.fillStyle = "#000000";
|
||||
this.element_context.fillRect(0, 0, this.video_mode.width, this.video_mode.height);
|
||||
};
|
||||
|
||||
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;
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype.draw = function(source, s_position, t_position) {
|
||||
this.element_context.save();
|
||||
|
||||
console.log("created");
|
||||
this.element_context.translate(t_position.x, t_position.y);
|
||||
|
||||
if (source.data instanceof Image) {
|
||||
this.element_context.translate(source.data.width/2, source.data.height/2);
|
||||
if (typeof source.rotation !== 'undefined') {
|
||||
this.element_context.rotate(source.rotation * CBDL.Graphics.RADIAN);
|
||||
}
|
||||
if (typeof source.scale !== 'undefined') {
|
||||
this.element_context.scale(source.scale.x, source.scale.y);
|
||||
}
|
||||
this.element_context.drawImage(source.data, -(source.data.width/2), -(source.data.height/2));
|
||||
} else {
|
||||
this.element_context.translate(source.size.width/2, source.size.height/2);
|
||||
if (typeof source.rotation !== 'undefined') {
|
||||
this.element_context.rotate(source.rotation * CBDL.Graphics.RADIAN);
|
||||
}
|
||||
this.element_context.fillStyle = "#FFFFFF";
|
||||
this.element_context.fillRect(-(source.size.width/2), -(source.size.height/2), source.size.width, source.size.height);
|
||||
}
|
||||
this.element_context.restore();
|
||||
};
|
||||
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.setX = function(x) {
|
||||
this.x = x;
|
||||
CBDL.Graphics.Canvas2dDisplay.prototype.Drawable = function(size, scale, rotation) {
|
||||
return (new CBDL.Graphics.BaseDisplay.prototype._Drawable_(this, size, scale, rotation));
|
||||
};
|
||||
|
||||
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.Canvas2dDisplay.prototype.Image = function(image, scale, rotation) {
|
||||
return (new CBDL.Graphics.BaseDisplay.prototype._Image_(this, image, scale, rotation));
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -149,8 +226,11 @@ CBDL.Graphics.DivDisplay = function(target_element, video_mode) {
|
|||
|
||||
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.element.style.position = "relative";
|
||||
this.element.style.width = this.video_mode.width+"px";
|
||||
this.element.style.height = this.video_mode.height+"px";
|
||||
this.element.style.display = "block";
|
||||
this.element.style.overflow = "hidden";
|
||||
this.target_element.appendChild(this.element);
|
||||
};
|
||||
|
||||
|
|
@ -160,11 +240,54 @@ CBDL.Graphics.DivDisplay.prototype.Fill = function(red, green, blue) {
|
|||
this.element.style.backgroundColor = "#"+hex_string;
|
||||
};
|
||||
|
||||
CBDL.Graphics.DivDisplay.prototype.draw = function(source, s_position, t_position) {
|
||||
source.data.style.visibility = 'hidden';
|
||||
if (!source.isDrawn) {
|
||||
source.data.style.position = "absolute";
|
||||
source.data.style.display = "block";
|
||||
this.element.appendChild(source.data);
|
||||
source.isDrawn = true;
|
||||
}
|
||||
|
||||
var transform = '';
|
||||
|
||||
if (typeof source.rotation !== 'undefined') {
|
||||
transform += "rotate("+source.rotation+"deg)"
|
||||
}
|
||||
if (typeof source.scale !== 'undefined') {
|
||||
transform += "scale("+source.scale.x+", "+source.scale.y+")"
|
||||
}
|
||||
|
||||
source.data.style.left = t_position.x+"px";
|
||||
source.data.style.top = t_position.y+"px";
|
||||
CBDL.setElementTransform(source.data, transform);
|
||||
source.data.style.visibility = 'visible';
|
||||
// source.data.style.width = source.data.width;
|
||||
// source.data.style.height = source.data.height;
|
||||
};
|
||||
|
||||
CBDL.Graphics.DivDisplay.prototype.clear = function() {
|
||||
this.element.style.backgroundColor = "#000000";
|
||||
};
|
||||
|
||||
CBDL.Graphics.DivDisplay.prototype.Drawable = function() {
|
||||
this.lol = "lol";
|
||||
console.log("buh");
|
||||
};
|
||||
|
||||
CBDL.Graphics.DivDisplay.prototype.Image = function(image, scale, rotation) {
|
||||
return (new CBDL.Graphics.DivDisplay.prototype._Image_(this, image, scale, rotation));
|
||||
};
|
||||
|
||||
CBDL.Graphics.DivDisplay.prototype._Image_ = function(display, image, scale, rotation) {
|
||||
this.isDrawn = false;
|
||||
this.display = display;
|
||||
this.data = document.createElement("img");
|
||||
this.data.src = image;
|
||||
this.scale = scale;
|
||||
this.rotation = rotation;
|
||||
};CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Drawable_, CBDL.Graphics.DivDisplay.prototype._Image_);
|
||||
|
||||
CBDL.Graphics.Dispray = function(video_mode, target_element) {
|
||||
var _context = CBDL.Graphics;
|
||||
this.context = null;
|
||||
|
|
|
|||
37
cbdl.html
37
cbdl.html
|
|
@ -84,31 +84,58 @@ myApp2 = function() {
|
|||
var events;
|
||||
var event;
|
||||
|
||||
var drawable, drawable2, drawable3;
|
||||
var rotation = 0;
|
||||
var x = 0, y = 0;
|
||||
|
||||
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 = new CBDL.Graphics.Display(document.body, new CBDL.Graphics.VideoMode(320, 240, CBDL.Graphics.VM_SCALE), CBDL.Graphics.BACKEND.DIV);
|
||||
console.log("Display Type: "+display.type);
|
||||
display.Init();
|
||||
display.Fill(0x00, 0x00, 0x00);
|
||||
|
||||
var drawable = new display.Drawable();
|
||||
drawable = new display.Image("test.gif", {x: 1, y: 1}, rotation);
|
||||
drawable2 = new display.Image("test.gif", {x: 2, y: 2}, rotation);
|
||||
drawable3 = new display.Image("test.gif", {x: 3, y: 3}, rotation);
|
||||
|
||||
events = new CBDL.Event(["blur", "focus", "keydown", "keyup"], document.body);
|
||||
events = new CBDL.Event(["keydown", "keyup"], document.body);
|
||||
events.addEvent(["blur", "focus"], window);
|
||||
|
||||
(main_loop = new CBDL.Loop(this, onLoop)).start();
|
||||
};
|
||||
|
||||
var keys = [];
|
||||
|
||||
function onLoop(delta) {
|
||||
display.clear();
|
||||
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);
|
||||
keys[event.keyCode] = true;
|
||||
} else if (event.type == "keyup") {
|
||||
console.log("keyup: "+event.keyCode);
|
||||
keys[event.keyCode] = false;
|
||||
}
|
||||
}
|
||||
if (keys[39]) {
|
||||
rotation += 1;
|
||||
x += 1;
|
||||
drawable.setRotation(rotation);
|
||||
drawable2.setRotation(rotation);
|
||||
drawable3.setRotation(rotation);
|
||||
}
|
||||
if (keys[37]) {
|
||||
rotation -= 1;
|
||||
x -= 1;
|
||||
drawable.setRotation(rotation);
|
||||
drawable2.setRotation(rotation);
|
||||
drawable3.setRotation(rotation);
|
||||
}
|
||||
display.draw(drawable, {x:0, y:0}, {x: x, y: y});
|
||||
display.draw(drawable2, {x:0, y:0}, {x: x+32, y: y+32});
|
||||
display.draw(drawable3, {x:0, y:0}, {x: x+96, y: y+96});
|
||||
return(10);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue