Yonny Zohar - game developer & designer

A while back I posted about my pseudo 3d isometric experiment: https://yonnyzohardesignblog.blogspot.com/2020/04/pseudo-3d-isometric-view.html The original code painted a world pixel by pixel from various bitmaps, sliced into layers that resembled a fake 3d "cake" layering effect. I kept working on it and developed the idea a little. The original code simply spread out houses and trees around the player. I wanted to create an actual map grid I could then have more control over. Also, the old code was actually VERY slow, running redundant iterations that slowed things down significantly. I created a grid and set trees and houses in set tiles, and even added ground tiles - all drawn pixel by pixel. At first glance it looked great, but then I rotated the player, and a serious bug emerged. The tiles surrounding the player kept their grid alignment when rotating around the player, but the ones farther away began moving out of alignment. This got worse the further a...

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 sampl...

Optimized ray casting: A while back i created a wolf 3d like pseudo 3d engine. The player shot out "rays" towards the walls based on his facing direction and drew the walls that were hit on screen, scaled by the ray length / max distance. My ray casting code however, was very inefficient. It simply increment the ray by 1 pixel until it hit a wall. When firing one ray this is ok, but when firing 1000 it can hinder performance. On a grid consisting of tiles with a fixed size we can know how far we are from the next row / col and calculate the length of the the beam we need in order to pass through the current tile.In each tile we know how far we are on the x and y axes from the next tile. we also know our current angle. What we need to do then is calculate which triangle constructed from each axis will bring us to the next adjacent tile. I had to brush up on high school trigonometry and found that you can use tangent to find the adjacent side of a triangle when pas...

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. ...

This project began as an attempt at recreating the cobweb behaviour in the game "World of Goo", and the current result is pretty interesting. We start out with a grid of nodes. When pressing on one of the nodes it becomes the "center" node, and all surrounding nodes "point" to it. (If you look closely you can see small arrows on each node). Depending on the position of the selected node, each node is assigned the destination position it needs to aspire to. For instance, the node directly above the selected node must now always aspire to be - directly above the selected node. All nodes move towards their designated position with an easing factor, which creates the smooth animation. Finally, lines are drawn using a drawing API between the nodes on every frame. The result can serve as a good bases for the simulating the behaviour of flags in the wind, waves, or even schools of fish... Pretty cool huh? Source Code can be foun...

I started fiddling around with drawing trees with code. I have something very basic but it looks like a good start. I start out by placing a point on screen and giving it a base angle to grow towards using a random offset from a given angle. I then set a random growth amount (radius) and come up with my second point, to which i stretch a line. I then recursively move to the next point using the current angle as the new base - and repeat the process. This alone gives you a nice stalk, but not yet a tree. A tree needs branches. From the second point onwards i randomly pick a number between one and two and call the same recursive function in order to create my branches. Each branch is simply a new point, sprouted from its "parent's" position and angle, with a random offset. To prevent my tree from growing forever I determine a global growth value from which i subtract with the creation of each new branch. When the growth values reaches 0, the recursive fun...

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, ...

In a previous post we saw how to simulate a 3d road, or world in first person using only pixel manipulations. Today i'd like to show another example - a sort of screen saver that simulates depth by playing around with pixels. We need 2 images - a picture to sample pixels from, and a blank canvas to "paint" to. As show in the video, we're going to simulate a moving image that seemingly flies around in space. We define a percentage value for each of the four sides of the destination image. For instance, we want the top row to be at a width of 50% of the original image, the bottom row to be 100% (as show here) 0,0,0,1,1,1,1,1, 0, 0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 1,1 , 1 ,1 ,1,1,1,1,1 ,1, We then calculate the distance between the rows, and the required width of each row along the way using percentages (between 0.5 ...

We're still dealing with Pseudo 3D retro games - The creation of 3d worlds without using a 3d engine, models etc - but rather simple pixel manipulation on a 2d canvas.Today I'd like to show an example of the beautiful classic - Wolfenstein 3d - which was a pioneer in the pseudo 3d category.In previous posts we saw how to simulate depth on a static image of a road, by progressing towards an imaginary distance. We did so by drawing the pixels in each row of the road according to a set percentage that got smaller as we progressed towards the distance.In Wolf 3d the creators used a similar approach. They split the screen into columns and filled each column with a "wall segment". The height of each wall (the number of rows the pixels of each segment took up) was determined by the distance of the player to that wall.How do you calculate distance and depth in a 2d canvas? By using a technique called "Ray casting".You start out with a 2d map (can be seen in t...

Long before the invention of 3d rendering engines, we had some crazy "3d" games - like Wolfenstein, Doom and Outrun. These games managed to simulate depth and immersion using clever pixel manipulation techniques, broadly called "Pseudo 3d". Without going too much into what 3d rendering engines are and how they work, a "true" 3d engine creates an actual 3d space and navigates through it using a camera object inside that world. The computer creates points in space known as vertexes that add up to a "3d mesh" - and fills the space between these vertexes with textures. Each frame rendered to the screen takes into account all the vertexes currently seen by the camera, and the 2d screen position of these vertexes is extrapolated from their 3d "world" position. In a pseudo 3d world we use flat images that undergo manipulation in order to simulate depth. What's the difference? The difference is that if we were to simulat...