JavaScript
Getting Started
Browser Information - If you have access to Internet Explorer, I recommend using it. All these lessons are being written using IE for testing since it’s the only browser I have access to that works without any browser related issues. If you get any of these tutorials working properly with other browsers, feel free to submit the code.
5K Wolfenstein was written in JavaScript using the same XBM format. The alternative was using Dynamic HTML which requires a rediculous amount of resources for what these tutorials will be doing. It also is far more difficult to use which just results in a mess of code which complicates things more than they need to be.
The XBM Format
XBM - This covers all the necessary details of the XBM format.
Getting Started With Two Dimensions
Lesson 1 - This lesson demonstrates getting the viewing area initialized and then pumping random values into it. The idea is that if you can get random data to show up then you can get any sort of data to show up. The next lesson will begin demonstrating how to put pixels on the screen in an intelligent fashion.
Lesson 2 - This lesson implements the PutPixel function which will be the basis for all things graphical. It also demonstrates the math required to rotate around a point and move based on an angle of movement. These two concepts form the basis for 2D rotation and translation.
Lesson 3 - This lesson extends the PutPixel function with a DrawLine function. We’re also going to combine translation and rotation so that a polygon rotates based on the position of a “camera.”
Lesson 4 - Now that you know how to move and rotate things around it’s time to take a break from polygons and move into solid objects. The most simple solid object is the sprite. In this tutorial we’ll demonstrate how to create and animate a sprite.
Lesson 5 - Now that you know how to draw a sprite it’s time to learn how to draw a filled triangle. You’ll see how the unit vector and line of sight algorithm come into play yet again.
Lesson 6 - So now you know how to draw a sprite and how to draw a filled triangle. Now it’s time to learn how to use that sprite as a texture to fill the triangle with. And guess which equation you’ll be using again…
And this concludes our lessons on 2D. We’re going to now dive into three dimensions. But, as seen in Lesson 5, doing filled triangles is computationally expensive so we’re going to stick to wire frame graphics. We won’t worry about texturing again until we start working with 3D graphics in PHP.
Getting Started With 3 Dimensions
Lesson 7 - This is our first jump into 3D. In this lesson you’ll learn how to set up a Center of Perspective and how to plot pixels using perspective.
Lesson 8 - Time to get a little more advanced. We’re adding in 3D line drawing and 3D rotation using Euler Angles. Using Euler Angles is actually the “wrong” way to go about rotating objects in 3D space but I think it’d be better to show how Euler Angles work before demonstrating a better way in Lesson 9. The concepts behind Euler Angles are important anyway.
Lesson 9 - In this lesson we’re going to fix the pixel plotting, fix the line drawing and introduce you to quaternions. It’s one thing to be told something is the wrong way to go about doing something. It’s better to understand why it’s the wrong way.
Lesson 10 - In this lesson we’re going to demonstrate how to move around in 3D space. For this lesson we’ll stick to moving forward, back, left, right and rotating around the Y axis.
Disecting Wolf5K
I did not write Wolf5K, I just know how it works and am posting lessons on how it works for those who may be interested. You can find the original program at wolf5k.com. The goal of these lessons is to explain the concepts behind Wolfenstein 3D (which Wolf5K uses) before moving on to bigger and better things.
Lesson 11 - The first lesson is going to cover how the sprites are stored and how pixels are plotted and the final screen shown to the user.
Lesson 12 - This lesson covers how the font is stored and the level number, points, etc are shown to the user.
Lesson 13 - This lesson covers user input. You’ll learn how JavaScript processes keyboard events and how user input is processed by Wolf5K to move the user around the map.
Lesson 14 - In this lesson you’ll learn how the sprites are drawn and how the game is initialized.
Lesson 15 - This lesson covers the rest of the main loop which handles monster AI and calling the functions which render the screen.
Lesson 16 - And finally, the lesson which will explain the ray casting function used by Wolf 5k.
Wolf 5K Deobfuscated - Play Wolf 5K and view the entire deobfuscated and commented source code. Use the View Source feature of your browser.
And this concludes all the JavaScript 3D tutorials. I may come up with some other things to try out with JavaScript later but the goal now is to move into PHP and begin working on Ray Tracing. PHP gives us the ability to use True Color graphics which will be very nice and since we’re just starting, not being able to do anything real-time is not an issue. PHP has a slight disadvantage in that although it is free, it takes a bit to get it installed and running on your system. That will all be explained in the coming tutorials.
- No comments yet.
- No trackbacks yet.