Tool: [ALPHA] PokéWebKit, a browser-based toolkit for editing GBA/NDS ROM data

Hello all,

I wanted to introduce something that started as a simple experiment, but has blossomed into a promising resource for many ROM hacks.

PokéWebKit is an open-source website for editing your ROM hack. Instead of uploading your ROM to a server for editing, which has questionable legal implications, all binary reading and writing is completed inside the web browser of your computer. In fact, the website has no server whatsoever; it is a local playground accessible through your web browser.

The Problem:
In a world with hundreds of hacking tools, it is easy to catch a virus from a tool or find yourself on an incompatible system. You might want to edit your ROM from your tablet, or phone. How can you do that when your favorite tools are built specifically for Windows? As the original developers of tools drop out of existence, their tools must be re-hosted which is a security concern.

The Solution:
Provide an open source, cross-platform solution for developing ROM hacks. Through personal testing, I discovered GBA ROMs can be edited in the browser without suffering from performance issues on most systems. Moreover, because hex/binary operations can be completed in Javascript, a server is not needed. Not only does this add trust, but it means the website can be used without an internet connection; as long as you can originally load the page, the website will still work until you try refreshing the web page.

A Variety of Tools:



Benefits:
- Open Source
- Cross Platform
- Multiple Tools
- No Downloads - except your edited ROM file, but it is only downloaded from your computer's RAM

Issues:
- Due to being browser tool, saving just sends file to your Downloads folder.
- Still really early in development. Always keep your backup after using.

Tools:
- World Editor: Edit maps, their names, information, connections, events, and more.
- Monster Editor: Edit base stats, name, types, sprites, and more.
- Trainer Editor: Edit trainer names, text, sprites, their parties, and more.
- Item Editor: Edit item names, descriptions, prices, pockets, sprites, and more.
- Battlefield Editor: Edit background images, monster/trainer elevations, and battle GUI.

Saving Capabilities:
- Everything in the main editors is saveable, except map sizes and monster names

Current Support:
- Fire Red (USA) 1.0 and Emerald (USA) 1.0 are the only supported ROMs for now, but it's being built for expansion

Soon to Come:
- A more mobile-friendly UI
- Easy-to-add popular Assembly plugins
- More editing/saving capabilities
- Bug fixes

How to Access:
Tool - https://pokewebkit.com
Source Code- https://github.com/jugales/pokewebkit
Use a FireRed (USA) 1.0 or Emerald (USA) 1.0 ROM

Credits
- ShinyQuagsire for his dictionary of script commands
- Lu-Ho for the original animated tile script
- maierfelix for initial field animation structure

Nice, how about 1.0 support?
(No one hacks 1.1)

Mason Shu said:

Nice, how about 1.0 support?
(No one hacks 1.1)

Click to expand...

Thanks for the tip! I built the system so it's flexible; I only need to research addresses (aka offsets) specific to each version for the most part.

I am on vacation until next Sunday, so I'll get on that ASAP when I get back.

In the next two weeks, the following will be done:
- Support for FireRed 1.0 and Emerald
- Map viewer (similar to AdvanceMap)
- Battle background viewer
- Expanded item details
- Trainer details

Mason Shu said:

Nice, how about 1.0 support?
(No one hacks 1.1)

Click to expand...

Sorry for the double post, but I squeezed in some time before leaving to add support for FireRed 1.0 and Emerald. The website has been updated accordingly. Have fun. :)

This looks and sounds really promising for future rom hacks. Although I do have a question regarding to it being able to read expansion data. Most rom hacks add the "fairy type," now my question is if I wanted to try and add a new custom type (Ex: "Sound" type) would the tools on the website recognize the expanded table?

(Tbh, I'm having a bit of trouble trying to manually add it to my rombase with HxD)

Added a bunch of stuff!

Quick Changelog:
- Obtained the pokewebkit.com domain and added SSL for proper usage with HTTPS.
- Added a map renderer with a similar setup to AdvanceMap. No editing yet, just a display.
- Added a battlefield renderer which shows battle backgrounds and entry images. It will be editable soon.
- Added a trainer editor (read-only for now) to edit trainer sprites, their parties, names, battle items, etc.
- Expanded the item editor (still read-only) to include item sprites, pockets, descriptions, prices, and hold effects.
- Quality of life updates and proper warning messages.
- Added a GIF to the OP of this post as a preview of the webkit.

Known Issues:
- Some maps still have a few funky tiles and I'm tracing the cause; I believe it's Javascript not automatically rounding down a number somewhere.
- Mossdeep City won't load due to some kind of decompression issue. It might be the same Javascript thing as above.
- Map renderer could be faster - Tile caching is coming soon and will help a lot.
- Ugly on mobile (for now)

All changes are available for Fire Red 1.0/1.1 and Emerald.

LiveWire-093 said:

This looks and sounds really promising for future rom hacks. Although I do have a question regarding to it being able to read expansion data. Most rom hacks add the "fairy type," now my question is if I wanted to try and add a new custom type (Ex: "Sound" type) would the tools on the website recognize the expanded table?

(Tbh, I'm having a bit of trouble trying to manually add it to my rombase with HxD)

Click to expand...

I've been thinking about this and I believe I can setup a system to make the ROM constants more dynamic. It would be a Gear icon that, when clicked, presents a popup and any ROM constants can be changed. Similar to how you can change the *.ini in other tools, but since this is all in the browser, I can setup a way to import/export configurations in JSON format.

https://pokewebkit.com

ive gave this a try, and i know its basically the newest of the newest so naturally some things still need to be set up after all

but just in case something was simply not working for me while they should have:
-on the mapviewer/ functions and all, I noticed i really only can view, i can select the other options like habitat but nothing shows up, in a way i wonder if it might show up but behind the map that is shown?
-I noticed that one cannot change any evolution data in the pokemon data, kinda missing that myself
-same for movepools, but i am certain that and evolutions are planned for in the future haha
-purely curious, but items effect parameter, would this in time reflect item function effect, such as evolution stones? cause that would be sweet ok found that some items already use this, not sure what it would do but yeah XD

in general however i think this entire idea of yours is really great and revolutionary, hats off
I hope this "tool" will end up fully developed and expended on and perhaps become one of the main ways we can hack the game, cant wait to see how it grows ^^

Another big update!

Quick Changelog:
- Added a built-in Door Editor to the World Editor. It correctly auto-detects if a door is used on the currently selected map's tilesets. View animation frames and edit data such as block ID, palette, and type(?).
- Added a built-in Block Editor to the World Editor. Some features still missing. Building to look similar to AdvanceMap for ease-of-use/familiarity.
- Added a built-in Animation Editor to the World Editor (Fire Red only for now). It still needs some work. You will have the ability to preview and edit tile animations within the editor and on the map.
- Added a blockset renderer on the right side of the World Editor.
- Added a simple zoom capability to the World Editor.
- Added a movement configuration screen to the World Editor. Colors are similar to Advance Map for ease-of-use/familiarity. Some uncommon movement values are still missing colors.
- Added a metadata screen to the World Editor. It includes information such as map name, music, weather, type, battle style, width, and height.
- Added a Game Start editor to edit Starter Pokemon. In the future, this will be extended to include title screen, quest log options, and pre-game intro configuration.
- Added basic block editing capabilities.
- Added the ability to render Overworld sprites in their proper position on the map.
- Added an ASM routine inserter, used to implement Lu-ho's tile animation routine.
- Added a free space finder under the hood. A UI for it will come soon.
- Fixed an issue with rendering flipped 8x8 tiles.

Known issues:
- Performance took a hit with the blockset renderer (displaying 860 small images); however, I am switching to WebGL next week which should help.
- Don't click the Animation Editor button if you're not on Fire Red 1.0 ... I still have some offsets to track down for non-FR1.0 games.
- Map editor tabs for encounters and entities are incomplete/missing.

Sorry, nothing can be saved yet. However, we are quickly approaching the point where that will be possible.

Drake Baku said:

ive gave this a try, and i know its basically the newest of the newest so naturally some things still need to be set up after all

but just in case something was simply not working for me while they should have:
-on the mapviewer/ functions and all, I noticed i really only can view, i can select the other options like habitat but nothing shows up, in a way i wonder if it might show up but behind the map that is shown?
-I noticed that one cannot change any evolution data in the pokemon data, kinda missing that myself
-same for movepools, but i am certain that and evolutions are planned for in the future haha
-purely curious, but items effect parameter, would this in time reflect item function effect, such as evolution stones? cause that would be sweet ok found that some items already use this, not sure what it would do but yeah XD

in general however i think this entire idea of yours is really great and revolutionary, hats off
I hope this "tool" will end up fully developed and expended on and perhaps become one of the main ways we can hack the game, cant wait to see how it grows ^^

Click to expand...

Don't worry, nothing wrong with your ROM. I just forgot to complete those tools for the time being haha. Also, not sure what that parameter for items does. That's how the byte was described on Bulbapedia tho.

Nice!

A few questions:

• How do I download / save the HTML, CSS and JS files for fully offline use?
• You say that this is open-source; where can i read the source code?

sweet, a-map's always broke my hacks so this is one hell of an upgrade haha

well i kind of was expecting it, cant wait to see the further developments and naturally the save function haha

Awesome 👍👍 As an android gba rom hacker , this is awesome and cool
This website lags a bit but it's ok
Well it's awesome

Thank you for the feedback everyone!

napawar said:

A few questions:

• How do I download / save the HTML, CSS and JS files for fully offline use?
• You say that this is open-source; where can i read the source code?

Click to expand...

I mentioned in the beginning of the OP that it is soon-to-be open source. There is still a bit of code that I'm embarrassed by (spaghetti code) and I know being open source slows development (needing to handle tickets, forks, pull requests, etc.). The link to the Github is already at the bottom of the app. The repository just doesn't have code yet.

With all of that said, I think the code will be released within 2 weeks, 4 weeks maximum.

Also, the app is built using Angular 11 (it's my comfort framework). You will just need Node installed to run it locally. After pulling (when possible) just run `npm install` to get the dependencies, then `ng serve` to build and run. In your browser, you will then view the website at http://localhost:4200. Like I said, I just need to do some code cleanup first.

Drake Baku said:

sweet, a-map's always broke my hacks so this is one hell of an upgrade haha

well i kind of was expecting it, cant wait to see the further developments and naturally the save function haha

Click to expand...

Thanks! I just have a few kinks to work out with current read features (better map load times, expanded pokemon list, etc), then I will begin the saving features. Writing to the ROM feature is already complete because I needed it to add LU-HO's tileset animation script; without it, the animation editor would not be possible. Keep in mind it's written to the buffer in RAM, not your actual file until saving is added.

Also, when saving is added, it will never overwrite your ROM file. Browsers can't do that, and it's probably better this way as you don't have to worry about backups. It will download in your browser with file name [game code]-[timestamp].gba

APPro0744P said:

Awesome 👍👍 As an android gba rom hacker , this is awesome and cool
This website lags a bit but it's ok
Well it's awesome

Click to expand...

Lagging will be fixed soon. I'm doing too much image manipulation where I should be doing byte manipulation.

As for Android, that's awesome! I wasn't sure if that was popular yet as I just came back to this community lately after about 3 years. What screen size are you working with? I would love to accommodate for it and allow you to see everything. All features should work on Android, it's just a display issue right now for small screens.

Jugales said:

Thanks! I just have a few kinks to work out with current read features (better map load times, expanded pokemon list, etc), then I will begin the saving features. Writing to the ROM feature is already complete because I needed it to add LU-HO's tileset animation script; without it, the animation editor would not be possible. Keep in mind it's written to the buffer in RAM, not your actual file until saving is added.

Also, when saving is added, it will never overwrite your ROM file. Browsers can't do that, and it's probably better this way as you don't have to worry about backups. It will download in your browser with file name [game code]-[timestamp].gba

Click to expand...

so if i understand this right, it basically creates a new file wen you save
that is going to be the easiest back up system there is, cause no accidental overwriting on your "good" rom
NICE

I think this web tool of yours os going to be my go to for pretty much all possible if you keep this up, ive had to take a break for 3 years cause most of the tools at the time created bugs and corrupted my files that i kept having to restart, especially one time where i noticed a bug after saving and it locked 90% of all pokemon's off from editing (so this save feature of yours is epic to avoid that)
I have yet to fully start up again this time, looking around the new tools and tricks but yours is starting to truly be one i am willing to wait a bit longer for haha

Animated tiles within the map editor will be available by the end of the week. Attached is a small (yet still somewhat buggy) preview. Tiles will be animated in both the map and blockset, with the ability to toggle where they're on/off.

Does any other map editor do this?

Drake Baku said:

so if i understand this right, it basically creates a new file wen you save
that is going to be the easiest back up system there is, cause no accidental overwriting on your "good" rom
NICE

I think this web tool of yours os going to be my go to for pretty much all possible if you keep this up, ive had to take a break for 3 years cause most of the tools at the time created bugs and corrupted my files that i kept having to restart, especially one time where i noticed a bug after saving and it locked 90% of all pokemon's off from editing (so this save feature of yours is epic to avoid that)
I have yet to fully start up again this time, looking around the new tools and tricks but yours is starting to truly be one i am willing to wait a bit longer for haha

Click to expand...

Yep! It will save a copy of the file you "uploaded". I put uploaded in quotes because it's only uploaded into your computer's RAM, not a server. The browser will "download" the file, but it's really just a save of the bytes in memory.

Jugales said:

Does any other map editor do this?

Click to expand...

I don't think so

Jugales said:

Thank you for the feedback everyone!



I mentioned in the beginning of the OP that it is soon-to-be open source. There is still a bit of code that I'm embarrassed by (spaghetti code) and I know being open source slows development (needing to handle tickets, forks, pull requests, etc.). The link to the Github is already at the bottom of the app. The repository just doesn't have code yet.

With all of that said, I think the code will be released within 2 weeks, 4 weeks maximum.

Also, the app is built using Angular 11 (it's my comfort framework). You will just need Node installed to run it locally. After pulling (when possible) just run `npm install` to get the dependencies, then `ng serve` to build and run. In your browser, you will then view the website at http://localhost:4200. Like I said, I just need to do some code cleanup first.



Thanks! I just have a few kinks to work out with current read features (better map load times, expanded pokemon list, etc), then I will begin the saving features. Writing to the ROM feature is already complete because I needed it to add LU-HO's tileset animation script; without it, the animation editor would not be possible. Keep in mind it's written to the buffer in RAM, not your actual file until saving is added.

Also, when saving is added, it will never overwrite your ROM file. Browsers can't do that, and it's probably better this way as you don't have to worry about backups. It will download in your browser with file name [game code]-[timestamp].gba



Lagging will be fixed soon. I'm doing too much image manipulation where I should be doing byte manipulation.

As for Android, that's awesome! I wasn't sure if that was popular yet as I just came back to this community lately after about 3 years. What screen size are you working with? I would love to accommodate for it and allow you to see everything. All features should work on Android, it's just a display issue right now for small screens.

Click to expand...

Hello
Screen is a problem but I keep my website to show windows view ( feature available in chrome ) The only problem I am facing is that I cannot change images of anything in this website ( Like sprites of Pokemon).
Thank you And this website is awesome 👍👍👍
Edit - I forgot to tell this
Your website does not contain a Script maker. Do consider adding that it would be really cool.
Edit - I forgot that it is currently on read only mode , so I cannot edit images 😅😅

Another week, another huge update! Now including animated tiles within the map editor and several saving capabilities.

Quick Changelog:
- Rebuilt the map renderer from scratch to make it a lot faster
- Enabled animated tiles within the map and in the blockset pane
- Added a checkbox to enable or disable tile animations (enabled by default)
- Reformatted the header a bit for more space
- Added a button (currently disabled) to view the region maps (fly/town map)
- Added basic saving capability (it will download the ROM bytes in your browser from RAM)
- Added a dialog so you can see each change and the exact bytes being written before saving
- Added a basic click-and-drag capability to the map painter
- Added the ability to edit movement permissions on the map
- Added UI to manage monster encounters on the map
- Added an event/entity manager to handle things like NPCs, signs, warps, and tile scripts.
- Added a WIP Field button/dialog to manage field animations such as walking through grass, on top of a puddle, bike trails, etc. I found a table with their data, but still doing research. If anyone has documentation on these, specifically their palettes, let me know. I think I found how to get each frame width, not sure if frame height is calculated by data size and width or its a static value somewhere.
- Fixed a lot of bugs along the way

Known Issues:
- The first tile on the secondary tileset is broken (a visual glitch in the tool only). If the tile is used in a map (usually top corner of a secondary tileset building) things can look funky.
- Maps that have tiles in the secondary tileset rely on the primary tileset palettes look funky (a visual glitch in the tool only).
- Mobile still looks bad, but probably better than before.
- No ability to edit connections or fly position data yet.
- Some tile animations aren't loading ... not sure why. Most notably is the waterfall animation in Emerald and second of its secondary tileset animations.
- Some tile animations are missing a step (I think I need to read a flag somewhere) and there are no dynamic intervals - yet.
- If you undo a change, you need to reload the map for it to take full effect (just toggle to another map and back).

Saving Capabilities:
- Change (paint) which blocks are displayed on the map
- Change movement permissions on the map
- Change NPCs, signs, warps, and scripts on the map
- Change monster encounter data on the map
- Change other map data such as music, name, and battle type

APPro0744P said:

Hello
Screen is a problem but I keep my website to show windows view ( feature available in chrome ) The only problem I am facing is that I cannot change images of anything in this website ( Like sprites of Pokemon).
Thank you And this website is awesome 👍👍👍
Edit - I forgot to tell this
Your website does not contain a Script maker. Do consider adding that it would be really cool.
Edit - I forgot that it is currently on read only mode , so I cannot edit images 😅😅

Click to expand...

Thanks! A script editor is planned but it will take a few weeks for that feature alone, so I'm getting stuff out of the way first.

Edit: Also, image insertion will come sometime in the next few weeks. I found a cool javascript library which can manipulate colors and reduce to a specific palette so images might not even need to be indexed. I'm gonna take my time and do it right. I really wanna get to the point where we could submit a PNG image of the map (e.g. built in TileEd) and the algorithm breaks it into two tilesets and the max palettes for optimization. We're a long way off from there though.


https://pokewebkit.com/

I decided to take some screenshots of how this looks on my phone. A lot of these where taken in dark mode since it was pretty early so it default that way: http://imgur.com/a/sCvJRed

A lot of these where taken right before you pushed your last update, but the animation editor was the only one that I spotted any main changes to for display. I also noted ui that scrolled, meaning they weren't a real problem.

I tried opening a couple hacks I had on my phone too (which I knew wasn't decomp based), one didn't open while one was mainly still Emerald, left screenshots of those in the album too.

The load times is way better when opening a map, but I would like to suggest having the Pokémon/Monster tab being the default when you open a rom. It takes 5-20 seconds to open a map for me, adding to the start-up time.

Jugales said:

With all of that said, I think the code will be released within 2 weeks, 4 weeks maximum.

Also, the app is built using Angular 11 (it's my comfort framework). You will just need Node installed to run it locally. After pulling (when possible) just run `npm install` to get the dependencies, then `ng serve` to build and run. In your browser, you will then view the website at http://localhost:4200. Like I said, I just need to do some code cleanup first.

Click to expand...

May I ask if know what the license will be? Also is there some way to credit your code, upon release that is. Great work. Looking at the unminified code, it looks neat and very organised.