Skip to main content

News

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

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #15
I NEED HELP! Spriteset loading seems to be janky. Visit 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.

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Sphere Web Utilities
Reply #16
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
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 #17
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 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.
  • Last Edit: July 10, 2013, 06:42:15 pm by N E O

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #18
Eh, I skipped spriteset animation for a bit to start on tileset and map loading. Visit 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.
  • Last Edit: July 19, 2013, 10:00:00 pm by N E O

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #19
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?
  • Last Edit: July 20, 2013, 08:18:30 pm by N E O

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #20
So I was visiting Romhacking.net today and the latest tool they offered is called Awesome Tile Tool, 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.

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Sphere Web Utilities
Reply #21
Nice stuff! I wonder if it can be used to make a HTML-based map editor in the long run...?

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Sphere Web Utilities
Reply #22

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 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.

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Sphere Web Utilities
Reply #23
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. ;)
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 #24
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?

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Sphere Web Utilities
Reply #25

[ ... ]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?
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 #26
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.

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Sphere Web Utilities
Reply #27
If you can't do cross-domain then perhaps a method to host your in-development sphere game here?
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 #28
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).

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