Jump to content

MOE image Generator


Hyster

Recommended Posts

Posted

I got bored with the marks in game and wanted them all to look the same so i created a web page that can create them in .png.

Spoiler

image.thumb.png.6ab7b0b46d531396aecc39b5871dae59.png

 

Copt text to a .txt file and "save as"  .htm

 

Spoiler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marks of Excellence Generator</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            margin-bottom: 20px;
        }
        .controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        .controls > div {
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .controls label {
            margin-right: 10px;
        }
        #canvas-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        canvas {
            border: 1px solid #000;
            margin: 5px;
        }
    </style>
    <!-- JSZip library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>

<body>
    <h1>Customizable Marks of Excellence Generator</h1>
    <ul>
  <li>Select options, Click Generate to preview. Download when happy.</li>
  <li>Unzip. Keep folder structure</li>
  <li>Convert .png to .dds (Can do it <a href="https://imagetostl.com/convert/file/png/to/dds#convert"  target="_blank">here</a> online).</li>
   <li>Replace .png with the .dds.</li>
  <li>rezip with compression set to "store".</li>
  <li>Change .zip to .wotmod then place in C:\Games\World_of_Tanks_EU\mods\<font color="#f00">{Ver num}</font>\ .</li>
</ul>
</br>
    <div class="controls">
        <div>
            <label for="stripeColor">Stripe Color:</label>
            <input type="color" id="stripeColor" value="#FFD700">
            
            <label for="borderColor">Stripe Border Color:</label>
            <input type="color" id="borderColor" value="#FFFFFF">
            
            <label for="backgroundColor">Background Color:</label>
            <input type="color" id="backgroundColor" value="#000000">
            </div>
            <div>
            <label for="stripeWidth">Stripe Width:</label>
            <input type="number" id="stripeWidth" value="60" min="1" max="256">
            
            <label for="borderSize">Border Size:</label>
            <input type="number" id="borderSize" value="10" min="0" max="10">
        </div>
        </br>
        <div>If you just want a shape, set Stripe Width: & Border Size: to 0.</div>
        </br>
        <div>
            <label for="shapeColor">Shape Color:</label>
            <input type="color" id="shapeColor" value="#FF0000">
            </div>
        <div>
            <label for="shape">Shape:</label>
            <select id="shape">
                <option value="none">None</option>
                <option value="circle">Circle</option>
                <option value="square">Square</option>
                <option value="triangle">Triangle</option>
                <option value="star">Star</option>
                <option value="pentagon">Pentagon</option>
                <option value="hexagon">Hexagon</option>
                <option value="diamond">Diamond</option>
            </select>
            
            <label for="shapeSize">Shape Size:</label>
            <input type="number" id="shapeSize" value="20" min="1" max="256">
            </div>
            <div>
            <label for="transparentBackground">Transparent Background:</label>
            <input type="checkbox" id="transparentBackground">
        </div>
        <button id="generate-button">Generate</button></br>
        <button id="download-button">Download All</button>
    </div>

    <div id="canvas-container"></div>

    <script>
        const imgSize = 256;
        const zip = new JSZip(); // Initialize the ZIP object

        // Folder path inside the ZIP file
        const folderPath = "res/gui/maps/vehicles/decals/insignia";

        const countries = [
            "china", "czech", "france_uk", "germany", "italian",
            "japan", "poland", "sweden", "usa", "ussr"
        ];

        function drawShape(ctx, shape, x, y, size, color) {
            ctx.fillStyle = color;
            ctx.beginPath();
            switch (shape) {
                case "circle":
                    ctx.arc(x, y, size, 0, 2 * Math.PI);
                    break;
                case "square":
                    ctx.rect(x - size / 2, y - size / 2, size, size);
                    break;
                case "triangle":
                    ctx.moveTo(x, y - size);
                    ctx.lineTo(x + size, y + size);
                    ctx.lineTo(x - size, y + size);
                    ctx.closePath();
                    break;
                case "star":
                    drawStar(ctx, x, y, size, 5);
                    break;
                case "pentagon":
                    drawPolygon(ctx, x, y, size, 5);
                    break;
                case "hexagon":
                    drawPolygon(ctx, x, y, size, 6);
                    break;
                case "diamond":
                    ctx.moveTo(x, y - size);
                    ctx.lineTo(x + size, y);
                    ctx.lineTo(x, y + size);
                    ctx.lineTo(x - size, y);
                    ctx.closePath();
                    break;
                default:
                    return;
            }
            ctx.fill();
        }

        function drawStar(ctx, cx, cy, outerRadius, spikes) {
            let rot = Math.PI / 2 * 3;
            let x = cx;
            let y = cy;
            let step = Math.PI / spikes;
            let innerRadius = outerRadius / 2;

            ctx.moveTo(cx, cy - outerRadius);
            for (let i = 0; i < spikes; i++) {
                x = cx + Math.cos(rot) * outerRadius;
                y = cy + Math.sin(rot) * outerRadius;
                ctx.lineTo(x, y);
                rot += step;

                x = cx + Math.cos(rot) * innerRadius;
                y = cy + Math.sin(rot) * innerRadius;
                ctx.lineTo(x, y);
                rot += step;
            }
            ctx.lineTo(cx, cy - outerRadius);
            ctx.closePath();
            ctx.fill();
        }

        function drawPolygon(ctx, cx, cy, radius, sides) {
            let angle = Math.PI / 2;
            const step = (2 * Math.PI) / sides;

            ctx.moveTo(cx + radius * Math.cos(angle), cy - radius * Math.sin(angle));
            for (let i = 0; i < sides; i++) {
                angle += step;
                ctx.lineTo(cx + radius * Math.cos(angle), cy - radius * Math.sin(angle));
            }
            ctx.closePath();
            ctx.fill();
        }

        function drawStripes(ctx, numberOfStripes, stripeWidth, stripeColor, borderColor, borderSize, shape, shapeSize, shapeColor) {
            const thirdWidth = imgSize / 3; // Each third's width
            const y1 = 0; // Start of the stripe vertically
            const y2 = imgSize; // End of the stripe vertically

            ctx.strokeStyle = borderColor;
            ctx.lineWidth = borderSize; // Border thickness
            
            for (let i = 0; i < numberOfStripes; i++) {
                let centerX;
                if (numberOfStripes === 1) {
                    centerX = imgSize / 2; // Center the stripe for the single stripe case
                } else {
                    centerX = (i * thirdWidth) + (thirdWidth / 2); // Center of each third
                }
                const halfStripeWidth = stripeWidth / 2;
                const xStart = centerX - halfStripeWidth;

                // Draw the stripe with the correct color
                ctx.fillStyle = stripeColor;
                ctx.fillRect(xStart, y1, stripeWidth, y2 - y1);
                if (borderSize > 0) {
                    ctx.strokeRect(xStart, y1, stripeWidth, y2 - y1); // Draw border around stripe
                }

                // Draw the shape if any
                if (shape !== "none") {
                    drawShape(ctx, shape, centerX, imgSize / 2, shapeSize, shapeColor);
                }
            }
        }

        function generateMarks() {
            const container = document.getElementById('canvas-container');
            container.innerHTML = ''; // Clear previous canvases

            const stripeColor = document.getElementById('stripeColor').value;
            const borderColor = document.getElementById('borderColor').value;
            const backgroundColor = document.getElementById('backgroundColor').value;
            const stripeWidth = parseInt(document.getElementById('stripeWidth').value);
            const borderSize = parseInt(document.getElementById('borderSize').value);
            const shape = document.getElementById('shape').value;
            const shapeSize = parseInt(document.getElementById('shapeSize').value);
            const shapeColor = document.getElementById('shapeColor').value;
            const transparentBackground = document.getElementById('transparentBackground').checked;

            countries.forEach(country => {
                for (let stripes = 1; stripes <= 3; stripes++) {
                    const canvas = document.createElement('canvas');
                    canvas.width = imgSize;
                    canvas.height = imgSize;
                    const ctx = canvas.getContext('2d');

                    if (transparentBackground) {
                        ctx.clearRect(0, 0, imgSize, imgSize); // Clear canvas for transparency
                    } else {
                        ctx.fillStyle = backgroundColor;
                        ctx.fillRect(0, 0, imgSize, imgSize);
                    }

                    drawStripes(ctx, stripes, stripeWidth, stripeColor, borderColor, borderSize, shape, shapeSize, shapeColor);

                    if (country === "china") {
                        // Only append China canvases for display
                        container.appendChild(canvas);
                    }

                    // Convert canvas to Blob and add to ZIP file
                    canvas.toBlob(function(blob) {
                        zip.file(`${folderPath}/gun_${country}_${stripes}.png`, blob);
                    });
                }
            });
        }

        function downloadZip() {
            zip.generateAsync({ type: "blob" }).then(function(content) {
                saveAs(content, "marks_of_excellence.zip");
            });
        }

        document.getElementById('generate-button').addEventListener('click', generateMarks);
        document.getElementById('download-button').addEventListener('click', downloadZip);

        window.onload = generateMarks;
    </script>
</body>
</html>

 

I can't test all nations. Pls add feed back if you try it. Hope it helps.

MOE image Generator.htm

  • 4 weeks later...
Posted

2 major improvements are: auto updating when u make a settings change so easier to tweak. Option to add an image to the shape drop down (can add several images at a time and will stay in the menu. jpg,png,gif and webp files tested ), can resize but border does not work with an image. zipped as i added a few images to try.

 

I cant think of anything else i could add atm 😕

 

Spoiler

image.png.cb2d7244a3a5a70d456105ef38e65fb6.png

 

moe-gen-V31.zip

  • 2 months later...
Posted (edited)

Since doing this as a webpage was limiting I remade it using python.

This is my first attempt at using python so it may cause errors i have not found. Please let me know as im way out of my depth atm 😕 .

 

Changes.

Can use an image in the stripe.

Can use an image as background

Dirt and wear options using .png

I included sample images, just add as you see fit.

 

Once you have finished, click "Create Set". (this creates .png which are then converted to .dss and placed in images/insignia).

 

Click "MOE Set Widget". select the one you want. Click "Create MOE". MOE-name.wotmod is created in the root dir.

 

Copy the created .wotmod file into World_of_Tanks_EU\mods\{version}. all .wotmod are prefixed with "MOE-" to help track them as placing 2 or more in the game folder will cause the game to throw an error.

 

I also included all the MOE from in game.

 

Spoiler

app.thumb.png.be5540c5afb1be03aed69ed5c398f91a.png

 

 

Edited by Quaksen
Removed download, broken, Hyster is working on fixing it :)

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use and Privacy Policy.