diff --git a/img/frames/unstable/margins/pinline.svg b/img/frames/unstable/margins/pinline.svg
new file mode 100644
index 00000000..a66ba15d
--- /dev/null
+++ b/img/frames/unstable/margins/pinline.svg
@@ -0,0 +1,7 @@
+
+
+
diff --git a/img/frames/unstable/margins/pinlineThumb.png b/img/frames/unstable/margins/pinlineThumb.png
new file mode 100644
index 00000000..085bc3c6
Binary files /dev/null and b/img/frames/unstable/margins/pinlineThumb.png differ
diff --git a/img/frames/unstable/margins/title.svg b/img/frames/unstable/margins/title.svg
new file mode 100644
index 00000000..44f2d2b3
--- /dev/null
+++ b/img/frames/unstable/margins/title.svg
@@ -0,0 +1,5 @@
+
+
+
diff --git a/img/frames/unstable/margins/titleThumb.png b/img/frames/unstable/margins/titleThumb.png
new file mode 100644
index 00000000..b88e75ad
Binary files /dev/null and b/img/frames/unstable/margins/titleThumb.png differ
diff --git a/js/creator-23.js b/js/creator-23.js
index 91619c3d..91e24461 100644
--- a/js/creator-23.js
+++ b/js/creator-23.js
@@ -337,9 +337,11 @@ function drawFrames() {
//manually blends colors, basing blending-alpha on the masks and desired draw-opacity, but preserving alpha
for (var i = 0; i < existingPixels.length; i += 4) {
const functionalAlpha = maskPixels[i + 3] * functionalAlphaMultiplier //functional alpha = alpha ignoring source image
- existingPixels[ i ] = existingPixels[ i ] * (1 - functionalAlpha) + newPixels[ i ] * functionalAlpha; //RED
- existingPixels[i + 1] = existingPixels[i + 1] * (1 - functionalAlpha) + newPixels[i + 1] * functionalAlpha; //GREEN
- existingPixels[i + 2] = existingPixels[i + 2] * (1 - functionalAlpha) + newPixels[i + 2] * functionalAlpha; //BLUE
+ if (newPixels[i + 3] > 0) { //Only blend if the new image has alpha
+ existingPixels[ i ] = existingPixels[ i ] * (1 - functionalAlpha) + newPixels[ i ] * functionalAlpha; //RED
+ existingPixels[i + 1] = existingPixels[i + 1] * (1 - functionalAlpha) + newPixels[i + 1] * functionalAlpha; //GREEN
+ existingPixels[i + 2] = existingPixels[i + 2] * (1 - functionalAlpha) + newPixels[i + 2] * functionalAlpha; //BLUE
+ }
}
frameContext.putImageData(existingData, 0, 0);
} else {
diff --git a/js/frames/packMarginUnstable.js b/js/frames/packMarginUnstable.js
index 37e114c9..a1cbcbca 100644
--- a/js/frames/packMarginUnstable.js
+++ b/js/frames/packMarginUnstable.js
@@ -1,15 +1,16 @@
//Create objects for common properties across available frames
var bounds = {x:-0.044, y:-1/35, width:1.088, height:37/35};
var ogBounds = {x:0, y:0, width:1, height:1};
+var masks = [{src:'/img/frames/unstable/margins/title.svg', name:'Title'}, {src:'/img/frames/unstable/margins/pinline.svg', name:'Bottom'}];
//defines available frames
availableFrames = [
- {name:'White Extension', src:'/img/frames/unstable/margins/w.png', bounds:bounds, ogBounds:ogBounds},
- {name:'Blue Extension', src:'/img/frames/unstable/margins/u.png', bounds:bounds, ogBounds:ogBounds},
- {name:'Black Extension', src:'/img/frames/unstable/margins/b.png', bounds:bounds, ogBounds:ogBounds},
- {name:'Red Extension', src:'/img/frames/unstable/margins/r.png', bounds:bounds, ogBounds:ogBounds},
- {name:'Green Extension', src:'/img/frames/unstable/margins/g.png', bounds:bounds, ogBounds:ogBounds},
- {name:'Multicolored Extension', src:'/img/frames/unstable/margins/m.png', bounds:bounds, ogBounds:ogBounds},
- {name:'Land Extension', src:'/img/frames/unstable/margins/c.png', bounds:bounds, ogBounds:ogBounds}
+ {name:'White Extension', src:'/img/frames/unstable/margins/w.png', bounds:bounds, ogBounds:ogBounds, masks:masks},
+ {name:'Blue Extension', src:'/img/frames/unstable/margins/u.png', bounds:bounds, ogBounds:ogBounds, masks:masks},
+ {name:'Black Extension', src:'/img/frames/unstable/margins/b.png', bounds:bounds, ogBounds:ogBounds, masks:masks},
+ {name:'Red Extension', src:'/img/frames/unstable/margins/r.png', bounds:bounds, ogBounds:ogBounds, masks:masks},
+ {name:'Green Extension', src:'/img/frames/unstable/margins/g.png', bounds:bounds, ogBounds:ogBounds, masks:masks},
+ {name:'Multicolored Extension', src:'/img/frames/unstable/margins/m.png', bounds:bounds, ogBounds:ogBounds, masks:masks},
+ {name:'Land Extension', src:'/img/frames/unstable/margins/c.png', bounds:bounds, ogBounds:ogBounds, masks:masks}
];
//disables/enables the "Load Frame Version" button
document.querySelector('#loadFrameVersion').disabled = false;