Some news from the Files Archive...

Discussion about Rocks'n'Diamonds, Boulder Dash, Supaplex, Emerald Mine and any other BD hybrid.

Moderators: Flumminator, Zomis

Zomis
Posts: 1502
Joined: Mon Jun 21, 2004 1:27 pm
Location: Sweden
Contact:

Post by Zomis »

It works very good in IE, but Mozilla Firefox 1.6 stops responding when loading the following:
http://www.zomis.net/rnd/show2.php?file=28
User avatar
Jannik
Posts: 135
Joined: Fri Jan 27, 2006 2:55 pm
Location: Germany

Post by Jannik »

What about a simple <table>?
<html>
<head>
<style>
td {width: 32px; height: 32px}
.G000 {background: url('000.gif');}
.G001 {background: url('001.gif');}
.G002 {background: url('002.gif');}
.G003 {background: url('003.gif');}
.G004 {background: url('004.gif');}
.G005 {background: url('005.gif');}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tr><td class="G000"></td><td class="G001"></td><td class="G000"></td></tr>
<tr><td class="G002"></td><td class="G001"></td><td class="G000"></td></tr>
<tr><td class="G003"></td><td class="G001"></td><td class="G000"></td></tr>
<tr><td class="G004"></td><td class="G001"></td><td class="G000"></td></tr>
<tr><td class="G005"></td><td class="G001"></td><td class="G000"></td></tr>
</table>
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

Zomis wrote:It works very good in IE, but Mozilla Firefox 1.6 stops responding when loading the following:
http://www.zomis.net/rnd/show2.php?file=28
It's kind of a "slowness" of the Firefox engine. It's maybe a not-so-good algo. Anyway, after some seconds of intense CPU usage, it displays the map correctly. It sort of hang up, but doesn't crashes. It's all OK in this way.

@Jannik: yes, tables are another solution, it would save some further space. Maybe around 32KB on a 16K elements map like the above one which is around 416KB.

Edit: I correct myself. The solution you proposed would save around 64KB. It's a good solution, and even better if we use even shorter class names where possible, like "G1" instead of "G001". All up to Zomis choice ;)
Anyway, by the way, have fun!
Francesco
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

Pretty no choice... the table saves some good space, and Firefox doesn't hang.

That level could even go lower than 350KB - apart from running smooth in Firefox ;) - make something just like Jannik said but shortening the class names too, in this way:
[...]
<style>
table.level {height: 4112px; width: 4112px;}
td {height: 32px; width: 32px;}
.G1 {background: url('http://www.artsoft.org/I/001.gif');}
.G66 {background: url('http://www.artsoft.org/I/066.gif');}
.G106 {background: url('http://www.artsoft.org/I/106.gif');}
</style>
[...]
<table class="level" cellspacing="0" cellpadding="0" border="0">
<tr><td class="G1"></td><td class="G66"></td><td class="G106"></td></tr>
</table>
[...]
We have discovered a point of weakness of Firefox: with a strong amount of floating boxes it hangs, while absolute positioned boxes and tables are managed correctly even with those high numbers.

Well done Jannik. I bet there is no shorter markup to do the work we need.

Anyway, we are speaking of crazy levels: this one took some good time in Opera to resize and display, even if it's made with the table - remember that we are speaking of +16K images to manage all at once.

@Holger - if he passes by ;) - think very well about zooming features in the Level Editor, I won't think the graphic engine would be glad of such a multi scaled-surface effort :P
Anyway, by the way, have fun!
Francesco
User avatar
Jannik
Posts: 135
Joined: Fri Jan 27, 2006 2:55 pm
Location: Germany

Post by Jannik »

One little drawback of <table> is, that the content won't be displayed in the browser until the whole table is loaded.

To save even more space:
- no line breaks (e.g. behind </tr>) are needed, it just makes the source easier to read
- no G is needed in the class name
- you could use a special counting system for the class names, similar to the hexadecimal system, but with 0-9, A-Z :D
.0{background: url('000.gif')}
...
.9{background: url('009.gif')}
.A{background: url('010.gif')}
...
.Z{background: url('035.gif')}
.00{background: url('036.gif')}
.01{background: url('037.gif')}
...
.0Z{background: url('061.gif')}
.10{background: url('062.gif')}
- you could sort the graphics by occurrences, using the one-letter class names for the most common graphics :mrgreen:
Tomi
Posts: 339
Joined: Wed Aug 03, 2005 3:37 pm
Location: Slovakia

Post by Tomi »

One little drawback of <table> is, that the content won't be displayed in the browser until the whole table is loaded.
Wrong. AFAIK: One little drawback of <table> is, that the content won't be displayed in Internet Explorer until the whole table is loaded.

There's a nice article about this topic here:
http://www.tjkdesign.com/articles/imageintable.asp
So try this: get rid of the tables, use Francesco's solution, use classic IMG tag, put the images in short URL (you can even use mod_rewrite to get rid of the ".gif"), but don't float them.
(I didn't test it yet, so it might not work, or it might be too slow in FX, but try it.)

Btw: did you know that Firefox should actually be abbreviated FX, not FF? http://www.mozilla.org/support/firefox/ ... abbreviate
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

@Jannik: You can't use class names starting with a digit, I had the same thought and tried it, but simply doesn't work in Firefox.

@Tomi: We needed to save as much space as possible, and there is no (usable) shorter markup than <td></td> - as said above, each char saved per element means 16KB on a level like the one we are speaking about.

A table is the best solution, up to this moment, because it works good in all mayor browsers - Firefox being the first.

Zomis should use that solution, along with shorter class names.
Anyway, by the way, have fun!
Francesco
Zomis
Posts: 1502
Joined: Mon Jun 21, 2004 1:27 pm
Location: Sweden
Contact:

Post by Zomis »

Thanks for your hints everybody!
Now I have fixed it a little... but it seems like something is missing...?
Take a look: http://www.zomis.net/rnd/show2.php?file=28
Why isn't the width shown correctly? I tried removing the width and height properties of the td classes, but then nothing showed at all... :roll:

By the way, now when it's a table, it's no use to have the "level" style class defining the total width and height anymore, right? It seems to work without it anyways...

Edit: Ok, nevermind... the level style class was actually what was missing ;) I didn't notice that the table was shrunken down to fit the size of the window..

So, now it seems to work fine in both FX and IE. And it's a nice way it's loaded in FX, first I thought I done something wrong, but then I saw that it worked perfectally :)
So now this will be set as the "show.php" as well, but I'll keep show2.php for a while for more testing purposes ;)

Edit2: It's now also possible to view the level with small images by adding &s to the URL, like this: http://www.zomis.net/rnd/show.php?file=28&s
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

Very good, fast and effective.

If you will, you can take on also Jannik's idea about class names: since no level would use much elements, you can set letters A-Z for class names, and start using numbers only if needed, something like:
.A {background: url('I/080s.gif');}
.B {background: url('I/064s.gif');}
[...]
.Z {background: url('I/065s.gif');}
.A1 {background: url('I/066s.gif');}
[...]
It would be a bit illogical as sequence, but it has only to do the work, no matter if it's logical or not. Unfortunately class names are case insensitive, so we have only 26 possible single-char class names, being case sensitive we would have 52 of them... well, no big deal, we already hit the most important target.

If we really had to cut it down more, we could have started using a script to create the page from a data sequence, on the client side, but that's another story.

Hey, why did you remove the "td" rule? It localized the information about the sizes, removing it is a step backwards, because it increases the size of the file. Imagine if you have another crazy level containing 300+ different elements...
Anyway, by the way, have fun!
Francesco
Zomis
Posts: 1502
Joined: Mon Jun 21, 2004 1:27 pm
Location: Sweden
Contact:

Post by Zomis »

I removed the td rule because it was "td.E" so there had to be 2 extra bytes ("E ") for each element.

The class names are now named "A-Z, AA-ZZ, AAA-ZZZ", if you can find a level with that many element types, please give me the link! ;)

So now I guess that the size of the HTML can't be decreased much more...
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

I removed the td rule because it was "td.E" so there had to be 2 extra bytes ("E ") for each element.
No, there was no "td.E" rule in my example. It was just "td { height...", so it applied to all tds with no need of the E class... you should put it in there again, it really saves space. [edit: OK, you just did it ;)]
The class names are now named "A-Z, AA-ZZ, AAA-ZZZ", if you can find a level with that many element types, please give me the link! ;)
Well done, I'll look for such a level (is that possible? Maybe with RnD X.Y.Z...) ;)
So now I guess that the size of the HTML can't be decreased much more...
Yes, it could be decreased quite a bit further, but it would need client side scripting, and that's too much for it - it could even lead to some problems.

Very nice addon the Level Preview ;)

PS: Increase the size of the table a bit, to leave a margin on the right side.
Anyway, by the way, have fun!
Francesco
Zomis
Posts: 1502
Joined: Mon Jun 21, 2004 1:27 pm
Location: Sweden
Contact:

Post by Zomis »

Francesco wrote:Very nice addon the Level Preview ;)

PS: Increase the size of the table a bit, to leave a margin on the right side.
Thanks :) I hope it will be used often :)

Increasing the size of the table makes the images look funny... it would look like the first 3 rows shows double image, but only 2-3 pixels is shown of the second image. (At least in Mozilla)
So I tried adding an extra TR, and it works downwards... but how to add margin to the right? (Without using a colspan=2 or something on every row above?) Should I add another table with a width of 32*levelwidth+16?
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

OK, I understand the problem. Then add a "margin: 16px;" to "table.level {}", it should work pretty fine.
Anyway, by the way, have fun!
Francesco
Zomis
Posts: 1502
Joined: Mon Jun 21, 2004 1:27 pm
Location: Sweden
Contact:

Post by Zomis »

Francesco wrote:OK, I understand the problem. Then add a "margin: 16px;" to "table.level {}", it should work pretty fine.
Fixed now. I'm not sure if it looks as expected though.
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

Mmm, I thought it would work... well, anyway, now I have a working solution.

I take the occasion to fix a "surplus code" error, by the way: change ".level {" selector with "table {" and then remove 'class="level"' from the Html. My fault, it's a leftover of when we used divs for the content as well as for the container, to distinguish them.

Now the solution: use "border: 16px solid #FFF;" instead of "margin: 16px;" on the (renamed) "table" group of rules.

You can leave the white border, but I would set it to "32px solid #AAA", it emulates the border of real RnD. In the small version you can use the above 16px.
Anyway, by the way, have fun!
Francesco
Post Reply