I Tried Turning Games Into Text
Вставка
- Опубліковано 1 жов 2024
- To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/... you’ll also get 20% off an annual premium subscription! #ad
ASCII art has been a staple of the internet since its inception -- but today I'm wondering if we could make a shader that turns games into ASCII art, and if we can, would it even look good?
Support me on Patreon!
/ acerola_t
Download my ReShade shader pack!
github.com/Gar...
Socials:
Twitter: / acerola_t
Twitch: / acerola_t
Discord: / discord
Unity Code (lacking some features compared to ReShade): github.com/Gar...
ReShade Code: github.com/Gar...
Music:
Afternoon Break - Persona 3 OST
In A Moment's Time - Skullgirls OST
Junes Theme - Persona 4 OST
During The Test - Persona 3 OST
Midori Eyes - Paradise Killer OST
Police Station - Persona OST
With Renewed Hope, We Continue Forward - VA-11 Hall-A OST
Neon District - VA-11 Hall-A OST
Sandgem Town - Pokemon Diamond OST
Like A Dream Come True - Persona 4 OST
Color Your Night - Persona 3 OST
Thanks for watching!
This video is dedicated to my friend, Alotryx.
#acerola #gamedev #unity3d #graphics #shaders
To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/Acerola/ you’ll also get 20% off an annual premium subscription! #ad
I got braces on so I'm learning how to speak again, sorry for any poorly enunciated words!
Maybe lol
Super Hot Mind Control Delete uses ASCII art shader for it's non-puzzle "real life" scenes in some sort of prison
Good luck with braces! I just got off "clear correct / invisalign" so I feel you.
Your cat is freaking me out, every time she appears an add pop up out of nowhere besides her😂
dwarf fortress uses acii character
"Is it possible to edge" Is a far more philosophical question than I expected from this video
many people have been asking this
@@Acerola_tI think I'm going to search for edging for further research
@@virionspiral please no
@@virionspiral on microsoft edge
"I want to go home, and then edge"... *disparage message*
Talks about ASCII art:
Creates ASCII art:
Beats Elden Ring with ASCII art:
Gives the public ASCII art for FREE:
Doesn't elaborate further....:
BaZED
"Today, we'll be turning characters, into characters" 🔥✍
"is it possible to edge?" 🔥✍️
Monogatari reference?
That was GOOD.
“Noodles into noodles? At the Chinese restaurant?” - Parappa The Rapper 2 (PS2)
@@cringe4581 when is this said? I can't remember
IDK why but the shader rendering actual text characters in the boss fight cutscene as just lines and squares was really funny. You literally Are Text, ASCII shader...
downscaled captions
@@MultiChristianandres yeah but either way it's still funny
But acerola
But acerola,
but acerola~
butt
But acerola 😳😩
but areola.
0:48 There is a pretty good came called "Stone Story RPG" that uses ascii art for the entire game, and by the entire game, i mean the ENTIRE GAME, menus, lightning, everything, and it looks beautifully simple
Yup, was looking for this comment
Havent played that game in a while cause my dumbass dont know how to code automate the 🔥🔥💪💪GRIND🔥🔥💪💪💪
Finally someone that takes into account edge flow, as someone that does some 'by hand' ascii art, always am a bit annoyed when all of those 'ascii art generators' just do the "bright = big character, dark = small character" and leave at that
A way of making it even nicer would probably to have an extra pass that applies some character heuristics, like "if above is '\' and bellow is '/', this should be a ')' ", and also take into account that letter characters also have slopes, so if you have a 'top left to bottom right' sloped edge, the 'q' character also fits it, and a 'V' is where '\' and '/' converge going down, and so on
Yea i was surprised they decided to limit it to just the 10 characters they did
¨`^~,._.,~^´¨ More letters would definitely be better ...
I know Acerola likes to focus on real-time rendering and applications to games in motion. I wonder how much computation time these extra checks would add.
I was thinking that maybe there was a way to do some additional processing at a higher resolution to better quantize pixel groups that would better match specific characters. Like an 'L' shape would fit better in an ascii pixel where you have two light subpixels on the bottom of the pixel and one light one dark subpixel at the top for example.
@@minicooper237probably neural nets lmao. With enough layers you could identify tiny features and assign the best character
Also, thank you for not doing the increasingly dull LLM / Transformers / AI content. You'll soon be what current gen game devs & technical artists (who are starting now) will call an "OG" resource on graphics programming.
On your path, and with a few good collabs, you have the potential to co-author the next evolution of the GPU Gems series.
Excited for you to blow up :D
transformers?
@@TeleportRush The alien car robots
@@TeleportRush the T in GPT is 'Transformer'
16:45 Very ironic how an ASCII shader can't draw text worth crap 🤖
Not throwing shade, just found it funny. I love the effect, it looks great!
Maybe you can detect when a text is getting rendered in real time, so it can maybe be possible to put "real" text over the ascii text
i bet it could render text if the text was large enough. the problem is what he was talking about at @15:00
@@dantekiwi7926 Maybe you could just render the UI after converting everything to ASCII
@@dantekiwi7926 oh god
@@dantekiwi7926 if its not lined up with the grid and doesn't have the same font I can't imagine it looking good
I love the suspense leading up to the Mohg fight only for him to Comet Azur his ass
A lot of ascii art uses a variety of other symbols for edges, like V, for sharp points, Y for branching lines, and sometimes non-ascii characters (japanese characters seem common) to get more complicated edges. The art at 6:45 has a lot of examples of this. I wonder how you'd be able to automate something like that; you'd need a lot more than just the angle of the edge. It seems like you'd need to do something complicated with the "subpixels" as you downscale the image to find the specific shape of the edges, and map it to the most similar-looking edge character.
I think you could just use the letter sprites themselves as convolutional filters of a sort.
i think it would be similar to how jpeg compression breaks an image down into preset shapes but with characters instead
( ㅅ )
You would add to the "histogram" step I think, replacing the check for "which angle is most common in the 8x8 block" with a check against a set of multiple angles.
Like, if the top half is mostly \ and the bottom half is mostly / you instead get ). You could get more granular with it, possibly to the point of very specific letters.
Dwarf Fortress is an entire game rendered with ascii art.
I was surprised almost nobody else is saying this, I guess it isn't exactly conveying art? Just symbols representing objects
Exactly. The game is rendered in characters but its not asci art@@864awesomeness
Calling it ASCII art isn't really correct. Drawn *with* ASCII is how it is usually referred to. All characters are symbolic or literal text, not a portrayal of an image. That this is cohesive owes to a painstaking selection of characters and it still takes work to get used to. The game itself is art, the use of ASCII isn't the medium though.
1:57 We are all edging, aren't we
3:29 I also recommend uploading in 1440p (you can transcode or export, you don't need your timeline to be 1440p) because then UA-cam does the "Enhanced Bitrate" thing where normal 1080p gets half the bitrate it used to.
doesn't do?
this shader coupled with the fact that the elden ring dlc added an option to put the word "edge" into messages makes for some insane meme potential
edge has always been in the game.
those 9999 rating messages around the assassin dude in round table hold saying edge, lord
Edge isn't new
edge,
lord
Can’t believe he spent months figuring out the optimal edge technique 😤😮💨😤
stone story rpg is an amazing game which uses ascii art for the visuals
yeah i meant specifically an ascii shader over 3D like the Returnal example
Dwarf fortress is the most beautiful game using ASCII art. You will understand everything happening on screen very easily.
The way tht Stone Story RPG allows players to make their own ASCII sprites is quite cool.
Candy Box 2 also uses ascii art
Cogmind does ASCII art well (it's a futuristic 2d roguelike).
Putting a video of your cat with the sponsor part is honestly so smart, I respect that
If you abandon the realtime requirement, you could maybe do something like this:
Take the DCT of all the white-on-black characters that you want to be available to the shader.
Take the DCT of the section of the image.
Find the “nearest” by some metric.
This way you can dramatically expand the palette of letters, and have a more organic selection
When I initially clicked on the video I assumed this is how the effect was going to work. But on reflection - and as you say - this would require a huge amount of branching and would run terribly as a GPU shader.
I was thinking maybe you could use locality sensitive hashing to switch between character palettes. You could downscale 8x8 blocks to 2x2 and use 4 hash functions, horizontal and vertical lines, and the two diagonals. Each hash function gives you 1 bit of info: which side of the line is brighter. That gives you 16 palettes you can choose from to determine the best character for the brightness less, which should retain quite a bit more detail. It should be very fast as well, as you're just comparing a few numbers each time without branching.
I was thinking you could use convolution filters generated by blurring the character set. Taking the DCT of the section is interesting. What are the advantages of doing that over just a convolution filter?
@@oEQjet tbh my signal processing skills aren’t strong enough to really push me towards one or the other. I thought DCT was what jpeg used so thought might make more sense in this specific case
@@maboesanman I mean you're not crazy! Jpeg do use it, you could use it here! And i honestly couldn't predict what would be more effective.
0:54 correction: there are a few. Many of which are mobile games. It’s not really a shader, but just everything is rendered with text. _Stone Story_ is a good one- it’s a free mobile game with no ads. Mad respect to them for making something good and playable for mobile.
so if it's not a shader and just actual ascii art, then there is no correction, there is also nothing to correct as it's me saying I personally have not seen it, not that it doesn't exist lol
@@Acerola_t fair. But it’s still a really cool concept to render a game in ascii.
there's Asciicker, which is 3d and rendered in ascii characters
oh yeah this is a good example, thank you!
the fact that it's pronounces "ass kicker" is hilarious to me
I'd say that is more of an extended ascii/CGA text mode art as it uses the DOS font that includes more characters, and also uses foreground and and background colours, but yea, pretty cool game
@@pinkorcyanbutlong5651 a lot of ascii art isn't truly ascii, but shift jis or its successors anyway thanks to the popularity of the medium on japanese image boards. the "ascii" in the name isn't really in reference to the encoding used, but rather the fact that the image is made from digital text. ascii was just the standard when term was coined, so it's kinda just been genericized in this context
i mean really it's been genericized in a _lot_ of contexts, stuff like terminal-based roguelikes get called ascii games even when they use the ibm charset, but y'know
Also, my submission for acerolas jam: LAMB
I remember those dope ASCII GameFaqs guide logos. They were sick.
The cat is forcing me to watch the sponsor! Noo!
That cat better be getting a cut
Someone needs a sponsor block extension
@@IvanIvanov-ww8ylthat's why I missed the cat 😔
But Bacerola.... (Based-Acerola)... You're looking BUFF. Your new work out routine is paying off. Looking gooooood. Not the skinny Acerola @ the start.
I wonder how this would look like if instead of just downscaling the image and only matching the character to the luminance, you sampled the original image and looped through more characters to find one that best matches the pixels. This would be quite slow, but there are definitely ways to optimize this lookup. Would be pretty interesting to also see how it works with different fonts.
I've actually implemented this a few months back. Only in C# but I have outlined how it could be done in a shader with probably acceptable performance. It would take a lot of passes and buffers though. I've come to the conclusion that it's not really worth it. It preserves details a little bit better and the output is noticeably sharper - the simple luminance match method has a noticeable blur in comparison - but it's not better by enough to justify it IMO. With a bitmap font, it's still very noisy, the better details are only noticeable if you actively look for them. Maybe if you use antialiased fonts, but that would completely tank the performance.
imgur_com/a/f5pQ1Qs (p sure youtube doesn't allow linking off-site so replace the _ with .)
I've actually implemented this a few months back. Only in C# but I have outlined how it could be done in a shader with probably acceptable performance. It would take a lot of passes and buffers though. I've come to the conclusion that it's not really worth it. It preserves details a little bit better and the output is noticeably sharper - the simple luminance match method has a noticeable blur in comparison - but it's not better by enough to justify it IMO. With a bitmap font, it's still very noisy, the better details are only noticeable if you actively look for them. Maybe if you use antialiased fonts, but that would completely tank the performance.
a/f5pQ1Qs pretty sure youtube auto-deletes links, it's an imgur album with a comparison
@@sacwingedbatsatadbitsad4346
Hmm what if instead of just comparing the bitmaps you compared the gradient of those? Looking at your imgur gallery it looks like the edges are not really as pronounced as one would expect from this.
@@sxs512 The way it works is it subtracts the pixel in the font, 0 or 1, from the grayscale pixel in the same position, then adds together the absolute value of the pixels in the 8x8 grid. Obviously, if you subtract a value from itself you get 0, so the character with the lowest absolute value is the best match. This is the most canonical approach, it preserves the most information overall. Not all information is equally important to humans, though. For example, you can distinguish more shades of green than red or blue. You'd need to enhance the edges as in the video to get a more desirable but less technically correct look.
Man, please stop changing thumbnails, it doesn't work. I clicked on this video only to say you that, not because I want to watch this.
13:15 With fading based on depth, that's my favourite option. Looks amazing.
I'd be interested to see if you can regain some of the detail lost in downscaling by using a character palette based on more detail than just luminance. Like, gradient (gun the 8x8) and luminance, perhaps. E.g.:
Vertical: . : ; | { H 8 #
Horizontal: . - = ≠ #
Diagonal: . , / Z %
Etc.
Or even having some position variation based on quadrants within each 8x8:
_-¯,•`
"game as ascii" reminded me of the primeagen's recent journey of rendering DOOM as ascii and making his twitch chat play it.
It's come full circle now with prime reacting to this video lol
Amazing work my bro. I hope you’re proud of the knowledge that you’ve gained and shared. This video was not only very informative and interesting, but easy to follow and understand too. Appreciate you, mate.
Edit: WOW! That’s incredible. It got even better in the last 5 minutes. The Elden Ring scenes (with no DLC spoilers!) was beautiful. Man you nailed this so hard
I actually watched the sponsor because of the cat. Brilliant move
He must has learned this trick on Brilliant.
You should have used a higher resolution if possible so you could get the most detail possible. I counted the amount of characters on the screen's width and counted 240 which multiplied by 8 is 1920 pixels wide or 1080p. With 1440p it is 1.3... scale so you could get 1.7... times more characters on the screen. With 4k or 2160p it is a 2 times scale so you could get 4 times more characters on the screen.
lets go love ascii made a ascii shader myself once it was awfull and poorly coded that used a text texture as a compute shader only took like a month im actually still thinking of making a ascii horror game lol
I wish you had leaned even more into ASCII art's ingenuity for representing shapes and edges. I know you can't easily use elaborate computations on dynamic data in shaders, but this just begs for the exploration of composite shapes and intermediates, like a "V" where two diagonals meet, an "X" where they intersect, an "A" where they meet at the top; characters like L, T, 7, Z, F, H, K for combinations with vertical and horizontal lines, etc -- not to mention the box drawing characters.
Isn't there a way to extract possible interpretations of an edge-focused image buffer like this in order to decide which shapes could be represented where with our characters?
I'm thinking we may want to start without downsampling first, to get more than just one possible edge out of a cell, but then we could run a batch of kernels over each cell and find the character with the lowest difference (MSE?)
Doesn't that seem possible to do?
Does anyone want to do this? (I'm not experienced enough myself :( )
Just watched 18 minutes and 17 seconds of a guy talking about Edging. Absolute Cinema.
Just watched the video. Here is an option to save more details. You could choose symbols from ASCII table not by luminance, but by calculating how much the shape of the symbol suits the 8/8 region. First, normalise 8 by 8 region, to turn it lightest into white, and it darkest into black and shift all the other colors proportionally. Choose the symbol that has the least total difference compared to the region, and then adjust symbol's luminance to be same as average luminance of original chunk.
Another option is to apply filter separately to RGB channels with red, green and blue symbols and then add them together to get the final result. Combining this methods you will be able to use all ASCII symbols, their luminance and colors, which should save a ton of details, probably close to possible maximum. This also should make image less contrast and more pleasant to look at for a long time.
if comparing 8by8 chunks will hit performance, you can average some pixels to get 4by4 or 2by2 chunks, or you can find the least used symbols in the table and remove them, or both. This still should save more details
Sadly i'm too dumb to code it myself
It was brilliant putting the cat on the sponsor segment so that I bypassed my sponsorskip to see the kitty.
Same XD
that was so clever it's perverse
big game studio does a general 'replace bright with big character, dark with small character' and called it a day, but then you come in and did just that much more work and on all accounts blew them out of the water all by yourself. you deserve my sub o7
Depth fading looks very good, it really gives you that sense of 3D that's needed to keep the image coherent during gameplay. Lot of potential here for cool artstyles in a game.
Couldn't you use a convolution filter to do this? You could group 8x8 pixel chunks and compare those against the 8x8 pixel values for each text character you want. Then for each 8x8 pixel chunk you could get a vector of weights corresponding to how close each chunk is to a character and just choose the highest value and then render that corresponding character. So essentially you need to operate on an 8x8xN shape by an 8x8xM shape and get a NxM shape where N is the number of 8x8 chunks the image can be broken down into and M is the number of characters you want to possibly render. This should automatically take care of all edges, filled spaces, weird geometries, as it picks characters based off the pixel geometry rather than explicitly defining edges or spaces or anything. I think GPUs are pretty good at convolutions if I remember. Anyway, awesome video 😎👍
There is a lot of flicker on characters, especially with full square character.
Perhaps having some kind of threshold to prevent high frequency changes of the same character like [full square -> @ for 1 frame -> back to full square] would make the image feel more stable if you prevent full square coming up again if there was one recently.
Was going to suggest this idea too :) Would be cool to see
This guys is amazing, easily my favourite computer science UA-camr! You’re a fucking legend and inspiration 🔥
I'm rolling my ace soooo hard rn
Underrated channel. Pacing, explanations, visual guides and comedy/presentation are all done well.
Thanks Acerola 👏
acerola's excuse to dedicate an entire video to edging
What is it with Zoomer content creators holding mics you're not supposed to bare hand? I see so many standing in front of a green screen with an SM7B in their paw or holding a lavalier mic up to their mouth in their hand.
Mount an SM7B. Clip a lavalier to your clothes. What are you doing?
It should be possible to retain much more detail by expanding the character set.
It would be cool to see a shader that uses ALL ASCII characters and "downsamples" each 8x8 pixel grid down to the ASCII character that is most similar to it.
holy shit it's beautiful 😭
your video definitely convinced me to build my ascii shader
Acerola: gets sponsorship
Also Acerola: ay let me put up my cat real quick, look over here!!!
Edit: Did you get away with it?
Amazing stuff. Maybe faces looking jumbled together from a distance would make for a great horror game style with all the uncannyness.
I wonder if we could improve the effect by trying to convert the shape of the 8x8 pixel area to the closest ascii representation. Probably wouldn't run very fast.
Been following the progress for this on twitter. This looks absolutely amazing and might be my favorite video of yours. Would love to make some small game that gets absolutely carried by these visual effects. Well done!
Also, you gotta have one of the highest viewer retention rates during your ad reads (feel free to send this part of the message to potential sponsors)
It'd be nice to see a pixel art shader that would work in a similar way. You could have halftones, posterization, outlines for the simple part and maybe add some image recognition to make text use an already made pixel font or even have a set of face details that would replace otherwise simingly random jumbled pixels at a lower resolution. Might not be the kind of thing you'd want to make because it'd be less of a shader and more of an image recognition thing but it'd probably look awesome.
THE TIMING ON THIS IS IMPECCABLE I NEEDED THIS AND IT JUST CAME TO ME ON MY HOMESCREEN
I've seen lately a game about the same thing using ascii art, it's in the playstore, I don't remember its name.
youre really cool mr rola
im verry tempted to make a game with this
might i ask as someone with EXTREMELY minimal shader code knowledge what shader language this was made with?
This looks so much better than I could have ever imagined
I wonder if you could use the Normals of the image to skew the characters with the meshes that make it up
did you start going to gym?
I KNOW RIGHT, I SWEAR HE WASNT THIS BEEFY
Is it possible to download the source code and change it in order to not lose so much image detail at the expense of ASCII readability?
finally we have the technology to make a worthy spiritual successor to return of the obra dinn
there are a lot of games IN ascii, but no ascii shaders
i think it would have been cool to mention them (like stone story RPG)
the thumbnail swap is nasty, i hate youtube after mr beast
?
What if you found a way to like match the eight by eight grid to the ascii character that looked the most like it so for example
Ø would replace
⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬜️
⬛️⬜️⬜️⬜️⬜️⬜️⬜️⬛️
⬛️⬜️⬛️⬛️⬛️⬜️⬜️⬛️
⬛️⬜️⬛️⬜️⬜️⬛️⬜️⬛️
⬛️⬜️⬜️⬛️⬛️⬛️⬜️⬛️
⬛️⬜️⬜️⬜️⬜️⬜️⬜️⬛️
⬜️⬛️⬛️⬛️⬛️⬛️⬛️⬛️
STOP USING THAT THUMBS UP IMAGE I BEG 😭
Challenge: Use the entire Unicode. Output to terminal. With ANSI colors.
there is a cmd command to watch a shortend vertion of the original starwars movie in ascii rendering its pretty fun to watch takes about 20 minutes and totaly free
! There is a game that only uses only characters for their art style!!
Its called stone story and is pretty cool, if you are into those kind of games
One word: StoneStory.
Not exactly a shader, more like an art style, still cool though
be interesting to see this effect with a cell shaded game like wind waker. There's would be a lot lees dtl so readability would be a lot better
I want to see it applied to an older game.
Like Crash Bandicoot or the first Metal Gear Solid
i think it'll look really cool on a game with a simple artestyle, like animal crossing, sicnce there is not much details or gradients
is animal well on your radar for a deep dive? iirc it did some really neat things with rendering, and using a custom engine
Additional effect: shift your grid by 1 pixel per frame and you can get that real Matrix "falling characters" vibe.
I hesitated clicking on the video because of the Elden Ring thumbnail and then was about to get off just as seeing the game's title screen, not wanting to get anything spoiled from the DLC. So that spoiler disclaimer was really reassuring to see. In a video about text, some text irrelevant to it saved some watch time.
Now add an OCR which will convert any text on screen into ascii characters directly, so that you can read subtitles and menus in game
In a game made with ASCII art graphics in mind, you wouldn’t need to do that (also I imagine that OCR is a bit slow for that? I could be wrong)
There’s a game called Stone Story(mobile and steam) that is (I believe) entirely made of characters(ASKII). It’s very simplistic, but it’s still entertaining.
how would you run this on static images? i’d really love to play around with it myself
This looks like it'd work great for a horror game, as the ascii filter makes it harder to see anything.
it'd be really cool if someone makes it that we can copy the ascii as a screenshot and be able to paste it on a text file
im actually surprised how youtube compression held up the quality at normal 1080p, I expected it to be a blurry mess after a couple secs.
Hol' up dude you're like getting buff 🔥
Really interesting vid, always love how much info you're able to pack into these
i have an ascii renderer app on my laptop installed to spin a blahaj on my desktop infinetly
Yuck. Only 10 Characters, and one of them is a block of color. That's cheating. Use the standard ASCII characters. And increase the pixel size. 8x8 is too small, also feels like cheating. Also, ASCII characters aren't square.
nothing gets past this guy
Stone story is fully ascii art but it’s not really a shader like what’s created here
For one second I thought that I was going to see an ascii version of bad apple again
I like how despite all this ascii/shader knowledge this dude clearly lifts. bad ass.
Golden content. Technical, without bs, source included. Many thanks
the 2 color / 1 bit look on ff made it look like obra dinn (very cool)
0:47 Well, my dad is very good at building cities in Minecraft-like games that are so large that the game eventually can't handle it anymore. So I'll soon create my own such game that I'll make playable in the Linux TTY, inspired by this video.
Cat split screen over sponsor segments is underrated
The real question is if I even can defeat Mohg without the shader
It reminds me a lot of the shader used for Return of the Obra Dinn!
"I didn't really feel like doing any research on this topic because..I already know how to solve the problem, so..I don't need to do any research" lol!!
UA-camr teaches audience about edging and how to edge yourself
Best way to do an add segment I have ever seen. I didn’t even play attention to the add, just the cat lol
Massive Respect for using Persona 3 Soundtrack
this must be the first video in a while that I watched the whole ad sponsor in, just cuz the cat was so adorable lmao
exactly what I was about to comment lol