Pseudo 3D Road #8 - infinite vegetation, tunnels, city

[@axilmar254]

Sega's superscaler raised to the extreme...

[@JDoucette]

Yes! Exactly! I've always wanted to recreate the best of the golden age of the arcades, which are all the classic SuperScalar games... Space Harrier... OutRun... Thunder Blade... After Burner... Galaxy Force... Hang-On. I actually would include Pole Position as the precursor to these. There's a gem in the design of each of these games, and as I took this engine beyond Pole Position and into OutRun territory, I realized that it loses something even when it gains something else.

[@stevenray8737]

Thats gorgeous graphics programming. Great job.

[@JDoucette]

Thanks so much Steven. I appreciate the comments. Scan-line 3D roads will never be boring for me! I kind of want to throw in some old-school voxel terrain on the sides... that's on my back burner.

[@Xonatron]

0:35 - it might be cool to have a Perlin noise or similar height map sprite-based ground.... even in a Space Harrier or After Burner type flying game.

[@JDoucette]

Do you mean for the road, or the road-side objects? After Burner actually draws some of the ground sprites raised up a bit. You can somewhat notice in Stage 1, but definitely notice in some of the later desert stages. But for the road, I had always thought that the voxel technology could be used for the road. It would still be pseudo-3D, but there's no reason height data couldn't be used to render it, instead of just a single scan-line. I had mostly considered doing the for the road-side terrain though - where you would basically be driving on a smooth road through a voxel-terrain world.

[@Xonatron]

@@JDoucette I mean for the road-side objects. For the terrain. Not sure how you'd force a flat road in the midst of a height map terrain generated by noise.

[@Xonatron]

I should try an After Burner style engine.

[@JDoucette]

@@Xonatron For the road side sprites, you could have some large texture sprite sheet that is a 2D array of various flower textures (or other styles) that have height changes, to cover a "2D" portion of a wrapping section of Noise, so they wrap both in X and Y. The texture mapping can auto-repeat in X as it already does in this video. Then for subsequent rows, pick out different textures that eventually wrap in Y.

[@JDoucette]

@@Xonatron I had never considered the implementation of the voxel terrain noise merging with the road -- I figured that it would be precomputed anyway. Where the road is, there are no voxels. And on each side, you have voxel terrain. The interesting bits would be in the distance, how does the terrain wrap if it is discontinuous at the road, and you likely don't want it to wrap anyway. But since you'd be using mipmaps by the time this matters, you could make the mipmaps however you want (non wrapping -- just enough to fill what is visible). Also, if designed well, the voxel terrain could pull off what Out Run arcade does, and have you be enclosed within the terrain (like Stage 2, rock walls), so you don't see much into the distance anyway, when such cases of terrain repetition matter.

[@Xonatron]

This looks awesome. I’d try to keep these videos short like 60s to keep them as teasers. Maybe the buildings could be multiples like Thunder Blade. Would only work on certain designs. Anything could be multiple sprites for thickness but it would be more art work.

[@JDoucette]

Every time I make a video over 2 minutes, I feel it's too long after watching it again. I made the road longer to capture some cool parts, so I should splice smaller sections of the video together. I need to get some decent editing software. Thunder Blade did sprite repeats, but was smart that it was only repeating the edge, not the entire building (which I had assumed at first, and thought the arcade board hardware was incredible at the time). Super Monaco GP has normal sprites, but the artwork of the sprites shows them at an angle, which suffices to fill in the depth. Many racing games, like Monaco and Outrunners use various angled sprites for fences, which can look decent as well. Polygon games like Road Rash just texture the sides of the buildings, but I cannot do that if I intend to keep this sprite based.

[@Xonatron]

@@JDoucette Your tunnels look amazing. I think you created something that looks better than OutRun rock tunnels, and have also captured the roller-coaster effect. No games ever captured the roller-coaster effect that OutRun has, and I think this is better. Plus the filled fields of grass and flowers. It's awesome. This is like an alternate future if games stayed in 2D and low res.

[@Xonatron]

@@JDoucette The pseudo-3D texturing of side walls is an idea, but I think it would look lame today.

[@tnmrvc]

im no expert but dig the technique/look, i love the flower fields

[@JDoucette]

Thanks for the note. I appreciate that. And this is with my terrible pixel art drawings (first time drawing flowers!) and all of the flickering aliasing (I want to add mip-maps, and handle when they invoke, but the GPU seems to want to control that itself). So it can be much, much improved. In any case, I agree with the sentiment -- these infinite fields of flowers are amazing, and I've wanted to see it done ever since Out Run pulled it off back in 1986 in the arcades...

[@tnmrvc]

@@JDoucette are you talking about the grainyness of the flowers in the background when they come/move forward with the image? I guess that could be nicer but it doesn't matter, the overal crispyness and smoothness/speed of the image coupled with the vast sea of flowers is what gives it charm

[@JDoucette]

@@tnmrvc Yes, that's exactly what I meant. I also think I could "fill" the voids more on very steep hills (where you can see gaps in the flower lines). But, agreed, this is nit-picking, and the general aesthetic is what I love as well. I really have got to make a game out of this... :)

[@danpatrick7176]

I'd play this game!

[@JDoucette]

Thanks! I've been toying with a multi-sprite based formula car design that I could possibly use. Artwork in the original sprite-based 80s arcade games were very simple, and fall apart easily (wrong angles, facing the sky on hill tops). So I wanted something more solid (by making it in pieces! ha!). I'd like to first make a simple track / racing demo like Pole Position, and then turn it into a highway driving game like Out Run.

[@danpatrick7176]

@@JDoucette Definitely sounds cool. I love this graphical style

[@toboterxp8155]

The new GTA is looking a little flat 😉

[@JDoucette]

Ha ha, trying to fix that. ;)

[@dan4515]

youtube compression did not like this one

[@JDoucette]

It sure did not! :) Random noise from the lack of mipmaps and all of that aliasing are hard to compress. I'd like to do 2 things: 1. record in 4K from now on, since even these pixelated graphics need some help with extra data. 2. more importantly: use mipmaps, but not the GPU generated mipmaps; I want to control the jump to the next mipmap level and draw that mipmap texture myself -- just like the old school Sega System 16 days where sprites could only scale 2x, therefore, by hardware requirement, everything that scaled had mipmaps.

[@BluntEversmoke]

This needs to become a mechsim engine.

[@JDoucette]

Is mechsim a particular game that has abilities to be modded? I'd love to know more. You have me researching this now. In any case, I would love to finish even a simple game with this engine -- it's been a childhood dream of mine since I first saw Pole Position / Out Run / Rad Racer.

[@BluntEversmoke]

​@@JDoucettemost modern games are moddable, earlier ones may or may not be. Mechsims as in, Mechwarrior, Earthsiege and Starsiege, Heavy Gear, Titanfall, also Terra Nova: Strikeforce Centauri if you are willing to stretch it. Giant robots fighting each other and, possibly, other vehicles and infantry as well.

[@mauriciomanoel1492]

Do a 10-hour of that to I watch in my TV!!!

[@JDoucette]

I am so tempted to record this!! I feel I need to make more randomness and objects of interest before doing so. And maybe buy a very large hard drive! :)

[@jorge2017a1]

muy sorprendente!!!

[@JDoucette]

:) What is so surprising? I am curious.

[@jorge2017a1]

@@JDoucette Well....it has high speed in fps....it also has great design in relation to curves, textures....and amazing vegetation in excess, many buildings....and bridges...great calculations are needed: ), it's also realistic....it's a beautiful design :)........By the way, the vision is also very broad...that is also surprising...I hope you make a video explaining a bit those math calculations...it would be interesting!!!..... ...I'm also missing a bit of background sound...I don't know if it's music or car sound...maybe just video sound!!!!!!!

[@JDoucette]

@@jorge2017a1 I have a 240 Hz laptop, and this thing looks so amazingly smooth, as the trees whip by, looking like blur motion even though the engine isn't implementing that.

[@JDoucette]

@@jorge2017a1 Thank you for the kind words re: the road design -- I see many Pseudo 3D demos (and released games!) that fall flat, where the road just sits straight for minutes on end, and you don't have to slow down for turns for the first 5 levels. It's like they forgot why driving is fun! Once you have the engine, it's time to have fun with the curves & hills. In my engine, I have no limit on upwards/downwards hill angles, so you can do the "Out Run infinite hilltop" if you wish. I love what Pseudo 3D can do that real 3D cannot.

[@JDoucette]

@@jorge2017a1 I would like to have videos with explanations and math, but this takes a lot of time to set up, and then talk about. Maybe I should make a blog post first (thefirstpixel.com) and then consider a conversation style podcast where I could talk about it. There's an idea!

[@paulbosskenya6537]

maybe already said: engine? i love your idea!

[@JDoucette]

Thanks! Are you asking if this is an engine? I suppose it is becoming one. I'll have to make a simple game that showcases it. Part of the engine will be its ability to message g-forces to the user -- forward, and left/right.

[@paulbosskenya6537]

@@JDoucette hi! i was thinkin unity 3d or godot...i dnt speak english very well....so is it your own engine? if yes this engine is made with java? ( for example )....

[@JDoucette]

@@paulbosskenya6537 Oh, I understand - you were asking which engine I am using. I thought you were asking if it was an engine. :) Yes, this is my own engine -- it is built with C# using the MonoGame framework, which is a multi-platform implementation of the Microsoft XNA framework. MonoGame / XNA is not an engine. It is a framework, which provides you a simple game loop, direct access to input device data, the ability to load images/textures into the GPU, as well as batch up GPU draw calls. But you have to do the work yourself. This is great when you want to make your own engine that doesn't follow the regular rules of 3D. :)

[@JDoucette]

In this case, the road is renderer with one or more horizontal texture strips (1 pixel high sprite), and the objects are rendering as 2D texture blips (sprites). This could totally be achieved with Unity or Godot or GameMaker or any other engine that allows 2D rendering.

[@paulbosskenya6537]

@@JDoucette Jason you are the myth..you are very kind..you have patience..thanks for this video..it gives me energy for a newbie game designer...( me )....keep yourself alive.....thanks!

[@Xonatron]

Could you show how many sprites are rendered on-screen per frame?

[@JDoucette]

I do count the sprites, but it won't be as many as you think, since the "infinite vegetation" is drawn with a single sprite for an entire row to the left, and another for the entire row to the right. So it would not compute the multiple texture repeats that you would normally consider multiple sprites.

[@LumpyMoose]

How is this coded? Explain like I’m 5 ;)

[@JDoucette]

Heh. Well, you start with the basics. Assume just the road, and there are no hills, and no turns. Then you draw one row -- one scan line -- at a time. That scan line is a slice of an image of a road texture ... notice how the scan lines that appear to be further in the distance give this sensation since the scan line image is simply drawn smaller (i.e. thinner). So the thickness / size of the image is related to its distance. 1/Z, where Z is distance. The horizon is distance infinity. The rest of the scan lines have their own distance, which you can calculate with 1/Z. Let's make up some numbers: Scan line 1 = distance 100, number 2 = distance 50, 3 = dist 33.3, 4 = 25, 5 = 20, etc... You can see the 1/x relationship. This gives you Pole Position, a flat road, no hills, and if you want to make it turn, slide the scan lines left and right -- some guys totally fake this, some games try to make it seem somewhat realistic -- so algorithms vary for this.

[@bane679]

cool, can you explain how you did slope and tunnel plis?

[@JDoucette]

Sure! Once you start with a simple straight road, no curves or hills, look at each scan line (each row of pixels). The scanlines are the foundation of the engine. Forget about the road moving forward/back for now, just picture it still. If you slide the scanlines to the left/right, you can simulate a turn. You'll have to understand 3D perspective (which is simply 1/Z is linear) to know how much to turn, and the "momentum" of the road (if it turns left, and becomes straight again, it keeps "moving" to the left into a new vanishing point). So now -- imagine if not only sliding them left/right, you slide them up/down. Now you have slopes.

[@JDoucette]

Tunnels are a very ugly hack right now -- they are just "road-side" objects/sprites. I didn't even split them up, so there's a lot of drawing nothing when rendering these huge sprites on the screen, as most of the sprite is see-through (the part you drive through). Better would be to make them 3 sprites -- the 2 pillars, and the top. Classic arcade games always did tunnels in a different way. It always intrigued me, and I believe most of them were significant hacks/kludges that worked in various ways. All the old-school arcades really had to do was draw black on either side of the road, draw a black sky, and you're now inside of a "tunnel" -- or at least you appear to be. The catch is that if the road turns and should "hide" behind the tunnel walls... You could just draw a black pillar in this location, or multiple black pillars (some games do this -- and you could even texture them). Or you could "shrink" the drawable portion of the screen as you draw further into the distance, so just as the road doesn't render off-screen (your monitor), it won't render "off-tunnel-box". This style is just all one color of black, and eliminates the option of having a texture.

[@bane679]

@@JDoucette hmm ok better to use height map for slope i think but very thanks

[@JDoucette]

@@bane679 I wonder what you mean by a height map? Because the heights is the same at any given distance, a 1D height map could work. For my engines, I don't store the height. I store the slopes. So if the slope = 0, then the road is flat. If the slope = 10 for the next road section, then that road section angles towards the sky. (I also interpolate, in which there are various ways to do so.)

[@JDoucette]

@@bane679 In fact, the current engine you're watching, I handle the slope differently. I handle the slope in the same way that I handle turns. This means that they have "momentum". For example. If the road has 1. a straight, 2. a turn left, 3. a straight, then the result is the road goes into the center of the screen, shift to the left, then continues to the left in a straight line. It has "momentum" to the left. I do the same for the slopes in this engine, meaning that in the same case 1. flat, 2. upward, 3. flat, then after the road rises to the sky, it continues into the sky in a straight line. What's does this mean? It means I can do the Out Run style of an infinite hill top -- you may notice in my videos that the road "rounds" the top of a hill for a very long time... another awesome thing a Pseudo 3D engine can do. :)

[@NeotronicGames]

Lets make a game using this engine!

[@JDoucette]

Yessssss! Let's do it! =)

[@TheProtectorate-yq7vi]

Is everything 2D? I know the sprites are, but what about the actual road/environment?

[@JDoucette]

Everything is both 2D and 3D. Sprites are 2D images, but they are processed in full 3D -- they have an X, Y, and Z component. The road is not so much 2D, since every single scan line (every row of pixels) is an individual object that has X, Y and Z -- which is why it's so smooth with the curves, hills, and bends. However, everything is really only 2D, with a scaling component. Just as the 2D sprites can only ever be viewed from the front (they cannot spin around, even if they go around a sharp turn), the scan lines also cannot "turn". They are always flat to the camera. You never see the road from the sideview, even if it appears that the road turns 90 degrees. Therefore, you're basically seeing a 3D image of something that is representation a 3D road. The output is true 3D, but the object you're seeing is a road that ONLY moves into the distance, and NEVER turns. The turns are fake: The road (and objects with it) are basically strafing (sliding left and right), doing so more extreme for tighter turns.

[@TheProtectorate-yq7vi]

@@JDoucette Fascinating. Thank you for the detailed explanation. I absolutely love this.

[@JDoucette]

@@TheProtectorate-yq7vi That's awesome to hear! :) I see your channel is about all kinds of retro goodness. My heart is still in these games and these retro style engines. I bounce around a lot, as you can see with my videos, but I've wanted to make a racer out of an engine like this since I saw Pole Position in the arcades and tried to make an engine like it (and eventually succeeded in GW BASIC!) Someday it will be a real game and not just a demo!