Asciicker – an online 3D game demo rendering to ASCII text | Hacker News Reader

Asciicker – an online 3D game demo rendering to ASCII text

asciicker.com

327 pointsphoe-krk84 comments

Really impressive. The first time I rotated the camera my jaw dropped a bit.

Same! It works flawlessly on mobile as well, 60 fps without any frame drops on my iPad at least. Tap and drag to move, tap with an extra finger to jump, tap edge to rotate. Really cool stuff!

Edit: the reflection in the water is a nice touch.

Thanks, only after reading your comment I found why they call it a 3D game.

You can see the progression by starting with http://asciicker.com/x1/

Very nice.

x3 is fun

This is a really cool demo - amazing it works so well. It's all unminified JS which is a breath of fresh air these days.

Some commenters are asking how it gets such good performance and whether it would work on retro hardware. It seems it uses WebGL (and fails without it), so likely it depends on a 3D engine for at least some of the rendering process. Still, WebGL seems to be used for only a small part of the rendering pipeline.

If you want to play with arbitrary rotations instead of being locked to 60-degree increments, punch this into the developer console:

   document.onkeydown = function(e) { if(e.key == '[') { dest_angle -= 1; } else if(e.key == ']') { dest_angle += 1; } else return true; }

Then use [ and ] keys to rotate by 1 degree increments. (Tested to work on Firefox).

You just successfully disproved my earlier assumption that this used optimizations specifically for isometric views! It actually uses the WebGL for the 3D part too

(having said that, such optimizations would still have helped in the hypothetical case one might have wanted to implement this on old hardware)

Also, on a desktop you can use the browser zoom (via the menu) to get it to increase the font size. I managed to get my HD screen to show 96 x 54 characters, which comes close to the resolutions on old DOS terminals I think. Now if only it came with a CRT shader, like this one by Timothy Lottes:

https://www.shadertoy.com/view/XsjSzR

The reflection in the water is really nice - it even shows the underside of the roof of the houses!

Performance is terrific! Can you explain a bit how the renderer actually draws to screen? Looks like you create a mini texture per "font" and then draw as a list of quads per pixel?

Also I noticed some websocket netcode up front. Is a multiplayer classic RTS in the works? ;)

I'm getting 52 fps, but it's not really surprising given that the effective resolution is quite low.

Tip: in Firefox you can zoom out by opening the hamburger menu and changing the zoom level e.g. down to 30%.

Looks like this also works in Chrome. Also Ctrl-scrollwheel.

Zooming out makes it look really nice!

x11 is multiplayer.

A bit more info here

https://www.reddit.com/r/asciicker/comments/d3ca43/whats_goi...

I love it. [Q] and [E] to rotate the camera.

You can take a look at the ressources to get an idea of how it was done: http://asciicker.com/x13/images/

When testing it, make sure you press `Q` and `E`

Hoo boy, that makes a difference. Not sure how I missed it the first time.

This is what dwarffortress needs IMO.

the stonesense mod adds this

^^^THIS

Could you add more detail as to why parent's opinion is important to you? E.g. what was your story with Dwarf Fortress UI?

the DF UI is a big "fuck you and fuck you again in yo face" design. this is coming from vim/emacs user (no probs with modality, long chords, etc). also coming from a user, who gladly enjoys text only games. But for DF a good UI is a necessity, or else it gets in your way. Your fun and productivity is obsctructed by the UI, most of gameplay is focused on navigating through UI, not playing. my 2ct ¯\_(ツ)_/¯ Also why I find Factorio so enjoyable - when you can zoom out and admire your creation acting for a while. If you zoom out in DF your eyes start to bleed.

Please consider adding support for non-qwerty keyboards (we don't have wasd, but zqsd). MDN has a very good example for this: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEve...

Very impressive demo otherwise!

A mention of AAlib ( https://en.m.wikipedia.org/wiki/AAlib , http://aa-project.sourceforge.net/aalib/ ) seems relevant.

Well, you just can't omit libcaca :) https://en.m.wikipedia.org/wiki/Libcaca

And so I set off into a seemingly endless ocean.

I'll let you know if I reach new vistas.

There are edges and corners but I haven't swum the complete edge yet.

Am I the only one who can't help but see it as Ascii Licker?

Ah yes, the famous Aphex Twin chiptune demake

(joking, joking. There is no Windowlicker 8-bit cover as far as I can tell. Somewhat surprising, actually)

Got my hopes up, for a second there.

Currently this is the closest approximation I can find: https://youtu.be/hfr1ddGM6Rk

The ii in Ascii looks like li, so closer to Asslicker.

You are not the only one. "Says more about you then it..." blah, blah, blah. The fact is, Asciicker is not a word, is absolutely weird phonetically and asslicker is a close appearing viable compound word. Good for those so pure of mind they do not see it.

Weird phonetically? ASCII spells like ask-he, so it should read as asskicker.

Pretty phonetically sound, no?

in what font does 'ii' look like 'li' ?

Seriously? Any font that only separates the line from the dot with 1 or 2 pixels. Especially if you're only glancing long enough that a c could be mistaken for an l.

Yeah, seriously. I can only remember problems discerning characters with the I, l, and 1 in Ariel. Unless there is a kerning problem, I've never had trouble discerning lowercase i and l. Just like I've never had issues discerning b and h. They have similar strokes, but are clearly different.

If that's the case, shouldn't it look like "ascllcker"?

Our minds try to fit uncertain patterns into familiar shapes, like the classic email forward: "Aoccdrnig to rscheearch at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe."

Are you saying that if someone wrote 'cick my balls' you're not going to think for a brief moment they said something else?

All the san serif ones.

How slow would something like this be, had someone tried to make it for a 386/486 era computer? Like, could have this technique been used effectively for 3d games of that era?

Well, the engine already uses a lot of tricks from that era as far as I can tell: it's isometric, so "fake" orthogonal 3D, and uses sprites with different angles to view them from under the hood for the buildings and trees. It then renders all of this to ASCII with WebGL, which I presume generates a sprite-sheet.

Also keep in mind that games like Zarch[0][1] (aka Virus[2]) already existed in 1987. The ASCII actually hides the fact that we have a low rendering resolution, which may help a lot here.

So I think the main limitation might be the tricks required to render to ASCII, and time it takes to display those ASCII characters. Assuming the implementation tries to make a pure text-based renderer instead of a bitmapped one.

Searching on pouet.net for "ASCII" doesn't reveal many demos[3], but the few that exist look pretty cool[4][5]. They lack separate foreground/background colors though, which bring up one important point: what terminal are you targeting?

Anyway, I'm pretty sure there are more demos out there that basically render to the console but I don't remember the names right now so can't find them.

[0] https://www.youtube.com/watch?v=xrN2soK60bA

[1] https://www.youtube.com/watch?v=L7J5_5GZzeg

[2] https://www.youtube.com/watch?v=V1sYsOm-y8w

[3] http://www.pouet.net/search.php?what=ascii&type=prod

[4] https://www.youtube.com/watch?v=kwy5RhRNVt0

[5] https://www.youtube.com/watch?v=ZuhO1pHsKtU

Did you rotate the camera? The trees look like models.

Elsewhere in the thread someone linked the art assets:

http://asciicker.com/x13/images/

As you can see it makes use of (I suspect paletted) PNGs

Doesn't this show that the map is actually 3d?

Not necessarily, depending on what you mean with 3D (although one of the other comments definitely proved it).

If you mean "uses WebGL to render 3D polygons", then there are other possible solutions, like the isometric approach I mentioned before. Given that the developer wants to target linux terminals[0] he is likely to come up with his own rendering scheme, probably not unlike the old software 3D engines of the late eighties/early nineties (like the aforementioned Zarch, or later Bullfrog games like Powermonger and Syndicate 2)

[0] https://old.reddit.com/r/asciicker/comments/d64sys/has_anyon...

Shrink your browser window until you see this running at about 80x70 characters, then ask your second question again. Modern displays are a lot higher resolution than SVGA.

It's so lovely! You can see your reflection in the water.

This somewhat reminds me of libcaca, "a graphics library that outputs text instead of pixels", used by well-known software.

Invoke "mplayer --vo=caca ((a video file))"

https://github.com/cacalabs/libcaca

This is lovely. For the next version, I'd enjoy the ability to change the vertical angle of the viewport. I can't tell if the fixed angle is a cheat to reduce maximum draw distance, or an artifact of "haven't coded it yet".

Hit q and e

That changes horizontal angle.

Add chat and you have a MMO

The multiplayer is fake I think. Me and my colleagues can't find each other and no one responds to weird walking by me.

Yes, I wanted to see what kind of communication protocol he used and there isn't any. Using the chrome dev tools shows no communication outside of the very few JS files and assets the game loads (very impressive by the way).

Ya, I've been doing figure-eights around folk and they haven't really reacted.

Great work, i like what i see in http://asciicker.com/ too :-)

Really cool!

Love the backwash on the waves, that's the kind of detail that creates realism -- much more than subpixel texture perfection.

The reflection in the water is a nice touch.

Works pretty good on an iPhone, though I can't jump with touch controls

Tapping with two fingers at the same time let me jump on my iPhone (used firefox if that matters)

Nice! And tapping the top left and right corners of the screens rotates the camera. Really smooth

What are the mobile controls? Nothing works for me.

Seems like one turn is 60°. Is there a specific reason why it isn't 45° or 90°? Is there maybe some advantage to the 60° in regards to the ascii rendering?

Disappointed to find it renders to <canvas> and not a set of divs and spans... I'll bet no-one could make it do that.

This is great. To anyone playing around with it: if you decrease your font size, it zooms you out!

I get 404 not found from this link.

I would love to see this demo ported to an 8 bit computer

I'm waiting for the 3270 version.

I don't think any eighties 8-bit computer has any hope rendering this.

A Commodore 64 or TI-994A could. Probably not at 60fps, but it could be done. It would definitely need to be done in assembly, or with a modern compilation tool, like cc65.

The sprites would have to be hardcoded, instead of being interpreted from images. You would also have to be extra smart about what you're calculating/rendering, but keep in mind that your screen is probably only 40 characters wide, so the amount to render is exponentially smaller.

You'd be amazed what can be done on those older computers when the developer understands how the processors work on the ground level.

At the very least it'd be an impressive tech demo for something like the Commander X16[0], a new 6502 based computer running at 8mhz.

[0] https://github.com/commanderx16

> A Commodore 64 or TI-994A could. Probably not at 60fps, but it could be done. It would definitely need to be done in assembly, or with a modern compilation tool, like cc65.

Well, I was programming on C64 way back, and am pretty much aware what the system can and can't do. Sprite crunchers, xor filled vector fillers, etc. are familiar to me.

Cc65 would only hurt the effort. You need a full spectrum of assembler tricks to get any kind of performance out of C64.

C64 (PAL) has just 19k clock cycles available per 50 Hz frame. Since fastest instructions are 2 cycles, that's at most 9.5k instructions. Realistically closer to 5-7k. No multiply (hello table lookups!), no divide and not even 16-bit add.

Or in other words, it takes maybe 10k+ cycles for C64 to just "memcpy" 1000 bytes of characters!

You could implement something like Asciicker in a limited demo... but it'd be more like a souped up video player. Which, sadly, is a rather common technique in recent C64 demos, but understandable due to the limitations.

There were realtime 3D games on 8-bit machines. The framerates were atrocious, and they used wireframes or simple filled polygons, but they were also higher-resolution. The C64's character display is 40x25, so that's only 1000 "pixels" per frame.

I think it could be done, with reasonable sacrifices.

> I think it could be done, with reasonable sacrifices.

Yeah, like dropping rotation. I think it'd be easier to do 80x50 rendering than ASCII.

> The framerates were atrocious...

That's the sacrifice you'd need to make.

I don't think anyone's saying you could do a cycle-perfect emulation on 8-bit. The framerate would be low, the terrain mesh would have to be much simpler. But The Sentinel[1] ran on C64 with acceptable framerates (better than a lot of 3D games with much simpler graphics). I think you could manage a perfectly satisfactory port of Asciiker, even with rotation.

[1] https://www.youtube.com/watch?v=D2H8WbDo5SE

Are you joking? The Sentinel takes 6-8 seconds to render a scene. The rest is just very clever 2D-scrolling and selective object insertion and removal.

Geoff Crammond (author of The Sentinel) wrote another game that's graphically way more impressive in this context: C64 Stunt Car Racer. https://www.youtube.com/watch?v=KMgjmIW8fd8

This is not to say The Sentinel wasn't an amazing game in all aspects, including graphically. It certainly was.

huh having some problems connecting at Wed Sep 18 14:22:32 UTC 2019 ... 404 Not Found ... will try later, sounds very interesting!

Works great on mobile! This is super cool!

Any details on the tech? Looks amazing!

You can look at all of the source. Lots of math.

Source or it didn't happen...

That's mind-boggling

Toejam and Earl vibes.

The name is great.

Reply on news.ycombinator.com