Inspired by Radnen's originally failed attempt at loading a windowstyle on the web, I finally started my JS-based Sphere-format file loading for previewing.

• Source: https://github.com/sphere-group/web-sphere-utilities
  
• Demo: http://www.spheredev.org/fmt/
  

Let me know if you want commit access to the repo. Since the demo HTML file uses jQuery's AJAX to get the file it's subject to cross-domain limits, so if you want to run it locally you'll probably need a local webserver. Once done, I'm going to likely do a pull request on casiotone's project once I edit the loading code to his style.

Still tweaking positioning for windowstyle elements in the div since it's dynamic, otherwise successfully loads all 9 basic pieces; will probably convert it to a "hover-over-piece to display" workflow instead. RWS.drawWindow implemented!

RFN loading will be next! RFN loading done, RFN.drawText implemented!

RSS spriteset next! RSS loading done, spriteset animation done!

RTS tileset next! RTS loading done, tileset animation done!

RMP map next! RMP loading kinda done, display is next!

This is awesome. In fact if we can finish this project I can continue my work on pixi-sphere!!

Added RFN loading! Now we can also theoretically write a bitmap font writer like this one but for Sphere and on the web like this NES-based one!

Dude, awesome. The demo is kind of difficult to see, though. (And put the loading messages in console.log rather than alert?)

Changed sandbox area backgrounds to black.

I'll switch it so that it only alerts if the file didn't load.

I cloned the repo and tried to run it locally. Chrome doesn't like that:

Code: [Select]

Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. file:///home/vincent/Dropbox/Sphere/projects-others/web-sphere-utilities/sample/blue.rws
XMLHttpRequest cannot load file:///home/vincent/Dropbox/Sphere/projects-others/web-sphere-utilities/sample/blue.rws. Origin null is not allowed by Access-Control-Allow-Origin. index.html:1
Failed to load resource

After looking around a bit, disabling Access-Control-Allow-Origin isn't a good idea, but perhaps you can set some origin it would accept. Or do I really need to test this on a server with localhost?

Edit: set up nginx, works like a charm. I found that you forgot to put trigger.rfn on Git.
Edit 2: wow, I see the code in your test is still really complicated. Gonna try and make a simple test on a single canvas.

Hmm, can I have commit access? Or is it possible to just fork without needing permission so you can merge anything I try at your own leisure? Also, your Git repo seems outdated compared to your live demo.

...After a few edits...

I implemented WindowStyle.blit for you. It uses a separate, hidden canvas to draw the cut-off/repeated bits of the windowstyle bitmap on, so I had to modify ncanvas. Also made a test HTML for it.

I was going to update the repo after going farther with Font. I'll take a look at the windowstyle code you attached and see how much of my code I can update with it, thanks!

Commit access in 3, 2, 1...done!

Updated windowstyle w/DaVince's fixes, now blits a window!

Updated font to add working drawText, now blits an unbroken line of text!

Huh, I don't see those changes working on the demo page.

Hm, seems to work here. Maybe it was still uploading?

Neo, thanks for optimizing it! That's not exactly my strong suit.

Alright, I see it not. Good stuff!

Should I attempt the mess that is Font.drawTextBox first or should I just go straight to spriteset loading?

Hmm... Mind if I code the Font.drawTextBox() so you can focus on the spriteset loading? That way the work is split up and development speeds up a bit.

Loading those formats is something I don't know how to do, but writing that drawTextBox() would be kinda fun to do. Just give me some coding directions so I can use the right variable naming and stuff.

Feel free to get started on it! I'll give it a quick pass anyways once done to make sure it's consistent but try to take what style you can already see and apply it. Keep in mind that since Font.drawTextBox depends on a wordWrapString implementation you might want to start with that first; I've implemented a pure JS wordWrapString long ago in my NTML demo (check the NTML wiki page for link) and that should still hold up even in 2013 if you need a starting point.

That means I'll start on spriteset loading