1.1.0

Author: kirjavascript

CHANGELOG

@@ -1,5 +1,8 @@
 # Changelog
 
+## [1.1.0]
+- Export spritesheet
+
 ## [1.0.0]
 - New engine
     - Real custom mappings & DPLCs

TODO

@@ -1,30 +1,18 @@
-DOC
-==
-1.0.0 - breaking change to select mapping format
-data parser, not text
-push project files to disassemblies
-
-BUFFER
-==
-
-
 // formats to support
 
 // crackers
 // kid chameleon
     // go back to qiuu with questions
 // chaotix
 // s3k sonic saving
-// plane mappings / snap to
 // ristar
 // github issues
 /* https://raw.githubusercontent.com/Dandaman955/Streets-of-Rage-1-Disassembly-Redux/master/SoR.asm */
 /* http://info.sonicretro.org/Disassemblies */
 
 ROADMAP
-generate project files -> use to create s3portal
+look at issues related to crashes
 rotsprite
-export spritesheet
 animation editor
 ==
 BUGS

app/controls/commands.js

@@ -2,7 +2,7 @@ import { environment } from '#store/environment';
 import { mappingState } from '#components/mappings/state';
 import { importState } from '#components/import/state';
 import { undo, redo } from '#store/history';
-import { exportPNG, importImg } from '#formats/image';
+import { exportPNG, importImg, exportSpritesheet } from '#formats/image';
 import { getDistance } from './distance';
 import { toJS } from 'mobx';
 
@@ -207,11 +207,15 @@ export const commands = [
 
     [
         {
-            map: 'e', name: 'Export PNG', color: 'blue', noMultiplier: true,
+            map: 'e', name: 'Export Image', color: 'blue', noMultiplier: true,
             func: () => exportPNG(),
         },
         {
-            map: 'i', name: 'Import Over Sprite', color: 'blue', noMultiplier: true,
+            map: 'E', name: 'Export Spritesheet', color: 'blue', noMultiplier: true,
+            func: () => exportSpritesheet(),
+        },
+        {
+            map: 'i', name: 'Import Image', color: 'blue', noMultiplier: true,
             func: () => importImg(),
         },
         {
@@ -226,7 +230,7 @@ export const commands = [
         {
             map: 'd s', name: 'Delete Sprite', color: 'red',
             func: () => {
-                const { currentSprite, dplcsEnabled } = environment.config;
+                const { currentSprite } = environment.config;
                 environment.mappings.splice(currentSprite, 1);
                 environment.dplcs.splice(currentSprite, 1);
             },
@@ -235,7 +239,7 @@ export const commands = [
             map: 'd m', name: 'Delete Mappings', color: 'red',
             func: () => {
                 const { selectedIndices, hasActive } = mappingState;
-                const { currentSprite, dplcsEnabled } = environment;
+                const { currentSprite } = environment;
                 if (hasActive) {
                     selectedIndices.forEach((i) => {
                         currentSprite.mappings[i].rip = true;

app/controls/keyboard.js

@@ -16,7 +16,7 @@ flatten(commands)
 
 // handle multiplier
 let multiplier = '';
-Mousetrap.bind(['0','1','2','3','4','5','6','7','8','9'], (e) => {
+Mousetrap.bind([...'0123456789'], (e) => {
     multiplier += String(e.key);
 });
 Mousetrap.bind('esc', () => {

app/formats/image.js

@@ -4,18 +4,15 @@ import { writeFile } from 'fs';
 import { errorMsg } from '#util/dialog';
 import { colorMatch } from '#components/import/color-match';
 
-const debug = false;
+function exportSprite({ buffer, mappings }) {
 
-export function exportPNG() {
-    const { currentSprite: { buffer, mappings }, palettesRGB, sprites } = environment;
-
-    if (!mappings.length || !sprites.length) return;
+    const { palettesRGB } = environment;
 
     const canvas = document.createElement('canvas');
-    if (debug) {
-        canvas.className = 'canvas-debug';
-        canvas.style.width = '200px';
-        document.body.appendChild(canvas);
+    if (!mappings.length) {
+        canvas.width = 32;
+        canvas.height = 32;
+        return canvas;
     }
     const ctx = canvas.getContext('2d');
     let tileBuffer = ctx.getImageData(0, 0, 8, 8);
@@ -84,10 +81,64 @@ export function exportPNG() {
 
     });
 
+    return canvas;
+}
+
+
+export function exportSpritesheet() {
+    const { sprites } = environment;
+    if (!sprites.length) return;
+
+    const canvases = sprites.map(({ buffer, mappings }) => exportSprite({ buffer, mappings }));
+
+    const canvas = document.createElement('canvas');
+    canvas.width = 8;
+    canvas.height = 8;
+    const ctx = canvas.getContext('2d');
+    // canvas.className = 'canvas-debug';
+    // document.body.appendChild(canvas);
+
+    let cursor = 8;
+
+    canvases.forEach(current => {
+        const last = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const { width, height } = current;
+        const diff = width + 8;
+        canvas.width += diff
+        canvas.height = Math.max(canvas.height, height + 8);
+        ctx.putImageData(last, 0, 0);
+        ctx.drawImage(current, cursor, 8);
+        cursor += diff;
+    });
+
+    dialog.showSaveDialog({
+        title: 'Export Spritesheet',
+        defaultPath: `spritesheet.png`,
+        filters: [{name: 'PNG Image', extensions: ['png']}],
+    })
+        .then(({ filePath }) => {
+            if (filePath) {
+                const base64Data = canvas.toDataURL().replace(/data(.*?),/, '');
+                writeFile(filePath, Buffer.from(base64Data, 'base64'), (err, success) => {
+                    err && errorMsg('Error exporting spritesheet', String(err));
+                });
+            }
+        })
+        .catch(console.error);
+
+}
+
+export function exportPNG() {
+    const { currentSprite: { buffer, mappings }, sprites } = environment;
+
+    if (!mappings.length || !sprites.length) return;
+
+    const canvas = exportSprite({ buffer, mappings });
+
     dialog.showSaveDialog({
         title: 'Export Sprite',
         defaultPath: `0x${environment.config.currentSprite.toString(16).toUpperCase()}.png`,
-        filters: [{name: 'PNG Image File', extensions: ['png']}],
+        filters: [{name: 'PNG Image', extensions: ['png']}],
     })
         .then(({ filePath }) => {
             if (filePath) {
@@ -98,7 +149,6 @@ export function exportPNG() {
             }
         })
         .catch(console.error);
-
 }
 
 export async function importImg() {
@@ -170,7 +220,6 @@ export async function importImg() {
         }
 
     });
-
 }
 
 function flipBuffer(buffer, hflip, vflip) {

package.json

@@ -1,5 +1,5 @@
 {
-    "version": "1.0.0",
+    "version": "1.1.0",
     "scripts": {
         "start": "electron ./static --dev"
     },

styles/main.scss

@@ -54,8 +54,8 @@ a {
 .canvas-debug {
     position: absolute;
     z-index: 10;
-    bottom: 0;
-    left: 0;
+    bottom: 20px;
+    left: 20px;
     image-rendering: pixelated;
     background-color: rgba(255,0,0,0.5);
 }