This JavaScript library provides APIs to parse all of the proprietary formats used by the DSi portion of Flipnote Hatena (or "Ugomemo Theatre" in Japan).
Supported formats:
Why?
A few people were interested in rendering Flipnote Hatena pages in modern web browsers, so hopefully this will help! Besides, I already made a Flipnote player in JavaScript, so why not have a complete set? \ o /
Notes
At the moment, the image bitmaps don't support transparency, I think this can be fixed by using a more up-to-date DIB header format though (atm I'm using BITMAPINFOHEADER
).
Also, it's worth pointing out that these parsers are implemented from reverse-engineered specs. I'm pretty certain we've discovered any possible quirks at this point, but if you spot any some behaviour, please raise an issue and be sure to include the file you were having trouble with. Thanks!
Usage
For Images:
There's a class available for each image type, they all work the same way:
ugoFormatsNtftImageugoFormatsNpfImageugoFormatsNbfImageugoFormatsTmbImage
To create a new class instance, pass it data as an ArrayBuffer:
var ntft = buffer ;
You can also load an image using the class' fetch utility, which retruns a Promise object. When it loads, the promise is resolved and the image is passed as a class instance:
ugoFormatsNtftImage;
Each image class provides methods to convert the image into a bitmap:
getImage( width, height )
- returns the bitmap as an Image objectgetImageUrl( width, height )
- returns the bitmap as a Data URLgetImageBlob( width, height )
- returns the bitmap as a File Blob
These image formats don't contain any width of height values themselves, so you have to provide those in order to display them. The only exception is TMB images, as they're always 64 x 48.
Now to put it together:
// fetch example.ntft from a url:ugoFormatsNtftImage;
For Ugomenus:
The UgoMenu
class can be used to parse an ugomenu from an ArrayBuffer:
var ugomenu = buffer ;
And like the image classes, there's also a fetch
utility which retruns a Promise when it loads:
ugoFormatsUgoMenu;
To understand ugomenus, it's highly recommended that you look at their documentation.
UgoMenu instances have a couple of properties:
contents
- array of menu itemslayoutType
- menu layoutembeds
- array of embeded images (if there are any), will be either TmbImage or NtftImage instances depending on the menu layout type
Example usage:
// fetch example.ugo from a url:ugoFormatsUgoMenu;
Acknowledgments
- PBSDS for creating Hatena Tools, and for giving me some notes regarding areas where the documentation fell short.
- JSA for performing packet captures of Flipnote Hatena before it shut down, without them reverse-engineering the app in general would have been a huge pain.
- Nintendo for creating the Flipnote Studio application.
- Hatena for creating Flipnote Hatena, the now-defunct online service for sharing Flipnote Studio creations.