SpriteTestTools/template grid.html at main · Mjons/SpriteTestTools · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>512x686 Overlay Generator</title>
    <style>
        body {
            font-family: sans-serif;
            background: #333;
            color: #eee;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px;
        }
        h2 { margin-top: 0; }
        button {
            padding: 15px 30px;
            font-size: 18px;
            background: #00d2ff;
            color: #000;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            margin-bottom: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        button:hover { background: #9beaff; }

        .canvas-wrapper {
            border: 1px solid #555;
            background-image:
                linear-gradient(45deg, #222 25%, transparent 25%),
                linear-gradient(-45deg, #222 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #222 75%),
                linear-gradient(-45deg, transparent 75%, #222 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            display: inline-block;
        }
        canvas { display: block; }
    </style>
</head>
<body>

    <h2>512 x 686 Overlay Template</h2>
    <p>5 Cols (102.4px) | 7 Rows (98px)</p>

    <button onclick="downloadGrid()">Download PNG Overlay</button>

    <div class="canvas-wrapper">
        <canvas id="gridCanvas" width="512" height="686"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('gridCanvas');
        const ctx = canvas.getContext('2d');

        // Dimensions
        const W = 512;
        const H = 686;
        const COLS = 5;
        const ROWS = 7;

        const FW = W / COLS; // 102.4
        const FH = H / ROWS; // 98

        const LABELS = ["Idle", "Walk", "Run", "Atk A", "Atk B", "Taunt", "Hurt"];

        function draw() {
            ctx.clearRect(0, 0, W, H);

            // Loop to draw grid
            for (let y = 0; y < ROWS; y++) {
                for (let x = 0; x < COLS; x++) {

                    // Calculate exact positions
                    const xPos = x * FW;
                    const yPos = y * FH;

                    // 1. Box Outline (Cyan)
                    ctx.strokeStyle = "#00ffff";
                    ctx.lineWidth = 1;
                    ctx.strokeRect(xPos, yPos, FW, FH);

                    // 2. Center Line (Red - Helps center the body)
                    ctx.beginPath();
                    ctx.moveTo(xPos + FW/2, yPos);
                    ctx.lineTo(xPos + FW/2, yPos + FH);
                    ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
                    ctx.stroke();

                    // 3. Floor Line (Green - Where feet should go)
                    // Setting it 2px from bottom so you don't draw off-canvas
                    ctx.beginPath();
                    ctx.moveTo(xPos, yPos + FH - 2);
                    ctx.lineTo(xPos + FW, yPos + FH - 2);
                    ctx.strokeStyle = "#00ff00";
                    ctx.lineWidth = 2;
                    ctx.stroke();

                    // 4. Labels
                    if(x === 0) {
                        ctx.fillStyle = "white";
                        ctx.font = "bold 14px Arial";
                        ctx.shadowColor="black";
                        ctx.shadowBlur=4;
                        ctx.fillText(LABELS[y], xPos + 5, yPos + 20);
                        ctx.shadowBlur=0;
                    }

                    // 5. Frame Numbers
                    ctx.fillStyle = "rgba(255,255,255,0.5)";
                    ctx.font = "10px Arial";
                    ctx.fillText(x, xPos + FW - 10, yPos + FH - 5);
                }
            }
        }

        function downloadGrid() {
            const link = document.createElement('a');
            link.download = 'overlay_512x686.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        }

        draw();
    </script>
</body>
</html>