øAslickproductions.org/forum/index.php?PHPSESSID=5f0fck550j2m4m2fpbtkj2vkm1&topic=1250.msg12627e:/My Web Sites/Slick Productions - FFIV Message Board/slickproductions.org/forum/index2062.htmldelayedslickproductions.org/forum/index.php?PHPSESSID=5f0fck550j2m4m2fpbtkj2vkm1&topic=1250.0e:/My Web Sites/Slick Productions - FFIV Message Board/slickproductions.org/forum/index2062.html.zxØug^ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÈ…¬òèOKtext/htmlISO-8859-1gzip@øÕòèÿÿÿÿÿÿÿÿÑHTue, 10 Mar 2020 11:27:43 GMT0ó°° ®0®P®€§²ð®Øug^ÿÿÿÿÿÿÿÿ€#òè Playing around with HTML canvas

« previous next »
Pages: 1

Author Topic: Playing around with HTML canvas  (Read 4027 times)

Phoenix

  • FF4 Hacker
  • *
  • Posts: 456
    • View Profile
    • Phoenix Hacks
Playing around with HTML canvas
« on: October 25, 2009, 07:55:11 PM »
I've been working on adding in some features to my Location Map Editor that I had been planning on (mostly, loading data from a ROM rather than a text file). I have that working, but I'd like to add in the ability to toggle the correct background. For that I need tiles that have transparency (which I stupidly didn't put it when I created all the tilesets) so I either need to go through and edit all of them, or load them dynamically from the ROM. I don't know if this will make it into the next release, or if it will be speedy enough in any case, but I've been playing around with using HTML canvas to do this. So far I've been able to create the tile graphic data from the hex data and color it using one of the palettes. You can see an example below.

It takes two or three seconds to draw all of it on the canvas, so it may not be practical when I'm loading *all* the tilesets from the ROM, but I'll have to see once I get all of them working. If nothing else, I can use it to create the tile graphics with the proper palettes, then export those to an image which I can use for my tilesets. Not as cool, but possibly more practical. If anyone has any HTML canvas tips, or a better idea, let me know!

Logged

Dragonsbrethren

  • Forum Overlord
  • *
  • Posts: 1,820
    • View Profile
    • Dragonsbrethren Industries
Re: Playing around with HTML canvas
« Reply #1 on: October 26, 2009, 11:23:37 AM »
Sounds pretty cool. Viewing both backgrounds at once would be great; there's a lot of untapped potential in this game for multi-layer backgrounds, but it's pretty hard to make them when you can only view one map at a time (I open both in tabs and switch between them to make sure everything is lining up).
Logged

Phoenix

  • FF4 Hacker
  • *
  • Posts: 456
    • View Profile
    • Phoenix Hacks
Re: Playing around with HTML canvas
« Reply #2 on: October 26, 2009, 07:00:43 PM »
I was able to load the tilesets instead of just the tile graphics, with the correct palettes, transparency, and horizontal & vertical flipping. I also created a drop-down menu to switch between tilesets. My first implementation took 4 seconds to draw a tileset when switching, but I was able to change some things around to get this down to 2, which seems useable. The row of tiles at the bottom of the window is the canvas converted to a PNG, so I can just drag and drop it out of there.

There's a few things left to figure out: I don't know how the ROM picks out the tile graphics for moving tiles (e.g. the water in the town tileset) so these come out garbled. I also haven't quite gotten all the palettes right. And, the airship and ship tilesets are 4bpp, so I'll have to fix those eventually. If anyone has any knowledge on the location map graphics or palettes, let me know. In any case, I'm on my way to being able to load everything directly from the ROM!

Logged

Dragonsbrethren

  • Forum Overlord
  • *
  • Posts: 1,820
    • View Profile
    • Dragonsbrethren Industries
Re: Playing around with HTML canvas
« Reply #3 on: October 26, 2009, 10:42:51 PM »
I haven't looked into any of this extensively yet, other than to make sure enough data had already been documented to redo a large chunk of the castle tileset, which I haven't even gotten around to doing yet. It looks like you're making great progress already, though. Since you're reading data from the ROM, one thing I'd like to see is a tint applied to the metatiles based on their properties. Tint solid tiles one color, event tiles another, etc. Pretty much the same thing you already did with the existing editor.
Logged

Phoenix

  • FF4 Hacker
  • *
  • Posts: 456
    • View Profile
    • Phoenix Hacks
Re: Playing around with HTML canvas
« Reply #4 on: October 26, 2009, 11:25:58 PM »
Yeah, I'm planning on using tinting for that once I am able to properly load the tile data. Although, in Zyrthofar's viewer he uses tinting for everything, and I find keeping all the colors straight a little confusing. I'll have to think on it.

Unfortunately, I have to put this on the back-burner for a while -- I'll be moving in a few days, and traveling right after that, so I won't have internet access for six weeks or so. I was trying to get it done before I left, but didn't realize how long it'd take me to do it properly. Oh well, more to work on when I get back.

 :cycle:
Logged

Dragonsbrethren

  • Forum Overlord
  • *
  • Posts: 1,820
    • View Profile
    • Dragonsbrethren Industries
Re: Playing around with HTML canvas
« Reply #5 on: October 27, 2009, 09:33:21 AM »
Well, the tinting is vital for any tile that looks like another one, but has different properties. I like the way FFHackster did it; you could tint any tile you wanted any color you wanted. It was really useful for tracking which tiles had encounters, which doors/stairs led where (since it was a tile property in FF1), etc.
Logged

Phoenix

  • FF4 Hacker
  • *
  • Posts: 456
    • View Profile
    • Phoenix Hacks
Re: Playing around with HTML canvas
« Reply #6 on: October 27, 2009, 09:42:07 AM »
Success! I really should be packing right now, but I keep getting distracted by trying to figure out just one more thing.  :finger:  I found the dynamic tile graphics (they're at FBBC0 in a headered ROM, in case anyone ever needs them) and was able to properly load them. I also figured out how to switch palettes for the tileset (as shown below), so the only thing left is the 4bpp airship/ship graphics. After that, I can put it in my Location Map Editor and add a few bells and whistles. I'll see if I can work in a choice of tints when I do that.

Now back to what I should be doing...

Logged

Dragonsbrethren

  • Forum Overlord
  • *
  • Posts: 1,820
    • View Profile
    • Dragonsbrethren Industries
Re: Playing around with HTML canvas
« Reply #7 on: October 27, 2009, 01:23:26 PM »
Very cool. I can't wait to play around with this, when you have a chance to release it.
Logged

JCE3000GT

  • Master of FF4
  • *
  • Posts: 1,429
  • Gender: Male
  • Vladof
    • View Profile
    • BlitzKrieg Innovations
Re: Playing around with HTML canvas
« Reply #8 on: October 28, 2009, 01:04:15 AM »
Looking good...
Logged

Phoenix

  • FF4 Hacker
  • *
  • Posts: 456
    • View Profile
    • Phoenix Hacks
Re: Playing around with HTML canvas
« Reply #9 on: October 28, 2009, 02:27:20 AM »
I got the 4bpp graphics working -- it screwed up my palette loader at first, but now everything works again. So everything is pretty much finished, I just need to integrate it into the Location Map Editor now. That probably won't happen before I leave, so I thought I'd post the tileset creator online so you guys can download and play around with it. You can get it here:

http://sites.google.com/site/phoenixhacks/downloads/TilesetCreator.html

There's one caveat with loading from the ROM: the ROM file must be in the same directory as the HTML file. This is due to security standards when using XMLHttpRequest. Oh, and it needs a headered ROM (although I have the option to load from either in my Location Map Editor). Other than that, let me know if anything doesn't seem to load properly.

Logged

Dragonsbrethren

  • Forum Overlord
  • *
  • Posts: 1,820
    • View Profile
    • Dragonsbrethren Industries
Re: Playing around with HTML canvas
« Reply #10 on: October 28, 2009, 10:45:26 AM »
Oh, cool, that'll save me some time. I'm curious, is there any easy way to make the other tilesets load 4BPP graphics? I don't think I'll bother, but it would certainly be useful to anyone who wanted to give the game a graphical overhaul.
Logged

Phoenix

  • FF4 Hacker
  • *
  • Posts: 456
    • View Profile
    • Phoenix Hacks
Re: Playing around with HTML canvas
« Reply #11 on: October 28, 2009, 03:35:11 PM »
The tileset creator could load other 4bpp graphics, I'd just have to modify the javascript to tell it to do that. As for the game loading 4bpp graphics -- I'm sure it's possible, you'd just have to find the map loading routine and make whatever changes are necessary there. I don't know where it's located, so I've never taken a look to see what happens in it.
Logged

darkmage

  • Phantom Train
  • *
  • Posts: 339
  • Skating the Razor
    • View Profile
Re: Playing around with HTML canvas
« Reply #12 on: November 02, 2009, 05:57:20 PM »
I think this is an awesome effort into getting FF4 to the point FF6 is now, Phoenix. You're doing an awesome job.

And as far as the 3bpp map sprites go, that was something I was looking at doing a while back, when FF4A came out. The 3bpp sprites just don't cut it anymore for me, but I couldn't find any way to change how they're loaded.
Logged
Pages: 1
« previous next »