Skip to main content

News

Topic: Sphere Web Utilities (Read 9603 times) previous topic - next topic

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Sphere Web Utilities
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.



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!
  • Last Edit: July 20, 2013, 08:12:22 pm by N E O

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Sphere Web Utilities
Reply #1
This is awesome. In fact if we can finish this project I can continue my work on pixi-sphere!!
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #2
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!

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Sphere Web Utilities
Reply #3
Dude, awesome. The demo is kind of difficult to see, though. (And put the loading messages in console.log rather than alert?)

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #4
Changed sandbox area backgrounds to black.

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

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Sphere Web Utilities
Reply #5
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.
  • Last Edit: July 07, 2013, 07:40:19 am by DaVince

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Sphere Web Utilities
Reply #6
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.
  • Last Edit: July 07, 2013, 09:40:32 am by DaVince

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #7
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!

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #8
Updated windowstyle w/DaVince's fixes, now blits a window!

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

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Sphere Web Utilities
Reply #9
Huh, I don't see those changes working on the demo page.
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Sphere Web Utilities
Reply #10
Hm, seems to work here. Maybe it was still uploading?

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

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Sphere Web Utilities
Reply #11
Alright, I see it not. Good stuff!
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #12
Should I attempt the mess that is Font.drawTextBox first or should I just go straight to spriteset loading?

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Sphere Web Utilities
Reply #13
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. :)

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #14
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 :)