3D Platform in Hopscotch — Topic



I came up with two pretty good ideas, but haven’t tested them.


“Masking” A grid / matrice covering the projection surface holds information about how far away from the camera the closest “face” occupying a cell in the grid is (range 0-9 or 00 - 99). Every framme, all faces check if the cell they are in contain a face clowner to the camera than themselves. In that case, the face is not drawn. This would be simplified (and perhaps look better) if combined with a maximum render distance.
Pros: No upper face limit, works with HS objects too
Cons: Would lag behind one frame (at least how I imagine implementing it), faces cannot be partly covered


A limited amount of “face drawing units” (groups of clones) are created sequentially, with regard to clone order. The information about each face is stored in separate objects/clones (which do not render them), and depending on the Z order of these faces they will assign the rendering to the corresponding “face drawing unit”.
Pros: Looks good
Cons: Only works with trails (since objects are always drawn on top), limited amount of faces being shown at the same time


Once version 3.33.0 is released, the new Set width/height block can be used to scale triangles appropriately to render 3D graphics…

Without being able to skew the images, it’ll still require 2 right triangles to represent any required scalene triangle, but I think this will be much easier than trying to use trails.

Nominations for Featured 2!

Hey, that’s awesome!
For a while, i’ve thinking about getting the subscription in order make a 3D project with preset triangle images, with known proportions. Height/width settings would be more exact, and easier to use.

Are they in the beta yet? I hadn’t heard about them before.


The Set Width/Height block is in the 3.33.0(19) beta.

Ironically, I just started a project last week with the subscription for 3D rendering using pre-made triangles at different scales. Had to write vb.net code to create a whole set of images of triangles at the exact heights/widths I wanted, then of course upload them all into a project, followed by using nested conditionals to Set Image to the right one based on the desired angle. The new Set Height/Width block will be much easier.

My thought was that a scalene triangle such as this:

Could be drawn using 2 right triangles like this:

This way the triangles can all be scaled from Hopscotch’s default right triangle.


If their Right Triangle couldn’t you use Sohcahtoa?


After using transformation matrices to calculate rotated, translated, and/or scaled x/y/z coordinates, and projecting/transforming into screen x/y coordinates, you’d have x/y coordinates for the 3 endpoints. One could use Law of Cosines to find angles (of the scalene triangle), then trig (like “SohCahToa”) to determine the lengths (of the right triangles), and then cross product to determine face normals (for visibility).


Test of a rendered triangle (actually requiring 2 triangles as mentioned above) undergoing 3D rotations:

Seems to work almost perfectly. This can be easily extended to render any 3D object defined by triangular surfaces.


That’s cool. Do you know how big of a performance impact the code has? (As an example: A house = 5-10 faces with 2 triangles each = 20 triangles = 40 objects)
The use of objects could of course be optimized by, for example, only rendering the visible parts of a cube or using the delete clone block.

Could I use, or look at the code for rendering the triangles? I’ve been thinking about a way to do it, but I haven’t tested it and I really don’t think it’s the best way to do it.

I’ve done some work on a 3D frame work to be used with objects and triangles, with a simple implementation of a ”set layer” function. It’s not finished yet and I haven’t worked on implementing triangles yet.
Performance-wise I think it’s pretty optimized, it rendered 500 small circles at around 10 FPS. I’ll have to check that though.


I haven’t assessed performance yet or optimized the code as it’s just a proof of concept at this point.

Right now, the rendering code has 8 rules (1 block each) in the 1st triangle, and 3 rules in the 2nd triangle. Though I also need to calculate face normals for visibility, which I haven’t added yet (I’m planning to make faces invisible if they’re facing away from the viewer, which assumes they’re part of a solid object)

I’m certainly happy to share the code. Though I noticed a glitch at certain orientations that I need to correct…


Face normals can also be used to calculate the color of the faces.

Here’s 600 circles rendered at 17-20 FPS:

I’ve optimized it enough so that if you turn the camera away from all objects the framerate goes up to 40 FPS.


@CreationsOfaNoob Here’s a simple demonstration project to show the rendering process made possible with the new Set Width/Height block

Do you have the 3.33.0 Beta?

The only significant change from what I described previously is that I added 3 sets of equations depending on which side of the triangles is the longest (since the 2 right triangles that make up each colored triangle need their 90 deg corners on a point on the longest edge)


Just based on the thumbnail I can see that this Set Width Height block is so helpful and will be used a lot for 3D rendering because of the artificial viewing angles you can create :)


@CreationsOfaNoob, would you mind describing how that works? With only Bring to Front & Send to Back, I can’t think of a way to “set layer” for n objects faster than O(n)


It’s a bit simplified.
The ”set layer” code only executes so often, and the intervals are longer if the camera is staying stationary. When it does execute, it finds the farthest object from the camera and the closest. All objects then ”send to back” ((self distance - closest object distance) / (furthest object distance - closest object distance)) multiplied by a preset amount (which determines how many layers the objects will practically be grouped into)

There’s also a maximum render distance, which means there won’t be as many objects to consider.


Makes sense and sounds like a reasonable compromise

But this part still requires O(n) for n layers, right?


The new block in Hopscotch Beta (set width/height) will make 3D rendering a lot easier. I might even be able to do it now lol.


That sounds good! I probably couldn’t do it even if you gave me 500 trillion years.


If we gave you just 50 years to focus on it, there would be no way you couldn’t get it. You have all of the resources needed to figure it out.


oh well


@CreationsOfaNoob FPS is looking pretty good (but is also device dependent of course)

With 216 polygons (rendered using 432 triangle objects) the FPS starts in the high 40s before the device starts heating up. And returns to 60 when the display isn’t be changed.


Is it possible to make a 3D platformer in hopscotch?