silphscope 1.4.1 → 1.4.3

package/README.md

@@ -1,5 +1,11 @@
 still a WIP however hopefully with some more work I can get this into a workable state...
 
+(Amazingly Newer!) Update:
+
+so now ball extraction works! still need to cut the images up but that should be simple
+
+(also move graphics are basically done except for ICE_CHUNK it is a weird image... and I don't know how I am going to cut it up... but everything else is working! that makes it sound like ICE_CHUNK doesn't work... which it does it just doesn't get nicely cut up)
+
 (Even Newer!) Update:
 
 moves now work... kinda... still working on getting it all the way done but it mostly works!
@@ -26,11 +32,12 @@ await renderAllGraphics(rom, {
     outputIconDir: "./Assets/Icons", // same thing here :p
     outputTrainerDir: "./Assets/Trainers", // ...
     outputMoveDir: "./Assets/Moves",
-    sortUnusedMoves: true // just sorts the unused moves into a sub-directory
+    sortUnusedMoves: true, // just sorts the unused moves into a sub-directory
+    outputBallDir: "./Assets/Balls"
 });
 ```
 
-Of course though the above is for extracting all graphics (which is kinda a lie... In reality it only extracts mon images, item icons, trainer images, and move images... but like I said this is a WIP :p so wait a bit please!).
+Of course though the above is for extracting all graphics (which is kinda a lie... In reality it only extracts mon images, item icons, trainer images, move images, and ball images... but like I said this is a WIP :p so wait a bit please!).
 
 But if you want say just the mon images or item icons refer below:
 
@@ -81,4 +88,15 @@ await renderAllMoves(rom, {
     renderMasterImage: true, // kinda forgot about this... basically it renders a uncut image of the move anim if you like
     sortUnused: true, // sorts unused moves into a sub-directory
 })
-```
+```
+
+ball image extraction:
+```JavaScript
+import fs from "fs";
+import { renderAllBalls } from "silphscope" // o-O
+
+const rom = fs.readFileSync("./path/to/your/rom.gba") // the file path explains :/
+await renderAllBalls(rom, {
+    outputDir: "./Assets/Balls",
+    ballParticles: true, // set to false if you don't want the ball particles :p
+})

package/ball-data/ballData.json

@@ -1,38 +1,156 @@
 {
     "POKE": {
-        "index": 0
+        "index": 0,
+        "frameCount": 2,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 3,
+        "particleFrames": [
+            { "x": 0, "y": 0, "width": 8, "height": 8 },
+            { "x": 0, "y": 8, "width": 8, "height": 8 },
+            { "x": 0, "y": 16, "width": 8, "height": 8 }
+        ]
     },
     "GREAT": {
-        "index": 1
+        "index": 1,
+        "frameCount": 2,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 2,
+        "particleFrames": [
+            { "x": 0, "y": 8, "width": 8, "height": 8 },
+            { "x": 0, "y": 16, "width": 8, "height": 8 }
+        ]
     },
     "SAFARI": {
-        "index": 2
+        "index": 2,
+        "frameCount": 2,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 2,
+        "particleFrames": [
+            { "x": 0, "y": 0, "width": 8, "height": 8 },
+            { "x": 0, "y": 8, "width": 8, "height": 8 }
+        ]
     },
     "ULTRA": {
-        "index": 3
+        "index": 3,
+        "frameCount": 2,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 1,
+        "particleFrames": [
+            { "x": 0, "y": 56, "width": 8, "height": 8 }
+        ]
     },
     "MASTER": {
-        "index": 4
+        "index": 4,
+        "frameCount": 2,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 1,
+        "particleFrames": [
+            { "x": 0, "y": 24, "width": 8, "height": 8 }
+        ]
     },
     "NET": {
-        "index": 5
+        "index": 5,
+        "frameCount": 2,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 1,
+        "particleFrames": [
+            { "x": 0, "y": 32, "width": 8, "height": 8 }
+        ]
     },
     "DIVE": {
-        "index": 6
+        "index": 6,
+        "frameCount": 3,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 },
+            { "x": 0, "y": 32, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 1,
+        "particleFrames": [
+            { "x": 0, "y": 32, "width": 8, "height": 8 }
+        ]
     },
     "NEST": {
-        "index": 7
+        "index": 7,
+        "frameCount": 2,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 1,
+        "particleFrames": [
+            { "x": 0, "y": 40, "width": 8, "height": 8 }
+        ]
     },
     "REPEAT": {
-        "index": 8
+        "index": 8,
+        "frameCount": 2,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 1,
+        "particleFrames": [
+            { "x": 0, "y": 56, "width": 8, "height": 8 }
+        ]
     },
     "TIMER": {
-        "index": 9
+        "index": 9,
+        "frameCount": 3,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 },
+            { "x": 0, "y": 32, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 1,
+        "particleFrames": [
+            { "x": 0, "y": 56, "width": 8, "height": 8 }
+        ]
     },
     "LUXURY": {
-        "index": 10
+        "index": 10,
+        "frameCount": 3,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 },
+            { "x": 0, "y": 32, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 2,
+        "particleFrames": [
+            { "x": 0, "y": 48, "width": 8, "height": 8 },
+            { "x": 0, "y": 56, "width": 8, "height": 8 }
+        ]
     },
     "PREMIER": {
-        "index": 11
+        "index": 11,
+        "frameCount": 3,
+        "frames": [
+            { "x": 0, "y": 0, "width": 16, "height": 16 },
+            { "x": 0, "y": 16, "width": 16, "height": 16 },
+            { "x": 0, "y": 32, "width": 16, "height": 16 }
+        ],
+        "particleFrameCount": 2,
+        "particleFrames": [
+            { "x": 0, "y": 48, "width": 8, "height": 8 },
+            { "x": 0, "y": 56, "width": 8, "height": 8 }
+        ]
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "silphscope",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "A firered/leafgreen ROM asset extractor for use in web applications",
   "main": "main.js",
   "exports": {
@@ -28,7 +28,23 @@
     "!graphics-maps/",
     "ball-data/"
   ],
-  "keywords": [],
+  "keywords": [
+    "gba",
+    "gameboy-advance",
+    "pokemon",
+    "firered",
+    "pokemon-firered",
+    "leafgreen",
+    "pokemon-leafgreen",
+    "rom",
+    "asset",
+    "asset-extractor",
+    "sprite",
+    "sprite-extractor",
+    "extractor",
+    "gen3",
+    "generation-3"
+  ],
   "author": "chickenPoo",
   "license": "MIT",
   "type": "module",

package/rom-configs/{firered.js → fireredRev0.js}

@@ -3,8 +3,9 @@
 
 // I have an idea but it needs math D:
 
-export const firered = {
+export const fireredRev0 = {
     code: "BPRE", // I find this weird... like what does BP stand for? is it: "Battle Pokemon"? no idea :o
+    rev: 0, // I probably should have mentioned I have been making this tool with a rev0 ROM... but oh well it isn't like people are actually using this tool at least right now so no one has probably run into the "why isn't m firered ROM working!" issue :p
     tables: { // so the idea is essentially instead of a big JSON like we have now we instead just view the table graphics and build from that... it in theory could be slower because more lookups instead of direct references but it should be more maintainable...
         monFrontSprites: 0x2350AC,
         monBackSprites: 0x23654C,

package/rom-configs/fireredRev1.js

@@ -0,0 +1,12 @@
+// Copyright (c) 2026 chickenPoo
+// Licensed under the MIT License. See LICENSE file in project root.
+
+// time to see if my goofy ideas payed off lol
+
+export const fireredRev1 = {
+    code: "BPRE",
+    rev: 1,
+    tables: {
+        // will add these later :p
+    }
+}

package/rom-configs/leafgreenRev0.js

@@ -0,0 +1,10 @@
+// Copyright (c) 2026 chickenPoo
+// Licensed under the MIT License. See LICENSE file in project root.
+
+export const leafgreenRev0 = {
+    code: "BPGE",
+    rev: 0,
+    tables: {
+        // :p
+    }
+}

package/rom-configs/leafgreenRev1.js

@@ -0,0 +1,10 @@
+// Copyright (c) 2026 chickenPoo
+// Licensed under the MIT License. See LICENSE file in project root.
+
+export const leafgreenRev1 = {
+    code: "BPGE",
+    rev: 1,
+    tables: {
+        // later...
+    }
+}

package/src/get-rom-config.js

@@ -1,14 +1,27 @@
 // Copyright (c) 2026 chickenPoo
 // Licensed under the MIT License. See LICENSE file in project root.
 
-import { firered } from "../rom-configs/firered.js";
+import { fireredRev0 } from "../rom-configs/fireredRev0.js";
+import { fireredRev1 } from "../rom-configs/fireredRev1.js";
+import { leafgreenRev0 } from "../rom-configs/leafgreenRev0.js";
+import { leafgreenRev1 } from "../rom-configs/leafgreenRev1.js";
 
-function detectRomCode(rom) {
-    return new TextDecoder().decode(rom.slice(0xAC, 0xB0));
+function detectRomInfo(rom) {
+    return {
+        code: new TextDecoder().decode(rom.slice(0xAC, 0xB0)),
+        rev: rom[0xBC],
+    }
 }
 
 export function getRomConfig(rom) {
-    const code = detectRomCode(rom);
-    if (code === firered.code) return firered; // eventually will add more and so on :p (by more I mean leafgreen lol)
-    throw new Error(`Unsupported ROM: ${code}`);
+    const romInfo = detectRomInfo(rom);
+    if (romInfo.code === fireredRev0.code || romInfo.code === fireredRev1.code) {
+        if (romInfo.rev === fireredRev0.rev) return fireredRev0;
+        if (romInfo.rev === fireredRev1.rev) return fireredRev1;
+    }
+    if (romInfo.code === leafgreenRev0.code || romInfo.code === leafgreenRev1.code) { // yes I know checking both of the codes is redundant since they are the same but let me enjoy my useless non-DRY code ;)
+        if (romInfo.rev === leafgreenRev0.rev) return leafgreenRev0;
+        if (romInfo.rev === leafgreenRev1.rev) return leafgreenRev1;
+    }
+    throw new Error(`Unsupported ROM: ${romInfo.code} rev ${romInfo.rev}`); // should be evrything I think...
 }

package/src/graphics/balls/render-ball-particle.js

@@ -15,8 +15,29 @@ const streamToBuffer = (stream) => new Promise((resolve, reject) => {
     stream.on("error", reject);
 })
 
+const extractFrameFromImage = (imageData, fullWidth, frameData) => {
+    const { x, y, width, height } = frameData;
+    const frameImage = new Uint8ClampedArray(width * height * 4);
+
+    for (let row = 0; row < height; row++) {
+        for (let col = 0; col < width; col++) {
+            const srcIndex = ((y + row) * fullWidth + (x + col)) * 4;
+            const dstIndex = (row * width + col) * 4;
+            frameImage[dstIndex] = imageData[srcIndex];
+            frameImage[dstIndex + 1] = imageData[srcIndex + 1];
+            frameImage[dstIndex + 2] = imageData[srcIndex + 2];
+            frameImage[dstIndex + 3] = imageData[srcIndex + 3];
+        }
+    }
+
+    return frameImage;
+};
+
 export async function renderBallParticle(ballName, balls, reader, rom, options = {}) {
-    const { outputDir = null } = options;
+    const {
+        outputDir = null,
+        renderMasterBallParticleImage = false,
+    } = options;
     if (!rom || !(rom instanceof Uint8Array || Buffer.isBuffer(rom))) {
         throw new TypeError("renderBallParticle(..., rom) requires a ROM Buffer/Uint8Array");
     }
@@ -51,8 +72,20 @@ export async function renderBallParticle(ballName, balls, reader, rom, options =
     if (outputDir) {
         const dir = `${outputDir}/${ballName}`;
         if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-        const fileName = `${dir}/particle.png`;
-        fs.writeFileSync(fileName, pngBuffer);
+        if (renderMasterBallParticleImage) {
+            fs.writeFileSync(`${dir}/master-particle.png`, pngBuffer);
+        }
+        for (let i = 0; i < ball.particleFrames.length; i++) {
+            const frame = ball.particleFrames[i];
+            const frameImageData = extractFrameFromImage(image, width, frame);
+
+            const png = new PNG({ width: frame.width, height: frame.height });
+            png.data = frameImageData;
+            const pngFrameBuffer = await streamToBuffer(png.pack());
+
+            const fileName = `${dir}/particle-${i}.png`;
+            fs.writeFileSync(fileName, pngFrameBuffer);
+        }
     }
 
     return pngBuffer;

package/src/graphics/balls/render-balls.js

@@ -16,10 +16,30 @@ const streamToBuffer = (stream) => new Promise((resolve, reject) => {
     stream.on("error", reject);
 })
 
+const extractFrameFromImage = (imageData, fullWidth, frameData) => {
+    const { x, y, width, height } = frameData;
+    const frameImage = new Uint8ClampedArray(width * height * 4);
+
+    for (let row = 0; row < height; row++) {
+        for (let col = 0; col < width; col++) {
+            const srcIndex = ((y + row) * fullWidth + (x + col)) * 4;
+            const dstIndex = (row * width + col) * 4;
+            frameImage[dstIndex] = imageData[srcIndex];
+            frameImage[dstIndex + 1] = imageData[srcIndex + 1];
+            frameImage[dstIndex + 2] = imageData[srcIndex + 2];
+            frameImage[dstIndex + 3] = imageData[srcIndex + 3];
+        }
+    }
+
+    return frameImage;
+};
+
 export async function renderBall(ballName, balls, reader, rom, options = {}) {
     const {
         outputDir = null,
         ballParticles = false,
+        renderMasterBallImage = false,
+        renderMasterBallParticleImage = false,
     } = options;
     if (!rom || !(rom instanceof Uint8Array || Buffer.isBuffer(rom))) {
         throw new TypeError("renderBall(..., rom) requires a ROM Buffer/Uint8Array");
@@ -30,11 +50,14 @@ export async function renderBall(ballName, balls, reader, rom, options = {}) {
         throw new Error(`Missing Ball: ${ballName}`);
     }
     if (ballParticles) {
-        renderBallParticle(ballName, balls, reader, rom, { outputDir });
+        renderBallParticle(ballName, balls, reader, rom, {
+            outputDir,
+            renderMasterBallParticleImage, 
+        });
     }
     const ballPal = resolveBallSpritePal(ball, reader, ballName);
     const ballPic = resolveBallSpritePic(ball, reader, ballName);
-    if(!ballPal || !ballPic) {
+    if (!ballPal || !ballPic) {
         throw new Error(`Missing assets for: ${ballName}`);
     }
 
@@ -57,8 +80,20 @@ export async function renderBall(ballName, balls, reader, rom, options = {}) {
     if (outputDir) {
         const dir = `${outputDir}/${ballName}`;
         if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-        const fileName = `${dir}/ball.png`;
-        fs.writeFileSync(fileName, pngBuffer);
+        if (renderMasterBallImage) {
+            fs.writeFileSync(`${dir}/master-image.png`, pngBuffer)
+        }
+        for (let i = 0; i < ball.frames.length; i++) {
+            const frame = ball.frames[i];
+            const frameImageData = extractFrameFromImage(image, width, frame);
+
+            const png = new PNG({ width: frame.width, height: frame.height });
+            png.data = frameImageData;
+            const pngFrameBuffer = await streamToBuffer(png.pack());
+
+            const fileName = `${dir}/frame-${i}.png`;
+            fs.writeFileSync(fileName, pngFrameBuffer);
+        }
     }
 
     return pngBuffer;

package/src/graphics/graphics-extractor-main.js

@@ -130,6 +130,8 @@ export async function renderAllBalls(rom, options= {}) {
         balls: providedBalls = balls,
         outputDir = "./out",
         ballParticles = true,
+        renderMasterBallImage = true,
+        renderMasterBallParticleImage = true,
     } = options;
 
     fs.mkdirSync(outputDir, { recursive: true });
@@ -138,7 +140,12 @@ export async function renderAllBalls(rom, options= {}) {
     const reader = new RomReader(rom, config);
 
     for (const ballName of Object.keys(providedBalls)) {
-        await renderBall(ballName, providedBalls, reader, rom, { outputDir });
+        await renderBall(ballName, providedBalls, reader, rom, { 
+            outputDir,
+            ballParticles, 
+            renderMasterBallImage,
+            renderMasterBallParticleImage,
+        });
         console.log(`Done: ${ballName}`);
     }
 }
@@ -181,6 +188,8 @@ export async function renderAllGraphics(rom, options = {}) { // eventually I wil
     await renderAllBalls(rom, {
         outputDir: outputBallDir,
         ballParticles: true,
+        renderMasterBallImage: true,
+        renderMasterBallParticleImage: true,
     });
 }
 

package/src/graphics/moves/render-moves.js

@@ -68,6 +68,10 @@ export async function renderMove(moveName, moves, reader, rom, options = {}) {
         height,
     });
 
+    const png = new PNG({ width, height });
+    png.data = image;
+    const pngBuffer = await streamToBuffer(png.pack());
+
     if (outputDir) { // I will update this later but in theory it should also work... eventually though it will need a split inside to handle full image generation :p
         const rootDir = (sortUnused && move?.unused === true)? `${outputDir}/unused` : `${outputDir}`
         const dir = `${rootDir}/${moveName}`;
@@ -90,4 +94,6 @@ export async function renderMove(moveName, moves, reader, rom, options = {}) {
             fs.writeFileSync(fileName, pngBuffer);
         }
     }
+
+    return pngBuffer;
 }