Note: OSGL currently does not work in live games, as it uses EditableImages. Until EditableImages release, this can only be used in studio.
What is OSGL
OSGL, Open-Source-Graphical-Library, aims to provide a simple way for developers to read and write PixelData to EditableImages.
OSGL was originally developed as an alternative to CanvasDraw, a graphics-engine built for Roblox. Unlike CanvasDraw, OSGL attemtps to be a library solely for EditableImages alone.
OSGL is currently in some sort of âbetaâ, with some âexpectedâ features not being implemented / still being worked on!
So, what can OSGL do?
OSGL provides the user with a âWindowâ (An EditableImage) that they can draw shapes, textures, text, etc onto. Features that OSGL provide are:
-
Shapes
-
Textures & sprites
-
Texts & custom fonts
-
Custom rendering
-
It even comes with its own error handler!
This library would be a great help to those who would like to make pixel-based 2D/3D games, or where storing Pixel Data is needed.
Examples
144P Shrek, sampled at 15FPS:
Minecraft Wireframe 3D Renderer (60FPS):
note: sadly I couldnât find the RBXM file so I cannot record a video 
. But here are some images:
Live shading and rotating render:
Download OSGL
You can download the latest version from the github here, or from Roblox. The Github provides âOSGL_Importâ, which allows you to import Images (PNGs Specifically) from your local device.
Quick tutorial
You can learn more on the Docs.
The following tutorial will show you how to open a window and draw a basic circle to it.
Opening the window
Before we can start drawing on a window, we need to create one. Place the OSGL module somewhere, and require it. You can create a frame, or any GuiObject. That will be your canvas:
Now, we can create our window:
local OSGL = require(script.OSGL)
local enum = OSGL.enum
local window = OSGL.window
local myWindow = window.new({
Size = enum.WindowSize.Mutuable,
Instance = script.Parent
})()
The code above creates a new window for OSGL to use. We import enum and window from the OSGL module, and use the window.new function. We pass 1 parameter, a dictionary with 2 keys: Size, and Instance. Size can be of type Vector2 or enum.WindowSize. In this case, we pass enum.Mutable, meaning the size will change based of the size of the frame we provide., and instance as the frame that our window will become. Finally, we call this as a function as we want to create the window - We can call the create window function, but the window will not be created until we call that function meaning windows can be stored and used at a later date.
Now, we can set-up our main loop. This will run every heartbeat:
while myWindow:isOpen() do
end
The âIsOpenâ method yields for the given amount of time (or a heartbeat), and returns if the window exists or not.
Drawing to the window
Now, we need to import 2 other modules to help us draw the circle: shape, and color. Before we render, we always need to clear the screen otherwise the previous contents will appear. This can be done with the clear(RGBA) method:
local OSGL = require(script.OSGL)
local enum = OSGL.enum
local window = OSGL.window
local shape = OSGL.shape
local color = OSGL.color
local myWindow = window.new({
Size = enum.WindowSize.Mutuable,
Instance = script.Parent
})()
while myWindow:isOpen() do
myWindow:clear(color.Black)
end
But if you run this, nothing will happen. Thatâs because we donât render our changes to the screen yet. This can be done with the render method:
while myWindow:isOpen() do
myWindow:clear(color.Black)
--// Draw our circle here
myWindow:render()
end
Anything that needs to be drawn to the screen in OSGL requires the draw method. We can then pass shape.circle which constructs a circle:
while myWindow:isOpen() do
myWindow:clear(color.Black)
--// Draw our circle here
myWindow:draw(
shape.circle({
Color = color.Blue,
Position = Vector2.new(50, 50),
Radius = 25
})
)
myWindow:render()
end
And depending on the size of your frame, a blue circle should have been rendered:
Full Code
local OSGL = require(script.OSGL)
local enum = OSGL.enum
local window = OSGL.window
local shape = OSGL.shape
local color = OSGL.color
local myWindow = window.new({
Size = enum.WindowSize.Mutuable,
Instance = script.Parent
})()
while myWindow:isOpen() do
myWindow:clear(color.Black)
--// Draw our circle here
myWindow:draw(
shape.circle({
Color = color.Blue,
Position = Vector2.new(50, 50),
Radius = 25
})
)
myWindow:render()
end
Contribution
OSGL is an open-source project. Feel free to edit source code or give ideas - You can do this in the github or here in the DevForum.
Credits
You are not required to credit me for OSGL, it is optional. While you may edit the source as you like, please do not reupload / claim this asset as your own work(s)!
I hope those who use this module make something fun with it - It was a blast making this for all of you! This is my first âbig module postâ, I hope you enjoyed reading!!
but i can compare with refreshing the screen.
