Introduction: Mixed and Match It
Mixed and Match It.
"Mixed and Match it" is the future of the mall. It's a V.R. game where you can shop, or play in the mall; trying on clothes and purchasing them as you see fit. The whole concept of the game is to be able to try on clothing from REAL name brand,-or even local businesses- without leaving the comfort of your own home. Our product benefits smaller/family owned/student run business', as they have the direct platform to compete with brand name/popular business' making themselves more known. They also get the chance to create a social platform and better advertisement skills.
This Form
In this form you will be able to figure out how to make a game similar to our unique design, and you will also be taught how to play the game to its full potential.
What is the game?
Mixed and Match it, is a virtual mall, designed for customers to walk through the mall, trying on and purchasing clothes as they see fit. In the V.R. mall, are real life stores with real inventories that buyers can directly make their purchases from. Our target areas were smaller business' as this gives them the opportunity to directly compete with bigger name brand companies bettering the business' advertisement. Customers can purchase items through the mall as if they were purchasing items directly through the stores online website. Which means all the inventory directly comes from each of the stores.
Shopping
When shopping you'll be taken to a private personalized server that fits your needs from when you made your personalization's earlier on. You'll have brands and stores that you like to shop, along with clothing that fit you, are in stock, and fit the styles you selected. Once you're in the game you can move around and go to the stores to try on the clothing and see what they would look like on you, and/or add it to your cart where you can then buy it.
Gaming
The gaming portion of the game has lots of similar features as shopping, except you won't be able to buy things. When you chose to do gaming you'll be teleported to a public mall where others are at, such as a real mall.
When you first load into the game you'll be prompted with a screen to create your avatar. Your avatar is where the clothes you "try on" will be displayed so personalize only if it's your first time playing though. Once you create your avatar by inputting your preferences and sizing you will then have the option to either shop or game.
Presented to you by: Josadec Nazario, Christianna Barrera, Cassandra Sipple, and Mia Sperrazza
Supplies
Here are the supplies you'll need to construct and or play the game.
Making the game:
- A laptop/desktop that can run Roblox, Roblox Studio, and Blender.
- Time & Patience
- Some basic knowledge on Roblox Studio & Blender.
Step 1: Getting Ready
Starters, you need to build the assets for your game. All of these aspects can be made to fit your own personal needs but for our game we decided to go with a more neutral color palate along with a more modern looking mall.
Before actually putting together the mall we recommend making your assets
For the mall we made some assets we figured we would use commonly throughout the mall such as, clothing hangers, light fixtures, seating, storage, etc.
Below you'll be able to find some pictures of some of the assets we made for the mall including, plants, furniture, lighting, and our clothing.
We'll also link our map of our game here just incase you'd rather download our map and skip building it yourself.
https://drive.google.com/file/d/1V3F81aJHwOVcDzAONzRbDvOOg2bZyRNq/view?usp=share_link
Step 2: User Interface
One of the important aspects of the game is the UI (User Interface). Without the UI you wouldn't be able to do basic functions such as trying on the clothes or even getting basic info on the piece of clothing. With UI the possibilities are endless, you can create and do whatever you would like. For our game we went with a more fun approach with our UI. We used colors such as orange, peach, off-white, etc.
Step 3: Setting Up the UI
To set up our UI, you're going to want to head down to "StarterGui" to insert your UI objects. You are entitled to creating your own UI with your own colors, fonts, etc. For Mixed and Match It our primary font "Nunito", which is already provided by Roblox.
In the media files linked to this step you can see all the items and assets we used to create our UI. These are very basic items that can be used easily if you know what they do. If you don't that's okay! We'll provide you with what each item does:
Frame - This is simply a display panel you can put anywhere on a UI. You can change the size, transparency, coloring, and lots more. We will be modifying the colors, size, and position of the frame to fit our needs, even with a slight amount of code you can change practically anything on the frame.
UI Gradient - This one is sort of self explanatory, it creates a color gradient to display on a frame, text button, text box, and other UI elements that are compatible. You can add as many colors to this gradient as you please as well as rotation, transparency, etc.
Local Script - Local scripts & Scripts are two completely different things, local scripts handle things one your personal device without affecting others ability to do certain things. So for instance if you click a button on your end of the game and it brings up a panel where you can try on clothing, the panel will only show up for you and not for others. Local scripts can also be used to handle sever events sent to your end, which we will be using later on.
UI Corner - This simply rounds off the edges of UI elements such as frames, text boxes, text buttons, image buttons, image boxes, etc. You can change how much you want your edges rounded and weather or not this is enabled. This is a very basic element you can use to spice up your UI, we like to use this to make our UI look more sleek if you will.
UI Page Layout - This lovely item can be used to simply display many items in one page, for instance if you want to display a selection page for a flavor of ice cream you can use the page layout element to display all your frames or text buttons with your selections without having the manually listing them yourselves.
Text/Image Button - These buttons are two separate things but with similar if not, the same functions. Both of them are buttons which you can click and manipulate similar to a frame, but one can host text while the other can't ad one can host images while the other can't. Very basic item's but still an important item to our UI.
Text/ImageLabel - These are basically the same with the Text/Image Buttons except you cannot click them. Sure if you add the code yourself you can cause an event to happen when you hover your mouse or something of the sorts, but these are simply to display what you please and how you please.
Step 4: Scripting the UI Module
Once you create your UI and make it look how you want to look with all your coloring, fonts, sizing, etc. You want to code the UI to make it actually work. We used Module Scripts which will get placed in the game's Replicated Storage.
The reason you want to use a module script is because you can have functions for the UI that you'll repeatedly use throughout the entire game, and instead of repeatedly typing in the code to do the functions you want it to do, just code it once! It's actually very simple to use. Here is an example:
local module = {}
function module.typeWrite(guiObject, text, delayBetweenChars) -- guiObject is the text-label, text-box, or text-button that you would use to display the text that you want the type-out effect to be used on, text is well the text you would want to be displayed so for example you could put "Hello! Example Text" with the quotes in the function, and finally delayBetweenChars is simply an integer that is the delay, measured in milliseconds.
guiObject.Visible = true
guiObject.AutoLocalize = false
local displayText = text
displayText = displayText:gsub("<br%s*/>", "\n")
displayText:gsub("<[^<>]->", "")
guiObject.Text = displayText
local index = 0
for first, last in utf8.graphemes(displayText) do
index = index + 1
guiObject.MaxVisibleGraphemes = index
wait(delayBetweenChars)
end
end
return module
Once you have the module script in the replicated storage with all the UI functions you would like to have you'll be able to use it anywhere in the game where it's compatible. We have a lot more functions that we used in our UI_Functions Module. Here is our code:
local Functions = {}
local SOURCE_LOCALE = "en"
local translator = nil
local TweenService = game:GetService("TweenService")
function Functions.typeWrite(guiObject, text, delayBetweenChars)
guiObject.Visible = true
guiObject.AutoLocalize = false
local displayText = text
if translator then
displayText = translator:Translate(guiObject, text)
end
displayText = displayText:gsub("<br%s*/>", "\n")
displayText:gsub("<[^<>]->", "")
guiObject.Text = displayText
local index = 0
for first, last in utf8.graphemes(displayText) do
index = index + 1
guiObject.MaxVisibleGraphemes = index
wait(delayBetweenChars)
end
end
function Functions.Hover(Button, Grad)
local OrigGrad = UDim2.fromScale(1.25,2)
local CloseGrad = UDim2.new(0,0,0,0)
local TweenService = game:GetService("TweenService")
local isHovering = false
local TweenInfos = TweenInfo.new(
0.5,
Enum.EasingStyle.Exponential,
Enum.EasingDirection.InOut
)
local GradOpen = TweenService:Create(Grad, TweenInfos, {Size = OrigGrad})
local GradClose = TweenService:Create(Grad, TweenInfos, {Size = CloseGrad})
Button.MouseEnter:Connect(function()
GradOpen:Play()
end)
Button.MouseLeave:Connect(function()
GradClose:Play()
end)
Button.MouseButton1Down:Connect(function()
Button:TweenSize(UDim2.new(0.245, 0, 0.06, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)
end)
Button.MouseButton1Up:Connect(function()
if not isHovering then
Button:TweenSize(UDim2.new(0.25, 0, 0.068, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)
else
Button:TweenSize(UDim2.new(0.268, 0, 0.07, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)
end
end)
end
return Functions
Step 5: Scripting Your UI
Once you create your UI with all the items and buttons you want to use you we need to start scripting our buttons! For our buttons we have it so that if you hover over the button an little animation plays showing the fact you're hovering over it. You can find an example of this linked in this step's media.
This step is quite simple at that, all you must do is add a local script under the text/image button you have and import this code (though you MUST have the gradient image label or frame in it for this to work.):
local Functions = require(game.ReplicatedStorage.Modules.UI_Functions) -- identifies the module script with our hover function
local Button = script.Parent -- the button that you hover over
local Grad = script.Parent.Gradient -- the gradient under the button to give it the hovering effect
Functions.Hover(Button, Grad) -- the function that happens when you hover over the button.
Now if you're too lazy for some reason to code all of that here is a file with the button. https://drive.google.com/file/d/1Zdv3STk-ywqTiqZZbs4mnRRHdHVBwTvR/view?usp=share_link
If you would like here is also the file to ALL of our UI so you can skip the process of having to make it.
https://drive.google.com/file/d/1QxbaQWFi1C8IY8bBWhmtdwiLYMnXAoLx/view?usp=share_link
Attachments
Step 6: Putting the Game Together
If you used the map we provided in Step 1, you'll already be set up for this step. Though if you haven't that's okay! What you want to do is add a click detector to your 3D Clothing that way when you click it an event will go off in the server. Once you do that you want to add a script to "ServerScriptService"
Once you add a script you want to import this:
local Players = game:GetService("Players")
Players.CharacterAutoLoads = false
local function onPlayerAdded(player)
local humanoidDescription = workspace.ParisDeVincent.Humanoid:GetAppliedDescription()
player:LoadCharacterWithHumanoidDescription(humanoidDescription)
end
Players.PlayerAdded:Connect(onPlayerAdded)
game.ReplicatedStorage.Tele.OnServerEvent:Connect(function(Plr)
local Char = Plr.Character
Char.HumanoidRootPart.Position = Vector3.new(game.Workspace.TelePart.Position.X, game.Workspace.TelePart.Position.Y, game.Workspace.TelePart.Position.Z)
end)
game.ReplicatedStorage.Show.Event:Connect(function(Player, Dress)
print(Player, Dress)
game.ReplicatedStorage.UI:FireClient(Player, Dress)
end)
game.ReplicatedStorage.Try.OnServerEvent:Connect(function(Player, Dress)
local Char = Player.Character
local Humanoid = Char:FindFirstChild("Humanoid")
if Dress == "Dress2" then
local Temp = Char:FindFirstChild("Shorts-Red"):Destroy()
local Temp2 = Char:FindFirstChild("Tanktop-Red"):Destroy()
local Dress2 = game.Workspace.Dress2:Clone()
Dress2.Handle.Anchored = false
Humanoid:AddAccessory(Dress2)
elseif Dress == "Dress3" then
local Temp = Char:FindFirstChild("Shorts-Red"):Destroy()
local Temp2 = Char:FindFirstChild("Tanktop-Red"):Destroy()
local Dress3 = game.Workspace.Dress3:Clone()
Dress3.Handle.Anchored = false
Humanoid:AddAccessory(Dress3)
elseif Dress == "Jacket" then
local Temp = Char:FindFirstChild("Shorts-Red"):Destroy()
local Temp2 = Char:FindFirstChild("Tanktop-Red"):Destroy()
local Jacket = game.Workspace.Jacket:Clone()
Jacket.Handle.Anchored = false
Humanoid:AddAccessory(Jacket)
end
end)
All this does it not allow players to have a random avatar but the one that they created, it also teleports the player to the mall from the spawn point, along with not allowing the players to reset themselves, this is crucial! Along with the events that will put the 3D clothing onto the players. Make sure you have these following in your ReplicatedStorage:
UI, Try, and Tele - RemoteEvents
Show - BindableEvent
You also want to have "NexusVRCharacterModelLoader" this is simply an open source code that allows your game to be compatible with VR which is the main purpose of this game. You can import this code:
--[[
TheNexusAvenger
Loads Nexus VR Character Model.
GitHub: TheNexusAvenger/Nexus-VR-Character-Model
--]]
local Configuration = {
Appearance = {
--Transparency of the character when in first person.
LocalCharacterTransparency = 0,
--If true, arms will be allowed to disconnect.
--Recommended to be true locally so that the controllers match the hands,
--and false for other players so that arms appear normal.
LocalAllowArmDisconnection = true,
NonLocalAllowArmDisconnection = true,
--Maximum angle the neck can turn before the torso turns.
MaxNeckRotation = math.rad(35),
MaxNeckSeatedRotation = math.rad(60),
--Maximum angle the neck can tilt before the torso tilts.
MaxNeckTilt = math.rad(60),
--Maximum angle the center of the torso can bend.
MaxTorsoBend = math.rad(10),
},
Camera = {
--Options for the camera that can be enabled by the user.
EnabledCameraOptions = {
"Default",
"ThirdPersonTrack",
},
--Default camera option.
DefaultCameraOption = "Default",
},
Movement = {
--Movement methods that can be enabled by the user.
EnabledMovementMethods = {
"SmoothLocomotion",
--"None", --Disables controls but still allows character updates. Intended for stationary games or momentarily freezing players.
},
--Default movement method.
DefaultMovementMethod = "SmoothLocomotion",
--Blur effect for snap turning and teleports.
SnapTeleportBlur = true,
},
Menu = {
--If true, a gesture will be active for opening
--the Nexus VR Character Model menu. If you manually
--set this to false, you will lock players from being
--able to change camera options, movement options,
--recallibration, and chat.
MenuToggleGestureActive = true,
},
Output = {
--To suppress warnings from Nexus VR Character Model
--where supported (missing configuration entries),
--the names of the warnings can be added here.
--Add "All" to suppress all warnings.
SuppressWarnings = {},
--If true, clients can check the client output to see
--if Nexus VR Character Model is loaded. In order for
--the message to appear, the client must hold down Ctrl
--(left or right) when opening the F9 developer console.
AllowClientToOutputLoadedMessage = true,
},
Extra = {
--If true, Nexus VR Backpack (https://github.com/TheNexusAvenger/Nexus-VR-Backpack)
--will be inserted into the game and loaded. This replaces
--the default Roblox backpack.
NexusVRBackpackEnabled = true,
},
}
--Load the Nexus VR Character Model module.
local NexusVRCharacterModelModule
local MainModule = script:FindFirstChild("MainModule")
if MainModule then
NexusVRCharacterModelModule = require(MainModule)
else
NexusVRCharacterModelModule = require(10728814921)
end
--Load Nexus VR Character Model.
NexusVRCharacterModelModule:SetConfiguration(Configuration)
NexusVRCharacterModelModule:Load()
Make sure you import that code into another script in ServerScriptService.
Step 7: Click Detectors
You now want to add click detectors into your 3D clothing, this way once you click it an even can fire to the server and bring up the UI panel for the player. Make sure it's set up like this
Then for every click detector you want to have this code:
script.Parent.MouseClick:Connect(function(Player)
game.ReplicatedStorage.Show:Fire(Player, script.Parent.Parent.Parent.Name) -- "player" is simply giving the server the information of the player who clicked the button, and "Script.Parent.Parent.Parent.Name" is identifying the article of clothing
end)
Once you do this you want to add in code into the script you added in the ServerScriptService where it at "game.ReplicatedStorage.Show.Event:Connect(function(Player, Dress)" and you want to do this:
game.ReplicatedStorage.UI:FireClient(Player, Dress)
All this is doing is firing an event to the player's client side to bring up the panel to try on or buy the clothing.
Down below is the code you'll import for "game.ReplicatedStorage.Try.OnServerEvent:Connect(function(Player, Dress)" which is where it'll put the clothing onto the player's avatar to display it
if Dress == "Insert_Clothing_Name" then
local Char = Player.Character
local Humanoid = Char:FindFirstChild("Humanoid")
local Temp = Char:FindFirstChild("Shorts-Red"):Destroy() -- Get's rid of player's clothing
local Temp2 = Char:FindFirstChild("Tanktop-Red"):Destroy()
local Dress2 = game.Workspace.Dress2:Clone() -- Creates a clone of the 3D Clothing
Dress2.Handle.Anchored = false
Humanoid:AddAccessory(Dress2) -- Adds the clothing to the player
end -- closes out this if statement
All this is doing is identifying the pieces of clothing so it knows which one to put onto the player.
Step 8: The Game Should Be Done
We know, we've missed a lot of information out of this form, but that's because well we can't give out ALL of our secretes or else our game would go out of business! But we'll do you a good one, psst, here's a link to the game download so you can open it and experiment.
https://drive.google.com/file/d/1lzHFWfO-R2z6C8VXqX4ss0D8mtFDJ5R4/view?usp=share_link
Step 9: Moving On.... What Is the Game and It's Purpose?
Mixed and Match It. The feature of the mall right in our hands. This game is supposed to be it's own Metaverse where you can either shop or game.
Backstory: Our game started up mostly as a concept, though we wanted to take a jab at it and actually attempt to make it. Which is why we dipped our toes into creating it on Roblox. Since I (Josadec) has had well over 3 years of coding and developing on Roblox I decided to take the approach for our team to code and develop it. Don't get me wrong without the team I would be lost, from Christianna creating the idea, Mia doing our research, and Cassie giving us all the extra ideas, we decided it would be best to attempt our try to create it.
Joining The Game: Back to the game, you're supposed to have the ability to shop and game. When you first load into the game, if it's your first time it'll prompt you to create your avatar, and profile. When creating your avatar it's going to ask you many questions to create an avatar to fit you and your body measurements, etc. Questions such as, what shoe size are you, what waist size, what stores do you shop at, what brands do you like, colors, all that fun stuff. Though all these questions lead up to you, what you wear, your style and preferences, it's very personalized. Once you create your avatar you are then prompted to finish your profile, and then you're done! Once you're all done with that it'll prompt you to either game or shop.
Gaming: The gaming portion of this game is set to be massive. It's supposed to take you to a HUGE mall with server sizes ranging from 750-1200 depending on how much the servers can handle, you are with LOTS of people. In the huge mall there are hundreds of stores that can range from small businesses to large corporations. Some of the malls can even consists of small stores filled with moderation approved user generated content. In these servers you can simply try on clothing, create avatars, and hangout with friends. There's so many possibilities with our idea, but we wanted it to be a safe place for everyone to enjoy with their friends and to make new friends!
Shopping: Shopping in our game is a lot more private and personalized. When you select to go shopping you'll be taken to a much smaller mall with most likely around 12-18 stores out of your personalization. As stated previously in the forum's description. When shopping you can go to any store in your personal mall and add things to your cart, try on, and if you put the right measurements with your sizing when trying on the clothing you should get a very realistic display of it on your virtual body. Now what if you want to have multiple sizing as if you're shopping for different people? That's 100% okay! All you need to do is create a new profile and put in the person's sizing you're shopping for. Once you place an order with all the clothing you want our services will sent your order info, shipping address, and payment info to our retail stores, though to save time and patience it'll all charge your card at once instead of multiple businesses charging the card. The way we get stores into our mall for you to shop at is by sub-contracting them. They'll contract with us to have their business in our game, and we'll take out a 5% fee of all their profits to go for ourselves along with some other fees for our services. The shopping portion of the game is a lot more in-depth but since it's still mostly a concept it is still in the process of actually being developed along with the idea itself.
Future of Our Game: We come up with new ideas every day for our game. We hope in the future to actually have our game be able to work to it's full potential and off of Roblox's platform due to their Terms of Service and restrictions with working with other brands. We hope in the future to see an actual rendition of our game on every platform from mobile, to pc, to consoles, and especially VR. We would love to see it on gaming engines such as Unity, or Unreal Engine.
We hoped you enjoyed our little form about our game and what we truly want for our game's future. If you wish to play the game without creating it here is a link!
