Topic: Found: Super Mario in 14kB Javascript (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=30185" title="Pages that link to Topic: Found: Super Mario in 14kB Javascript (Page 1 of 1)" rel="nofollow" >Topic: Found: Super Mario in 14kB Javascript <span class="small">(Page 1 of 1)</span>\

 
MaGnA
Nervous Wreck (II) Inmate

From: Toronto
Insane since: Jan 2008

posted posted 04-09-2008 17:03

http://blog.nihilogic.dk/2008/04/super-mario-in-14kb-javascript.html

quote:

Here's an experiment in keepings things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.

We also have MIDI music embedded as base64-encoded data: URI's. No music for IE, though, and it seems all the other browsers each have different, minor problems with it, but it sort of works.



It's a pretty decent effort with some room for improvement. (It might have even been possible to fit it in 20 lines by reorganizing some things )

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 04-09-2008 18:35

My feelings exactly. The code only seem to be minified. Anyhow the crazy encoding used to store the sprites and the level would render any packer useless.

I can understand the curiosity to encode the sprites in JS but I doubt that's really efficient for non-procedural graphics.

My gut feeling tells me the game as it is now can be done in 8kb max by externalizing the medias.



(Edited by poi on 04-09-2008 19:33)

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

posted posted 04-10-2008 10:46

Collision detection seems to be a bit off. Otherwise, I am insanely impressed. But I usually am with stuff like this.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

Arthurio
Paranoid (IV) Inmate

From: cell 3736
Insane since: Jul 2003

posted posted 04-10-2008 13:10

Collision is off, no mushrooms, no Luigi, no flag/ending and pipes don't work Otherwise ... yay for another dysfunctional Mario clone.

We could definitely do that and much more in 20 lines with external graphics ...

Scott
Paranoid (IV) Inmate

From: schillmania.com
Insane since: Jul 2002

posted posted 04-10-2008 18:13

I saw this on a few external JS sites (and Digg) and thought to myself, the folks at the Asylum are going to be talking about how this could've been done in 5 KB or less - sure enough.. I think it's nice to see cool JS stuff continuing to get exposure and demonstrating small games/apps etc., keep in mind most people still don't consider Javascript much other than a toy language!

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 04-10-2008 18:39

Scott: The Missile fleet game you mentionned on Ajaxian is pretty cool. I tried to make an arena shooter a while ago, but browsers are not quite ready for 300-400 sprites with game logic. I'll probably give a shot at a game like that : less elements to take care of, although more complex colision detection, but still shiny.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 04-15-2008 10:15

I know I should be working on something else, like an entry for 20 Liners - April 08 - Split Screen or a bootsector for Outline'08, but I'm giving a shot at Super Mario Bros.

... like you didn't see that coming

mas
Maniac (V) Mad Librarian

From: the space between us
Insane since: Sep 2002

posted posted 04-15-2008 11:04

awesome, poi! cant wait to see your results

Arthurio
Paranoid (IV) Inmate

From: cell 3736
Insane since: Jul 2003

posted posted 04-15-2008 12:08

make us proud poi

obviously I was thinking about the same thing but I just don't have time right now :P

edit: but damn ... it's tempting ... I may not be able to hold back for long

(Edited by Arthurio on 04-15-2008 12:12)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 04-15-2008 19:31

Thanks.

So far I'm using an image for the 56+ sprites, have the level ( including the castle and flag pole, and the collision map ), display the score/coins/time, you can move Mario around and I generate a couple of notes of MIDI. I just had a look at the 'official' theme of SMB in MIDI ( 10.4kB ) in an HEX editor. It should take a grand max of 2kB to generate. Probably less. The death tune seem more 'chaotic'

8kB seem like a reasonable target.

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

posted posted 04-16-2008 03:08

You guys are insane.

When the world succumbs to nuclear holocaust, all our vaunted technology crumbles at our feet, and we are left with a single computer with only 20k of usable space left on it, I know exactly who we are going to turn to to restore humanity to its former glory.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

WebShaman
Lunatic (VI) Mad Scientist

From: The Happy Hunting Grounds...
Insane since: Mar 2001

posted posted 04-16-2008 12:27
quote:

Suho1004 said:

You guys are insane.When the world succumbs to nuclear holocaust, all our vaunted technology crumbles at our feet, and we are left with a single computer with only 20k of usable space left on it, I know exactly who we are going to turn to to restore humanity to its former glory.___________________________Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup



Actually, it will be an Asteroid strike in 2036, Master Suho - Schoolboy Corrects NASA's Math On Killer Asteroid

WebShaman | The keenest sorrow (and greatest truth) is to recognize ourselves as the sole cause of all our adversities.
- Sophocles

Ox0D06
Obsessive-Compulsive (I) Inmate

From: Germany
Insane since: Apr 2008

posted posted 04-16-2008 13:16
quote:

poi said:

Thanks.So far I'm using an image for the 56+ sprites, have the level ( including the castle and flag pole, and the collision map ), display the score/coins/time, you can move Mario around and I generate a couple of notes of MIDI. I just had a look at the 'official' theme of SMB in MIDI ( 10.4kB ) in an HEX editor. It should take a grand max of 2kB to generate. Probably less. The death tune seem more 'chaotic' 8kB seem like a reasonable target.



poi, I read your post on John Resig's blog. I was wondering, what exactly do you mean with using a more basic format than the base128 sprites to decrease entropy? Are you just talking about saving the sprites in seperate files? For as far as I'm aware, JS compressors dont "expand" the extended ascii chars (not even Dean Edward's packer using base62).

Cheers

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 04-16-2008 13:38

0x0D06: Hello and welcome to the Asylum, anonymous person from Germany.

I meant storing the sprites in a more basic string/array format like e.g. binary strings ( e.g.: spriteFoo = '01110101001001' ). The base128 encoding requires complex/lengthy computations to decode and use a wiiiide portion of the 256 possible ASCII characters in a chaotic order, leaving very few tokens/characters available for a packer to replace the redudant patterns of the source code.

On my WIP all the sprites ( 69 in total ) are in a single .PNG file weighing ~1710 bytes. That's less than 25 bytes per sprite and no JS code required to decode them and what not.

I might give a shot at storing/generating the sprites in JS as I expect people to "bitch" about me using an image when I release my version.

Using an image is less geeky but it's like 2-3x more efficient than the encoding used in the 14kB Mario. OTOH the geek points lost here, will float back on the music part



(Edited by poi on 04-16-2008 13:42)

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

posted posted 04-17-2008 15:16
quote:

WebShaman said:

Actually, it will be an Asteroid strike in 2036, Master Suho - Schoolboy Corrects NASA's Math On Killer Asteroid



Followed through on that one and found that the kid was actually wrong. Still, though, 1 in 45,000 is a lot closer to an asteroid strike than I ever went to get.

I guess you'd better get working on a plan to save the earth, poi.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 04-19-2008 18:29

Question: I looked at sprites generation* in JS and the cost is ~1kB and Canvas support. Meaning it would not work in IE as 1997 called and said the 27 zillions DIVs fallback is not an option.

Is that acceptable to drop IE or should I keep using an image ?


*: the sprite data + generation code is ~2,700 bytes for 64 sprites in 16x16 with 10 colors.

liorean
Paranoid (IV) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

posted posted 04-19-2008 20:18

poi: How expensive is VML fallback for IE?

--
var Liorean = {
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 04-19-2008 20:51

VML being declarative, it will cost at least as much as the 27 zillions DIVs technique. I don't know of a fast and compact way to create images ( as in pixel buffer, not tag soup ) with transparency in IE8, let alone previous versions.

Ox0D06
Obsessive-Compulsive (I) Inmate

From: Germany
Insane since: Apr 2008

posted posted 04-19-2008 22:16

One suggestion: You can save some DIVs by setting its background to the most frequently color used in the sprite. This way, you only have to render the missing pixels which don't have this color.

Just out of interest, is anybody else working on the 20 liner this month? I would really enjoy joining you guys ;> Just seemes like nobody else was interested and I can't find any other JavaScript contests...

(Edited by Ox0D06 on 04-19-2008 22:20)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 04-20-2008 00:29

Sure the DIVs count would drop from 27 to 23 zillions but the generation code would be more complex and thus less packer-friendly. And the rendering would remain incredibly slower than when using an image.

The idea of doing the 1st level of Mario in ~8kB it is fun and all but I'd rather keep it "simple" and save some code mojo for more interesting projects.


... mmh I could keep the image as an IE & Safari fallback ( with a filename leaving no doubt about its raison d'être ), and re-generate it if the user agent supports Canvas. Everyone should be happy-ish with that solution. Right ?



Edit: just found out that Safari do NOT support Canvas.toDataURL(). S'RSLY?!

(Edited by poi on 04-20-2008 01:03)

liorean
Paranoid (IV) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

posted posted 04-20-2008 22:39

poi: VML is used in several of the Canvas-on-IE projects I've seen, that's why I was wondering. With explorercanvas in particular in mind, it seems to me like it's at least a workable alternative.

--
var Liorean = {
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 04-21-2008 00:40

exCanvas is workable when you have few Canvases. Things are slightly different when you have to deal with ~300 CSS sprites / Canvases/VML

Anyway, after some fiddling to make the code more packer friendly, I got the code and data to generate the sprites using Canvas + toDataURL and the fallback loading an actual image for browsers not supporting Canvas properly, in ~2650 bytes.

HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

posted posted 04-21-2008 19:49

Great stuff p01. Looking forward to see the final game.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu