GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-26 21:04:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

improved unstable margins / preserve opacity

Browse Source
This commit is contained in:
Kyle
2021-10-24 13:23:52 -07:00
parent 6efb64f8f2
commit f2f5ecf8b5
6 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
img/frames/unstable/margins/pinline.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1632" height="2220" viewBox="0 0 1632 2220" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="Pinline" transform="matrix(1,0,0,1,66,60)">
<path d="M1228.69,1931L269.308,1931C173.536,1927.96 109.691,1906.42 62.976,1869.78C15.967,1832.9 -13.584,1781.15 -41.748,1719.71C-81.324,1633.37 -117.675,1528.42 -188.803,1416.35C-193.093,1409.59 -201.334,1406.48 -209.022,1408.71C-216.711,1410.95 -222,1417.99 -222,1426L-222,2321C-222,2330.94 -213.941,2339 -204,2339L1702,2339C1711.94,2339 1720,2330.94 1720,2321L1720,1426C1720,1417.99 1714.71,1410.95 1707.02,1408.71C1699.33,1406.48 1691.09,1409.59 1686.8,1416.35C1615.67,1528.42 1579.32,1633.37 1539.75,1719.71C1511.58,1781.15 1482.03,1832.9 1435.02,1869.78C1388.31,1906.42 1324.46,1927.96 1228.69,1931Z" style="fill:rgb(239,56,39);"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/frames/unstable/margins/pinlineThumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
img/frames/unstable/margins/title.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1632" height="2220" viewBox="0 0 1632 2220" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M66,312.912L66,60L1566,60L1566,315.62C1636.69,412.348 1666.74,557.465 1768,717L1768,-217L-138,-217L-138,717C-35.806,555.991 -6.137,409.667 66,312.912Z" style="fill:rgb(0,117,190);"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 650 B

BIN
img/frames/unstable/margins/titleThumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
js/creator-23.js
View File

@@ -337,10 +337,12 @@ 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
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 {
frameMaskingContext.drawImage(item.image, frameX, frameY, frameWidth, frameHeight);

15
js/frames/packMarginUnstable.js
View File

@@ -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;