3D Platform in Hopscotch — Topic



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?

My iPad Air must be getting really old, only ran at 15 fps and took a couple minutes to setup all the triangles


That looks awesome!
You could cut the object count almost in half for it though, by creating one large black cube behind the colored squares instead of one square behind each.

Also, I believe the blue and green faces should be on opposing sides, same for orange-red and white-yellow.


It loads & runs slowly (~25fps) on an iPad Air 2 that I have as well. The rates noted above were with an iPhone 8.

The loading time can be significantly improved by setting up clones in parallel, however initially I coded it serially to make it easier to work out the algorithm for iterating through all the surfaces.

I used 9 smaller black squares instead of 1 large one to test the FPS. And also because the borders of each individual square will need to rotate with the square when I add the functionality & additional 3D tranformations so the cube actually works. To make it look completely right, even more black squares will be needed for the interior surfaces that can be partially seen as you’re rotating a given row/column.

Those additional surfaces and 3D tranformations will further slow the FPS so I think you’re right, the number of surfaces will need to be optimized. However, to do that I might be able to use a custom image for the right triangle. It’ll have a border only on 1 side so 4 triangles can make the square without lines across its face. Although that may be problematic for the rendering algorithm as I’m not sure if the triangles are always oriented with the same edge on the border. We’ll see.

If that doesn’t work, there’s always more efficient ways to utilize a smaller number to squares, but will add complication.

I’ll fix the colors. Thanks. Didn’t pay much attention when assigning them.


That’s true. I suppose the rotating will be animated?

About the custom image, there might be a problem if the line gets thicker/thinner depending on the set width and height.
You could make 3 different images with a black line on one of the sides each. That way you wouldn’t need to change the rendering algorithm.

Have you thought of adding perspective or are you going to keep it orthographic? It might not make too big of a difference on that scale, but could be nice for realism. Also, it might mess with the hiding of faces that are turned away from the camera.

I’m going to test something here:


It works in a web browser believe it or not but not the app


That’s really cool though. You discovered this, right?


Yes, a few days ago I realized that ThinBuffalo’s 3D rendering worked in web browsers but no the app, even though everyone has the beta version’s webplayer (pushed out December 20th)


@Petrichor @CreationsOfaNoob @ThinBuffalo

It is definitely the beta webplayer in the app, though something in the native app code doesn’t let the project run with the new features


rip idea of functioning MC in HS


The embedded project is cool. How do you do that?

Yes, I’m planning to animate the row/column rotations. Using different images with different borders is a good idea, if necessary. Although after thinking on it some more, I believe the triangles are always oriented with the hypotenuse requiring the border.

I was planning to retain the orthographic projection. Don’t think perspective is necessary for that specific project. Although I do want to change the rotation control to a virtual trackball if possible.

<iframe width="640" height="480" src="https://c.gethopscotch.com/e/zx1c0jzs6" frameborder="0" allowfullscreen></iframe>


Well, there goes all practical uses of large-scale 3D rendering unless you are on this year’s iPad Pro


Quick question: Does set image work on older projects now? (Try it on my penguin slides project in the beta app with a new object) @CreationsOfaNoob @ThinBuffalo @Petrichor


True, but projects with fewer faces to render can still be impressive & inspirational. Too many “older” Hopscotchers seem to think the language isn’t capable of sophisticated projects, but I tend to think they just lack the education, experience, and/or imagination to understand what’s possible. Let’s change that perception :smile:

Yes, I was able to use the Set Width/Height block on a project created in an older version of the app.


I mean large 1:1 creations like a Minecraft recreation, full scale iPad remake like E-Pad, or something of that matter – that’d run at 4 FPS on the newest devices thanks to the great webplayer performance.

I consider a Rubik’s cube like that still small-medium scale, turning into medium-large scale when turning gets added. @ThinBuffalo

That is why I made Minigames 2 – to greatly reduce objects and maximize efficiency of each one to 1. reduce lag and 2. make a better version of the original.
That is also why MagmaPOP (3% of people will understand what I mean)