Hyster Posted August 19 Posted August 19 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 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 Quote
Hyster Posted August 22 Author Posted August 22 Updated it quite a bit. can make a bar from stripes. preset to give an idea. Import/export so u can come back to an idea. added a few more shapes. Spoiler MOE image Generator v16.htm Quote
Hyster Posted September 16 Author Posted September 16 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 moe-gen-V31.zip Quote
Hyster Posted November 22 Author Posted November 22 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 MOE Mod Creator.zip Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.