Custom 3D GUI Game Engine With Textures

Sure sure!
My renderer btw is just like 50 lines of unoptimized ray casting etc. Very very basic just wanted to put this together to help you.

Yeah haha mine doesn’t do 360 fov really. Update, apparently mine thinks that 180 is actually 360.

Here’s mine at 180 fov which is the max apparently for mine.

Are you doing this in a square room?

Because if so, then for some reason the math.cos thing makes my picture look like this:

So, in a square room mine looks the same as your just about, or at least it would if my math were right.

This may look strange but really it’s the same as yours, but for some reason my pixels are no longer sticking to the center of my screen, and also the pixels on the eldes of the screen won’t show but im certain if they did they would look like yours.

How are you positioning your columns?

I’m using a UIListLayout and setting their vertical allignment to center. It’s weird that it’s deviating from that when it’s a built in UI constraint.

huh. weird.

I position mine manually since I’ll be releasing multilevel maps soon.

I’m curious to see how that will work.
In the mean time though, I don’t have your source code but through the behavior I can assume a few things.

Number One:
I can assume that based on the still pixelated hard edges you aren’t performing a typical rasterizer texture display. No you still have each cell as individual.

Number Two:
Based on number one I can assume that because you still have pixels that each pixel is displaying a segment of a texture, and shifting it. Now based on that I can assume one of two things is true.

Either you’ve created a body for each pixel and an ImageLabel inside, something that has ClipDescendants, so most likely a Frame, or every pixel is it’s own ImageLabel and you’re doing fancy math to set their slice scale apropriately.

This is what I wanted to touch on, assuming you’re doing this the first way I described, I think your engine could get a huge memory and fps boost by removing the container and having each pixel be it’s own ImageLabel.

What do you think?

1 Like

I actually don’t use pixel-based rendering (since we have GUI objects such as Frames and ImageLabels). Instead, i use column based rendering (which is much more efficient than having over 10x the amount of frames you actaully need).

And yes, I do use ImageLabels inside Frames to show portions of the texture for each column

image

As far as I am aware, there’s no way to zoom in on a certain part of an image label and cropping it (without parenting it to a frame). If there is an effective way that isn’t too difficult to work with, please let me know!

By pixels, I am refering to the columns, so yes.

Also yeah you can totally zoom into a specific part of an ImageLabel.

  1. Set the ImageLabel.ScaleType to Crop.

  2. Set the ImageLabel.ImageRectSize to some decently high resolution, but make sure it keep the aspect ratio of your texture. (e.g. if your texture is 500x500 set this to 1000x1000) Or better yet you could get the exact height of the screen in pixels, and then set it like that, so let’s say the texture is 500x500, and the screen is 1080 pixels. Then set the ImageLabel.ImageRectSize to 1080x1080. Keep the Y the same, but make sure the X follows the aspect ratio. So if your texture is 400x500 and your screen is (for simplicity sake) 1000 pixels then set this value to 800x1000. A lot to get into about how to make this the most efficient, but for simplicity, just make it a large number while maintaining the aspect ratio of the texture.

  3. Now all you have to do it change the ImageLabel.ImageRectOffset, it is anchored to 0.5, 0 since we’re in crop mode and so if you set this to 100, 0 you will effectively displace your image by half the size of the original resolution plus 100 pixels. It will also occlude the edges, removing the need for a Frame.

1 Like

Wow. I never knew you could do that.

I’ll definitely try this out for sure this week!

Though if this is all resolution specific, i will have to reupload most of my textures to be the same resolution (which will be 2048 x 2048)

I chose this resolution because my newer textures are 128 x 128. But since roblox blurs images instead of pixelating them, I have to times that resolution by 16 which will make the image look much cleaner.

1 Like

I set up a demo, here’s it responding to the Camera’s Y orientation:

Here’s the script:

game:GetService("RunService").RenderStepped:Connect(function(Delta)
    local Height = game.Players.LocalPlayer:GetMouse().ViewSizeY
    local X, Y, Z = (workspace.CurrentCamera.CFrame - workspace.CurrentCamera.CFrame.Position):ToEulerAnglesYXZ()
    script.Parent.ImageRectSize = Vector2.new(Height, Height)
    script.Parent.ImageRectOffset = Vector2.new(math.deg(Y))
end)

The hirarchy:
image

4 Likes

Oh wow. I can’t believe I only discovered this method just now.

This method will definitely increase framerate and memory by twice as fast as before!

Thank you. You are truly a beast at optimization!

1 Like

This update brings a bunch of new features to improve the graphics of the raycaster. Such as;

Most of these updates take place in the new map, ‘Castle’, which can be obtained through the settings menu:

Feedback will be greatly appreciated as always. And stay tuned for more updates!

1 Like

Its great! I’ve found a bug that when changing the render to anything lower than 50 it makes the game looks weird, putting it back to 50 still doesn’t work.

1 Like

Woah, this gets me thinking, an entire game, made completely out of GUIs…
nah it would break my computer lol

1 Like

Heh. And thats just the start of it. I have a lot of plans for optimizing this thing to the max!

Maybe you should try it and then tell me if it breaks your computer. I am very curious.

1 Like

so how is the progress on this so far? added any new features? Or are you still working on them.

1 Like

Yeah. Ive just released an early version of 2D sprites to represent objects or items to make the worlds less empty

UPDATE v2 - Sprites

It’s been awhile since the last update, but I have finally added sprites/objects to the engine to really spice things up a bit! Having sprites can allow for things like items and enemies to become a thing (which you might see in the future). Sprites are hold the record the most optimised option, which means I can have a lot of sprites being drawn on the screen without framerate drop!

Sprites has been added to all the maps I currently have:

  • MazeRoom
  • Castle

More maps coming soon as well!

I have also updated the rendering engine to support the new pixelated resampling mode when drawing images and textures. This allows me to use much lower res images and cancel out blur from close up views of walls and sprites in-game.

7 Likes

This is amazing… I don’t even have words other than wow…

I can’t wait to see your final product and play the game.

1 Like