Carrier 3D (unfinished work in progress)

Since it doesn’t seem like I’ll be finding time to work on this project in the near future, here’s a work in progress snapshot of what it currently looks like:

Consider this a graphics demo, there’s no gameplay and no flight or collision physics.

It’s currently intended to be used in the emulator using both control inputs:

  • A/D: roll left/right
  • W/S: pitch down/up
  • J/L: yaw (rudder) left/right
  • I/K: throttle

While it does technically run on my PyGamer, I think it’s a bit too slow to be usable there.

15 Likes

This is really good. I can’t wait for the finished project. And maybe even controller support.

This is cool I can’t wait to hear about someone how thinks they can fly with their wings perpendicular to the water!

Hey, a knife-edge pass is a legit aerobatic maneuver, I’ve seen the Blue Angels do it :slight_smile:

Of course, in the current program version you can just edit the code to set minThrottle to zero and park your plane in the air, or a negative value if you want to fly backwards. Like I said, there’s currently no flight physics at all, the “plane” simply moves in the direction you’re pointing.

There’s already partial controller support, the arcade emulator uses the web Gamepad API which should pick up a connected game controller. I think that’s limited to a single two-axis stick and two buttons, but you can hold the B button while moving the stick Y axis to change the throttle setting.

3 Likes

So cool! I played it right when it came out (I got a notification from the reply on the other post) and I just got the chance to post this like four hours after school. I’m excited that this is finally out even though there isn’t physics yet!

2 Likes

Gorgeous, @kwx !

@TZG , you could play this with controllers … but you’d need two controllers. Player 1 d-pad would control pitch and roll; player 2 d-pad would handle yaw and throttle.

1 Like

I love how i just clip right through the ship for some reason.

YOOOOOo this is epic. Cant wait for the product to be finished. I’ve landed it a couple of times (and crashed) But I made it a few times. this is a well-done game.

Anyone want to make a game console on Arcade with me?

well thats good to know.

WOW! That is amazing. Great work! I can’t even being to figure out how to program 3d games.

Lots of math and calculations, @GoMustangs . :slight_smile: The video card in your computer takes a ton of information and then crunches a bunch of numbers to be able to draw images on your screen.

But, there is a lot you can learn about 3D drawings that don’t involve calculations. Those techniques can add some really nice effects to your 2D drawings and images, like the ones we use in MakeCode Arcade. If you have an art teacher nearby, talk with them about perspective drawing, vanishing points, and related topics.

2 Likes

Thanks for the tip, I’ll ask my school’s art teacher about perspective drawing and vanishing points.

I’ve actually been actively trying to get something to work in 3D. I’ve gone through the khan academy module on making 3D shapes with X Y and Z, but I think it’s going to take me a couple more months before I can get my head around the sin, cos, and tan stuff.

2 Likes

@GoMustangs - if you’re curious, you can take a peek at the “triangle.ts” file (select it in the Explorer section on the left, below the emulator), though that doesn’t really explain much of what it’s doing. Maybe search for “Trapezoid” which has a short comment explaining how those are used - all the graphics in the app are based on that.

In short, it works something like this:

  • design a shape using a 3D editor, or alternatively just by drawing front/side/top views on graph paper:
  • get x/y/z coordinates for 3D points (vertices), for example point #0 is the front right corner of the landing strip at coordinates [-0.8, 1.5, -4]. See “CarrierModel” in the main.ts file.
  • connect the points to make faces, for example the landing strip consists of points [0, 1, 2, 3].
  • use a bunch of matrix math to place the object somewhere in the world and orient it to match the viewing angles. That sounds fancy, but it’s basically just a bunch of multiplications and additions.
  • do a perspective transform, basically dividing coordinates by distance so that further objects appear smaller. (That’s not quite correct, but it’s the general idea.)
  • now you have a bunch of polygons that you want to draw on the screen. These need to be clipped to the screen edges and sorted - it needs to draw far-away objects first and near objects last. See “clipPolygon” in triangle.ts.
  • now there’s a bunch of trapezoids in screen space. Draw the screen a vertical column at a time, filling in the one-pixel-wide slices of each trapezoid in the right order. This needs to be as fast as possible, so there’s specialized functions such as drawTriLineAlternating which fill in larger blocks of pixels with as little per-pixel overhead as possible, and the Renderer3D methods take care of that.

I guess that may not be very helpful - it’s a quite complex topic, I just wanted to give a small peek behind the scenes. Personally, I think it’s good motivation to pay attention in math class since 3D graphics are a great way to use a lot of the skills and concepts you learn there, for example trigonometry is essential for drawing the heads-up display.

Does anyone happen to have a link to a beginner-friendly article or video about 3D graphics?

3 Likes

I’m making roblox maps. idk if that’ll help though

Also, can you tell me what you’re doing here? trapezoids, and numbers. it doesnt add up to me. they sizes? Angles? length?

That’s actually pretty helpful for me to think about. Thanks!

Are the “.ts” files typescript?

@GoMustangs - yes, the .ts files are Typescript (Javascript). I think for math-heavy code it’s a lot faster to type than to assemble calculations from blocks.

@Dreadmask197 - this gets a bit complicated, and I’d really recommend looking for a book or online course about 3D graphics. In short, the x/y/z coordinates for points are measurements giving their location. In my sketch of the carrier, the top-down view has the X axis going right and the Z axis going down. The Y axis is the height above the ocean surface, so the front view has X going right and Y going up.

Each square of the graph paper is one unit, so you can get coordinates by counting squares. Then you connect the points to make faces, for example the landing strip starts at point #0, continues left to point #1, and finishes the rectangle through points #2 and #3.

Once you have all these numbers, you could draw a front view of the carrier on the screen by converting the X/Y coordinates to pixel positions. Adding a constant to the X position moves it left/right on the screen, and multiplying the X value can make it appear larger or smaller:

screen_x = offset_x + point_x * scale_x
screen_y = offset_y + point_y * scale_y

(This is ignoring perspective, the actual calculation would get a bit more complicated due to that.)

If you want to draw it at a different angle, you need to mix together the different coordinates, each with its own multiplier, so you get something like this:

screen_x = offset_x + point_x * m_xx + point_y * m_xy + point_z * m_xz
screen_y = offset_y + point_x * m_yx + point_y * m_yy + point_z * m_yz

When you collect all the m_xy multipliers in a 3x3 grid, that’s called a matrix.

2 Likes

I don’t know if this will help or not

@kwx could it theoretically be possible to make a 3d engine with marching cubes? (I don’t know, but it’s just an idea, and I don’t know much about JS or 3d algorithms).