Spaces:
Sleeping
Sleeping
File size: 6,521 Bytes
78475cb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backdrop Template Generator</title>
<style>
body {
margin: 20px;
font-family: monospace;
background: #222;
color: #fff;
}
canvas {
border: 2px solid #fff;
image-rendering: pixelated;
image-rendering: crisp-edges;
display: block;
margin: 20px 0;
}
button {
background: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-family: monospace;
font-size: 14px;
margin: 5px;
}
button:hover {
background: #45a049;
}
.info {
background: #333;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #4CAF50;
}
</style>
</head>
<body>
<h1>Tetris Backdrop Template Generator</h1>
<div class="info">
<h3>Instructions:</h3>
<ol>
<li>Click "Download Template" to save the template image</li>
<li>Open the template in your image editor (Photoshop, GIMP, etc.)</li>
<li>The <strong style="color: #000;">BLACK area with MAGENTA border</strong> is the play area (80×160 pixels)</li>
<li>The play area will be BLACK in-game, so design around it</li>
<li>Create your artwork on layers below the template</li>
<li>Delete the template layer when done</li>
<li>Export as 256×224 PNG</li>
<li>Save to <code>public/assets/backdrops/level-X/backdrop.png</code></li>
</ol>
</div>
<canvas id="template" width="256" height="224"></canvas>
<button onclick="downloadTemplate()">Download Template (BACKDROP-TEMPLATE.png)</button>
<button onclick="downloadBlankTemplate()">Download Blank Template (no labels)</button>
<div class="info">
<h3>Specifications:</h3>
<ul>
<li><strong>Total Size:</strong> 256 × 224 pixels</li>
<li><strong>Play Area Position:</strong> X: 88, Y: 32</li>
<li><strong>Play Area Size:</strong> 80 × 160 pixels</li>
<li><strong>Grid:</strong> 10 blocks wide × 20 blocks tall</li>
<li><strong>Block Size:</strong> 8 × 8 pixels</li>
</ul>
</div>
<script>
const canvas = document.getElementById('template');
const ctx = canvas.getContext('2d');
function drawTemplate(includeLabels = true) {
// Background - light gray
ctx.fillStyle = '#CCCCCC';
ctx.fillRect(0, 0, 256, 224);
// Play area - BLACK (as it appears in game)
ctx.fillStyle = '#000000';
ctx.fillRect(88, 32, 80, 160);
// Magenta outline to show the boundary clearly
ctx.strokeStyle = '#FF00FF';
ctx.lineWidth = 2;
ctx.strokeRect(88, 32, 80, 160);
// Add grid lines in play area (light gray on black)
ctx.strokeStyle = '#444444';
ctx.lineWidth = 1;
// Vertical lines every 8 pixels
for (let x = 88; x <= 168; x += 8) {
ctx.beginPath();
ctx.moveTo(x, 32);
ctx.lineTo(x, 192);
ctx.stroke();
}
// Horizontal lines every 8 pixels
for (let y = 32; y <= 192; y += 8) {
ctx.beginPath();
ctx.moveTo(88, y);
ctx.lineTo(168, y);
ctx.stroke();
}
if (includeLabels) {
// Add labels
ctx.fillStyle = '#000000';
ctx.font = 'bold 12px monospace';
ctx.fillText('TETRIS BACKDROP TEMPLATE', 30, 15);
ctx.font = '10px monospace';
ctx.fillText('256 x 224 pixels', 85, 215);
// Play area label
ctx.fillStyle = '#00FF00';
ctx.font = 'bold 10px monospace';
ctx.fillText('PLAY AREA', 100, 110);
ctx.fillText('(BLACK)', 105, 122);
ctx.fillText('80 x 160', 105, 134);
// Coordinates
ctx.fillStyle = '#000000';
ctx.font = '8px monospace';
ctx.fillText('(88,32)', 90, 28);
ctx.fillText('(168,192)', 130, 200);
// UI area labels
ctx.fillStyle = '#666666';
ctx.font = '8px monospace';
ctx.fillText('SCORE/LEVEL', 10, 20);
ctx.fillText('AREA', 10, 30);
ctx.fillText('NEXT PIECE', 185, 20);
ctx.fillText('AREA', 185, 30);
}
// Corner markers
ctx.fillStyle = '#FF0000';
const markerSize = 6;
ctx.fillRect(88 - markerSize/2, 32 - markerSize/2, markerSize, markerSize);
ctx.fillRect(168 - markerSize/2, 32 - markerSize/2, markerSize, markerSize);
ctx.fillRect(88 - markerSize/2, 192 - markerSize/2, markerSize, markerSize);
ctx.fillRect(168 - markerSize/2, 192 - markerSize/2, markerSize, markerSize);
}
function downloadTemplate() {
ctx.clearRect(0, 0, 256, 224);
drawTemplate(true);
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'BACKDROP-TEMPLATE.png';
a.click();
URL.revokeObjectURL(url);
});
}
function downloadBlankTemplate() {
ctx.clearRect(0, 0, 256, 224);
drawTemplate(false);
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'BACKDROP-TEMPLATE-BLANK.png';
a.click();
URL.revokeObjectURL(url);
});
}
// Draw initial template
drawTemplate(true);
</script>
</body>
</html>
|