Raycasting engine - polished


So i've been hard at work on my wolf3d raycasting clone, and have added floors, ceilings and furniture. For more information on what ray casting is, check out my previous video:
https://yonnyzohardesignblog.blogspot.com/2020/04/were-still-dealing-with-pseudo-3d-retro.html
Anyway, the furniture is drawn after being hit by a ray, except it is not drawn column by column like the walls, but rather as a single blit, and scaled by its distance. This means it looks the same regardless of angle, although you could always prepare in advance different images to be blitted at different angles (36 images to be changed every 10 angles for instance).
The Floors however we a completely different story. I ended up using a technique called "mode7" - creating an off screen bitmap, equivalent in size to my map, populated with floor tiles. I then defined a near and far plane that stretched from the left most angle of my line of sight to the right most angle. I then began sampling each pixel in my screen and checked where it mapped to in my FOV (field of view), and finally translated that to a pixel in the off screen bitmap -> and then back to the screen pixel. It's a technique so simple, utilizing so few lines of code, it's scary.

 Update:
So i think i'm about done with my ray casting engine. It can be tweaked and improved forever but i'm getting a bit sick of it so i thought i'd recap before moving on to the next best thing:
1. ray casting is a technique where lines are "drawn" outwards from the player's position across his field of view until they intersect with wall tiles in a 2d grid. Based on the each line's or ray's length, a column of pixels is drawn on screen from left to right, where each pixel column on screen maps to a ray. 2. To create an illusion of depth, walls can be assigned different colors based on distance, or textures based on numbers assigned to tiles. Since the grid is made of tiles with fixed sizes and locations you can easily map the coordinate your ray hit on the tile to a percentage to sample a texture from. 3. In order to create a ceiling and floor you can define "near" and "far" planes that slice through your field of view and sample pixels within that area to create an illusion of depth. 4. Furniture and other objects are not drawn column by column but rather blitted as a whole and placed on screen according to their angle relative to the player's field of view. 5.Finally, enemies can be placed in the scene and given some AI of your choosing. In this, simply move towards the player when he gets close. This was a truly fun exercise that taught me allot about 2d and 3d graphics. I've developed an appetite for the the next pseudo 3d engine in line - the BSP engine (binary space partitioning) used to create Doom and other more advanced pseudo 3d games.
As usual, all source code is available here:

תגובות

הוסף רשומת תגובה

פוסטים פופולריים מהבלוג הזה

Thoughts on HTML5, a Flash Developers hopeless rant

My name is Yonny Zohar, I'm a game developer with six years experience. I've worked on several commercial titles including " Bingo Island ", and have recently made the move from flash development to html5. Six years ago, while i was learning flash, i worked simultaneously with html, CSS and js. back then my impression was that flash was simply light years ahead in terms of development ease, code maintenance and error handling. Returning now to html5 six years later, I was very weary - had things improved since 2009? I've spent the last several months hearing from everyone around me that the answer is a definite "YES". I'm here to say- the answer is still a definite NO! Lets begin this rant with my number one hatred - CSS: NO DEBUGGING - Debugging css is awful. you spend days trying to figure out why elements don't behave the way they should. Try adding and removing properties to elements hoping it will make them act the way you want or
המשך לקרוא

Pseudo 3d Isometric view

תמונה
Today i'd like to demonstrate another nifty use for pseudo 3d pixel manipulation - 3d isometric view! We've all seen 2d games using isometric view, mostly popular in early strategy games like Age of Empires, or StarCraft. Rotating tiles 45 degrees creates the illusion of depth, which brings us closer to a 3d feeling. However, using pixel manipulation and simple geometry we can do better and create a much richer sense of 3d. The attached video shows a map created completely with 2d pixel manipulation, although it appears 3d. The effect is achieved by creating each image (building and tree) like a cake - layer by layer, with each layer getting a slight offset on the Y axis (known as sprite stacking). For example, the bottom layer of the tree will be drawn at its determined x and y, and the following layer will be at (x, y - 2). Our tree is made up of 10 layers of stump, and 4 layers of green leaves. Our building uses 20 layers, some consisting of the same image,
המשך לקרוא

Veroni Noise

תמונה
Inspired by news reports of the Corona virus I'm demonstrating how to create a simulation of what looks like cells or viruses under a microscope. The attached video depicts what may appear to be microscopic organisms running around under a microscope. In Fact this is a bitmap canvas, drawn pixel by pixel, using a method that calculates the color for each pixel based on its distance from set points. First we separate the canvas into logical rows and columns, creating an invisible grid. Then we select a random point in each tile, which will serve as the tile's reference point. We then iterate over all the pixels in the canvas, and check each pixel's distance from its nearest reference points. We take the 2 closest points and sum them up to get the total distance from the first point to the pixel to the second point. We then divide the distance to the closest point from the total distance to get the pixel's current percentage within that distance.
המשך לקרוא