News:

11 March 2016 - Forum Rules

Main Menu

Best way to make a map editor in HTML?

Started by tcaudilllg, March 26, 2011, 05:02:10 AM

Previous topic - Next topic

tcaudilllg

I do it with a table, which contains layered images. Just choose a tile from a drop-down box, and click a cell in the table to change a tile on a specified layer (by resetting the image src property).

I then change the virtual representation of the tile in the tile matrix.

This works fine with small maps. But when dealing with large maps, tables and images won't do because they suck memory like a hog. Some sort of scrolling has to be involved so that the images which make up the visible map are repeatedly reused. This is where things get tough: unlike in the case of a real GUI, a browser doesn't permit programmable scroll bars. (at least not as of HTML 5)

So the question is, how to "emulate" a real scroll bar?

Lin

Why would you make an editor in HTML? If you're really concerned with cross-platform capability or want the editor to run in a browser, use Java.

tcaudilllg

Java is a pain.

Actually come to think of it, it should be very easy to make custom map editors for the likes of say, Castlevania or Zelda II with tables. Just lay out the panes and permit for a state selection for each pane. I think you could even make a "one size fits all" editor that relied on definition files to deal with games in a custom fashion.

Like the following:


BEGIN DEFINITION "ZELDA 2"

@HORIZ-PANES : 16
@VERT-PANES : 1

BEGIN SEGMENTS

1 : Column, "Column.png"
2 : Zelda, "Zelda.png"
3 : EastAltarPart, "EastAltarPart.png"
4: WestAltarPart, "WestAltarPart.png"

END

BEGIN PANES

1 : 1 // Column
2 : 1
3 : 1
4 : 1
5 : 1
6 : 1
7 : 4 // West Altar
8 : 2 // Zelda, lying in state
9 : 3 // East Altar
10 : 1
11 : 1
12 : 1
13 : 1
14 : 1
15 : 1
16 : 1

END

END DEFINITION


I think you get the picture. This code would draw out a 16-pane map, with one of four available segments assigned to each. Could make a far more user friendly version of the old QB Zelda 2 side-view editor this way. Of course, you'd also have to translate this code into actual map data for the ROM, but that could be handed in a similar fashion.


Rhys

You could go for JS + HTML Canvas, then you can just blit graphics directly

Trax

The Zelda II data structure is object-based, not tile-based. The curtains are not coded as 2 rows of tiles, it's coded as an object of 2 tiles high, and a specific width, using 2 bytes in total. The Zelda object tile setup is hard-coded. Most NES games are coded to be compressed in efficient ways because of limited space available. Each screen of the Overworld in Zelda 1 is made of 16 pre-defined columns of 11 tiles, which were in turn compressed in a way...

As for the editor itself, HTML is not enough, but with JavaScript, it could be workable. I'm just a bit sceptic about loading and saving mechanisms...

Lilinda

There is HTML5 but...

A. The spec isn't finished, and probably won't be until 2013 or later. That's not a fact advertised very often.

B. Only the newest Chrome(And newest derived browsers), Firefox(Again, newest derived browsers as well) IE and maybe Opera(Don't know too much about that browser in general).
Retired moderator/staff member as of July 14th 2016

KingMike

With Zelda 1 and 2, even more so because they were originally developed for the FDS, which means they needed to fit along with the game engine into the 32KB PRG-RAM to avoid loading time. :P
"My watch says 30 chickens" Google, 2018

tcaudilllg

Quote from: Trax on March 26, 2011, 05:23:11 PM

As for the editor itself, HTML is not enough, but with JavaScript, it could be workable.

These days the term "dynamic HTML" has fallen out of use. "HTML" and "JavaScript" are used interchangeably.
[/quote]


Quote
I'm just a bit sceptic about loading and saving mechanisms...

HTML 5 has a file upload function which permits Javascript to access data on the user's machine IF they specify the file for upload. Beyond that, every major browser has built-in file saving/loading functions.

Kiyoshi Aman

#8
Quote from: tcaudilllg on March 27, 2011, 01:47:04 AM
Quote from: Trax on March 26, 2011, 05:23:11 PM

As for the editor itself, HTML is not enough, but with JavaScript, it could be workable.

These days the term "dynamic HTML" has fallen out of use. "HTML" and "JavaScript" are used interchangeably.

As a sometime web developer, this is simply not true.

Quote from: tcaudilllg on March 27, 2011, 01:47:04 AM
Quote
I'm just a bit sceptic about loading and saving mechanisms...

HTML 5 has a file upload function which permits Javascript to access data on the user's machine IF they specify the file for upload. Beyond that, every major browser has built-in file saving/loading functions.

Yes, HTML5 has a file API, but I don't think writing a webapp is a good idea. If you really want cross-platform, use C# on Mono; that way it'll be available on Windows, Linux, OSX, Android, and iOS.

snarfblam

I guess when you have a hammer, everything is a nail.

henke37

Well, my hammer is called Flash and it sounds like it has found it's nail here. Flash is great at RIA.