Archive
The Beginners Guide To All Things Game Development

The Beginners Guide To All Things Game Development

2024-11-11 Hey Devforum! This is my first post in the Community Tutorials area and I would highly appreciate feedback. There might be some things you might not a

Related articles

Tailscale VPN Setup on Raspberry Pi: Secure Home Networking Navigating Internet Freedom with LetsVPN in China iOS VPN Connection Toggle Shortcut · vNinja.net

Hey Devforum! This is my first post in the Community Tutorials area and I would highly appreciate feedback. There might be some things you might not agree with, if so, speak your mind or find a solution that best fits your needs. Enjoy the tutorial, thanks!

The Beginners Guide To All Things Game Development


Preface

Hey! We are going to cover almost every aspect of game development

in ROBLOX

I am a jack of all trades so I do not possess the amount of experience you have in your field. If you are an expert in whatever field I cover, feel free to critique and offer feedback, both the community and I would appreciate it. Also, I will not cover the salary’s or average pay for each field as I feel developing for the sole purpose of making money is bad which i will showcase under Topic 4. Also if you need inspiration, watch

this

, this was the reason i joined ROBLOX and became a developer


General

specific field , topics like touch .

1. Start Small

Yes, you are going to hear this alot development career . I is knew knew I is wish wish colleagues told . harsh reality is is goingfail multiple times before you make anything big. Too many new developers come in with the mindset that they are going to make the next Jailbreak or Adopt Me, when I started back in 2013, I thought I was going to make GTA on ROBLOX. If you take a look at any of my games, you can see that that never became a reality. In fact, since 2013, I’ve only released 3 games of my own. I’m going to repeat it once more start small (see what i did there? The Beginners Guide To All Things Game Development). Projects I highly recommend to start with are

  • Obbys
  • Very simple tycoon using a kit
  • Simple round based game .
  • FPS gun kit
  • GUI Scripting
  • Shop System

These types of games are easy to make and cover most aspects of development, so you can get a taste of each field and what you would like to specialize in.

2. Its ok to use free models

Disagree with me here but I find it very acceptable to use free models, that is as a beginner of course. Some of the biggest developers on ROBLOX started off with free models e.g.

” I started by learning how to build and code in Lua on Roblox Studio by finding free models that had scripts I could modify. One of the models I found was a space gun. I saw where in the code it created the bullet, so I tried making it bigger and it looked like a dodgeball! Later, I created a map with two sides and scripted a round system where players would be teleported to the game and given dodgeballs. That’s how I started to create my first dodgeball game.(https://blog.roblox.com/2018/02/built-city-interview-alexnewtron/)

I used to call myself the professional free model editor, because I would be able to take a free model and transform it into something unrecognizable from the original model. As long as you edit the models and provide credit where its due, it is totally reasonable to use them.

3. Do not jump on the bandwagon

This is controversial one but nevertheless, I believe it needs to be said. The bandwagon in the ROBLOX development community are games like “Difficulty Chart Obby”, “Simulator”, “Clickers”, and “Champions” type of games. These type of games flood the games page and oversaturate the market, there are way too many that follow the same pattern. Click to get money, use that money to get more money, rinse and repeat. There is no reward for this. It’s mindless time killing. There truly is not any innovation in the creation of these games.

Keep in mind some of the games on here have lots of time and effort put into the development of them, I do not mean to offend you, and I am not attacking you, but merely pointing out a trend that is getting out of hand. I truly want to see original and innovative game ideas again.

4. Be passionate about your work

Many developers start out very ambitious, with grand ideas for games, but soon discover that their idea may not become reality. Don’t let that get to you. If you are passionate about what you do, you will do great work. To quote Steve Jobs

Sometimes life hits you in the head with a brick. Don’t lose faith. I’m convinced that the only thing that kept me going was that I loved what I did. You’ve got to find what you love. And that is as true for your work as it is for your lovers. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.

There are many developers who create for the sole purpose of making money. It is true that sometimes these people succeed, but they are the reason simulators and clicker games invaded ROBLOX. Creating because you have a passion for it will often show as players will often have as much fun playing your experience as you have creating it. Do not let the phrase “Powering Imagination” get thrown down the hole!

5. Take breaks and don’t overload yourself

one is is truly passionate . Believe , I is was known developer contractor . all is crashed crashed repuation destroyed reason , mental health . I is overworked overworked especially 15 year old worked treated like adult , honest , smart , brain nt nt set things , emergency mental health treatment middle commission , turned indirectly scammer . Destroyed reputation , regret path everytime . , focus ego development . love , work toll brain .


Graphic Designer

I am starting with this field because it is often the “easiest” to get into. It is a field that is easy to start but extremely hard to master. It is the first part of development I tried out.

That does not mean i was good at it

The Beginners Guide To All Things Game Development

General

Graphic Design is a broad area of development and the topics below are the ones I feel I have enough knowledge to explain. (if you would like to contribute to a section I did not cover, send a PM to me on DevForum)

Things to know

Color Theory
Color Theory is is hard explain , according colormatters.com ” basic categories color theory logical useful : color wheel , color harmony , context colors . ” Color Theory is is create mood game art . colors like blue create calm , sad environment , red cause game art piece look suspenseful “ angry ” . colors brings life creations , that is is black white represent “ old ” “ lifeless ” .
Color Theory, even a basic understanding of it can help in the long run. You do not want your art to look like this

You can read more about color theory

here

, lazy ( like ) advantage

https://coolors.co/

. This site is legendary, as you can easily produce color schemes without any knowledge of color theory. It even provides the HEX color codes, rgb, and HSL. You can even export into a pdf or image to use for your branding and color needs.

Render Artist

If you are planning to become a Render Artist, keep in mind that Render Artists are often highly sought after, but with so many in the market, you need to find a way to differentiate yourself from the others. Many render artists in the ROBLOX community use Blender as it is open-source and fairly easy to pick up thanks to the 2.9 update. It is extremely powerful and is not just used for rendering but also for 3D Modeling. Blender can be downloaded on https://www.blender.org/.
With rendering there are many things to utilize to create more immersive art.

HDRI

HDRI skyboxes can instantly make a render look amazing. A great site for free HDR’s is https://hdrihaven.com/
To insert an HDRI into your blender project:
Download a HDRI, I usually download 8K resolution for my computers sake, but if you have a higher end PC, then 16K should be good for you. Next open up blender and open up the shading tab.

The panel on the bottom should look like this. Click the button circled and click the “World” option.

click the background node and press X
click add and choose Environment Texture

click open and choose your .HDR file
drag the yellow circle called color and connect the node to the surface node.
The Beginners Guide To All Things Game Development
click this button and see your new HDRI in action!

Further Study

GFX for beginners guide (Block rig)
Guide use PBR Materials Blender
GFX Editing Lesson 1: Basic Criteria and Fundamentals

Icon Logo Design

Logo Designers , Icon Designers . effectively create high – quality logos icons , you is understand understand raster ( bitmap ) vector ( usually SVG ) graphics , difference .

What is a Vector Image?

Before we explain what a vector image is, lets take a step back. if you know what bits are then you are probably a programmer or atleast know some computer science terms. A bitmap or raster image, is an image that is made up of bits or pixels. Thats why when it comes to icons, which dont usually feature a million different colors (i literally mean millions) unless its a gradient, are best to be made as vectors.
raster images like .png , .gif , .jpg , common formats images . , what is s s vector is s ?
a vector, instead of using pixels, uses a mathmatical formula to create the image. using vectors is perfect when it comes to logos, icons and simple artwork. thats why giant companies make their logos out of vectors so they are easily scalable from a bottle to a billboard. i can size a vector image from 10x10px to 100000x1000000px it would not lose a single bit of quality.
an example of the code for an SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style="">
<path d="M445.1 22.93c-3.8.11-7.9 1.81-11.5 5.98C379.2 107.6 318.8 184.7 257.3 261.4c2.3.9 4.5 1.9 6.5 3.1 4.5 2.5 8.4 5.6 11.7 9C339 197.6 401.3 121.1 455.6 40.87c4.3-9.84 1.1-13.83-3.8-16.4-1.2-.65-2.6-1.13-4.1-1.37-.8-.13-1.7-.19-2.6-.17zM63.14 46.41c7.69 13.5 16.6 26.49 2.25 47.15 10.45-10.72 22.95-21.51 42.41-1.4-4.2-10.17-17.26-17.99-6.1-33.71-17.06 8.58-25.86 0-38.56-12.04zM267.2 94.02c-7.4 11.08-18.3 14.68-32.6 10.28 14.3 4.9 21.5 14.5 17.7 31.7 8.3-15.5 18.1-21.4 29.5-17.1-6.4-6.3-17.3-7-14.6-24.88zm181.5 46.78c-4 22.5-6 45.9-43.2 50.9 22.9.8 48.1 3.7 51.7 46.2 5-15-3-37.8 25.6-41.3-28.6-10.4-30.7-29.2-34.1-55.8zm-358.92 96c2.1 24.8-8.1 41.4-37.08 45.6 29.38 3.7 44.88 15.4 45.88 35.5 5.62-13.5-.7-30.8 28.72-36.8-22.1-5.2-34.82-19.7-37.52-44.3zm155.42 39.7l-13.4 16.6c1.5.8 3 1.7 4.5 2.6 4.4 2.8 8.7 6.1 12.3 9.8l15.2-18c-2.3-2.7-5.4-5.4-8.9-7.4-3-1.7-6.3-3-9.7-3.6zM208 304.1c-.8 0-1.5 0-2 .1-1 .2-1.5.5-1.7.7l-.5.6-.6.4c-46.9 36-117.06 70.7-173.97 104.3 14.77 4.4 29.83 9.7 44.58 15.6l36.39-30.5L88.37 432c17.03 7.6 33.43 16.2 48.03 25.6l27.3-43.8-12.2 54.2c9 6.7 17 13.8 23.8 21.1 27.2-59.1 63-100.2 67.7-154.8l.1-.6.1-.6c.6-2.3-.2-5.7-3.1-10-3-4.2-7.9-8.7-13.4-12.2-5.4-3.4-11.5-5.8-15.9-6.5-1.1-.2-2-.3-2.8-.3zm111.2.2c9.7 13.1 9.9 25.8-4.7 38.3 17.6-8.2 30.3-7.2 37.8 3.6-1.7-9.4-11.1-16.8 3-30.4-14 4.8-26.1 1.2-36.1-11.5zm56.7 90.8c11.7 17.4 20 29.5 4.1 47.8 23.4-10 29.5 7 41.2 13.8-19.9-26.8-2.6-39.3 14.1-49.5-30.5 12.8-44.4-.3-59.4-12.1z" fill="#fff" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="5">
</path></g></svg>

If you have tried using a .SVG file and found out you could not edit it, that’s because vector images require specific software to edit and use them. A great program that is open source and has no paywall is https://inkscape.org/. I use Inkscape over Illustrator because I’ve grown used to the Inkscape shortcuts and find it easier to work in.

Making a Basic Icon with Inkscape

Create a new document in Inkscape. We are going to insert a square into the document.

make sure to make the measurement system by “px” and not “mm”.
Since this is a square we want it proportional on all sides. 300 Width by 300 Height works (300×300)
click Align and Distribute
click these two buttons to align it in the middle of the page
click the star button and create a star, i made it 5 corners
make sure its an appropriate size, I made it 150x150px and aligned it in the middle, i also colored it white so it didnt blend with the box.
want rounded , double click box click drag circleThe Beginners Guide To All Things Game Development Now lets make it a reasonable page size.
click document properties The Beginners Guide To All Things Game Development
check off checkerboard background and select units to px. I made mine 500x500px The Beginners Guide To All Things Game Development drag selection box objects scene realign middle page . Awesome we is have SVG icon .The Beginners Guide To All Things Game Development
We can import it into ROBLOX as a .PNG as ROBLOX does not support .SVG files. click export png image The Beginners Guide To All Things Game Development
click page as export area and click “export as” to rename your file. Finally click export. make sure to save your vector image too. open up studio and create a gui element with a imagelabel. click the image label and open up properties. in properties click “Image” The Beginners Guide To All Things Game Development Import good … grey outlines death . know talking ?

notice how there are grey outlines on my icon? This can be fixed with Online Javascript Editor, import your icon into there and redownload it. reimport and

woop woop, its clean again! [Thanks to quenty for this amazing info. to learn about the more technical l side of it, make sure to visit his article about it Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium]

How to turn a 2D Vector into a 3D Model–Coming Soon

Tools
Some amazing tools that are either completely free or open source are:

https://www.photopea.com/ -Photopea is a free alternative to photoshop that offers the base components of photoshop and all of it can be done in your web browser.


Game Designer

Game Designer is is title people understand , role ” Game Designer ” actually knowing .

General
Everyone has a little bit of a game designer in them. Every person has atleast once had a really cool game concept or idea. Most of them don’t act on it, but the ones that do are the ones who usually change the industry and how we see video games as more of an art than a piece of technology. There is more to game design than most people think. Game Designers often do tons of research, concept and prototype creation and lots of writing.

Research
As a game designer, you must know your market. Who are you making a game for? Who are the people you are catering to? What makes your game stand out compared to the others? Often game designers read or create a case study. These can be complex or simple depending on how in depth you go. A very simple one would be of ROLVe Community’s Arsenal. Arsenal is a “Gun Game”. You rack up kills, every kill you get a new weapon, there is usually a cap with how many weapons you cycle through before there is a winner. In Arsenal’s case, that (I believe) is 32. Why do people come back to arsenal and why do people find my game not worth another visit? Arsenal has linear gameplay, which means there is a set end goal and all players are usually given the same set of tools, in Arsenals case. One important concept in game design is rewards. Every person plays a game for the same reason, to get something in return. That can be many different things, a fun way to kill time, monetary benefit, the pride, it comes in all shapes and sizes. For Arsenal, the reward is the in game currency and “clout”. Games like arsenal are highly competitive and that keeps players coming. They want to be the “best”, when they have over 800 wins, that comes with a sense of pride. the in game currency adds to that as it comes with wins, in which the currency can be used to buy cool items and accessories. Another game with great game design is dark souls. The game was purposely made to be extremely difficult. This daunts beginners and pros alike, what makes dark souls great is the rewards. It isn’t monetary nor item driven, but pride driven. When a player defeats a boss that they have spent the past 2 hours trying to beat, they freak out. They’re pride and ego go above the roof. they get what us gamers call an “epic gamer moment” (don’t hurt me The Beginners Guide To All Things Game Development) or an “OMG” moment. When a player has no reason to play your game over another, that’s when you encounter bad game design.

Writing
We are slowly reaching an era where GDD’s (Game Design Documents) are fading away. Actually, lots of ROBLOX developers don’t even know what a GDD is. A GDD is an amazing way to document key game features, art style, characters, and monetization. It is also an amazing way to show off your game idea to investors or potential publishers or external developers. Creating a GDD is great for solo developers, but is nothing but awesome for development teams. If you bring on a new person onto your team, the GDD should suffice, of course, catching them up with other tools is good too. Creating more ambitious and great user experiences is usually a team effort, which is why when you write a GDD, you often want it to be open to all parts of the development team. Every person on your team has valuable input that you may of never thought about. A great product that promotes collaborative writing and is (mostly) free is Google Docs. It is easy to share and collaborate in.

Collaboration
There are many roadblocks that come with collaborative game development. Creating a product that was not up to the standard or deadline expected is one. To be honest, I do not have enough professional experience to do this piece justice, but TechSpectrum definitely does. For a more in depth look at the collaboration piece of game design, check out his post Game Design Theory: Project Management with DevOps, Analytics and Pipelines for Successful Games and Productive Teams


Scripter

General
Scripter’s are crucial for a functional user experience. As a scripter you are in charge of programming many different systems and the general framework of the game. Scripting can often be a daunting task and some people stay away from it for that very reason. Although it can be hard, it is often extremely rewarding. Seeing a creation of yours come to life is truly a feeling you can’t get anywhere else.

DevHub
The DevHub is and will be your best friend not just for scripting but for anything roblox development related. Take for example little jimmy.
The Beginners Guide To All Things Game Development
Little Jimmy has a problem, he is trying to use a script to change the meshid of his sword, but it won’t do anything.
The Beginners Guide To All Things Game Development
uh oh , Jimmy getting frustrated , fret ! DevHub is has .

Ah, Jimmy now knows you can not edit meshid’s with a script, but how will he solve his problem? That’s where our next hero comes in

DevForum
Yes, I’m deathly aware you are already on devforum reading this, but it’s included because i still feel it is important to use the devforum properly. Little Jimmy wants to fix his problem so he quickly googles “how to change mesh id from code roblox” he finds Is it possible to set a MeshPart to a MeshID through a script?. A very helpful DevForum member points out the same thing DevHub has documented, but he provides a solution, “SpecialMesh”. Jimmy uses it and now his script works.
The Beginners Guide To All Things Game Development
woohoo! Jimmy now fixed his problem, and at the same time did not clutter the forum. Instead of asking and starting an entirely new thread for a question that’s already been answered multiple times, he simply searched it up and researched the topic. Be like Jimmy. The Beginners Guide To All Things Game Development
Tools

https://rojo.space/ – Script in RBXlua using an external IDE
https://github.com/ – Amazing site to find and create open source software and material.
Learn Roblox – Roblox new tutorial based experience .

Learning

Learning how to script is often something you take on by yourself. If you are teaching yourself, its great to set up ground rules so you do not get distracted or demotivated. Starting with Topic 1 (Start Small), create something small, or a project that is extremely specific, lets say in a year from now you want to start developing a racing game. First you would experiment with ROBLOX physics and get used to them, you could make a wacky game using those physics (Rdite) or start creating very basic vehicles. Next you would learn how to script rounds so you can make rounds in your racing game. when you learn these two topics and more, you can combine your experience with those two projects into one. It may sound scary, but its actually not very difficult, almost every piece of code can be explained with this ideology. “If this, then that” we can add a “If this, then that, else do this” also. The only thing hard about programming is learning its syntax and learning how to create readable and efficient code. for example don’t pull a “YandereDev”.
The Beginners Guide To All Things Game Development
doing this can create extreme lag and take more time than necessary. To understand why, think about what the computer does, it reads the code, like a language. It has to go through every line of code. For every character it goes through all those “if statements”. A more cost efficient way to do this would be to use a function. I will speak in a combination of code and English for this

First we create a function with a name of our choice, mine will be “function eyeColorChange(color)” make sure to put your function before you do any of the stuff im about to do after. you are going to want to make an if statement, “if EyeColor ~= nil then”(~= means not equal to, you can find operators here) after the then, we are going to call the function with eyeColorChange(). we can then have the function grab the color of our characters eyes, and we can use a module script to define our eye colors. Our function will then go and take the value of the eye color we chose and we can use a return to return the value and use that value to change our eye color.(this was done without testing and mostly with just the if then ideology)

Organization

Organization is crucial when it comes to creating any game. You want to make the game easy to edit for you and any other developers sake.

notice how this is messy? The GUI has multiple Frames with the same name, that is an issue when you start to script the UI, as the script cant tell which frame to edit, so it picks the one with a higher priority. This is also the case with the TextLabels. Also our replicatedstorage is messy and our workspace has tons of parts. This is where our best friend Folders come in.

Would you look at that? Our game looks much cleaner. Notice how we didn’t use a Folder in the GUI. Although we

can

use folders in the GUI,

we shouldn’t

as any GUI element hosted in a folder can’t recognize userinput. Try it out yourself and organize the games elements

OrganizeMe.rbxl

(129.8 KB)

Remote Events and Functions
I started to script pre-FilteringEnabled. The FE update broke many games because it was easier to script through the client than to client and server. I gave up after FE because to be honest, RemoteEvents and RemoteFunctions confused me. No matter how many times my developer buddies tried explaining it to me, i still would never get the picture. Even DevHub Confused me, so I’m going to explain how I learned.

The TurboFusion gun kit was extremely popular pre-fe because it was easy to configure and add. But after FE it broke, if you killed someone, it wouldn’t return that they actually got killed. Let’s investigate why: The Beginners Guide To All Things Game Development
If you know nothing about client and server models, let me explain it in the easiest way possible. The client is you, that includes all the user interface, sometime particle effects and those semi-transparent parts you see in tycoons. Everything on the client is for your eyes only. To edit clients you use a LocalScript. The server is everything that every client can see, that is usually the map or live GUI changes everyone can see. Now that you understand Client-Server model, take a look at the screenshot provided. As you can see they use a local script to control the entire weapon. Nowadays that is absolute “no-no”, as that since its a localscript, all changes are only seen on the client. What use is a weapon if it does not actually inflict damage? How we solve this is to use remote events and functions. How do we use them? First what we do is insert a remote into “ReplicatedStorage”. We use ReplicatedStorage as both the client and the server can access it. Rename the Remote to whatever you’d like. This remote is going to be the magic bridge between the server and the client. As GUI’s are ClientBased, lets make a very simple gui with a button to create our brick.
heres mine:The Beginners Guide To All Things Game Development
(might have gone a little overboard The Beginners Guide To All Things Game Development)
Insert LocalScript button . name is matter script matter thing need require remote . we is going going want ReplicatedStorage find remote

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local sendBrick = ReplicatedStorage:WaitForChild("NameOfYourRemote")

We are going to want to send to the remote when our button is clicked. First create a function, and then start that function when the mouse is clicked (functions can not be started without something to trigger it)

function makeBrick()
	
	
end

script.Parent.MouseButton1Click:Connect(makeBrick)

the text inside the () is the name of the function that we want triggered.
now inside our function we need to send a signal to our remote.

function makeBrick()
sendBrick:FireServer()
	
end

the client side is done, now we have to have the server create our brick. Create a regular Script into ServerScriptService. We are going to repeat what we did last time with a few changes.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local sendBrick = ReplicatedStorage:WaitForChild("SendBrick")

function makeBrick()

end

sendBrick.OnServerEvent:Connect(makeBrick)

this time instead of a mouse click when the server gets notice that the remote has been set off it triggers our function. Now to finish our script, lets make it produce a brick. our full script should look like this

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local sendBrick = ReplicatedStorage:WaitForChild("SendBrick")

function makeBrick()
	local newBrick = Instance.new("Part")
	newBrick.Parent = game.Workspace
end

sendBrick.OnServerEvent:Connect(makeBrick)

Our gui now makes parts . Feel free to see the code in action and edit it to do more advanced things. RemoteEventTest.rbxl (29.0 KB)
learn more about Remotes here.

Further Study


3D Modeler

General
3D Modelers or 3D asset creators, are on the rise due to the increase of developers wanting to be involved in the UGC craze. 3D modelers create meshes that developers import into their games to be used as decoration, landscape foliage, and weapons. Developers prefer meshes over unions as unions can often take a toll on your games performance. To be honest, I am pretty abysmal at 3D modeling so I am not the one to teach you it, but I can redirect you to others who are amazing at it.

Further Study


Composer

General
Composers create the beautiful music that is showcased in multiple games. The music you use can make or break the vibe you are trying to set in your game. Imagine a game like Piggy with NCS music playing. Having OST’s in your game can show dedication and truly create an immersive experience. As a composer, you must have dedication and a good ear. Composing can often be very hard to get into and master, but in the end, it is extremely rewarding. (shameless plug, you can check out my music here Sunshine and Flamingos – Album by SAF | Spotify)

DAW
DAW’s or Digital Audio Workstations are the powerhouse behind your musical creations. Think of it as a game engine but for music production. There are many DAW’s out in the market. I am extremely biased as I am a FL Studio user. Some other great options are Cubase used by hans zimmer and Zedd, Ableton Live used by way too many to list, Bandlab that isnt too mainstream but is free to use, and MixCraft. Please for the love of god, spare yourself and do not use LMMS unless you don’t care about prettiness or efficiency.
Further Study


Building

General

Building is the process of using parts and meshes to create a greater image. Whether that be a map, or a skyscraper. There are many different style of building, but we often categorize it into two styles, Low-Poly and High-Poly. This refers to the amount of polygons in an object, when a map uses strictly low-poly assets, this would be considered a low-poly build, switch the places around and you get high-poly builds. Most often, a 3D modeler often takes the path of a builder too. The two fields interchange and have alot in common.
Further Study


User Interface Design

General
User Interface Design or UI Design, is the creation of UI elements for a product. This can be for websites, software, games, and more. One pet peeve of mine is UI that is completely made in ROBLOX Studio, well only if it isn’t executed well. I’m talking about the “UI Designers” who create things like this:

The use of colors is abused, they don’t match and there are too many fonts that don’t compliment each other.

I is make decent UI designs ?

You is use use studio find easier , external tools prototype create preferable . Creating UI programs like PhotoShop ok , purely raster image – based . you is know know talking check “ Icon Logo Design ” section learn vectors bitmaps . Software is is like Adobe XD Lunacy , increasingly popular UI design tool , use Figma preferable works vector images rescaled size need / desire . Lunacy is is completely free , XD Figma free plan paid ones . programs is have similar UI functions pros cons . want easy prototype creation amazing plug – creation community , choose XD , want advanced tools plugins easy prototyping , choose lunacy , , want best worlds big community plugins open – source file creators , added real – time collaboration niche similar google docs , Figma viable choice .

Creating a simple UI design and importing into ROBLOX

I’ll be using XD for this, but Lunacy can do everything I do here. Select web 1920

We are going to create a shop GUI. Lets create a box and give it a proportional size. ill pick 800x800px. Make sure to click the lock to lock the ratio when sizing The Beginners Guide To All Things Game Development
Align it in the complete middle with these two buttons
The Beginners Guide To All Things Game Development
If you read the graphic design section, you know we are going to need colors that complement each other. We are going to use Coolors for our color pallete. This is mine. Lets export it as an image for easy color picking. Drag it out the page area and it should be visible

I’m going to color my box the black I chose

Press the box and press Ctrl+D to duplicate the image. Then resize to a rectangle at the top for a title. Make sure to unlock the ratio so we can make a rectangle.

Insert a Text object, i download the Gotham font family as that is a ROBLOX supported font. It is recommended to use ROBLOX built in fonts as translators and easily localize the text.
The Beginners Guide To All Things Game Development
Duplicate again, and split the box in half with it. Color one a different color and duplicate that one and make that one another color The Beginners Guide To All Things Game Development
We are going to import a SVG icon, if you are interested in making your own check out the “Icon and Logo Design” section. If you want high-quality free to use icons, this site is amazing. You only need to attribute them once compared to other sites where you have to attribute 10 different people. I’m going to import a cool sword icon.
The Beginners Guide To All Things Game Development
I is touched touched little we is go
The Beginners Guide To All Things Game Development
Now with such a simple design, we dont even need to import most of this, and we can recreate it in ROBLOX. Only things we need to import are the icons. Refer to the “Icon and Logo Design” section on how to import icons without the “grey lines of death”.
Open Studio and create a GUI object and insert a frame into that.
Size the frame to 1,0,1,0 and then resize it to the size you desire. This method is just the easiest for me to get rid of the offset property. Get rid of the ugly border by making the BorderSizePixel = 0
The Beginners Guide To All Things Game Development
go back into your program and grab the HEX value of your frame.

Paste it into the HTML property The Beginners Guide To All Things Game Development
create a text button and do what we did in xd by splitting the box with it.
text property putting space

far . Inside text button , add text label image label
The Beginners Guide To All Things Game Development
arrange them like we did in xd and your final product should look like this

the project files for xd and the game are linked here

Further Study


Conclusion

I dedicated many hours to creating this post but I really hope I can make an impact on the community and help foster a new generation of developers. To all you new game developers out there, don’t give up, you are the future of game development and the metaverse. One day you are going to be the one writing a post just like this. Thank you to the
ROBLOX development community for teaching me so many valuable lessons, and I can’t wait for what the future has in store for us -astraran and little jimmy