I Made a Smashable TV in Unreal that Simulates Every Pixel

[@Jam2go]

Kitten Burst is out now! GLHF

[@heppecogheron6016]

cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics cat aerobatics

[@clayel1]

woah, only a day ago!

[@unclesam8862]

is it good

[@Josh72769]

​@@unclesam8862of course it is

[@emel6423]

"I spent a couple hours researching how TVs crack and glitch by watching KZbin compilations of people throwing their Wiimotes at the screen." Truly period-accurate research for a Y2K game, I admire that. Once the update is out I'm totally going to read the BSOD message for more lore

[@ozan____]

then we spend 10 minutes copying everything?

[@ArchangelExile]

Y2K was released about 6 years before the Wii came out.

[@0rnin]

i thought it was frutiger aero

[@dominiccasts]

9:47 There's a possible bug here. Grazing the screen shouldn't shatter it, at least not in real life. Makes sense that would happen since you are using the forward velocity of the moving object, rather than the velocity of that object perpendicular to the surface.

[@sputnick1]

yes i also think instead of just velocity, mass should be calculated too. Maybe the equation for “force applied” (f) would be m*v where v is the dot product of the plane’s normal vector and the objects velocity vector (that way it becomes 0 as the incoming vector approaches perpendicularly with the plane) then just do a quick if f > threshold { do things }

[@dominiccasts]

@@sputnick1 yeah, something like that. Granted v would become 0 as it approaches being parallel with the plane (perpendicular to the plane's normal), but yeah.

[@_thresh_]

I think that it's a bit weird that you can't break a screen in 2 spots

[@limesta]

easy fix would be a dot product scalar of the velocity vector and the uv normal

[@buizelmeme6288]

This comment section it's taking something my brain can't warp around, but I wish I understand!

[@peterdafox]

"For any unity refugees." Made me laugh out loud. Nice.

[@bobbynotbuilder4389]

: (

[@arken2583]

As an avatar and world creator for VRChat, this line hit a little too close to home.

[@braydonfisher9273]

felt that. now i gotta learn unreal.

[@bobbynotbuilder4389]

unreal@@braydonfisher9273

[@floppa-films.coolguy]

Idk how “made me laugh out loud” is right but “made me LOL” is wrong

[@ryanbrunette3870]

Love the breaking effect. For the pixel mask there is no need to split the image into RGB components. If you use a coloured pixel mask image, you can just multiple it with your screen image. So just one vector math operation instead of masking each component. Not sure which is faster.

[@areadenial2343]

Multiplying two vectors is very fast, because it's such a common operation in graphics. Some shader effects multiply colors together dozens of times per pixel!

[@shamancredible8632]

nah, its an inaccurate effect that is pointlessly detailed and uses way too much processing power for something that half life 2 did in the early 2000s.

[@iamsushi1056]

2:40 "in real life, when you stare at the sun, you don't see lens flare" me: adjusts smeary glasses "I believe you'll find you're mistaken"

[@SuperGarryGamer]

use that microfiber cloth damn

[@pigeon1923]

​@@SuperGarryGamerit's more fun, it's like walking around in your own personal fog

[@gigaboom_9618]

​@@pigeon1923just take off ur glasses lol

[@johnhilton145]

@@gigaboom_9618 Or just look better.

[@_KDP]

i can relate way too much too that lol

[@ContriteCatholic]

I thought you created a genuine physics based LCD screen to achieve the breaking effect. Still very cool project, good job!

[@trashtrash2169]

Why would you waste performance doing that? Especially since you'd get a more realistic look just using a texture.

[@the_real_aristotle]

youd get a much better variety though since this one only has couple of break textures, most probably not worth the effort though,@@trashtrash2169

[@trashtrash2169]

@@the_real_aristotle The power required to simulate breaking glass is immense. You'd need to use weird techniques to make it look close to legit with a more basic simulation. Even then the variety would not be work the jank and performance.

[@the_real_aristotle]

yea i agree but i was just answering your question as why you would simulate it instead of using texture, the only upside would be having infinite variation.@@trashtrash2169

[@mg9903]

why waste performance doing any of this when you could just pre render a video?@@trashtrash2169

[@tafellappen8551]

Fun fact! Color CRT displays dont use pixels - it literally is just real life masking. 3 different colored electron beams shining through a slotted panel. Technology Connections has a couple really cool videos about it. It happens that i’ve been working on a similar CRT effect in Unreal myself but it’s meant to be as though you yourself are playing something on a crt tv. Turns out people have been trying to do this sort of thing for over a decade now to for retro game emulation haha. This was a super cool take on it and i’ll definitely be looking at this video again

[@user-zu1ix3yq2w]

Very cool. Have you seen EmuVR

[@cod4scoper]

electron gun go brrrrrrrrr

[@flufficornss]

yeah most gba emulators i know of usually have a crt filter sometimes if its significantly better its a selling point

[@juliapoo6780]

This looks amazing! I personally like the moire pattern effect especially on small screens where it wont be distracting. It really sold the screen effect to me.

[@alliemaharry4368]

Screens over a certain size should have different rules for breaking and different sound to reflect the stronger materials they would be made out of. Awesome project.

[@TheCustomFHD]

The cracking thing could be procedural aswell. Pixels are usually connected in grids, if the data cable breaks, it keeps the data it last got. If the power line breaks, the thing goes black.

[@Cane-Aubright]

so you're telling me this cool screen effect is being put into an almost nights into dreams cat flyer game? I'm sold

[@PURESTonROBLOX]

1:30 PS:HOME was probably the best game ive ever played miss that game sm.

[@Tine_of_Nice_Dreams]

Also can i just appreciate that your aspect ratio for this video isn't widescreen TV/youtube default, but the square aspect used for CRTVs. This is parasocial but in a platonic and spiritual way I am giving my concept of you a big kiss

[@wireframewalrusproductions8986]

It's times like these that I wish I were already rich and powerful enough to fund a team for you, Jam-man. Really looking forward to Part C.

[@hughjanes4883]

i like the confidence of "if i were *allready* rich enough", i wish i had that confidence

[@ChadDidNothingWrong]

It's still just barely possible for any random shmoe to save at least a million dollars in the US, but you have to avoid gambling habits as well as the three "D"s: Drinking Drugs Dating .....yeah I know a million bucks isn't even worth what 500k was in 2006, but we're gonna ignore that part

[@chrisj3938]

this is awesome. can't wait for the full game release - i'm just going to fly around crashing into as many screens as i can

[@gammaboost]

Fun fact, even the human eye can be affected by moiré. Get an old 720p LCD TV, then slowly move your head closer from the front. You won't get the same patterns since human image receptors aren't in a perfect grid, but you may see some slight strange distortions with the pixels in your peripheral vision.

[@sargentgullible2794]

I can already picture the whole wheatley TV gag being elevated to new heights if you did something like that.

[@Westerstaad]

I AM NOT A MORON

[@BrendanFromBC]

Saw this effect for the first time on the map 'split' when Valorant came out, and was stunned by it. It's cool to see your shader process and the shatter on impact is a great touch!

[@frqstbite1001]

same bbg

[@thatguy00271]

Groundbreaking stuff. Why hasn't a major game developer brought you on? Your portfolio is insane-o

[@unknown-otter]

Yeah, it goes insaneo style!

[@wattux]

wouldent say ground breaking but it is good

[@addol95]

I am in no way downplaying OP, but: This is far from groundbreaking. It makes for a really good youtube video for non-devs or hobbyists, but it's basically just multiplying color channels with a tiled pixel texure, with the cracks also adding a level of UV transformation. Is it well-made? Yes. Is it groundbreaking? No.

[@KeizerSinbad]

@@addol95OP is Reddit slang for original poster. Here on youtube we say the channel name. Get your filthy Reddit habits out of my feed.

[@LordSchnoz]

@@KeizerSinbad people have been saying OP for much longer than reddit has existed you weirdo

[@kamikeserpentail3778]

Basically all I want out of life right now is to be a digital cat that can fly around smashing things.

[@boahneelassmal]

maybe to touch on the moire: moiré patterns happen when the sample grid (for instance a camera sensor) is similar (ever so slightly finer or equal and slightly off set) to the grid you are recording. But: it is _not_ limited to cameras. It is mostly noticably in digital cameras which use a very fine grid pattern. it is very rare to occur in analogue film material as the film has a random distribution of photo sensitive molecules which also vary in size, which means a regular pattern has no chance to be a similar enough match for moire to develop and since every frame has a different distribution of photosensitive molecules it is practically impossible for interferences to appear beyond a single frame. Moiré patterns can happen in the human eye though. You'll find, when looking at a window fly screen at a certain distance you'll notice some patterns appear. These are very dependent on the angle and the distance to the fly screen but it is possible.

[@dylandreisbach1986]

That little glow the tv does on impact is probably the layers squishing together causing the backlight to shine through more in the area you impact.

[@nicnl255]

The same pixel simulation principle was used in The Talos Principle 2, a game also made with the Unreal Engine. In the main city, there is a sort of "museum" that mimics the levels of the first game. In this place, there is a big skybox, and if you go close to it you can see the individual pixels. The grid also diasppears when going away.

[@mattymerr701]

I was about to say, I do see lens flare, because I have astigmatism, then you immediately said it. Perfect haha

[@KonkaBass]

"epic please write better documentation" as someone who tried and gave up to learn blueprint coding so I could make audio reactive elements for music videos I feel this in my core.

[@unfa00]

That's a really cool effect! I guess it could be pushed further by animating the broken parts, increasing damage level with subsequent hits and correcting the texture UV so that each subpixel only displays a discreet xolor, rather than being a mask.

[@justminibanana9128]

I recommend also adding a Fresnel to fade the screen at harsh viewing angles tn or plasma panels have low viewing angles

[@Rockfantic01]

This is an acid drip of a tutorial. Love seeing this kinda stuff. Good work!

[@damencole5960]

Keep up the awesome work, I just found you recently on a kitten burst speedrun lol. I am going to buy my copy soon, the ideas you have are amazing!

[@Badeand]

This sounds like it would be awesome for VR, throwing virtual Wii controllers or just punching screens

[@arashi8876]

Amazing work! I created a Realistic Display for a music box, same to same realistic RGB pixel effect, never thought i could make something like this.

[@vincepale]

I love this video, and the amount of detail for your game. The blue/purple glow should only be on LED/LCD/flat screen TVs, because of the back-light getting pushed against the other layers, I believe. If you're emulating a CRT, they had hard glass fronts, and didn't use a backlight like that. On a CRT that glow might be an artifact of the camera that was filming the destruction when a bright flash of light hit the sensor...?

[@-Name-here-]

I just recently made an lcd screen for my game, and the moiré effect was really bad for me. I fixed it to a manageable level just by putting a bit of the original image in with the pixels. You can still get close and see the pixels, but it’s less seizure inducing now. You’re fade out solution is pretty smart actually, my screen is only viewed up close in a small room, so it doesn’t bother me much. But the idea of fading to normal over a distance is pretty smart, and the screen cracking is actually crazy. Really cool, good job!

[@astrounwrapped]

I cannot believe you have Playstation Home as an inspiration for your project. Holy shit. Will wishlist right this moment.

[@EveBatStudios]

Very cool. Love the visual effect. I really appreciate your awareness of photo sensitivity.

[@hippo1985]

Man that is legit awesome, you could just add a physical camera to the kitty model and then the exscuse for the Moire effect is sorted. Game cameras should emulate cameras if its thats your viewpoint, although third person is in that grey space between a real life view and a camera view so its your choice.

[@glock1753]

I'm in love with the attention to detail here

[@Banzai8th]

I've always loved the frutiger aero aesthetic, this looks really cool

[@1st_ProCactus]

I've looked at a lot of screens with a magnifier, and those tiny cats looked very similar to most subpixels.

[@bogbert7019]

The attention to detail in this game is awesome. Love the added flavor of the brief purplish screen glow at the point of impact

[@BolognaLover]

I love this. They did this in MGS4 back in 2008 on PS3 and I always wondered why games didn't do this more

[@xorraks]

its crazy how youve just kept posting banger after banger, really cool stuff

[@visathief]

Screens in games now have no excuses, this is pretty great

[@CaveJohnson376]

alternative to using masks is using pixel texture: combine all 3 masks into one, and you won't need to split main texture into color channels and then offsetting masks. instead, you just use different UV scales and multiply two textures together. nice, simple and easy.

[@FakeFurball]

I feel like you and @Acerola_t should talk at some point, I think there's some overlap in visual styles that may be interesting to think about.

[@jellybean2udios]

Your game looks super cool!! I love the aesthetic so much and it looks very stylish. Also shaders are so cool i love learning about them.

[@bigbread3]

Frutiger aero aesthetic

[@Thor110]

Smashing work! Awesome video, showing off how it works for everyone else as well?! Legendary.

[@DJL3G3ND]

really cool effect, thanks for sharing how to actually recreate it

[@bof8850]

You have such amazing skills and ideas.

[@glock1753]

The love for these little details really does honour the mirrors edge vibe, always awesome to see it

[@anarchy3508]

this will be crazy useful for the maps that use a simulation room im ngl, just imagine peering closer to the wall and noticing the skybox is actually just a big tv

[@marcasrealaccount]

Cool stuff, I too spent a few weeks making a realistic screen material collection, however in mine I make a mask procedurally (or with some textures) and then I force nearest neighbor and it looks pretty nice. Only thing I haven't done yet is viewing angles, because that topic is a lot more complex into how screens actually handle light. Oh and also from afar mine still retains some of the subpixel features, like how samsungs pentile matrices have automatic AA on a 45 degree angle due to how the subpixels look.

[@TheIrkenEmpire420]

Brings a whole new meaning to Smash TV

[@tundratig]

When you showed the pic of playstation home i died a little. I miss that so much, the people you meet and the things you could do

[@nokkturnaldev]

Very cool! I'd consider making the dynamic material at impact-time though - (generally) less materials = less draw calls :)

[@Liquid_Rigel]

looks really cool, I love this effect!

[@Tine_of_Nice_Dreams]

I really love what you care about and spend your free time doing

[@magneticflux-]

Cool! It reminds me of an effect in the DLC for Outer Wilds (no spoilers, spoilers actually ruin the game so play it blind first!). There are screens in the DLC that use a similar effect, but you can't break them.

[@delroku]

Seeing other devs actually achieve stuff makes me realize why my parents don't believe in my projects

[@kamikeserpentail3778]

I no longer believe in my projects... Or myself at all

[@ex15808]

this is so cool keep up the work

[@ennayanne]

2:52 that's WILD i actually thought i shut my eyes for a second there

[@BuyMyBeard]

Awesome work! I was thinking maybe you should avoid breaking the tv if you don’t apply enough force to it, and maybe just do the blue impulse

[@STANNco]

really cool!! IIf you want some feedback, with a smidge of math, you can make the effect more real, by having your picture floored to each color cell. What i mean is. Each color cell can only go from light to dark, but you have the image just kinda floating smoothly under it. If you care enough it could be interesting to look into. On screen where the grid is more noticeable it will make a hugee difference

[@tfmg8223]

I love those screens with Webring playing in the background... idk early 2000s PS2 vibe right there.

[@salembendeck]

The VR game Bonelab did this, and it was so impressive to me I spent about an hour holding a virtual monitor against my face.

[@jademonass2954]

i think removing the moire effect from far away took a lot out of the effect would it be possible to make it a toggle in the final game?

[@MonkePOV_Personal]

This gives me an idea. Have you ever thought about adding a SANDBOX mode for your game? While also having a modding SDK, so players can make mods, custom characters, and even CUSTOM LEVELS? Another thing to add would be cheats, that would be fun.

[@k90v85]

unlockable secret cheats, with maybe like goat sim style unlocks, and cool cheats, kinda like rorr robomando

[@haroldmillerHMCL]

This guy's a real mad lad for dedicating his time to making something so true-to-scale, and all just for a game asset!

[@WatersPolarity]

I cant wait to play the game !

[@CXASRT]

this looks like one of the most trippy games ive ever seen

[@forerunnerarchitect972]

Looking forward to part 3 of the game! All of this is really impressive

[@shallobboy]

Hey! i wanted to thank you for the video, from seeing this i challenged myself into porting the lcd style and moire prevention into unity and it worked! Big Up!

[@JHXC]

I've been trying to do something like the screen pixels for so long and seeing you make it look so easy makes me jealous.

[@esterBonzai]

i think slowing down the black/white effect when first contact with the screen and adding a effect where the crack and glitch effects start go out from the point of impact (even if it only lasts for a fraction of a second) would totally be the little bit of detail that would completely sell the screen break

[@hashbrown777]

"these arent pixels, they're masks" You basically made a CRT! Clever If you match the mask density up with the underlying image (with a square array) itll basically be pixels.. OH, but what might be cool is to instead match the image ("pixelate") to the mask, and demo what the different pixel geometries look like and even make up your own schemes without having to prototype any real screen hardware! You could even write shaders to adjust viewing angles of the simulated screen

[@lmdsn]

I love the resurgence of 4:3 videos as an artistic choice

[@kellymoses8566]

This reminds me of the dude who made a simulated film camera in Blender. It has actual lenses that focus the light onto simulated film.

[@gwentarinokripperinolkjdsf683]

That is a genuinely interesting game idea. Hope you use some windows xp like stock images

[@AarnavDasari]

i love it whenever i see light dying through broken screens or lights, knowing you can make them in unreal without actually breaking stuff is nice.

[@Cyberfishofant]

btw, having each mask average(could be done using a shader and rendering the scene twice, with the same triangles but a fixed texture) would result in genuine oixels

[@nopenopee2992]

It would be cool if hitting the tv with higher velocity would make a bigger crack or more intense effect, I wonder if players would be curious to see how much damage they can cause. I would!

[@acidgiraffes]

you deserve way more subscribers, very nice effects

[@Verchiel_]

One really cool time i've seen an LCD screen implementation was atomic heart's DLC. One area in that game has a similar fake sky dome around which at one point you can get right up against and see the individual pixels which is amazing to look at.

[@Kavukamari]

I think if the 2k texture is too much you might be able to convert it to an SDF texture that is smaller but still get the same amount of detail essentially, because the glass break is mostly just a mask where white and black are

[@dp2791]

Awesome effect. You are brilliant!

[@deleted-something]

Can’t wait to run this at two seconds per frame! Great job nonetheless :)

[@videojames290]

Is this how they made the screens in Prey? Not the looking glass but the terminals that you interact with. I remember them looking uniquely lifelike

[@jaydubb01]

Really interesting video, glad this popped up in my recommended. I'd noticed before that a screen on a Valorant map had visible pixels and wondered how the effect was done. Looks just like yours.

[@Rain0T]

having PS Home as an inspiration is 10/10, absolutely adding this to my wishlist

[@fernbear3950]

One way to speed up performance, accuracy, and reduce hard drive requirements for some of these configurations would be to downsample the image to the size of the pixel grid so each r, g, and b texture is mapping for each of these three from a single general pixel. Some of of these have extreme detail, which causes the subpixels to have magic, false detail. It should enable smooth video playback too like for the one example you showed, i believe.

[@Luuncho]

yeah I noticed this too, you mean like at 0:36 where the pixels are scaled up but the texture itself isn't pixellated with it, so a single subpixel contains far more detail than it should. this really stood out to me

[@squash9189]

“I made a smashable TV” … dang, i got clickbaited good

[@AndyHerbert254]

With some round clamping on the UV of the image on the material, you can have the pixels actually represent 1:1 colors of the image rather than a pixel having unrealistic shading.

[@Vexruna]

This brought some very interesting effects to my attention, nice stuff.

[@DoubleUSlade]

Seeing tiny cat pixels on a tv in a game would be a cool easter egg

[@badsocialdrama7282]

ur one of my biggest inspirations, i love ur work

[@zypherdose]

This is exactly why i like boneworks. You can actually see the individual pixels on the TVs in the Museum

[@microcosms2420]

Hah thats pretty cool. You could probably take this even further with some particle effects and a bump mapped impact decal.

[@Krilium]

One thing it would be cool if you could find a fix for is the weird trail-like smudging that Unreal creates behind moving objects when said object is in front of certain types of shaders. You can see it at 2:14 I don't think it's motion blur (though I don't like the default motion blur in Unreal either haha), I had this problem when I was creating cinematics in Unreal Engine for work. I think my fix was changing the anti aliasing type in the project settings. Though I can't remember if it actually worked well or not. In my case it was a glass shader that was moving through the scene, it'd be awesome if you found a solution! :D Keep up the awesome work, I can't wait to play the game!!! (I added it to my wishlist) Also, I'm only 3 minutes into the video, there's every chance you fixed this already hahaha

[@TurnerXei]

Probably an issue with temporal anti-aliasing?

[@ARDIZsq]

This is insane. I wonder if there's a way to recreate something similar in Blender. Such a cool effect, and the blue screen is a neat little touch.

[@ThisUsernameSystemF-ckingSucks]

There is