cool project!
I’ve updated the triangle issue with some getting started code and instructions!
Also, as @Kiwiphoenix364 mentioned this might be a tough project for someone new to C++ or coding in general
1 Like
the most i have done with c++ was make a simple command line shell for the nintendo ds/dsi
sadly i couldn’t find any graphics libraries tho . but thats understandable the console is 18yrs old and most websites about homebrew dev for it are shutdown or offline
updated with new version, 4-side-polygon fill.
(except color logic is nonsense 
)
6 Likes
Take a look at the triangles.ts file in my renderer demo https://arcade.makecode.com/03733-23293-89994-81627. It’s all based on slicing polygons into trapezoids with vertical left and right edges, and then drawing them one vertical pixel strip at a time in a byte buffer, then copying that byte buffer to the screen with image.setRows(x, buf). It draws the 1-pixel-wide slices of all triangles that intersect this X position simultaneously, so each vertical pixel column only gets written to the screen once. Also, it exclusively uses fixed-point (integer) math for this part of the codesince floating point math is extremely slow on hardware.
At the low level, I’ve done some loop unrolling to speed things up, for example this function that draws two alternating colors for dithering:
export function drawTriLineAlternating(tri: ActiveTrapezoid, buf: Buffer, col0: number, col1: number) {
const y0 = Fx.toIntFloor(tri.a_y)
const y1 = Fx.toIntFloor(tri.b_y)
let y = y0
if (y & 1) {
// Swap the colors so that col0 is consistently on even Y
const tmp = col0
col0 = col1
col1 = tmp
}
let y1end = y1 - 7
while (y <= y1end) {
buf.setUint8(y, col0)
buf.setUint8(y + 1, col1)
buf.setUint8(y + 2, col0)
buf.setUint8(y + 3, col1)
buf.setUint8(y + 4, col0)
buf.setUint8(y + 5, col1)
buf.setUint8(y + 6, col0)
buf.setUint8(y + 7, col1)
y += 8
}
if (y <= y1 - 3) {
buf.setUint8(y, col0)
buf.setUint8(y + 1, col1)
buf.setUint8(y + 2, col0)
buf.setUint8(y + 3, col1)
y += 4
}
if (y <= y1 - 1) {
buf.setUint8(y, col0)
buf.setUint8(y + 1, col1)
y += 2
}
if (y <= y1) {
buf.setUint8(y, col0)
//++y
}
tri.a_y = Fx.add(tri.a_y, tri.a_dydx)
tri.b_y = Fx.add(tri.b_y, tri.b_dydx)
}
Of course, having native code to do triangle drawing would be way faster than trying to do so in TypeScript, so having that would make a lot of fancier graphics possible.
1 Like
I made this triangle renderer but it has worse perf than yours @AqeeAqee :
It was based off of this algorithm. It does have some glitching though.
Also, @AqeeAqee , thanks for making your quadrilateral renderer work with my game! I had trouble because it kept crashing (I wasn’t rounding the numbers, as I later found out.) I will use the version that you made until the c++ triangle renderer is finished and ready for the game. Thank you!
It’s so cool bc now I can do stuff like this:
In case you are wondering:
This project started out as a quest to revamp my old project, which originally was supposed to be a remake of the engine of the flash (and now HTML5) game series “Run.” (run, run 3) That project was entirely hardcoded and used basically no math, with sprites (manually scaled bc no scaling), rotation that wasn’t proper, and bugs (not to mention the fact that the tunnel only had 4 sides, and wan’t perspective corrected.) This project resolves many (if not all) of those old issues, but I don’t think I’m going to be just ripping off the original Run games. I’ll try to make it unique, even though it will still be running through gravity changing tunnels, like it being first-person (probably) and maybe with some sort of collectible. It’ll be inspired by the look of the original games, but it won’t be a remake.
4 Likes
Is it possible to add curves and make this into a runner like thing?
example
3 Likes
Neat! This is an excellent example! I may not take the effort on implementing this algorithm depending on how long it takes for the C++ to be written (as there already is one that runs), but if it takes a long time for the C++, I will definitely put this to use!
3 Likes
YES @Brohann , I just added some math and this is what I have now:
Use the second player’s controls to change the angle. (I,J,K,L)
I’ve also been working on adding collision checks, I added the ability to change the number of sides again in-game with up/down (again), but with some amounts of sides the level isn’t shown bc there is the wrong number of columns in the image. The collision checks use some math with angles to efficiently show whether you are inside the tunnel or not (I’m super happy with this logic). I don’t have the collision logic done yet, but the number of hearts switch between 7 and 3 when inside/outside the tunnel.
4 Likes
Native triangle and 4-sided polygon fill is now in beta, courtesy of the wonderful @AqeeAqee! https://arcade.makecode.com/beta#pub:_J7PYHh23dWDw
My usual beta disclaimer: Don’t do anything important in beta or open projects you care about! Beta is for testing new features only!
6 Likes
YAYYYY! When will it get out of beta? It would be cool to see it very soon. Maybe even as a quick patch and not a full update if the next full update will take a while to come out (assuming the code doesn’t have bugs)? Either way, this is super exciting! Can’t wait to play around with it for my game!
1 Like
haha, I’ll try and do a hotfix for it in the next week or two!
4 Likes
Thanks!!!
1 Like
A Tangram Puzzles Animation, demo of fillTriangle/fillPolygon4.
(Have to show a snapshot here, Gif can’t record correctly. And thumb doesn’t work, probably project was shared to formal site though I clicked on beta site?)
Inspired by a interesting usage of scene.createRenderable() in one of @richard 's fill triangle demo project
Note, both projects runs on BETA site only, until this feature is published to formal site.
3 Likes
Oh dude, I love tangram! We had a project in school once where we played around with various combinations! That aside, your projects are incredible, the fast filling functions are super advanced, great job!
2 Likes
WOW. I don’t think I’ve ever been more confused in my entire life. Like, I’m actually trying so hard to think of a time I was more confused, but I just can’t find one.
1 Like
Hey we did a thing
Thanks again for the great prs!
4 Likes
Wow, it is released hah!
No problem! It’s my pleasure, of course, to contribute back to great Makecode Arcade!
Thanks for you and @richard 's trust, this is a wonderful journey. 
3 Likes
Thank you so much @richard, @jwunderl, @AqeeAqee, and whoever else (like other members on the MakeCode team) contributed to this release! This runs super smooth now!
This will also allow for other 3d rendering systems to be developed, not having to work pixel-by-pixel, greatly improving performance! While my project most likely still won’t run on hardware due to the other math, these changes allow for much better performance in the sim! I could see many great uses for filled polygons in the future, and I’m excited for what will be possible in the future!
5 Likes
I wonder if anyone is going to try to expand apon this.