Dungeon Warping via Orthographic Projections

In this video I use Orthographic Projection to simplify the structure of a 3D world rendered with a 2D aesthetic. It's also a great demonstration of the olc::PixelGameEngine Warped Decal function!
Source: github.com/One...
Patreon: / javidx9
KZbin: / javidx9
/ javidx9extra
Discord: / discord
Twitter: / javidx9
Twitch: / javidx9
GitHub: www.github.com...
Homepage: www.onelonecod...

[@javidx9]

Damn YT compression really helping me out here...

[@EduMakesGames]

Will you make the source code for the last demo on the pixel game engine (the jaw dropping one rendering every blade of grass) available at some point?

[@javidx9]

@@EduMakesGames maybe, I dont know if I want to run with it a bit more first

[@RandomGuyyy]

When he rotated the ortho view I was really shocked. In the SNES era this would have been considered voodoo.

[@KAMstar2000]

Biggest anime plot twist

[@F0r3v3rT0m0rr0w]

Hoodoo that voodoo? javidx9 clearly. i wonder if this was even possible back then. most likely not, id say anything that could run doom though might be able to.

[@DoppeD]

@@F0r3v3rT0m0rr0w I know I'm two years late, but I have to point out that Doom was ported to SNES.

[@PULPDOOM]

You are my idol. I am a computer science student barely taking the fundamental classes for C++ and I wish to someday be as knowledgeable and skilled as you.

[@johnjackson9767]

Keep at it, man! The fact that your watching things like this means that you have a desire to learn and push yourself, which is the most important thing.

[@theitatit]

Practice makes perfect! Don't stop!

[@cortexauth4094]

Yes, you should just not stop. You will surely get there with dedication and desire to learn (and put effort)!

[@user-ec6kt2fg7m]

Practice makes things easier. Think of it as a violin, initially the rigor only yields garbled noises but with interest you can, do try to have fun. Coding is like Windows XP wallpaper it's just a happy green hilly plane under a azure sky, huge open space of true freedom with nothing but infinite potential. Scary? yes but also free take any form.

[@walkwithme153]

Don't make him your Idol. Make Bisqwit your idol. You can search on KZbin. He is a legend.

[@muhammadhaider5677]

Hello! I'm a second semester CS student and your channel made me love C++ and programming in general. I just want to say, never stop what you're doing!

[@JoeyLutes]

what an absolute treat this channel is, my goodness

[@GregoryTheGr8ster]

The beginning of your video is what the state of the art looked like when I started! You are making me feel nostalgic. Actually, the old days were different in some ways: 1) screen resolution was 320x200, which was not only low, but the pixels weren't square 2) The camera's position could not be rotated. Holy crap, every game developer in the world wished that he could think of how to do rotate the camera like you did at 1:27. But it could not be done on existing technology. At best, we could only move the camera's angle by 90 degrees (eg, re-rendering the scene from a north-facing camera to a west-facing camera).

[@miguelmejia3235]

This is the coolest thing I've seen since... well, your last video. I would love to see the shadow casting algorithm working in this environment! Great work, as always. Love from Spain

[@Edzward]

Yet another video that worth a full college lecture!

[@fryingpan5431]

You sir are a complete genius, I jumped out of my seat when you did that smooth view transition. I thought this was possible for my isometric game but had no idea how to shear it and thankfully stumbled across this video

[@irene1307]

This made my Saturday much better!

[@SourceCodeDeleted]

I love the creativity of your channel

[@spike8007]

After doing the 2D isometric game for the game jam. Rethinking the sorting algorithm and just go 2.5D and have cool effects. Thank you @javidx9 !!

[@javidx9]

Using 3D to do 2D offers many advantages, though its often not the first thing that comes to mind.

[@johnjackson9767]

Always appreciate your videos and explanations. I know these take an insane amount of time from experience, so a lot of respect. Also, the subtle ways you dump on Minecraft don't go unnoticed.

[@shaurulshauros6543]

I'm a simple man. I see javidx9 video, I click.

[@user-ec6kt2fg7m]

I have to say when he first call South, floor. I was like why are you calling it floor why not just South. That's when the great dictator hit me Ooooh now I remember Sir. Adam Savage say " It help it to go extra effort mile in measurements to be as accurate as possible." Made a realize how I'm a level 1 adventurer.

[@MajorNr01]

State of the art in computer graphics: "Rasterize to z-buffer to discretize the visibility problem!" javidx9: "LOL STD GOES SORT!"

[@lordtony8276]

I want to see a feature where you can stack blocks on top of each other as well. It seems like it could be a relatively unobtrusive change.

[@javidx9]

Yes it should be most manageable!

[@smartito_97]

Tu contenido es realmente increible y didáctico, es increible el manejo que tienes, cada vídeo que haces para mi es una auténtica obra de arte. Gracias de verdad

[@javidx9]

Hey thanks Sergio, that's very kind of you!

[@mikena8519]

javidx9 - i keep coming back to this video - its marvelous ! you explain the math and screen and pixel space stuff so nicely. Finally downloaded this to play with it tonight. neato.

[@kamski3070]

You made realm of the mad god with 80 % of its content.

[@illiasolohub3225]

this feeling when you are typing a question and in the middle of the sentence the answer comes

[@mistervoldemort7540]

Again, fantastic demo. When you turn the camera around, maybe it would be nice to snap the angle to the appropriate muliple of 45 degrees, once a threshold has been reached. for example, if we want to turn to 90 degrees, once we've reached 89 degrees, it snaps it to 90, and we can save on performance when the user is not pressing a rotate key.

[@goshisanniichi]

Should add a little compass rose that always shows in the corner somewhere to help keep track of which face(s) you're looking at; I imagine it could be easy to quickly lose track of which faces you're looking at. Or, even better, and probably easier to implement, just render a 'sample cube' in the corner that has the numbers corresponding to the key that needs to be pressed in order to change that face's texture. You could even make it so that it's only drawn when holding down some key. ...or EVEN easier, change the cursor sprite to one that has different one's for each face but with the correct key press labelled.

[@tantumDicoQuodCogito]

In brief, using sin/cos function by axis for rotation, good work

[@davep7176]

My brain had always bubbled towards this stuff being possible. But I could never figure out how it was done. Great vid!

[@javidx9]

Thanks Dave! I think once people see the step between two things they are familiar with, it's usually enough to work it all out, and that's half the fun!

[@davep7176]

@@javidx9 Great stuff. I've been coding for years (just for fun!) but watching your videos over the last few years has really accelerated my learning. I mostly enjoy the little math tricks you understand and explain so well, which relate to graphics. (Eg. the simple old-skool 2D fake 3D racer. And this dungeon video. And many more!! :D) hope you find time again some day...

[@javidx9]

Cheers, yeah I'm back on this year, new video hopefully this weekend. Fingers crossed!

[@davep7176]

@@javidx9 Whenever it comes, I am sure it will be excellent as always

[@dzonsonmakdael5754]

You are my mentor :D even my girlfriend whom is a dentist told me yesterday that you have pleasant voice and the way you express your knowledge is very friendly for begginers. So even she could start writing code :D and thats 100% true. For example im working on diggers/loaders and im following your channel smth around 2 months i guess :D I was hooked up from the first video when heard the way you are explaining everything(making own shooter). Viewer can feel that passion in your voice and thats the strenght. Wish you all best and maybe more videos :) when i will write my 1st game from scratch i will donate or help You with ground works if you plan to build house in future xDDDD

[@javidx9]

lol Im pleased you enjoy the videos, good luck with your projects Dzonson!

[@ihave13digits]

You never cease to inspire me, Javid. Great content, as always. If you're okay with it, I'd be happy to make up a texture set for this.

[@javidx9]

Thanks 13digs, yeah, I've no issue with a small tileset to add to the repo, it only needs 4 or 5 tiles to be functional.

[@LasgCe]

you make this look so easy .... love your videos

[@javidx9]

Thanks, that is the curse of programming videos on KZbin, since people are not interested in watching someone (frequently) fail at writing code. Sometimes I do keep the errors in because it makes for an interesting discussion point.

[@DavidslvPT]

1:11 Twisty mind-blowing :D Love your videos

[@laureven]

If everybody explained everything like You are, this planet would be full of professors :)

[@Raspredval1337]

Your content was always inspiring for me. I even did my own pix engine using old win32 gdi, now I'am going to reverse engineer that, and maybe make a rpg of some sort or a table game with this style of graphics)

[@NecromancyBlack]

I've been interested in making some orthographic projects in Unreal 4 and this video has a been a great help to get my head around some ideas. Even though in this you're doing the drawing yourself there's still a ton of useful information and ideas to take on board. After all, it's not what you don't know but know you don't know that gets you, it's what you don't know and don't know that you're unaware about!

[@braklinath]

my lazy butt spent a year implementing this in Unity. and here you are doing it from scratch

[@Dermie]

Thank you, sir! This is one of your best videos.

[@mikefdorst]

You should use std::optional when you want the possibility of the absence of a value, rather than a NullCell value. This makes the possibility of a lack of value more explicit to the caller.

[@Raspredval1337]

std::optional IS great and all, but I had problems compiling that on my msvc compiller (MS Visual Studio 2019 public version , keeping it updated). Maybe someone know how to fix this, but forcing it to c++17 and even experimental settings didn't help me

[@Raspredval1337]

PS: probably was a bug of some sort, just updated the ide, everything works fine

[@INeedAttentionEXE]

1:01 Are you a Megadeth fan?

[@judgeomega]

i paused the video midway through to go do some stuff and hummed megadeth the entire time. i never even noticed the reference in the video but it must have somehow hit my subconscious.

[@underscore_n]

i thought you meant "warping" as in "teleporting" and somehow bending the digital spacetime continuum using orthographic projections

[@Ochenter]

Hello David, nice vid tutorial again. I would love this type of isometric view games, played several when I owned the Amstrad Cpc. Hope seeing more of you Mister. Thanks.

[@javidx9]

lol, showing your age Daniel XD

[@Ochenter]

@@javidx9 I am 41 :-D and thanks God I just lived the 80'S, Yeaahh.!!.. Thanks.

[@srkgergely]

This is extremly elegant.

[@SolarPlayer]

jaw dropped on the floor @ reveal time

[@imnotapollo4188]

Anyone else physically pogged when he revealed the twist?

[@space_asylum]

This video was a real quad workout

[@KDM16AAB]

Almost makes me think of Dungeon Keeper :)

[@KDM16AAB]

And Syndicate. how could I forget a classic :d

[@MarxyBasement]

Exactly what i was looking for

[@Splatpope]

definitely going to try doing this in love2D

[@wowLinh]

I'm loving every single video you upload. Great work, better explained!! One question I have. Why not making the NullCell a static member of class World?

[@javidx9]

Thanks wowLinh! It could be, but since I only have one world there are no gains. If I had multiple worlds then perhaps yes, but I could also want a different definition of a "blank cell" in those worlds. Undecided :D

[@wowLinh]

@@javidx9 Yeah! Did not think of that. Cheers

[@StuBonham]

Very cool stuff (as usual)!

[@k.l7111]

A great detailed tutorial! Thank you.

[@WillBourne999]

Hi Javid, really enjoyed this video! I've just started looking at using your PixelGameEngine header and wondered if you'd considered using std::memset in PixelGameEngine::Clear to set the draw target buffer instead of looping? It boosted my FPS by ~40% in a debug build!

[@realwizardry834]

You're a legend dude

[@carterpatterson1988]

You're awesome javidx9

[@Fergobirck]

Great as always! I think one optimization that could be implemented is to only call GetFaceQuads/CreateCube, Sort and check face visibility when a rotation occurs? You are repeatedly recalculating everything every frame, when it's actually only necessary to do so if the camera has changed, right?

[@SerBallister]

Frame stability is sometimes a goal. Yes you can save time on some frames during certain conditions, but if you did many of these conditional optimisations it's going to be hard to keep frame time constant as any number of optimisations can jump in between frame to frame.

[@adamodimattia]

Could you make a series of videos on Pixel Game Engine, how it works, how it’s done, explain the architecture, how to make one?

[@svndays]

Hi. Great video as always, very educational. Maybe this is a question you've answered before, but since your videos seem to be aimed at beginners, teaching fundamentals and building on them each video. Why is your language of choice C++? When you teach people this stuff, do you often find them falling into typical C++ traps, or confused by the language? Why not use something like C# or Java which can be used to teach these basic concepts from scratch but without fear of running into move semantics, memory management, RAII etc and having to explain those?

[@javidx9]

Thanks Michael. Simply because I believe (probably controversially) that C++ is a fantastic language for beginners. The cases you listed are all entirely optional to use, and it's rare I use them in videos. If I do, then I explain them.

[@irene1307]

Basic C++ isn't that harder than C# or Java.

[@PetrPss]

Great video! But how do you create several lines of code one by one like at 24:44? Several stages of clipboard? Reversing (Ctrl-Z)? Video editing? Magic?

[@javidx9]

Hold down alt, and drag with the mouse!

[@PetrPss]

@@javidx9 No, I mean the way you adding lines as you speaking. With one button press. Now, when I'm thinking about it, you are probably copying this lines from another monitor.

[@lonnybulldozer8426]

Wow, impressive.

[@medomody242]

Such a brilliant video

[@gutzimmumdo4910]

wait so what we are seeing is actually a flat plane? those cubes are actually poligons?

[@ZainAhmad-jl4vt]

I wish more 3D RTSs and CRPGs would use orthographic projection

[@EmiliaKaida]

Hi javidx9, Thanks for the great videos as always ! If possible, could you tell us how you learned game design / game programming techniques ? Things like OOP, Design patterns ... could be learned easily from college, courses and short tutorials, but those are another matter. It would be great to know how you accumulated the knowledge :)

[@javidx9]

Thanks! Honestly, I just never stopped experimenting. I love playing games too, and have done for (whispers) almost 40 years. When I play them I often get more enjoyment out of the "how did they do that?" and so start trying to replicate them.

[@eformance]

30:30 M.C. Escher called and said "far out dude"!

[@anonymoussloth6687]

Can you explain how drawWarpedDecal works? I tried to look at the source code but it just seems like voodoo magic. To warp a image, wouldn't u need a 3x3 transformation matrix which u would have to find using a 8x8 system of equations but the code for drawWarpedDecal doesn't seem to have any of that.

[@bewaryoftherabbithole8011]

Omg that is insane

[@dashel.youtube]

Would this technique allow to draw 3d-ish characters as well or just cubes are allowed?

[@javidx9]

Sure you could draw any geometry!

[@ClaytonMalarkey]

I was looking for something like this

[@bewaryoftherabbithole8011]

I really want to try this!

[@NOCTUMSEMPRA]

Hey Javi, I totally love your videos although my C++ skill is not high enough nor fresh in my memory to understand some parts of the video but, since YEARS ago I want to make a tennis game in a Mario Tennis perspective style (your typical centered downwards perspective of a tennis match on ESPN). Having said this, where can I find information about how to manage player and ball physics in that perspective? I don't want to go 3D on Unity, but to make a Mario Tennis-style game with the fun of a Kunio-kun no Nekketsu game (char aesthetic, special shots, etc.). Thanks for transferring us your knowledge (despite my awkward English). Hugs from Argentina.

[@javidx9]

Hi Leonardo, Top down tennis is really just pong. You can fake the 3D effect by changing x and y position relative to y. As for hitting nets etc, thats just special cases. The height of the ball is also faked, probably a simple triangle will do.

[@yogxoth1959]

Hello Javid! Do you have any video where you go through AABB (or any other type of) collision detection, but most importantly response? I'm having trouble wrapping my head around the concept and I prefer your way of teaching.

[@michaelmahn4373]

I have used 3D graphics libraries before but never completely understood the math behind. So one question: You say that you could divide x and y by z to get projective transformation, but from what I've learnt OpenGL divides all of x, y, and z by w. Why do they not divide x and y by z?

[@cocorinow]

kzbin.info/www/bejne/n5mVYZ9ppa-im7c

[@jamdonut]

Are there any perceived downsides to this, like allowing rotation of the camera etc. Am interested in the technique but worried I can't find many examples, so maybe there is an issue with the technique or its not well understood?

[@javidx9]

There aren't any really. As far as the maths is concerned, its a 3D world, so you can use a camera matrix if you like. Its just the projection is a little uncommon in 3D games.

[@Kaltinril]

One related, and one unrelated thought. Related: You are building and sorting the cubes every game frame, would it be more efficient to store the cubes and only build/sort them when a rotation occurs? (Though, I suppose this would introduce "perceived slow down" during rotation, if you made the game run fast only for moving (without rotation) Unrelated: Looking at olcPGEX_Graphics2D.h and olcPGEX_Graphics3D.h, are there plans to adapt these to use the decal for more speed?

[@javidx9]

Hi Jeremy, regarding the PGEX it's unlikely since decals can pretty much do everything that extension could do, though it might be useful to more the matrix transformations for people that like to do things that way. Its a good strategy to only change things that need to be changed, and may be required if the overhead becomes a problem.

[@Kaltinril]

@@javidx9 ah I didn't realize that. I haven't actually used those two headers just was thinking about Decal when I was looking at them. Whoops

[@jhfoleiss]

Awesome stuff javid! Thank you very much for your hard work making these videos. It has inspired me a lot in the last few days! A little request: do you recommend any reference material that explains the orthographic projection? Thanks!!!! (EDITED: I really wanted to understand all the transformations in the CreateCube function, but unfortunately I was not able to find any useful material online. Would be really grateful if anybody can point me in the right direction. =) )

[@javidx9]

Thanks Juliano, the transformations are exactly the same as those used in any 3D application, so 3D rotation matrices are the search term, though I have a video series about 3D graphics which talks about those too.

[@jhfoleiss]

@@javidx9 Thank you very much for the feedack javidx! I suspected that the 3d rotation matrices were being used, however i was not able to "line up" the rotation matrices in wikipedia with lines 216-221 (rotation around y-axis). Specifically, some of the signs seem inverted. Is this because we are applying the rotation directly in screen-space? If so, do you have any advice (or reference material) on applying matrix transformations directly on screen-space? I'm sorry for asking so many questions, I realize you are busy! Thank you very much and keep it up :)

[@javidx9]

Im answering without looking at the code or wikipedia, so I may be wrong, but the signs are different because ive rearranged the equations slightly so I dont start with a negative - purely cosmetic. iirc its -sin(n) + cos(n), which just becomes cos(n) - sin(n)

[@jhfoleiss]

@@javidx9 Thanks again :). I'll take another look with this in mind!!! Cheers!

[@PauloConstantino167]

Love your content.

[@bubuche1987]

I don't get why you calculate the aspect of the cube for every single cube. Precisely because they are not going to change because the view is ortho, it would be more efficient to calculate it only once, then only shift the result. And even the transformation "world wy" => "screen xy" (i.e. the amount shifted) should be something like 2 multiplications. And you may argue that it will not make a huge difference anyway because of the small number of cubes you will have. Well, maybe (I wonder what is you cpu usage with a world full of cubes when you perform the transformation for every cube vs when you perform it only one and then shift the result). But then, the optimization with "scale" is also irrelevant. Anyway, I think you may add the possibility to add a "sprite" in the world. For monsters, for players, for decorations, for items ... it would have a lot of uses. A sprite is always facing camera and always has the same size, so the only question is its position. And I didn't test, but I think it's the same "shift" formula than for the cubes.

[@louvethomas]

Wanted to study with your A* algorithm video today, guess I'll do it later :D

[@_zproxy]

very cool. next we need tobe able to rotate an isometric game like tiberian sun.

[@UPandUNDER]

What would be the best way to go about learning how to add a player object into a graphics system like this?

[@XKCDism]

would it not be better to have a function that returns true if the given coordinates are inside the cells but it in a if statement then grab the cell?

[@javidx9]

The ideal solution is to use a pointer, but I wanted to demonstrate a strategy for the anti-pointer-ists out there XD

[@PleegWat]

Shouldn't you throw an exception rather than returning a null cell if the cell being gotten is out of range?

[@javidx9]

Possibly, but then you have to handle all the mess associated with exceptions.

[@danielcostello528]

Your orange texture on the ground reminded me of Tiberian Sun

[@christopherkarlsson4919]

*big thumbs up*

[@Splatpope]

I swear to god you're working on an open source version of diablo 2

[@jhfoleiss]

Can anyone please explain to me the translation of the cube to the x-z plane (lines 136-142 @ 20:36)? I intuitively understand what it does, however I do not understand how the transformation was derived. Thanks!

[@focuseletronica]

Caramba, Incrível!!

[@AFE-GmdG]

Nice!

[@user-uq6jz7vk1q]

Why do you like like the lost brother of mike from become the knight?

[@z0mbiebanana9891]

Hey, did javidx9 come back to this in future videos? if would be a shame if he didn't but if not I'll see what I can do with it from here :D

[@lucgagnon7169]

I was coding a game with PixelEngine2 when this video poped-up. So happy. Can anyone tell me what should i do if my Visual Studio Licence is about to expire ?? thx By the way, thx you for your great job !!!!

[@javidx9]

Thanks Luc, VS Community Edition just requires you to log in with your microsoft account every few months or so.

[@snoppgubbe2310]

isn't it enough with three faces? you check the north, west and up faces then south, east and down are just the opposite of the three

[@ogr2]

Woow this tutorial could be an editor for the RPG series you did some time ago. Maybe a tutorial on an update of that series using the pixel game engine?

[@medomody242]

I have a question how can I make the wxDC userscale function in synch with wxscrollBar thumpsize and range 🙄😶

[@user-dy2on3uu4e]

it is so amazing! thx

[@onogrirwin]

Does anyone have the sprite sheet/set that he's using, or even just the name? I actually have it somewhere on my computer but I have no idea where...

[@AutomaticSnowball]

I ran your code, but I get around 15 FPS compared to 300+. I feel like my pc isn't that weak? Obviously there are optimisations I could make, but that is a significant performance difference.

[@javidx9]

Have you run in release mode?

[@AutomaticSnowball]

@@javidx9 Oh my! I forgot about debugging's influence on performance. Thank you! It's now running at 300+ FPS. Brilliant

[@jsflood]

Genius! :-D

[@NerveSeesAss]

This game reminds me alot like notchs Ruby dung his game he never finished before he made minecraft

[@AV-hx1bm]

Hello. I want to start coding for smart phones android and iPhone what will you recommend to learn. Thank you.

[@obinator9065]

I‘m gonna use this one!!! No I only gotta figure out how to get the damn collision detection working ;(

[@miguelmejia3235]

Since objects are mainly cubes, you can try to add a Z component to a rectangle collision algorithm. I hope it helps!

[@javidx9]

Well everything is a 2D array fundamentally, so apply any 2D collision detection to start with (hint my platform game engine video/rpg series videos/polygon collision videos)

[@footballCartoon91]

apparently the sprite used in this video cannot be found..does it intended not to be shared to the public ?

[@javidx9]

This is correct. I am not the author of the sprite set, and I'm unsure if it can be distributed. It's a very, very old set. Other commentors have discovered the origins of the set, so read through.

[@GabrielxC]

I hace the Sprite, do You want the link?

[@DungNguyen-qy3yz]

Yeah we have done it like a million times, nothing impressing. 1:10 Holyshit mother of god whats this sorcery.