MOE image Generator

Hyster · 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>

<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>

// 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

Hyster · 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

Hyster · 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

image.png.cb2d7244a3a5a70d456105ef38e65fb6.png

moe-gen-V31.zip

Hyster · 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

Sign In

MOE image Generator

Recommended Posts

Hyster

Hyster

Hyster

Hyster

Join the conversation

Important Information