tutorial & sdcc15 planeswalkers

This commit is contained in:
Kyle
2021-08-23 18:34:56 -07:00
parent 87ba2a4a19
commit ff25b04476
16 changed files with 327 additions and 29 deletions

View File

@@ -4,6 +4,8 @@ loadFramePacks([
{name:'Extended Art Frames', value:'PlaneswalkerBoxTopper'},
{name:'Nickname Frames', value:'PlaneswalkerNickname'},
{name:'Tall Frames', value:'PlaneswalkerTall'},
{name:'MDFC Frames', value:'PlaneswalkerMDFC'}
{name:'MDFC Frames', value:'PlaneswalkerMDFC'},
{name:'Special Frames', value:'disabled'},
{name:'Blackout (SDCC15)', value:'PlaneswalkerSDCC15'}
])
notify('When you load a Planeswalker frame version, a "Planeswalker" tab will appear. This tab controls the placement and loyalty costs for Planeswalker abilities.')

View File

@@ -0,0 +1,40 @@
//Create objects for common properties across available frames
var masks = [{src:'/img/frames/planeswalker/regular/planeswalkerMaskPinline.png', name:'Pinline'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskTitle.png', name:'Title'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskType.png', name:'Type'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskBorder.png', name:'Border'}, {src:'/img/frames/planeswalker/maskLoyalty.png', name:'Loyalty'}];
//defines available frames
availableFrames = [
{name:'Frame', src:'/img/frames/planeswalker/sdcc15/frame.svg', masks:masks},
{name:'Transform Frame', src:'/img/frames/planeswalker/sdcc15/transform.svg', masks:masks}
];
//disables/enables the "Load Frame Version" button
document.querySelector('#loadFrameVersion').disabled = false;
//defines process for loading this version, if applicable
document.querySelector('#loadFrameVersion').onclick = async function() {
//resets things so that every frame doesn't have to
await resetCardIrregularities();
//sets card version
card.version = 'planeswalkerSDCC15';
card.onload = '/js/frames/versionPlaneswalker.js';
loadScript('/js/frames/versionPlaneswalker.js');
//art bounds
card.artBounds = {x:0.0394, y:0.0281, width:0.9214, height:0.8929};
autoFitArt();
//set symbol bounds
card.setSymbolBounds = {x:0.9227, y:0.5891, width:0.12, height:0.0381, vertical:'center', horizontal: 'right'};
resetSetSymbol();
//watermark bounds
card.watermarkBounds = {x:0.5, y:0.7762, width:0.75, height:0.2305};
resetWatermark();
//text
loadTextOptions({
mana: {name:'Mana Cost', text:'', y:0.0481, width:0.9292, height:71/2100, oneLine:true, size:71/1638, align:'right', shadowX:-0.001, shadowY:0.0029, manaCost:true, manaSpacing:0},
title: {name:'Title', text:'', x:0.0867, y:0.0372, width:0.8267, height:0.0548, oneLine:true, font:'belerenb', size:0.0381, color:'#aaa'},
type: {name:'Type', text:'', x:0.0867, y:0.5625, width:0.8267, height:0.0548, oneLine:true, font:'belerenb', size:0.0324, color:'#aaa'},
ability0: {name:'Ability 1', text:'', x:0.18, y:0.6239, width:0.7467, height:0.0972, size:0.0353, color:'#aaa'},
ability1: {name:'Ability 2', text:'', x:0.18, y:0, width:0.7467, height:0.0972, size:0.0353, color:'#aaa'},
ability2: {name:'Ability 3', text:'', x:0.18, y:0, width:0.7467, height:0.0972, size:0.0353, color:'#aaa'},
ability3: {name:'Ability 4', text:'', x:0.18, y:0, width:0.7467, height:0, size:0.0353, color:'#aaa'},
loyalty: {name:'Loyalty', text:'', x:0.806, y:0.902, width:0.14, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center', color:'#aaa'}
});
}
//loads available frames
loadFramePack();

View File

@@ -1,6 +1,5 @@
//checks to see if it needs to run
if (!loadedVersions.includes('/js/frames/versionPlaneswalker.js')) {
console.log('LOADING PLANESWALKER VERSION SCRIPT')
loadedVersions.push('/js/frames/versionPlaneswalker.js');
sizeCanvas('planeswalker');
document.querySelector('#creator-menu-tabs').innerHTML += '<h3 class="selectable readable-background" onclick="toggleCreatorTabs(event, `planeswalker`)">Planeswalker</h3>';
@@ -53,12 +52,12 @@ if (!loadedVersions.includes('/js/frames/versionPlaneswalker.js')) {
var darkToLight = new Image();
setImageUrl(darkToLight, '/img/frames/planeswalker/abilityLineEven.png');
var planeswalkerTextMask = new Image();
planeswalkerTextMask.onload = function(){fixPlaneswalkerInputs(planeswalkerEdited);}
planeswalkerTextMask.onload = function(){resetPlaneswalkerImages(fixPlaneswalkerInputs(planeswalkerEdited));}
setImageUrl(planeswalkerTextMask, '/img/frames/planeswalker/planeswalkerMaskText.png');
var lightColor = 'white';
var darkColor = '#a4a4a4';
} else {
fixPlaneswalkerInputs(planeswalkerEdited);
resetPlaneswalkerImages(fixPlaneswalkerInputs(planeswalkerEdited));
}
function planeswalkerEdited() {
@@ -99,32 +98,34 @@ function planeswalkerEdited() {
fixPlaneswalkerInputs();
var transitionHeight = scaleHeight(0.0048);
planeswalkerContext.clearRect(0, 0, planeswalkerCanvas.width, planeswalkerCanvas.height);
for (var i = 0; i < card.planeswalker.count; i ++) {
var x = scaleX(card.planeswalker.x);
var y = scaleY(card.text['ability' + i].y);
var width = scaleWidth(card.planeswalker.width);
var height = scaleHeight(card.text['ability' + i].height);
if (i == 0) {
y -= scaleHeight(0.1);
height += scaleHeight(0.1);
} else if (i == card.planeswalker.count - 1) {
height += scaleHeight(0.5);
}
if (i % 2 == 0) {
planeswalkerContext.fillStyle = lightColor;
planeswalkerContext.globalAlpha = 0.608;
planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight);
planeswalkerContext.globalAlpha = 1;
if (lightToDark.complete) {
planeswalkerContext.drawImage(lightToDark, x, y + height - transitionHeight, width, 2 * transitionHeight);
if (card.version != 'planeswalkerSDCC15') {
for (var i = 0; i < card.planeswalker.count; i ++) {
var x = scaleX(card.planeswalker.x);
var y = scaleY(card.text['ability' + i].y);
var width = scaleWidth(card.planeswalker.width);
var height = scaleHeight(card.text['ability' + i].height);
if (i == 0) {
y -= scaleHeight(0.1);
height += scaleHeight(0.1);
} else if (i == card.planeswalker.count - 1) {
height += scaleHeight(0.5);
}
} else {
planeswalkerContext.fillStyle = darkColor;
planeswalkerContext.globalAlpha = 0.706;
planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight);
planeswalkerContext.globalAlpha = 1;
if (darkToLight.complete) {
planeswalkerContext.drawImage(darkToLight, x, y + height - transitionHeight, width, 2 * transitionHeight);
if (i % 2 == 0) {
planeswalkerContext.fillStyle = lightColor;
planeswalkerContext.globalAlpha = 0.608;
planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight);
planeswalkerContext.globalAlpha = 1;
if (lightToDark.complete) {
planeswalkerContext.drawImage(lightToDark, x, y + height - transitionHeight, width, 2 * transitionHeight);
}
} else {
planeswalkerContext.fillStyle = darkColor;
planeswalkerContext.globalAlpha = 0.706;
planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight);
planeswalkerContext.globalAlpha = 1;
if (darkToLight.complete) {
planeswalkerContext.drawImage(darkToLight, x, y + height - transitionHeight, width, 2 * transitionHeight);
}
}
}
}
@@ -178,6 +179,26 @@ function fixPlaneswalkerInputs(callback) {
}
}
function resetPlaneswalkerImages(callback) {
var planeswalkerImageFolder = '';
var planeswalkerImageExtension = 'png';
if (card.version == 'planeswalkerSDCC15') {
planeswalkerImageFolder = '/sdcc15';
planeswalkerImageExtension = 'svg';
}
setImageUrl(plusIcon, `/img/frames/planeswalker${planeswalkerImageFolder}/planeswalkerPlus.${planeswalkerImageExtension}`);
setImageUrl(minusIcon, `/img/frames/planeswalker${planeswalkerImageFolder}/planeswalkerMinus.${planeswalkerImageExtension}`);
setImageUrl(neutralIcon, `/img/frames/planeswalker${planeswalkerImageFolder}/planeswalkerNeutral.${planeswalkerImageExtension}`);
setImageUrl(lightToDark, `/img/frames/planeswalker${planeswalkerImageFolder}/abilityLineOdd.${planeswalkerImageExtension}`);
setImageUrl(darkToLight, `/img/frames/planeswalker${planeswalkerImageFolder}/abilityLineEven.${planeswalkerImageExtension}`);
if (!darkToLight.onload) {
darkToLight.onload = function() {planeswalkerEdited();}
}
if (callback) {
callback();
}
}
function invertPlaneswalkerColors(reverse = false) {
if (reverse) {
document.querySelector('#planeswalker-invert').checked = card.planeswalker.invert;