Skew image block

A feature I’d like to see in Hopscotch is:

a frame block

I’d use it for this type of project:

changing the width/height of an object’s frame to make it appear squashed

Here are some examples of Hopscotch code that could be improved if we had this:

making games from this point of view:

Here is an example design I’ve made:

Frame width: 100, height: 50

I’ve seen something similar in another programming languages, it looks like this:

swift has something like this I believe


16 Likes

Seems similar to the change width/height block though

5 Likes


both images have:

set width (self width) height (self height * 0.5)

the black square is a hopscotch shape that has a:

set angle 45

while the green image is a square that was rotated 45 degrees in the app it was made in—because of that, it looks different, here’s an attempted explanation of why:

the green image is technically already rotated 45 degrees, but hopscotch sees it as having a rotation of 0 so it squashes it as expected

but the black square was rotated 45 degrees in hopscotch, and hopscotch ignores the rotation of an object when setting the width and the height

the frame block would allow the green image to be reproduced in hopscotch without using any other apps, as it would act like the image is at an angle of 0 in its current form (meaning it may be rotated 45 degrees already)

does that make any sense? it’s kind of hard for me to explain

10 Likes

Makes sense.
I support your idea

7 Likes

Yes we need this.
It would make 3D and poly art so much easier

6 Likes

Yeah that makes sense now that you explained it. It would be very practical and I would love to see it in Hopscotch :))

5 Likes

Hi @/Nobody

The name of what you’re looking for to create what’s called an orthographic projection (where the edges remain parallel) is skew. So this would likely be a Skew image block. And I’d 100% support adding that!

Any skewed rectangle can be created from the appropriate combination of 4 right triangles. This is what’s currently done for 3D rendering in HS, but having a skew image block would significantly increase performance by reducing the number of objects required by 4x. A skew image block would also allow skewing of custom images or other shapes that could then be used to make an 3D orthographic projection as in the example from your original post. There’s likely many other creative uses as well.

PixiJS, the WebGL renderer that HS uses, supports skewing so I think this wouldn’t be all that difficult to add to HS. And I think the block implementation would be something like:

Skew Image, x-axis (angle in degrees) y-axis (angle in degrees) , where the angle would be either positive or negative to control the direction of the skew.

9 Likes

i hope this happens cuz it would be cool as coolness can geg

4 Likes

thanks for the correct term + explanation, @SwimGirlStudios can you link the post I’m replying to in the OP?

7 Likes

I like that sir actually no

This would be cool. We would be able to make parallelograms at varying widths and heights without the object being stretched out or deformed.

2 Likes