Iso 3d with sprite stacking and render to texture
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 away the tiles were from the player, to the point of large gaps between tiles.
I posted in different forums online for help and was answered by @Andrew Clitheroe who suggested that perhaps I was taking into account the change in rotation since the last frame, instead of the full rotation of the player compared to it's initial rotation when the tile was first created.
I was indeed calculating deltas, meaning if the player moved 1 degree each frame for 5 frames, I calculated a new x and y for each tile using that 1 degree as reference from the tile's current position, when i should have returned the tile to its initial position and calculated a 5 degree change in rotation. Building upon deltas caused weird behaviour.
I'm working towards my version of asciicker.com.
Now that the engine is finished I intend to convert the code to javascript (it's currently written in as3) and add firebase to enable real time multilayer.
I promise to update when there's something to report
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 away the tiles were from the player, to the point of large gaps between tiles.
I posted in different forums online for help and was answered by @Andrew Clitheroe who suggested that perhaps I was taking into account the change in rotation since the last frame, instead of the full rotation of the player compared to it's initial rotation when the tile was first created.
I was indeed calculating deltas, meaning if the player moved 1 degree each frame for 5 frames, I calculated a new x and y for each tile using that 1 degree as reference from the tile's current position, when i should have returned the tile to its initial position and calculated a 5 degree change in rotation. Building upon deltas caused weird behaviour.
I'm working towards my version of asciicker.com.
Now that the engine is finished I intend to convert the code to javascript (it's currently written in as3) and add firebase to enable real time multilayer.
I promise to update when there's something to report
update:
I had an evening to tweak my "iso3d" engine which has just been collecting dust for the past few months. I should note this is in no way 3d, but rather one large bitmap painted pixel by pixel, made to look 3d using black magic coding.
Well it suddenly occurred to me i could easily change the perspective of the camera up or down by multiplying the y coord of each painted pixel by some value that changed if i pressed up pr down on the keyboard. It really was that simple and the result is convincing!
update:
I not quite happy with the result. The obvious jittering in the last video kept me up and night, debugging my code to see where i went wrong.
At last i found the culprit, a utility function that converted radians to degrees and returned an int value instead of a float. This caused pixels to jitter as the player moved. After fixing that i turned to adding a zoom as the camera changed perspective.
This is my first real "cheat" in this project- meaning this isn't a pixel drawn zoom, but rather a scaling of my canvas. I can live with that as everything else is pixel drawn - no sprites, quads or any display list. A simple render to texture.
source files can be found here:
https://drive.google.com/drive/folders/14eeitkI8Hg5HdXk4d_nFWLfvl_Xr0tc7?usp=sharing
I had an evening to tweak my "iso3d" engine which has just been collecting dust for the past few months. I should note this is in no way 3d, but rather one large bitmap painted pixel by pixel, made to look 3d using black magic coding.
Well it suddenly occurred to me i could easily change the perspective of the camera up or down by multiplying the y coord of each painted pixel by some value that changed if i pressed up pr down on the keyboard. It really was that simple and the result is convincing!
update:
I not quite happy with the result. The obvious jittering in the last video kept me up and night, debugging my code to see where i went wrong.
At last i found the culprit, a utility function that converted radians to degrees and returned an int value instead of a float. This caused pixels to jitter as the player moved. After fixing that i turned to adding a zoom as the camera changed perspective.
This is my first real "cheat" in this project- meaning this isn't a pixel drawn zoom, but rather a scaling of my canvas. I can live with that as everything else is pixel drawn - no sprites, quads or any display list. A simple render to texture.
source files can be found here:
https://drive.google.com/drive/folders/14eeitkI8Hg5HdXk4d_nFWLfvl_Xr0tc7?usp=sharing
תגובות
הוסף רשומת תגובה