What does it do?

I use Wonderdraft to create maps for tabletop roleplaying games. At some point I wanted to create my own asset packs, but preparing the images was more work than I expected.

You have to crop the images, remove backgrounds, create the right folder structure, name everything correctly, and add the metadata Wonderdraft expects. Doing this by hand is possible, but it gets tedious very quickly.

That is why I made Assetpack Builder for Wonderdraft. (Not because it was easy, because I thought it whould be easy)

The tool can import normal images and sprite sheets. I can draw several crop areas on one image and extract them as individual sprites. I can then edit the sprites with erase, restore, pick-color, and transparency tools. There is also undo and redo, zooming, and controls for the pivot point and collision radius.

For each sprite I can set the name, filename, category, asset type, draw mode, radius, and offsets. The program then creates the Wonderdraft folder structure and can either export the asset pack or install it directly into Wonderdraft.

It also supports project files, drag-and-drop importing, dark and light themes, editable keyboard shortcuts, and tooltips. So it is not a general image editor. It is a tool for the annoying steps between having an image and having a usable Wonderdraft asset pack.

How did this happen?

The first version was much smaller. I wanted to load an image, select a part of it, and export that part.

Then I started using it and found more things that would be useful. I wanted to extract several sprites from one sheet. I wanted to edit transparency without opening another program. I wanted the crop regions and the extracted sprites to stay connected. I wanted to drag files onto the correct part of the window.

This is where the project became more complicated than expected.

There were problems with zooming, especially when zooming below 1.0. A slider and the canvas were changing the same value and sometimes fought each other. The mouse wheel would zoom out and then the slider would immediately put the old value back.

There were also problems with crop handles, mouse cursors, drag-and-drop areas, and image files that had the wrong file extension. One file claimed to be a PNG but contained invalid PNG data, so the loader had to be changed to look at the file contents when the extension could not be trusted.

A lot of the work consisted of testing something, finding that it only worked in some situations, and then trying to explain the exact situation in which it failed.

The honest version

I did not write this program.

I did not touch a single line of code.

ChatGPT created the source code, changed the files, fixed bugs, added features, wrote the documentation, and prepared the builds. I provided the idea, described what I wanted, tested the program, reported the problems, and kept asking for changes.

That sounds easier than it was. There were quite a few struggles. I had to provide screenshots and console output, describe small differences in mouse behaviour, and check whether a fix really solved the original problem or only moved it somewhere else.

It is a story about using ChatGPT sol. and it is very far. I could not learn rust in a day. but after a day worth of prompting I have this tool

The result is useful to me, and that is why I decided to publish it. But I also think it is important to say openly how it was made: I prompted the tool together, and ChatGPT wrote the code.

Man hat zu viele bunte Bilder gesammelt, um sie alle für den Spieltisch auszudrucken. PowerPoint wäre zwar eine Option, aber entweder bereitet man im Vorfeld Folien vor, oder man muss die Bilder während der Session live auf die richtige Größe ziehen. Um das auf die Schnelle zu lösen, habe ich mir von Gemini eine kleine HTML-Datei erzeugen lassen: den GM Image Presenter.

Die Bedienung ist denkbar simpel: Man zieht ein Bild einfach per Drag & Drop ins Fenster, und die Bilder werden automatisch bildschirmfüllend angeordnet. Es gibt zudem ein zweites Fenster, das man auf einen zweiten Monitor ziehen kann und das exakt dasselbe anzeigt wie das Hauptfenster. Um ein Bild wieder zu entfernen, klickt man im Hauptfenster einfach darauf.

Hier geht es direkt zum Tool: GM Image Presenter

Wie funktioniert das Ganze im Detail?

Das Prinzip ist auf maximalen Komfort für dich als Spielleiter (GM) ausgelegt:

• Der Meister-Bildschirm (Steuerung): Du hast ein Hauptfenster auf deinem Laptop oder Monitor, das nur du siehst. Hier ziehst du per Drag & Drop einfach die Bilder rein, die du brauchst – seien es grimmige NSCs im feinen „Painterly Realism“-Stil, Wappen oder Grundrisse. Das Tool ordnet die Bilder automatisch und übersichtlich in einem Grid an.
• Der Spieler-Bildschirm (Präsentation): Mit einem Klick auf „Open 2nd Window“ öffnet sich ein zweites Fenster. Dieses schiebst du auf den Fernseher, den Beamer oder den Monitor, der zu den Spielern gerichtet ist.
• Echtzeit-Synchronisation: Alles, was du im Hauptfenster tust, wird live auf dem Spieler-Bildschirm gespiegelt. Klickst du ein Bild im Hauptfenster an, verschwindet es, und das Layout passt sich für die restlichen Bilder automatisch neu an. Das Spieler-Fenster ist dabei komplett „clean“ (ohne Menüs oder Mausanzeigen) und kann mit einem Klick in den Vollbildmodus versetzt werden.

100% Offline

Das Beste an dem Tool: Es ist keine Software, die du aufwendig installieren musst, und auch kein Cloud-Dienst. Es ist einfach nur eine einzige HTML-Datei.

So holst du dir das Tool:

Du kannst das Tool direkt im Browser testen oder es dir für deine nächste Runde lokal auf die Festplatte ziehen:

1. Öffne diesen Link: GM Image Presenter (GitHub Pages)
2. Wenn du es offline nutzen willst, drücke auf der Seite einfach Strg + S (oder Rechtsklick -> „Speichern unter…“). So kannst du die Datei abspeichern und vor jeder Session einfach per Doppelklick in deinem Browser öffnen.

Alternativ kannst du den code unter kopieren:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GM Image Presenter</title>
    <style id="main-styles">
        body, html {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            background-color: #121212;
            overflow: hidden; /* Prevents any scrolling */
            font-family: sans-serif;
        }
        #container {
            display: grid;
            width: 100%;
            height: 100%;
            gap: 10px;
            padding: 10px;
            box-sizing: border-box;
        }
        .grid-image {
            width: 100%;
            height: 100%;
            object-fit: contain; /* Keeps aspect ratio intact */
            
            /* Forces images to shrink to fit the grid cells */
            min-width: 0;
            min-height: 0;
            
            cursor: pointer;
            transition: transform 0.1s ease;
        }
        .grid-image:hover {
            transform: scale(1.02);
        }
        /* Prevent clicking/hovering in the mirror window */
        .mirror .grid-image {
            cursor: default;
            transform: none !important;
        }
        #ui-layer {
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 100;
        }
        button {
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #0056b3;
        }
        
        #drag-hint {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #555;
            font-size: 24px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="ui-layer">
        <button onclick="openSecondWindow()">Open 2nd Window</button>
    </div>
    <div id="drag-hint">Drag & Drop Images Here</div>
    
    <div id="container"></div>
    <script>
        const container = document.getElementById('container');
        const dragHint = document.getElementById('drag-hint');
        let secondWindow = null;
        // --- Layout & Sync Logic ---
        function updateLayout() {
            const count = container.children.length;
            
            // Hide hint if images exist
            dragHint.style.display = count > 0 ? 'none' : 'block';
            if (count > 0) {
                // Calculate optimal rows and columns to share space evenly
                const cols = Math.ceil(Math.sqrt(count));
                const rows = Math.ceil(count / cols);
                
                container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
                container.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
            }
            syncSecondWindow();
        }
        function syncSecondWindow() {
            if (secondWindow && !secondWindow.closed) {
                const mirrorContainer = secondWindow.document.getElementById('container');
                if (mirrorContainer) {
                    // Copy the exact HTML into the second window's container
                    mirrorContainer.innerHTML = container.innerHTML;
                    // Apply the exact same grid layout styles
                    mirrorContainer.style.gridTemplateColumns = container.style.gridTemplateColumns;
                    mirrorContainer.style.gridTemplateRows = container.style.gridTemplateRows;
                }
            }
        }
        function openSecondWindow() {
            if (secondWindow && !secondWindow.closed) {
                secondWindow.focus();
                return;
            }
            // Open a blank window
            secondWindow = window.open('', 'ImageGridMirror', 'width=800,height=600');
            
            // Grab the CSS from this main file to style the pop-up
            const styles = document.getElementById('main-styles').innerHTML;
            // Write the HTML skeleton, CSS, and Fullscreen Logic to the new window
            // Note: The script tag closing bracket is escaped so it doesn't break the main file
            secondWindow.document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <title>Image Grid (Display)</title>
                    <style>
                        ${styles}
                        
                        /* Styles specifically for the second window's fullscreen button */
                        #mirror-ui {
                            position: absolute;
                            bottom: 20px;
                            right: 20px;
                            opacity: 0;
                            transition: opacity 0.3s ease;
                            z-index: 1000;
                        }
                        /* Reveal the button when mouse is over the window body */
                        body:hover #mirror-ui {
                            opacity: 1;
                        }
                    </style>
                </head>
                <body>
                    <div id="mirror-ui">
                        <button onclick="toggleFullScreen()">Toggle Fullscreen</button>
                    </div>
                    <div id="container" class="mirror"></div>
                    
                    <script>
                        function toggleFullScreen() {
                            if (!document.fullscreenElement) {
                                document.documentElement.requestFullscreen().catch(err => {
                                    alert(\`Error attempting to enable fullscreen: \${err.message}\`);
                                });
                            } else {
                                if (document.exitFullscreen) {
                                    document.exitFullscreen();
                                }
                            }
                        }
                    <\/script>
                </body>
                </html>
            `);
            secondWindow.document.close();
            // Run an initial sync
            setTimeout(syncSecondWindow, 100);
        }
        // --- Drag & Drop Logic ---
        window.addEventListener('dragover', (e) => {
            e.preventDefault(); // Necessary to allow dropping
            e.dataTransfer.dropEffect = 'copy';
        });
        window.addEventListener('drop', (e) => {
            e.preventDefault();
            
            const files = e.dataTransfer.files;
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                
                // Only process image files
                if (!file.type.startsWith('image/')) continue;
                const reader = new FileReader();
                reader.onload = (event) => {
                    const img = document.createElement('img');
                    img.src = event.target.result;
                    img.className = 'grid-image';
                    
                    // Click to remove functionality
                    img.onclick = function() {
                        this.remove();
                        updateLayout();
                    };
                    container.appendChild(img);
                    updateLayout();
                };
                
                // Read local file into base64 data URL
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>

Ich habe beim Frühjahrsputz überschüssige Ausgaben des Schummelabenteuers gefunden. Gegen Versandkosten/Spende an Ärzte ohne Grenzen ab zu geben. Gerne per Kommentar Interesse anmelden.

Das Heft gibt es auch als gratis PDF.

Klappentext:

Erstellt vom Erzählspiel-Zine für den Gratisrollenspieltag 2019. https://erzaehlspiel-zine.deRedaktion: Tina Trillitzsch (TT), Thorsten Panknin (TP), Gerrit Reininghaus (GR).Engl. Original: „Cheat your own Adventure“, Shane McLean. http://cheatyourownadventure.co.uk/Übersetzung: Sabine Völkel (SV).Korrektur, Bearbeitung: TT, TP.Varianten, Szenarien, Geschichte: SV, GR, TT.Cover, Charakterbogen, Layout, Art Direction der dt. Ausgabe: TT.Innenillustrationen: https://openclipart.orgSchriften: Gentium Book Basic von SIL, Henriette Black von Typejockeys, Big River Script von Ana’s Fonts.Änderungen zum Original: Übersetzung; Umstrukturierung, weitere Beispiele zum leichteren Verständnis, Bonusmaterial.Dieses Werk steht unter einer Creative-Commons-Lizenz vom Typ Namensnennung – Nicht-kommerziell – Weitergabe unter gleichen Bedingungen 3.0 Unported. https://creativecommons.org/licenses/by-nc-sa/3.0/deed.de

Ich habe auf Ali Express diese Lego kompatiblen Steine mit eingebautem Anspitzer Gefunden und dachte mir das man damit ja einen thematisch passenden Anspitzer fürs Rollenspiel bauen könnte. Verkauft werden diese Anspitzer unter der Bezeichnung „DIY Puzzle pencil sharpener“ .

Das Model Stier (Bull) hat den schwarzen Anspitzer Stein. Für Interessierte, da er nicht so leicht zu finden war: hier habe ich gekauft (kein Tracking Link, keine Werbung selbst gekauft). Weil ich meine Lego Sammlung schon lange weiter vererbt habe, habe ich noch 2 Rochen Modelle gekauft damit ich genug Steine habe um den 2 mal 4 Noppengroßen Anspitzer Block zu umbauen. Die Höhne des Anspitzers ist ein normaler Stein plus die Höhe einer Standard Lego Platte. Die Augen des Stiers sind leider Aufkleber und keine Drucke. Auch die beiden Rochen Sets die ich gekauft habe hatten Leider nur Aufkleber

Passend zu einen Numinoru Geweihten habe ich aus Legosteinen einen Rochen mit eingebautem Spitzer erstellt. Leider habe ich erst nach dem Bau festgestellt, das ein Manta-Rochen kanonisch nicht dem Teufelsrochen entspricht. (Ein Bild findet sich in im Buch Unendlichkeit und Tiefenrausch)

Einen Schönheitswettbewerb gewinne ich damit sicherlich nicht, aber ich hatte Spaß und der Anspitzer funktioniert. Die Kosten setzen sich Zusammen aus 2,35€ kleiner Rochen,2,89€ großer Rochen und 3,89€ Stier und Schaf Anpitzer Set in Summe 9,13 € für das Projekt.