
Asciicker – an online 3D game demo rendering to ASCII text - phoe-krk
http://asciicker.com/x13/
======
TheCraiggers
Really impressive. The first time I rotated the camera my jaw dropped a bit.

~~~
stfwn
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.

------
hortense
You can see the progression by starting with
[http://asciicker.com/x1/](http://asciicker.com/x1/)

Very nice.

~~~
jordanwallwork
x3 is fun

------
nneonneo
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).

~~~
vanderZwan
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](https://www.shadertoy.com/view/XsjSzR)

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

------
ArtWomb
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? ;)

~~~
amelius
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%.

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

------
bnegreve
A bit more info here

[https://www.reddit.com/r/asciicker/comments/d3ca43/whats_goi...](https://www.reddit.com/r/asciicker/comments/d3ca43/whats_going_on/f03z4xk/?utm_source=share&utm_medium=web2x)

------
Jyaif
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/](http://asciicker.com/x13/images/)

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

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

------
gregf
This is what dwarffortress needs IMO.

~~~
artemonster
^^^THIS

~~~
thih9
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?

~~~
artemonster
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.

------
laurent123456
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...](https://developer.mozilla.org/en-
US/docs/Web/API/KeyboardEvent/code#Handle_keyboard_events_in_a_game)

Very impressive demo otherwise!

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

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

------
misterdoubt
And so I set off into a seemingly endless ocean.

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

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

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

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

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

~~~
TallGuyShort
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.

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

~~~
PhasmaFelis
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."

------
tibbon
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?

~~~
vanderZwan
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](https://www.youtube.com/watch?v=xrN2soK60bA)

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

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

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

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

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

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

~~~
vanderZwan
Elsewhere in the thread someone linked the art assets:

[http://asciicker.com/x13/images/](http://asciicker.com/x13/images/)

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

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

~~~
vanderZwan
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...](https://old.reddit.com/r/asciicker/comments/d64sys/has_anyone_tried_inserting_a_crt_fragment_shader/f0rabcq/?context=3)

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

------
natmaka
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](https://github.com/cacalabs/libcaca)

------
logfromblammo
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".

~~~
anchpop
Hit q and e

~~~
logfromblammo
That changes horizontal angle.

------
nukeu666
Add chat and you have a MMO

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

~~~
fclairamb
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).

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

------
btbuildem
Really cool!

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

------
curlypaul924
The reflection in the water is a nice touch.

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

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

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

------
andischo
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?

------
zbuf
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.

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

------
chimi
I get 404 not found from this link.

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

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

~~~
5trokerac3
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](https://github.com/commanderx16)

~~~
vardump
> 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.

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

------
flanbiscuit
Works great on mobile! This is super cool!

------
mihaifm
Any details on the tech? Looks amazing!

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

------
megamindbrian2
Source or it didn't happen...

------
rpmisms
That's mind-boggling

------
JohnJamesRambo
Toejam and Earl vibes.

------
GuyPostington
The name is great.

