Sliceable Gui Frames

jaipack17 · August 15, 2021, 2:38pm

Hello once again!

Heres something I created today. Sliceable guis. You might have seen the “Sliceable Bread” showcase on youtuber. (if you haven’t then: So I decided to slice bread in Roblox Studio ... (with scripts) - YouTube). This gave me the idea to replicate the same onto a 2D Surface. Heres a rough showcase of what I made. currently, slanted cuts aren’t a thing. Though I am going to add it using @EgoMoose’s 2D Triangles article, which I found really fascinating to read.

Currently works only for Frames. LeftClick on your screen to create two points. On those 2 points, a line will be created which will be infinitely extended in both directions. Using some quick and easy math using absolute values, The frame is divided into two! (Well not really, the frame is divided into two clones)

If you want to try it out for yourself, then here you go

https://www.roblox.com/games/7258867914/Sliceable-Guis

DeveloperPuma · August 15, 2021, 4:29pm

Funny idea! But maybe you could also add diagonal slices

MrLonely1221 · August 15, 2021, 4:32pm

This would be tricky because here he’s just creating a new Frame and doing some math for the size and position.

To do diagonal cuts you would need triangles, which Frames are not.

jaipack17 · August 15, 2021, 5:13pm

github.com

EgoMoose/Articles/blob/master/2d triangles/2d triangles.md

# 2D Triangles

On occasion you may find it necessary to draw triangles given three points in 2D space. This article aims to go over one method that can be used to create those triangles using knowledge of trigonometry and the 2D rotation matrix.

## Table of Contents

* [Triangle decomposition](#triangle-decomposition)
* [Positioning the UI](#positioning-the-ui)
* [Positioning the UI Anchor points](#positioning-the-ui-anchor-points)
* [Optimization](#optimization)

## Triangle decomposition

The first thing we need to be aware of is that Roblox does not have a singular default shape that can be used to create any 2D triangle. However, using image labels we are able to upload right-angle triangles. Thus, we can decompose any triangle into a maximum of two right-angle triangles and draw from there. We can easily draw this process by placing a perpendicular line on the longest edge and having it intersect with the opposite vertex.

![img1](https://github.com/EgoMoose/Articles/blob/master/3d%20triangles/imgs/img1.png)

Now that we understand the basics of our goal we have to ask ourselves how we can achieve this mathematically. We'll start this process off by finding some information about the triangle depending on what side is the longest.

![img2](https://github.com/EgoMoose/Articles/blob/master/3d%20triangles/imgs/img2.png)

This file has been truncated. show original

EgoMoose saves the day yet again! I’ll be using trigonometry to do so!

MrLonely1221 · August 15, 2021, 5:20pm

It kinda sucks that you can’t rotate UI Objects and have them get clipped still otherwise this would be much easier.