Spherical forums

Sphere Development => Sphere General => Topic started by: N E O on July 04, 2013, 12:30:31 am

Title: Sphere Web Utilities
Post by: N E O on July 04, 2013, 12:30:31 am
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!
Title: Re: Sphere Web Utilities
Post by: Radnen on July 04, 2013, 12:40:27 am
This is awesome. In fact if we can finish this project I can continue my work on pixi-sphere!!
Title: Re: Sphere Web Utilities
Post by: N E O on July 04, 2013, 02:32:22 am
Added RFN loading! Now we can also theoretically write a bitmap font writer like this one (http://www.romhacking.net/utilities/277/) but for Sphere and on the web like this NES-based one (http://superfamicom.org/text-to-8-bit)!
Title: Re: Sphere Web Utilities
Post by: DaVince on July 04, 2013, 08:32:35 am
Dude, awesome. The demo is kind of difficult to see, though. (And put the loading messages in console.log rather than alert?)
Title: Re: Sphere Web Utilities
Post by: N E O on July 04, 2013, 05:09:07 pm
Changed sandbox area backgrounds to black.

I'll switch it so that it only alerts if the file didn't load.
Title: Re: Sphere Web Utilities
Post by: DaVince on July 07, 2013, 06:48:23 am
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.
Title: Re: Sphere Web Utilities
Post by: DaVince on July 07, 2013, 08:18:44 am
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.
Title: Re: Sphere Web Utilities
Post by: N E O on July 08, 2013, 04:28:22 pm
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!
Title: Re: Sphere Web Utilities
Post by: N E O on July 08, 2013, 07:47:20 pm
Updated windowstyle w/DaVince's fixes, now blits a window!

Updated font to add working drawText, now blits an unbroken line of text!
Title: Re: Sphere Web Utilities
Post by: Radnen on July 08, 2013, 07:50:17 pm
Huh, I don't see those changes working on the demo page.
Title: Re: Sphere Web Utilities
Post by: DaVince on July 08, 2013, 08:07:29 pm
Hm, seems to work here. Maybe it was still uploading?

Neo, thanks for optimizing it! That's not exactly my strong suit. :P
Title: Re: Sphere Web Utilities
Post by: Radnen on July 08, 2013, 08:43:53 pm
Alright, I see it not. Good stuff!
Title: Re: Sphere Web Utilities
Post by: N E O on July 09, 2013, 05:09:12 pm
Should I attempt the mess that is Font.drawTextBox first or should I just go straight to spriteset loading?
Title: Re: Sphere Web Utilities
Post by: DaVince on July 09, 2013, 05:17:10 pm
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. :)
Title: Re: Sphere Web Utilities
Post by: N E O on July 09, 2013, 05:57:14 pm
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 :)
Title: Re: Sphere Web Utilities
Post by: N E O on July 10, 2013, 04:59:40 pm
I NEED HELP! Spriteset loading seems to be janky. Visit http://www.spheredev.org/fmt/ (http://www.spheredev.org/fmt/) to see it in action.

It gets the header correct - 5 images of dimensions 45*41 pixels with 8 directions. Each image itself, however, is offset pretty badly and I don't know where in the loading code that happens nor do I know if the offsetting is in full pixels or if it's in clusters of <4 bytes a piece. The sample spriteset is a version 3 spriteset.
Title: Re: Sphere Web Utilities
Post by: Radnen on July 10, 2013, 05:29:06 pm
I've seen that issue before! I think it has to do with the alpha channel.

Check out my code to see how I did SS loading:
https://github.com/Radnen/spherestudio/blob/master/Sphere.Core/Spriteset.cs
Title: Re: Sphere Web Utilities
Post by: N E O on July 10, 2013, 06:01:59 pm
Radnen pointed me in the right direction, and I think I found the issue: since jQuery's $.get is forced to load the file as some text format, the resulting string being read might possibly be multi-byte. This means I'm going to have to change up how I parse bitmap data...

edit - fixed! It was the forced UTF-8 mime type that was killing me. Now that I fixed the $.ajax call to give me single-byte chars, I may consider switching to jDataView (https://github.com/jDataView/jDataView) to populate <canvas> data in the future. I'm going to likely attempt basic animation of the spriteset's given directions before I move on to maps and tilesets.
Title: Re: Sphere Web Utilities
Post by: N E O on July 19, 2013, 08:42:55 pm
Eh, I skipped spriteset animation for a bit to start on tileset and map loading. Visit http://www.spheredev.org/fmt/ (http://www.spheredev.org/fmt/) to see a mostly successful tileset load using a tileset from a super-old Blockman demo. Like spriteset, tileset is lacking animation but likely will be solved simultaneously with spriteset animation. It'll be pushed to GitHub once map loading is done and/or animation is done.

For the tileset load, animated tiles have a semi-transparent "A" in the corner that when you mouseover will tooltip what the next tile should be and its delay.

(edit - just sped up the canvas blits IMMENSELY; as I had hoped, I can manipulate the canvas data directly and canvas.putImageData as one large block ^_^)

Can someone point me to a reliable HTML5 Canvas animation tutorial that assumes the frame data is already preloaded? I know it's a really specific condition to ask, but it'll just make it way easier on me to edit that than to roll my own.
Title: Re: Sphere Web Utilities
Post by: N E O on July 20, 2013, 06:29:24 pm
Screw it, I rolled my own animation code. SAMPLE TILESET NOW ANIMATES ^________^

Now to finish spriteset, then code commit to GitHub.

edit - SPRITESET DIRECTIONS NOW ANIMATE ^________^ , committed!

Question - I looked at it on my tablet, HP Touchpad running Android Cyanogenmod 10.1 unofficial, and Android Browser doesn't seem to like alpha channel on canvas while Android Chrome doesn't seem to like what I did with the windowstyle blitting (especially blitRepeat). Anyone else get these two issues?
Title: Re: Sphere Web Utilities
Post by: N E O on August 10, 2013, 10:36:48 pm
So I was visiting Romhacking.net today and the latest tool they offered is called Awesome Tile Tool (http://www.romhacking.net/utilities/987/), an HTML5 webapp that lets you draw maps on a <canvas> and export to PNG. Load in a tileset image (standard image formats), fiddle with the fields, and get to drawing! Requires a modern browser (current Chrome or Firefox recommended) and doesn't seem to need a webserver to run.

Other than some weirdness with the tile picker code that results in sometimes unintentional overlapping, I think I'm going to edit this thing for Sphere web use and to look better. I'll probably also steal its file loading code to reduce the need for a webserver for the other utilities.
Title: Re: Sphere Web Utilities
Post by: DaVince on August 12, 2013, 04:29:13 am
Nice stuff! I wonder if it can be used to make a HTML-based map editor in the long run...?
Title: Re: Sphere Web Utilities
Post by: N E O on August 12, 2013, 03:51:55 pm

Nice stuff! I wonder if it can be used to make a HTML-based map editor in the long run...?


That's my plan!

Anyways, I put my modfied version up at http://www.spheredev.org/fmt/att.html (http://www.spheredev.org/fmt/att.html) because the original ATT looks like ass. It's self-contained, but I'm in the process of separating it for easier editing. Look at the source if you like, but for now the JS is a mishmash of the original code and my in-progress edits.
Title: Re: Sphere Web Utilities
Post by: Radnen on August 12, 2013, 03:58:08 pm
It sometimes doesn't register a click, but that might not matter since you were not necessarily looking to create a map editor out of it. It would be cool too to create a map editor though, so you can edit on the go. ;)
Title: Re: Sphere Web Utilities
Post by: N E O on August 12, 2013, 04:14:15 pm
It sometimes doesn't register a click [ ... ]


That's almost entirely my fault; the CSS and subsequent JS I wrote for the tile highlighter (ie, highlight the currently moused over tile on the map canvas) sets the z-index of the highlight square above the <canvas> and waits 1ms before lowering the z-index back. If I don't set the z-index higher in the first place the highlighter square appears under the canvas and is effectively useless for highlighting.

Likely the inability to register the click is the z-index not being set fast enough, so the document registers the click on the highlighter square itself instead of the canvas behind it. I'm pretty sure given enough time I'll probably end up rewriting the highlighter square to be four edges instead of one box so that I don't have to worry about clicks.

[ ... ]It would be cool too to create a map editor though, so you can edit on the go. ;)


What would the default tile storage be for such an editor, embedded or external?
Title: Re: Sphere Web Utilities
Post by: Radnen on August 12, 2013, 04:30:56 pm

[ ... ]It would be cool too to create a map editor though, so you can edit on the go. ;)


What would the default tile storage be for such an editor, embedded or external?


External website, like say editing files from your Dropbox?
Title: Re: Sphere Web Utilities
Post by: N E O on August 12, 2013, 04:48:42 pm
Don't know about that yet; default cross-domain scripting behavior on servers is still "disallow" so I'd either have to write a quick server-side proxy script or perform some real JS gymnastics to make that happen. I'll save that for later.
Title: Re: Sphere Web Utilities
Post by: Radnen on August 12, 2013, 05:00:42 pm
If you can't do cross-domain then perhaps a method to host your in-development sphere game here?
Title: Re: Sphere Web Utilities
Post by: N E O on August 12, 2013, 07:44:08 pm
As a last resort, sure. When the time comes for resource loading on the eventual web-hosted map editor, I'll approach the topic again and see how far I can get.

I don't remember the quota imposed on spheredev.org, but given the fact that we still haven't completely recovered from our massive data loss my first preference is to have as much non-1st party stuff as possible hosted externally, and even for 1st-party non-web stuff use reliable 3rd-party hosts when possible (eg, GitHub and Sourceforge for source repos and Google Drive for other downloads).
Title: Re: Sphere Web Utilities
Post by: N E O on August 13, 2013, 06:35:22 pm
Came across a <canvas> size limit - 8192 pixels max for width and height. Any further and it just won't draw.

Don't know how we're going to support displaying huge maps in a web map editor without splitting them up or forcing a smaller canvas to implement scrolling. Suggestions?
Title: Re: Sphere Web Utilities
Post by: Radnen on August 13, 2013, 08:30:20 pm
Draw to the viewport, never have more tiles than that on screen.
Title: Re: Sphere Web Utilities
Post by: DaVince on November 02, 2013, 12:16:40 pm
Heya Neo, just wondering if you're still doing things with this, since it has a lot of potential. Lack of time I guess? :)

I also owe you an apology because I was supposed to pick up the drawTextBox implementation and never did - just trying too much at once once again, I suppose.
Title: Re: Sphere Web Utilities
Post by: N E O on November 02, 2013, 01:23:35 pm

Heya Neo, just wondering if you're still doing things with this, since it has a lot of potential. Lack of time I guess? :)


Lack of time is correct; uni classes are in full swing, I shifted my remaining free time to finally updating my site's design (it's almost done, just have to fix my nav bar styling) in anticipation of another job hunt, and I want to tie up some loose ends with a couple of my desktop apps and the Triple Triad demo. Map display really is the only major format code left to implement before I do an optimization pass on everything, so if someone wants to take a crack at that they can fork the repo and make a pull request ;)


I also owe you an apology because I was supposed to pick up the drawTextBox implementation and never did - just trying too much at once once again, I suppose.


Don't worry about it. When I do the optimization pass over everything I'll take care of all the missing methods like Font.drawTextBox (which also requires copying Sphere's text wrap algorithm AGAIN).
Title: Re: Sphere Web Utilities
Post by: laserblue on November 15, 2013, 12:10:50 pm
I am testing pixi and this sphere-web utility code but the repository map never appears. The window style, font and sample sprite animation and spritesheet look great! The tileset appears ok but no map ever appears.
Title: Re: Sphere Web Utilities
Post by: N E O on November 15, 2013, 10:40:47 pm
I didn't finish the map load/display code in sphere-web.