awesome as always ! you are really very talented for explaining your knowledge in a very clear, objective, interesting and very easy way to understand :)
Hey thanks Leo. I must apologise, I thought you'd stopped posting videos as I wasn't getting any notifications, and somehow the bell had been switched off - I'm catching up now and will likely steal some of your ideas :D.
i have been watching computer science and programming related videos on youtube since there was youtube; your channel is the first i've seen to imply a genuine understanding of the concepts as well as the mathematical underpinnings of the concepts you demonstrate.
I used this to help with building a Mode 7 renderer in GameMaker around a year ago, it was very helpful! But I want to mention that there are some inaccuracies towards the end of the video that I didn't notice until I tried stretching the system further. Once you switched to division at 19:15, there is no longer a far plane - the "far plane" variables actually represent the near plane now (that's what produces the impression of vertical camera movement), and the "near plane" warps the scaling between the frustum and the viewport, which produces the curvature. Not realizing this ended up leading to some headaches for me so I wanted to point it out in case it is helpful to someone else!
haha yes i was thinking about it! :) Maybe adding this to the raycaster. Or make a gba racing game would be fun. I wonder how hard it would be to remove floats and division.
That curvature was a problem I was having in one of my projects. I fixed it, but it had to do with the near plane/far plane issue like it does here. This topic is really interesting!
That horizontal black bar in the center should only appear when you have an odd number of pixels for the screen height, right? Because if the height is even, then that infinity value falls right between the two pixels in the center.
Hi FuzzyCat, yup, spot on. Not many monitors with odd rows of pixels though :D This is often a problem with computer graphics, as things tend to favour powers of two, but there is no accessible middle pixel in those circumstances.
A few things to add for more 2.5D realism: - Add a background that doesn't perspective warp and doesn't scale to make it infinitely distant. - Add a fuzzy line of sky color over the horizon line that can simulate atmospheric effects - You can also add an effect on characters/vehicles etc. that their contrast go down as their distance from the camera go up. Add to that a tint of sky color and they can fade into the horizon in a nice way. - You can also have layers of transparent clouds at the top. Maybe have different scaling to imply different distances with subtle paralaxing. Just a few things that popped into my head as I was watching. :)
There was a group that did this with the gameboy color pokemon game and it turned out really well... I wondered how it was done(granted it's a full game so alot of work) but this pretty much explained it all.... thanks
I started work on something similar but combined with your "Perlin" noise generator to make a 3d landscape. Unfortunately I got side tracked to a more serious project so never got it finished.
I didnt know darbs had started running F-Zero now, hmmm, I'll check it out, but I didn't thing there was much room for strats in that game - obviously I'm wrong if darbian is doing it lol
Well, F-Zero is a hard game. You don't need glitches to make it interesting for a speed-runner. Darbian was doing F-Zero in a 12 hour challange which was just speed running a new game 12 hours one weekend. greetings
Great stuff. I was recently contemplating coding an old style 3D engine, only for normal graphics in C. Doing all the 3D stuff myself, completely software just for fun. Perhaps using plain Windows code. You could easily expand on this further using concepts you already introduced, drawing sprites at certain locations (trees, poles would work well with racing games). Lots of potential here, could redo your RPG so it is in 3D instead.
Cheers Neil, yeah I think theres lots of potential. I've just been fiddling about trying to add height to it too. I reckon there're some interesting videos to be made with this. I have some plans for a racing game too.
I am confused about how fSampleDepth fits onto the frustum. If fSampleDepth is normalized between 0 and 1, and you calculate (fFarX1 - fNearX1) / fSampleDepth, you'll get an x value that's outside of the range from fNearX1 to fFarX1. The same goes for the other three calculations to get fStartX, fStartY, fEndX, and fEndY. But if all of the x, y coordinates calculated from dividing by fSampleDepth lie beyond the far plane of the frustum, that contradicts the premise that the far plane is the maximum distance the camera can see. To make matters more confusing, at 17:56, the y marks are drawn on the frustum y-axis. But you can't sample from the frustum at those y points given the way that fSampleDepth is used, because dividing the differences between fFarX1 and fNearX1, fFarY2 and fNearY2, etc. by a number less than 1 will give a value that doesn't even fall within the frustum. Am I missing something here?
Fun video to watch. Been a long since I've thought in terms of Mode7. Not to hinder the efforts of your member who is doing image-to-sprite transforms, there's a neat visual studio addin by incre of the main guys on the c# team. He created a sprite addin that will take an image you've loaded into VS, (or more if selected), right-click, and create sprites. It also works with the built-in image editor (or possibly enhances it... Been a while since I've needed to do graphical work in a project until recently). But it seems to work in a language-agnostic manner, as it should.
Who on earth disliked this video? It must have been by mistake lol. But thank you for another great video. Very informative and interesting, I do remember the Mode 7 days of the SNES, I was so impressed when when I saw graphics being scaled and rotated them were the days 😌
"I then need three more pieces of information. What is the nearest location to the camera, which is the furthest location from the camera, and what is your favourite colour!"
I keep seeing the sky as a ceiling that is the same distance from my head as the ground is. I guess that's why mario kart didn't use that kind of sky technique but a 2D background. The curvature really reminds me of Terranigma, when you are underground.
I guess that it would look nicer to just have the sky as a simple background that simply pans around matching the rotation of the camera so it looks like unfinite distance. Maybe have a cloud layer or two as separate mode 7 textures though to keep things more interesting. But have them fade out towards the horizon to make it nicer.
I have literally been looking for a proper explanation of the perspective problem as far as I can remember, more or less. I think don't quite understand it, but I'm sure another look, or two will do the trick.
So how do you make the portion of the screen that shows the land higher and less sky? If you look at the original F-Zero I believe it is 83% of the screen is taken up by land. This is important as it lets you see farther ahead. =) Also, at around 20:25 you talk about altering the "near plane." This looks like some pretty convincing going up and down hills... would it be possible to utilize this to imply it or is there some reason why this wouldn't work? Because that seems like a good way to get even more of a pseudo 3D effect.
I missed this one at the time. I wonder if something like this is behind the GPS map automotive view. You could plot points, and connect with lines on the new projection.
Hi Brek! I think you could easily replicate the projection with a projection matrix and draw things into your scene. In fact use the matrix to also create the sampling points for the FOB quad.
Wonderful job, but i actually don't get exactly what is the mathematical justification about the 19:07 when you replace *(1-fSampleDepth) by /fSampleDepth. Actually, as a first shot i would say that's because the perspective formula is based about dividing by Z. Like to have the perspective projection of (x,y,z) you do (x/z,y/z,1). But in your case you're doing a kind of texture mapping and your idea seems to be that more a scanline is near the middle, more it is mapped far on the floor, can you explain why do dividing by fSampleDepth does the job ?
Hi roberto, in principle you are correct, perspective is not linear. When my calculations were linear, they generated curved looking projections. Dividing by fSampleDepth straightens it out because I need a 1/Z somewhere in the transformation.
@@javidx9 OK I see. Cause actually you can find the same equation when doing ray casting on a plane. If you got a vector v= (x, y, z) and a plane which equation is z=-1 assuming that the player is a point p=(xp, yp, 0) the intersection with the ray casted from the player will be finded by resolving the system of p+v*k and z=-1. So by resolving pz+vz*k=-1 which gives k=-1/vz - pz which gives k=-1/vz cause pz=0. So p+v*(1/vz) gives the intersection point. So we can get x and y coordinate from the plane with it. And it is exactly the formula you used. But actually mine is multiplied by - 1. It should invert x and y. Do your rotation is inverted? By the way the formula I gave you is based on raycasting. A way to produce a kind of perspective vision based on optics geometry and physics. And it seems to work.
At line 84 19:38, how do you not get a divide-by-zero error? Doesn't (y) start at 0, giving a sampleDepth of zero, then causing the first section of fStartX to divide by zero? Edit: C++ works differently than other languages :P
Hi mr javid, i really appreciate your videos, they have been helping me a lot in learning the cool techniques behind some of my favourite childhood videogames. May u make a serie on the pre rendered background? the one that was used in 90's games like resident evil, final fantasy 7,.. With love from Vietnam. Thanks again !
I've tried at drawing sprites to the screen in the pseudo 3d space, but I just can't find an algorithm that works. And I mean like the sprites of the other racers, how they get smaller the further they are. I have no clue how to get their screen coords from the top down 2d coords.
Hey, Can you do a whole series on a 3D game engine from scratch, but every time we do something "huge(a big HELPFUL change)" we take a break and make a game with it to see what we can do. and then you keep repeating this cycle to get a good game engine series. no one has any tutorials like you, your awesome!
I am playing around with my raycasting engine on a older hardware.. I wonder if that techinque could replace my current floor and ceiling drawing. But also I can mouse look around and my floors can contain different textures per grid, I wonder if mode7 can handle it..
I've just used it to do exactly that, although at 1080p I've gone from about 165FPS to about 10FPS so I clearly now need to do some optimising (although I have translated it to Nim with raylib rather than C++ with the console game engine).
So, it it possible to have a Mode 7 background loop on SNES so that when you get to the end it doesn't appear to actually end and instead just go on forever, like in an endless ultimately repeating map terrain of hills and rivers and so on for example?
I have a question regarding the formula (fFarX - fNearX) / fSampleDepth + fNearX. When fSampleDepth = 0, in the middle of the screen, the result is infinity, so you can see as far as possible. But for fSampleDepth = 1, you simply get fFarX, so at the bottom of the screen is the far plane. You're really rendering everything from the far plane to infinity, rather than everything between the two planes. Wasn't the goal to render everything inside the view frustrum, not everything behind it? And it's visible that your near plane isn't actually the near plane, as changing it doesn't change what you can see, it only adds that weird curvature. I'd expect the result to be perspectively correct, without any curvature, regardless of where the near plane is.
Hi!, I tried this on processing (java), in theory, should be the same (because the algorithm is what matters), but is not. I had to multiply the sample X and Y to grid width and grid height / 2, respectively. Besides, had to check whether X or Y were below 0 and remove the sign (mult by -1), otherwise an ugly gray area was drawn and some parts of the window were not cleared. Why is that? Is it due to your pixel scaling (1 pixel = 4 pixels)?
I have a question is mode 7 rotation and moving backgrounds in real 3D space?? Or is it all faked by stretching,shrinking,skewing and shearing an image?? Also is rotation just faked by moving scanline horizontally and vertically atonce??? Anso since mode 7 is only 1 single background, then how could it be that i see multiple moving backgrounds in street racer and mario kart?? Thanks alot in case you will ansure these wuestions.
The "effect" of mode 7 is achieved purely as a transform distorting a 2D image. Arguably, 3D doesn't actually exist since it must be in 2D form to display on a screen, but that's a whole other video. The background can be whatever you want it to be, 8 see no reason for restrictions, and rotation is often more complex than just scrolling horizontally.
@@javidx9 so theres even no 3D space at all??? And how about the backgrounds, for what i do know is that the snes cannot do 4 backgrounds and mode 7 atonce no, so how were those multi scrolling backgrounds done in street racer and mario kart???
am new to programming, you make it look really easy. i decided to try out the tetris cos i love that game.will it compile on c++ 2010. i see you are using modern IDE.
It "should" compile with 2010, however a lot of my more recent videos will probably not. The tetris code i present here is simple enough that any unsupported features could be worked around quite simply.
thanks, one question though the capture listing is it serving as lambda am still learning that syntax and how it works, i hear it works only on 2011 and upward releases
Hi Ian, yes there is. If you angle the camera downwards, you are reducing the near and far plane distances, so that's easy enough. The problem is this wont look right because we expect the horizon to raise as we look down, so you will need to do this also. In this video I split the ground/sky 50/50, you may need to try other ratios until it feels correct.
Yes, all the code I present on the channel is a solo project (unless I explicitly state otherwise). The trick is to just keep things as a hobby, if it stops being fun then dont carry on with it.
Hi Pablo, you can render a sprite the same way I have done in many videos, making it rotate is tough. If looking top down, you can use a rotational transformation matrix to rotate the sprite, looking from behind as would be the case here, you would just need several sprites.
Fantastic pedagogic skills, thank you so much. I've been only developing on XNA and Unity, so my question may sound naive, but I only see mathematics here. Does it mean that the Mode7/scaling abilities of the Snes was only implementation of mathematic specific functions? How was this impossible for a developer on Megadrive not to approach the same result through pure code?
Thanks Goupil! The Snes had hardware specifically capable of performing an Affine Transform, which is the effect emulated in this video. To be fair, I too could have implemented an affine transform directly but kept it simple with linear(ish) interpolations. On our modern hardware at these resolutions its no big deal, but back in the 90s, doing a per pixel affine transform would have been quite a challenge without dedicated processing units. The megadrive lacked such additional hardware, but had its own features that could produce effects the snes couldnt.
Wow that was quick, thank you. I've been thinking for a while about 3d prototypes with Mode7 rendering on Unity, for nostalgic esthetic purpose. Since there is no such concept as canvas on Unity but only textured quads, so far the only solution I could consider would be to add a purely graphic "pixel-perfect layer" above the regular 3d display, which would be seen through a camera with no perspective. In this extra layer, some 2d looking-squads would be displaced "pixel by pixel" (an arbitrary unit) following the edges of the models in the back-layer (sorry it's a bit hard to explain for a non-native english speaker). I didn't find much work on this subject, so if some other persons had been working on it, I'd be very interested to hear some alternative solutions. Keep up the good work!
Hi, kind of new to the channel. So have you already made a video explaining as to how you made 'olcConsoleGameEngine'? I really want to make a Mode7 game of my own, but I doubt I'll be able to follow along with what you're doing without a game engine to access.
I just implemented this in pico8 and my topmost line is showing really bizzarre artifacts, probably because dividing by zero gives 32768. I could just set the top line to something else, but any idea how to sensibly deal with it without just hiding it?
Hi Kavukamari, sometimes, you just need a little hack! Chances are you're right, you are getting some overflow/underflow mess for that particular row. Without knowing your precise implementation I can only speculate, but if a hack works, then go for it!
I have just discovered your channel and I really like your content, however, I think I need to ask this: Do you happen to have C++ tutorials for complete beginners? A few of the topics you cover are really interesting but they are really advanced for me as well.
Hi and thanks Aikou! I have a couple of videos about programming in general for beginners, but ultimately no, I dont have any aimed towards complete beginners. I try to make videos which dont even rely on you using C++, even though I do, the concepts are easily portable to other languages.
@@javidx9 Oh that's fine, I'm acquainted with some basic concepts of both Java and C++ but I asked the complete beginner part because that's pretty much how I see myself when I watch some of your content lol (yes, the 3D engine videos blew my mind). I'm teaching myself how to code so I don't really know much other than the two languages I mentioned but I'll try to pay more attention to your "code-it-yourself" series. Thank you so much for replying to my comment.
очень интересно и как всегда доходчиво. я не программист а 3д художник, но посмотрев ваши видео про рейкастинг мне пришла в голову интересная идея. а можно ли сделать такой же мод 7, но не для текстуры а для поля векторов? таким образом можно было бы избежать ресурсоёмкого рейкастинга и бсп зонирования. и если можно, сделайте пожалуйста видео про это)
Dear Javid, 1st. Best of wishes for 2019 =) I did something similar, I think I mentioned that before. In this gameconsole... library? in c++ if I understand correctly, you actually draw/plot all the pixels? I'm coding for GPU's and can only use (fast enough) polygons, quads and scaling. I found that although I could make it look 3d-ish, When confronted with enemy 3d location and flying bullets/rockets it was hard to create gratifying control and execution. Then again, my math skills are really rusty and basically just bad. But I'm learning from you and you make it a pleasant journey, thank you! Highest regards, Mac
Hey Mac, Happy new year to you too! Yes I do everything using the CPU. Introducing the GPU would make some of the videos quite boring given all the setup code required.
First of all, thanks for that useful video tutorial. Trying to porting the code I found that fSampleDepth = 0 when y = 0 so you're dividing by 0 and the result equals to inf. Sure I'm wrong but I can't find any workaround to solve it :-/
The math is exactly the same, what you'd do is either modify texture and then render it using pygame or instead use shaders to sample textures on a quad that would take up entire screen (since this problem is actually horribly parallel).
Very nice tutorials / videos! But i still have a question... What does your rendering engine uses? Does it is 100% software rendering (GDI, DIB) - or are you using APIs like OpenGL, DX to render things on screen)? Keep on your nice work!
Sprite files store ASCII characters that make up the "pixels" used in the console game engine, dont forget that ultimately this is still just a windows command prompt, so the concept of "pixel" does not really apply. A PNG file is a traditional format image file which stores pixels in RGB format (with some compression). My Code-It-Yourself Frogger video introduced sprites and how they work.
Now that's a heavy question and no matter what answer I give, it will be wrong :D My experience in IDEs, there is sadly little that is comparable to Visual Studio in terms of its integrated debugging facilities. There are many code editors (I believe VS Code is very popular) but few that really permit debugging as fluidly as Visual studio. However, as I'm not a frequent linux user, I could be very wrong in this regard.
you can do it the hard way with any text editor of your choice and a terminal, plenty of programmers do this. i personally recommend Visual Studio Code, it Open Source. and provides the best of IDE like features, while being very customize able. a TH-cam Search for VS Code C++ should give you all kinds of information tip and tricks for getting started. it does require some setup, but that is because it can be tailored to YOUR workflow and how you like to do things. codeblocks is another very popular IDE, Along with QT Creator. most of these can usually be obtained from your Linux distro's Package Manager. sorry if im late and non of this information is needed. Good luck in your Linux Programing Journey :D.
Hi GoldenGuy, ill be following this video up with something similar to what you're asking in due course, calculating the position is no different from translating a pixel in the map into screen space, as the map pixels are in world space too. The tricky part is scaling the sprite in accordance with the perspective. This can be derived from the scaling mechanism in use too, but may need some experimentation.
@@javidx9 Mr Javidx I am also struggling to calculate the screen position, could you please give a couple pointers? I understand the frustum corners but am unable to place the object on the screen correctly.
Very useful info, tho that's gotta be the weirdest way I've seen someone write an X. How come you don't just use two intersecting straight lines like normal?
You could be right, this was in debug mode so its actually about 120fps. However its the variation of the maps that causes the performance drop. The algorithm is a fixed level of complexity so the performance is not related to the properties of the frustum, instead as the pixels become more distinct in appearance the windows algorithm that renders the characters takes a nose dive.
> instead as the pixels become more distinct in appearance the windows algorithm that renders the characters takes a nose dive. Those are probably cache misses; if you don't hit the same pixel twice, each pixel has to be loaded from RAM. (Since today's RAM is usually cached in small blocks, about 32 bytes IIRC, that doesn't hit hard unless the pixels are REALLY far apart or from different rows of the texture.) If you profile the program and see a drop in your subroutine rather the API call, that's what causes the drop, even though the number of operations per frame doesn't change. I found another performance issue: Instead of computing fStartX + (fEndX-fStartX)*fSampleWidth, you should consider precomputing fStepX = (fEndX-fStartX)/fScreenWidth and then use a for(x) loop that only adds: fTempX = fStartX; // ditto for fTempY for (x blahblahblah) { fTempX += fStepX; // ditto for fTempY short col = sprGround->SampleColour(fTempX, fTempY); // ditto for sym Draw(blahblahblah); } That won't alleviate the caching issues, but mipmaps will ;) Oh yeah, they look better, too.
Using this technique, I bet you could make a sort of flight simulator! It’s not true 3D, obviously, but it at least gives the illusion of 3D. (Considering you could “move up or down” in this psudeo-3D world, a flight simulator wouldn’t be very hard, I’d imagine).
javidx9 Programming gives us almost unlimited possibilities, and that’s what I love about it - there’s virtually unlimited things people can do with code :) I view programming as a sort of art form in that regard 😛
Hi Draconita, this is a single file custom game engine which I use for all my videos called olcConsoleGameEngine. Its simple to use and has the odd characteristic that everything you see is rendered inside a windows command prompt. The source is all available in the description. Ive recently released a newer version which is more conventional in terms of graphical style but retains the simplicity, thats called olcPixelGameEngine, and I have a video exclusively about this too.
Yes you can! Theres a port for pixel game engine available in the contributers folder on the repo. I try to make my videos platform/language agnostic so the algorithms are still going to work.
Very cool my friend! I am programming a true 3d engine from scratch and I've uploaded a video of its first version. You might wanna have a look at it just for fun.
Hi Artemis, I did a little bit of NES programming once. The problem with console programming (lol as in gaming console) is the code you write is highly specific for that platform, so you need to invest a lot of time learning how the platform works. There are a few game boy programmers on my discord server, they've managed to find C++ dev kits for the platform too.
awesome as always ! you are really very talented for explaining your knowledge in a very clear, objective, interesting and very easy way to understand :)
Hey thanks Leo. I must apologise, I thought you'd stopped posting videos as I wasn't getting any notifications, and somehow the bell had been switched off - I'm catching up now and will likely steal some of your ideas :D.
ow i would be honored, but my stuff are already things that i get from someone else, so no problem xD ...
Javid don't you know, Stealing is just a programmers form of collaboration!
@@javidx9 Me too creating a Video Game with Mode7
th-cam.com/video/9YDV2DEM3gc/w-d-xo.html
You, sir, are a king in explaining programming techniques.
Dear javidx9, your channel is gold mine. Best regards. :)
Thanks Xavery :D
i have been watching computer science and programming related videos on youtube since there was youtube; your channel is the first i've seen to imply a genuine understanding of the concepts as well as the mathematical underpinnings of the concepts you demonstrate.
Thats really nice of you to say AcceleratingUniverse, I appreciate it a lot, thanks!
I used this to help with building a Mode 7 renderer in GameMaker around a year ago, it was very helpful!
But I want to mention that there are some inaccuracies towards the end of the video that I didn't notice until I tried stretching the system further. Once you switched to division at 19:15, there is no longer a far plane - the "far plane" variables actually represent the near plane now (that's what produces the impression of vertical camera movement), and the "near plane" warps the scaling between the frustum and the viewport, which produces the curvature. Not realizing this ended up leading to some headaches for me so I wanted to point it out in case it is helpful to someone else!
I just discovered your channel and i am so glad i did! Thank you so much for uploading all these videos!
Hi Kartik, thanks, no problem!
You're a saint! I've been looking for soemthing exactly like this for a while!
mode7の温かみのあるグラフィックが大好きです
This was really fascinating to watch. You do a great job explaining it so I can understand. Great video!
Thanks Sage, another GBA candidate? :D
haha yes i was thinking about it! :) Maybe adding this to the raycaster. Or make a gba racing game would be fun. I wonder how hard it would be to remove floats and division.
That curvature was a problem I was having in one of my projects. I fixed it, but it had to do with the near plane/far plane issue like it does here. This topic is really interesting!
That horizontal black bar in the center should only appear when you have an odd number of pixels for the screen height, right? Because if the height is even, then that infinity value falls right between the two pixels in the center.
Hi FuzzyCat, yup, spot on. Not many monitors with odd rows of pixels though :D This is often a problem with computer graphics, as things tend to favour powers of two, but there is no accessible middle pixel in those circumstances.
A few things to add for more 2.5D realism:
- Add a background that doesn't perspective warp and doesn't scale to make it infinitely distant.
- Add a fuzzy line of sky color over the horizon line that can simulate atmospheric effects
- You can also add an effect on characters/vehicles etc. that their contrast go down as their distance from the camera go up. Add to that a tint of sky color and they can fade into the horizon in a nice way.
- You can also have layers of transparent clouds at the top. Maybe have different scaling to imply different distances with subtle paralaxing.
Just a few things that popped into my head as I was watching. :)
All good ideas, though the console is limiting when it comes to scaling and colour resolution, but if you are not in the console, good stuff!
There was a group that did this with the gameboy color pokemon game and it turned out really well... I wondered how it was done(granted it's a full game so alot of work) but this pretty much explained it all.... thanks
No problem buddy. This technique would be more complicated to do on a game boy so thats quite impressive.
I started work on something similar but combined with your "Perlin" noise generator to make a 3d landscape.
Unfortunately I got side tracked to a more serious project so never got it finished.
It happens Jim, it happens, I've a folder full of "work in progress"
Super cool stuff. I was just watching darbs speed run of F-Zero on the SNES and he was mentioning MODE7.
Thank you very much.
greetings
I didnt know darbs had started running F-Zero now, hmmm, I'll check it out, but I didn't thing there was much room for strats in that game - obviously I'm wrong if darbian is doing it lol
Well, F-Zero is a hard game. You don't need glitches to make it interesting for a speed-runner. Darbian was doing F-Zero in a 12 hour challange which was just speed running a new game 12 hours one weekend.
greetings
Great stuff. I was recently contemplating coding an old style 3D engine, only for normal graphics in C. Doing all the 3D stuff myself, completely software just for fun. Perhaps using plain Windows code. You could easily expand on this further using concepts you already introduced, drawing sprites at certain locations (trees, poles would work well with racing games). Lots of potential here, could redo your RPG so it is in 3D instead.
Cheers Neil, yeah I think theres lots of potential. I've just been fiddling about trying to add height to it too. I reckon there're some interesting videos to be made with this. I have some plans for a racing game too.
Why do your videos come out at the perfect times? 👌👍🙂
Hi Matt, that'll be the subtle mind control working via the last few videos...
I am confused about how fSampleDepth fits onto the frustum. If fSampleDepth is normalized between 0 and 1, and you calculate (fFarX1 - fNearX1) / fSampleDepth, you'll get an x value that's outside of the range from fNearX1 to fFarX1. The same goes for the other three calculations to get fStartX, fStartY, fEndX, and fEndY. But if all of the x, y coordinates calculated from dividing by fSampleDepth lie beyond the far plane of the frustum, that contradicts the premise that the far plane is the maximum distance the camera can see.
To make matters more confusing, at 17:56, the y marks are drawn on the frustum y-axis. But you can't sample from the frustum at those y points given the way that fSampleDepth is used, because dividing the differences between fFarX1 and fNearX1, fFarY2 and fNearY2, etc. by a number less than 1 will give a value that doesn't even fall within the frustum. Am I missing something here?
Fun video to watch. Been a long since I've thought in terms of Mode7.
Not to hinder the efforts of your member who is doing image-to-sprite transforms, there's a neat visual studio addin by incre of the main guys on the c# team.
He created a sprite addin that will take an image you've loaded into VS, (or more if selected), right-click, and create sprites.
It also works with the built-in image editor (or possibly enhances it... Been a while since I've needed to do graphical work in a project until recently). But it seems to work in a language-agnostic manner, as it should.
Who on earth disliked this video? It must have been by mistake lol. But thank you for another great video. Very informative and interesting, I do remember the Mode 7 days of the SNES, I was so impressed when when I saw graphics being scaled and rotated them were the days 😌
There's always that one guy that doesnt like retro pseudo 3d graphics emulated in a windows command prompt...
Always one 🙄
"I then need three more pieces of information. What is the nearest location to the camera, which is the furthest location from the camera, and what is your favourite colour!"
You Sir, deserve much more attention! Amazing content!
Thanks Darko!
Dude I love your work. Thank you
Thanks TIG!
I keep seeing the sky as a ceiling that is the same distance from my head as the ground is.
I guess that's why mario kart didn't use that kind of sky technique but a 2D background.
The curvature really reminds me of Terranigma, when you are underground.
Yeah, I dont like how the sky moves up and down either, I think for a flight sim you would need different sample coordinates for the sky and ground
I guess that it would look nicer to just have the sky as a simple background that simply pans around matching the rotation of the camera so it looks like unfinite distance. Maybe have a cloud layer or two as separate mode 7 textures though to keep things more interesting. But have them fade out towards the horizon to make it nicer.
Sky should be considered very far away and thus it can be rendered completely stationary, you just rotate it with the player but dont move it.
I have literally been looking for a proper explanation of the perspective problem as far as I can remember, more or less. I think don't quite understand it, but I'm sure another look, or two will do the trick.
As always a great tutorial! Thank you very much for making these!
Thanks Jelle!
AMAZING!!! This is pure gold!! Thank you so much for this tutorial! :DD
Thanks dasten, no problem!
So how do you make the portion of the screen that shows the land higher and less sky? If you look at the original F-Zero I believe it is 83% of the screen is taken up by land. This is important as it lets you see farther ahead. =)
Also, at around 20:25 you talk about altering the "near plane." This looks like some pretty convincing going up and down hills... would it be possible to utilize this to imply it or is there some reason why this wouldn't work? Because that seems like a good way to get even more of a pseudo 3D effect.
So that’s how they did hills in Mode7! Crazy stuff.
Kind of, its all an optical illusion really. If you add more scenery like trees for example, you can make the illusion even more compelling.
How can I optimize it? I have a canvas made of 700x500 pixels in java awt, and Im running on about 13fps.
This is exactly what I was looking for. Great!
Psychic Coding :-S
How calculate sprite position from bird view (x,y) to projected view 3d??
I missed this one at the time. I wonder if something like this is behind the GPS map automotive view. You could plot points, and connect with lines on the new projection.
Hi Brek! I think you could easily replicate the projection with a projection matrix and draw things into your scene. In fact use the matrix to also create the sampling points for the FOB quad.
Wonderful job, but i actually don't get exactly what is the mathematical justification about the 19:07 when you replace *(1-fSampleDepth) by /fSampleDepth.
Actually, as a first shot i would say that's because the perspective formula is based about dividing by Z.
Like to have the perspective projection of (x,y,z) you do (x/z,y/z,1).
But in your case you're doing a kind of texture mapping and your idea seems to be that more a scanline is near the middle, more it is mapped far on the floor, can you explain why do dividing by fSampleDepth does the job ?
Hi roberto, in principle you are correct, perspective is not linear. When my calculations were linear, they generated curved looking projections. Dividing by fSampleDepth straightens it out because I need a 1/Z somewhere in the transformation.
@@javidx9 OK I see. Cause actually you can find the same equation when doing ray casting on a plane. If you got a vector v= (x, y, z) and a plane which equation is z=-1 assuming that the player is a point p=(xp, yp, 0) the intersection with the ray casted from the player will be finded by resolving the system of p+v*k and z=-1. So by resolving pz+vz*k=-1 which gives k=-1/vz - pz which gives k=-1/vz cause pz=0. So p+v*(1/vz) gives the intersection point. So we can get x and y coordinate from the plane with it. And it is exactly the formula you used. But actually mine is multiplied by - 1. It should invert x and y. Do your rotation is inverted? By the way the formula I gave you is based on raycasting. A way to produce a kind of perspective vision based on optics geometry and physics. And it seems to work.
Are we going to see more plane related videos like this in the future? That would be dope.
Yes I think we will, its a great starting point for racing games, flight sims, shooting games...
At line 84 19:38, how do you not get a divide-by-zero error? Doesn't (y) start at 0, giving a sampleDepth of zero, then causing the first section of fStartX to divide by zero?
Edit: C++ works differently than other languages :P
Hi mr javid, i really appreciate your videos, they have been helping me a lot in learning the cool techniques behind some of my favourite childhood videogames. May u make a serie on the pre rendered background? the one that was used in 90's games like resident evil, final fantasy 7,..
With love from Vietnam. Thanks again !
Btw series is both singular and plural, so it's 1 series, 2 series, 3 series, etc.
Hi! i have a question, how whould you do to put movile sprites on the map, how would you map them? thank you!
I always press like on your videos before I even watch them! 😁
I've tried at drawing sprites to the screen in the pseudo 3d space, but I just can't find an algorithm that works. And I mean like the sprites of the other racers, how they get smaller the further they are. I have no clue how to get their screen coords from the top down 2d coords.
Hey, Can you do a whole series on a 3D game engine from scratch, but every time we do something "huge(a big HELPFUL change)" we take a break and make a game with it to see what we can do. and then you keep repeating this cycle to get a good game engine series. no one has any tutorials like you, your awesome!
Just an idea but i haven't seen a good tutorial on this before and i look a lot.
This ... is so freaking cool! ...
Very awesome as always.
Cheers Mark.
Do you can make a tutorial from how to add collision in Mode 7 games?
thanks man! This helped with a raycaster engine i was working on :)
I am playing around with my raycasting engine on a older hardware.. I wonder if that techinque could replace my current floor and ceiling drawing. But also I can mouse look around and my floors can contain different textures per grid, I wonder if mode7 can handle it..
I've just used it to do exactly that, although at 1080p I've gone from about 165FPS to about 10FPS so I clearly now need to do some optimising (although I have translated it to Nim with raylib rather than C++ with the console game engine).
I want to do this!! How are you so smart?! You must be really remarkable in Math!!
This guy is a programming wizard
So, it it possible to have a Mode 7 background loop on SNES so that when you get to the end it doesn't appear to actually end and instead just go on forever, like in an endless ultimately repeating map terrain of hills and rivers and so on for example?
Amazing video, thanks for sharing
I have a question regarding the formula (fFarX - fNearX) / fSampleDepth + fNearX. When fSampleDepth = 0, in the middle of the screen, the result is infinity, so you can see as far as possible. But for fSampleDepth = 1, you simply get fFarX, so at the bottom of the screen is the far plane. You're really rendering everything from the far plane to infinity, rather than everything between the two planes. Wasn't the goal to render everything inside the view frustrum, not everything behind it?
And it's visible that your near plane isn't actually the near plane, as changing it doesn't change what you can see, it only adds that weird curvature. I'd expect the result to be perspectively correct, without any curvature, regardless of where the near plane is.
For a better formula see my blog at: tegtips.blogspot.com/2019/04/correcting-pseudo-3d-planes-aka-mode7.html
Mode7...now I learn something "new"! What about using this together with the Raycaster? Shouldn't that bring walls plus sky and ground?
It could certainly be used for planes in a ray caster yes!
FrustRum! God, you're so frustating x Love your work man
Excellent video.
Very good stuff!
Hi!, I tried this on processing (java), in theory, should be the same (because the algorithm is what matters), but is not. I had to multiply the sample X and Y to grid width and grid height / 2, respectively. Besides, had to check whether X or Y were below 0 and remove the sign (mult by -1), otherwise an ugly gray area was drawn and some parts of the window were not cleared. Why is that? Is it due to your pixel scaling (1 pixel = 4 pixels)?
I dont think the pixel scaling would be the culprit, could be the organisation of the textures is different? dunno...
I have a question is mode 7 rotation and moving backgrounds in real 3D space?? Or is it all faked by stretching,shrinking,skewing and shearing an image??
Also is rotation just faked by moving scanline horizontally and vertically atonce???
Anso since mode 7 is only 1 single background, then how could it be that i see multiple moving backgrounds in street racer and mario kart??
Thanks alot in case you will ansure these wuestions.
The "effect" of mode 7 is achieved purely as a transform distorting a 2D image. Arguably, 3D doesn't actually exist since it must be in 2D form to display on a screen, but that's a whole other video. The background can be whatever you want it to be, 8 see no reason for restrictions, and rotation is often more complex than just scrolling horizontally.
@@javidx9 so theres even no 3D space at all???
And how about the backgrounds, for what i do know is that the snes cannot do 4 backgrounds and mode 7 atonce no, so how were those multi scrolling backgrounds done in street racer and mario kart???
am new to programming, you make it look really easy. i decided to try out the tetris cos i love that game.will it compile on c++ 2010. i see you are using modern IDE.
It "should" compile with 2010, however a lot of my more recent videos will probably not. The tetris code i present here is simple enough that any unsupported features could be worked around quite simply.
thanks, one question though the capture listing is it serving as lambda
am still learning that syntax and how it works, i hear it works only on 2011 and upward releases
i share your persona, am really a lone wolf and i don't do too well in groups ,i read alot and am way too selective.
Yes, lambda functions need a recent version of C++, you can just replace them with a regular function though, it may just need a few more arguments.
Is there a way to lower the angle of the camera for a third person view?
Hi Ian, yes there is. If you angle the camera downwards, you are reducing the near and far plane distances, so that's easy enough. The problem is this wont look right because we expect the horizon to raise as we look down, so you will need to do this also. In this video I split the ground/sky 50/50, you may need to try other ratios until it feels correct.
@@javidx9 That worked great thanks!
i will try this on chatgpt to run this on Blender code,is it possible?
Did you wrote all your engine by yourself (Lone coder)?
You must be very patient and passionate in coding, that is great, keep on!
Yes, all the code I present on the channel is a solo project (unless I explicitly state otherwise). The trick is to just keep things as a hobby, if it stops being fun then dont carry on with it.
How can you render sprites (cars in this case) that move through the track and rotate?
Hi Pablo, you can render a sprite the same way I have done in many videos, making it rotate is tough. If looking top down, you can use a rotational transformation matrix to rotate the sprite, looking from behind as would be the case here, you would just need several sprites.
Fantastic pedagogic skills, thank you so much.
I've been only developing on XNA and Unity, so my question may sound naive, but I only see mathematics here.
Does it mean that the Mode7/scaling abilities of the Snes was only implementation of mathematic specific functions?
How was this impossible for a developer on Megadrive not to approach the same result through pure code?
Thanks Goupil! The Snes had hardware specifically capable of performing an Affine Transform, which is the effect emulated in this video. To be fair, I too could have implemented an affine transform directly but kept it simple with linear(ish) interpolations. On our modern hardware at these resolutions its no big deal, but back in the 90s, doing a per pixel affine transform would have been quite a challenge without dedicated processing units. The megadrive lacked such additional hardware, but had its own features that could produce effects the snes couldnt.
Wow that was quick, thank you.
I've been thinking for a while about 3d prototypes with Mode7 rendering on Unity, for nostalgic esthetic purpose.
Since there is no such concept as canvas on Unity but only textured quads, so far the only solution I could consider would be to add a purely graphic "pixel-perfect layer" above the regular 3d display, which would be seen through a camera with no perspective. In this extra layer, some 2d looking-squads would be displaced "pixel by pixel" (an arbitrary unit) following the edges of the models in the back-layer (sorry it's a bit hard to explain for a non-native english speaker).
I didn't find much work on this subject, so if some other persons had been working on it, I'd be very interested to hear some alternative solutions.
Keep up the good work!
it is possible on Mega Drive through pure code :)
th-cam.com/video/X975THoQ6DE/w-d-xo.html
Hi, kind of new to the channel.
So have you already made a video explaining as to how you made 'olcConsoleGameEngine'?
I really want to make a Mode7 game of my own, but I doubt I'll be able to follow along with what you're doing without a game engine to access.
I just implemented this in pico8 and my topmost line is showing really bizzarre artifacts, probably because dividing by zero gives 32768. I could just set the top line to something else, but any idea how to sensibly deal with it without just hiding it?
Hi Kavukamari, sometimes, you just need a little hack! Chances are you're right, you are getting some overflow/underflow mess for that particular row. Without knowing your precise implementation I can only speculate, but if a hack works, then go for it!
Amazing video man!
Mode 7 doesn't quite work like this, it uses HDMA to skew the image.
Its fake mode7
I have just discovered your channel and I really like your content, however, I think I need to ask this:
Do you happen to have C++ tutorials for complete beginners?
A few of the topics you cover are really interesting but they are really advanced for me as well.
Hi and thanks Aikou! I have a couple of videos about programming in general for beginners, but ultimately no, I dont have any aimed towards complete beginners. I try to make videos which dont even rely on you using C++, even though I do, the concepts are easily portable to other languages.
@@javidx9
Oh that's fine, I'm acquainted with some basic concepts of both Java and C++ but I asked the complete beginner part because that's pretty much how I see myself when I watch some of your content lol (yes, the 3D engine videos blew my mind).
I'm teaching myself how to code so I don't really know much other than the two languages I mentioned but I'll try to pay more attention to your "code-it-yourself" series. Thank you so much for replying to my comment.
очень интересно и как всегда доходчиво. я не программист а 3д художник, но посмотрев ваши видео про рейкастинг мне пришла в голову интересная идея. а можно ли сделать такой же мод 7, но не для текстуры а для поля векторов? таким образом можно было бы избежать ресурсоёмкого рейкастинга и бсп зонирования. и если можно, сделайте пожалуйста видео про это)
thats beautiful
Dear Javid, 1st. Best of wishes for 2019 =)
I did something similar, I think I mentioned that before.
In this gameconsole... library? in c++ if I understand correctly, you actually draw/plot all the pixels?
I'm coding for GPU's and can only use (fast enough) polygons, quads and scaling.
I found that although I could make it look 3d-ish, When confronted with enemy 3d location and flying bullets/rockets it was hard to create gratifying control and execution.
Then again, my math skills are really rusty and basically just bad. But I'm learning from you and you make it a pleasant journey, thank you!
Highest regards, Mac
Hey Mac, Happy new year to you too! Yes I do everything using the CPU. Introducing the GPU would make some of the videos quite boring given all the setup code required.
@@javidx9 Says the 1 year younger Javid. Now you have decals in the PGE 2.0 :)
GOD IS GOOD thank you my brother understood ....love you
First of all, thanks for that useful video tutorial. Trying to porting the code I found that fSampleDepth = 0 when y = 0 so you're dividing by 0 and the result equals to inf. Sure I'm wrong but I can't find any workaround to solve it :-/
start the loop with y = 1
How would you do this in Python and Pygame?
Hi SM, I don't know Python very well so I can't help you, sorry about that
The math is exactly the same, what you'd do is either modify texture and then render it using pygame or instead use shaders to sample textures on a quad that would take up entire screen (since this problem is actually horribly parallel).
I can’t be able to understand what are you explaining. I ve 4 years in programming ! What do you think about this problem which i have ?
24:12 You've created Spoon Racer 2018 :P
Very nice tutorials / videos! But i still have a question... What does your rendering engine uses? Does it is 100% software rendering (GDI, DIB) - or are you using APIs like OpenGL, DX to render things on screen)? Keep on your nice work!
Thanks! The Pixelgameengine uses a single opengl1.1 call to display the screen buffer on the screen.
Thanks for the nice video, but what is the fundamental difference between a png and a sprite file?
Sprite files store ASCII characters that make up the "pixels" used in the console game engine, dont forget that ultimately this is still just a windows command prompt, so the concept of "pixel" does not really apply. A PNG file is a traditional format image file which stores pixels in RGB format (with some compression). My Code-It-Yourself Frogger video introduced sprites and how they work.
Thanks so much for the explanation! I'll check out that video
Awesome!!!
Congratulations man!
I would like to see this racing in Stencyl engine... Is it possible? Do you know Stencyl?
I am on Linux. Can you suggest me another alternative for visual studio. 😀😀😀
Now that's a heavy question and no matter what answer I give, it will be wrong :D My experience in IDEs, there is sadly little that is comparable to Visual Studio in terms of its integrated debugging facilities. There are many code editors (I believe VS Code is very popular) but few that really permit debugging as fluidly as Visual studio. However, as I'm not a frequent linux user, I could be very wrong in this regard.
you can do it the hard way with any text editor of your choice and a terminal, plenty of programmers do this. i personally recommend Visual Studio Code, it Open Source. and provides the best of IDE like features, while being very customize able. a TH-cam Search for VS Code C++ should give you all kinds of information tip and tricks for getting started. it does require some setup, but that is because it can be tailored to YOUR workflow and how you like to do things. codeblocks is another very popular IDE, Along with QT Creator. most of these can usually be obtained from your Linux distro's Package Manager. sorry if im late and non of this information is needed. Good luck in your Linux Programing Journey :D.
how to increase the quality?
please make a tutorial of how to calculate positions for sprites to render them on the map :( or reply if there is a good documentation
Hi GoldenGuy, ill be following this video up with something similar to what you're asking in due course, calculating the position is no different from translating a pixel in the map into screen space, as the map pixels are in world space too. The tricky part is scaling the sprite in accordance with the perspective. This can be derived from the scaling mechanism in use too, but may need some experimentation.
@@javidx9 Mr Javidx I am also struggling to calculate the screen position, could you please give a couple pointers? I understand the frustum corners but am unable to place the object on the screen correctly.
Very useful info, tho that's gotta be the weirdest way I've seen someone write an X. How come you don't just use two intersecting straight lines like normal?
That looks like multiply.
I feel like this could be well applied with fractal art
When you are testing with the Player position, I noticed the Framerate was at 25-ish FPS...I think we are pushing the Command Prompt too far.
You could be right, this was in debug mode so its actually about 120fps. However its the variation of the maps that causes the performance drop. The algorithm is a fixed level of complexity so the performance is not related to the properties of the frustum, instead as the pixels become more distinct in appearance the windows algorithm that renders the characters takes a nose dive.
> instead as the pixels become more distinct in appearance the windows algorithm that renders the characters takes a nose dive.
Those are probably cache misses; if you don't hit the same pixel twice, each pixel has to be loaded from RAM. (Since today's RAM is usually cached in small blocks, about 32 bytes IIRC, that doesn't hit hard unless the pixels are REALLY far apart or from different rows of the texture.) If you profile the program and see a drop in your subroutine rather the API call, that's what causes the drop, even though the number of operations per frame doesn't change.
I found another performance issue:
Instead of computing fStartX + (fEndX-fStartX)*fSampleWidth, you should consider precomputing
fStepX = (fEndX-fStartX)/fScreenWidth and then use a for(x) loop that only adds:
fTempX = fStartX; // ditto for fTempY
for (x blahblahblah) {
fTempX += fStepX; // ditto for fTempY
short col = sprGround->SampleColour(fTempX, fTempY); // ditto for sym
Draw(blahblahblah);
}
That won't alleviate the caching issues, but mipmaps will ;) Oh yeah, they look better, too.
Using this technique, I bet you could make a sort of flight simulator! It’s not true 3D, obviously, but it at least gives the illusion of 3D. (Considering you could “move up or down” in this psudeo-3D world, a flight simulator wouldn’t be very hard, I’d imagine).
Yup, I could get at least 25 videos out of this! Space shooter, underwater shooter, WW2 simulator...
javidx9 Programming gives us almost unlimited possibilities, and that’s what I love about it - there’s virtually unlimited things people can do with code :)
I view programming as a sort of art form in that regard 😛
Stop talking
Which game engine is this? Game Maker Studio?
Hi Draconita, this is a single file custom game engine which I use for all my videos called olcConsoleGameEngine. Its simple to use and has the odd characteristic that everything you see is rendered inside a windows command prompt. The source is all available in the description. Ive recently released a newer version which is more conventional in terms of graphical style but retains the simplicity, thats called olcPixelGameEngine, and I have a video exclusively about this too.
what kind of king are you?
beginnen question i am on mac can i still follow your videos ?
Yes you can! Theres a port for pixel game engine available in the contributers folder on the repo. I try to make my videos platform/language agnostic so the algorithms are still going to work.
not move the skymap x,y whit the player only angle. and make like x move slolwy like a wind clowds are far away
Yeah thats a great idea Ola!
Very cool my friend! I am programming a true 3d engine from scratch and I've uploaded a video of its first version. You might wanna have a look at it just for fun.
Ever thought about programming for either the Sega genesis or PlayStation
Meaning assembly or c
Hi Artemis, I did a little bit of NES programming once. The problem with console programming (lol as in gaming console) is the code you write is highly specific for that platform, so you need to invest a lot of time learning how the platform works. There are a few game boy programmers on my discord server, they've managed to find C++ dev kits for the platform too.
woudn't one be 1.0 and the other 0.1 ?
PogChamp
kappa
как запустить ето ??? у меня viz.st. code
Nice
new video!!!!!!!!!!!!!!!!!!!
I made one by recreating what the actual SNES did a year ago.
Mode 7 isnt pseudo 3d planes. It was way more.
I get that he's the lone coder, but he needs to collab with the guy from the coding train.
its like tranforme in PhotoShop