Case Study
Heading
Jan 4, 2024

How we took advantage of the trends on each platform: Obby but you ESCAPE PRISON

The main objective of this project is to create an Obby, a popular game genre within Roblox

Premise

The main objective of this project is to create an Obby, a popular game genre within Roblox, focusing on stealth mechanics.

The Mision

To obtain a playable prototype within a 2-week timeframe, after which an evaluation will determine whether to proceed with further development. The decision to continue was made due to the positive reception of the idea, leading to the implementation of purchasing systems, an additional game level, and UX improvements. The development period ultimately took one month, showcasing the studio's capability to create engaging experiences on Roblox.

ART

The art of Obby Prison features a highly minimalistic 3D pixel-art style with nighttime ambience that allows lighting to stand out and achieves the desired look and feel. Of course, if you are planning to escape from prison, it’s best to do it at nighttime. Let’s now go over the key defining elements of the project.

Pixel art texturing

As you may know, pixel art is a style that emphasizes the old-school pixelated look. It’s always beneficial to evoke a nostalgic feel, as many old games employed this art style due to technical limitations. Now, we have the opportunity to expand upon this art style while preserving its original essence and incorporating new technical possibilites available today.

Here are some examples from Obby Prison:

Floor tiles texture
Metal plating texture

And here’s how this type of texturing appears in our 3D environment:

Textures in game

Lighting

Now that we have a finished scene with pixel art textures, it’s time to focus on the lighting. This aspect is crucial to achieving the final look and feel we desire, as it enables us to highlight traps and important zones between the decoration. The primary objective for the player is to avoid these traps.

The initial step involved setting the entire scene to nighttime, allowing lights and emissives to stand out prominently. This is particularly vital for the user experience, as all traps either consist of lights or lasers that players must to avoid.

A good example for this is the watchtower traps, utilizing spotlights to identify the prisoners attempting to escape:

Spotlight example

UX improvements

Now, with a fully textured scene, completed lighting and ambience, we observe that it’s challenging for the player to discern the exact “kill-zone” of the lights due to their diffuse nature. Consecuently, we decided to incorporate indicators for all traps of this kind. This modification makes it much clearer for players to see and avoid the lights effectively.

Light indicators

Custom guard NPC

One of the traps involves a guard NPC that follows you around in different areas, attempting to locate you. Naturally, we opted to create a custom Cool Banana Cop skin for this character:

Cop Banana dance
Cop Banana being cool

Gamification

As inspiration for this game, stealth zones from games like “Splinter Cell” or the stealth phases from “Metal Gear Solid 1-2” were used as references. To begin, the first thing implemented was an isometric view camera in Roblox. This was achieved by adjusting the camera's position in each frame of the game to track the player's position at a fixed height.

local Players = game:GetService("Players")
local RunService = game:GetService("RunService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local globalVariables = require(ReplicatedStorage:WaitForChild("globalVariables"))
local UIS = game:GetService("UserInputService")

local player = Players.LocalPlayer
local camera = workspace.CurrentCamera
local CAMERA_DEPTH = 40 -- Fixes distance

local originalCameraCFrame = game.Workspace.CurrentCamera.CFrame
local originalCameraFieldOfView = game.Workspace.CurrentCamera.FieldOfView
local isInIsometricView = false

local function changeToIsometricView()
	local character = player.Character
	if character then
		--print("CAMERA IN ISOMETRIC")
		isInIsometricView = true
		local root = character:FindFirstChild("HumanoidRootPart")
		if root then
			local rootPosition = root.Position + Vector3.new(0, 0, 0)
			local cameraPosition = rootPosition - Vector3.new(0, -CAMERA_DEPTH, 25)
			camera.CFrame = CFrame.lookAt(cameraPosition, rootPosition)
		end
	end
end

local function changeToIsometricViewMobile()
	local character = player.Character
	if character then
		--print("CAMERA IN ISOMETRIC")
		isInIsometricView = true
		local root = character:FindFirstChild("HumanoidRootPart")
		if root then
			local rootPosition = root.Position + Vector3.new(0, 0, 0)
			local cameraPosition = rootPosition - Vector3.new(0, -CAMERA_DEPTH + 15, 15)
			camera.CFrame = CFrame.lookAt(cameraPosition, rootPosition)
		end
	end
end



local function restoreOriginalCamera()
	if isInIsometricView then
		--print("CAMERA IN DEFAULT")
		game.Workspace.CurrentCamera.CFrame = originalCameraCFrame
		game.Workspace.CurrentCamera.FieldOfView = originalCameraFieldOfView

		isInIsometricView = false
	end
end

local function getGameStatus() 
	local gameStatus:boolean
	if globalVariables.gameStarted[player.UserId] == true then
		gameStatus = globalVariables.gameStarted[player.UserId]
	else
		gameStatus = false
	end
	return gameStatus
end

local changeCamera = ReplicatedStorage:WaitForChild("changeCamera")

-- Manejar el evento en el cliente
changeCamera.OnClientEvent:Connect(function(message)
	globalVariables.gameStarted[player.UserId] = message
end)


RunService:BindToRenderStep("OrbitalCamera", Enum.RenderPriority.Camera.Value + 1, function()
	--print("Game Status => ", getGameStatus())
	if getGameStatus() then
		if UIS.TouchEnabled then
			changeToIsometricViewMobile()
			return
		end
		changeToIsometricView()
	else
		restoreOriginalCamera()
	end
end)

To use this script, simply incorporate the following code into a local script within the StarterPlayerScripts folder of your Roblox Studio scene. Additionally, employ the remote event ”changeCamera” to switch the camera between isometric and normal in your scripts.

Obstacles

With the camera operational, we proceed with the development of different obstacles for the game. All of these obstacles pose a threat to the player if detected, and they are primarily categorized into two types:

  • Vision Fields:

a) Surveillance Cameras: these cameras feature a conical detection zone that periodically rotates 160 degrees.

b) Surveillance Spotlights: circular areas illuminated by spotlights that move along a fixed path, establishing a pattern the player must identify to overcome the obstacle successfully.

c) Guards: Non-player characters (NPCs) patrolling an area, capable of detecting the player within their field of vision. While the "power-up" of the "hidden box" or "smoke bombs" can bu used to avoid detection, the inner circle of guards can still spot players despite deploying these abilities.

  • Physical Obstacles:

a) Laser Walls: walls that toggle between on and off states at fixed time intervals. The timing. however, is independent for each wall, resulting in different patterns.

b) Mobile Laser Walls: walls that move in a fixed direction for a specified duration while activated and then return to their initial position while deactivated. This cycle repeats continuously.

c) Laser Floors: floor areas equipped with lasers that switch on and off at predetermined intervals, akin to wall lasers but differing in the approach to overcoming them. These add variety to the design of different levels.

d) Minefields: proximity mines capable of detonating upon contact.

If the player touches any of these active obstacles, it results in their death, and they respawn at the last checkpoint.

Combinantion of mines, cameras, light focus and laser floor level
Laser focus and mine field
Guards patrol and focus light

Mobiles laser wall and focus light
Death by laser hit

Power ups

To enhance the player's progress, there are up to 3 power-ups available:

  • Dash: when used, the player rapidly moves in the direction they are facing, aiding in overcoming tightly timed areas. It has a 15-second cooldown (CD from now on).

Dash

  • Hidden box: upon activation, the player transforms into a box and becomes invisible, thus becoming immune to vision zones. However, if the box moves, it disappears and enters a 10-second cooldown.

Hidden box

  • Smoke bombs: when used, the player throws a smoke bomb around themselves, allowing them to evade vision zones for 3 seconds while retaining the ability to move. This is a one-time use unless more are purchased.

Smoke bomb

Finally, concerning level design, we drew insirtion from a popular game genre on the Roblox platform — Obbys. These straightforward games task players with overcoming a series of obstacles to reach the end; they follow a linear structure and offer varied difficulty, typically being straightforward. The level design aims for diversity, alternating between easy and challenging sections.

The first level features an estimated duration of 15 to 25 minutes, while the second level intensifies in difficulty, usually taking between 20 and 40 minutes to complete without using power-up enhancements.

As additional features, the game includes a progress bar, checkpoints, mobile controls and a score leaderboard, enabling players to compete for the highest score. Progressing through a checkpoint earns points, and completing the level grants a substantial additional amount, motivating players to aim for high scores. The game also showcases achievements unlocked by playing the experience, entering the first level, completing the first level, entering the second level, and completing the second level.

Lastly, the experience integrates in-game purchases, requiring data management for each player in a database to accurately save their progress between sessions, ensuring persistence.

Conclusion

This Obby is designed to challenge players with seemingly simple yet ultimately difficult obstacles. It cleverly mixes straightforward and challenging zones to offer players breaks and prevent excessive frustration. Moreover, it incorporates monetization through integrated purchases for power-up enhancements, along with progression between levels.

One of its standout features is its expandability. New levels can be designed using the already-developed obstacles in different combinations, and additional ones can be created. Furthermore, there’s flexibility to modifiy or expand the monetization strategy by introducing new unlockable items for Roblox in-game purchases.

In essence, this game caters to fans of classic stealth games, providing an intriguing twist on the popular Obby-style within the Roblox platform. It offers a unique challenge and promises an engaging experience for players seeking a blend of strategy and skill.

Code
Roblox
Videogame
Hugo Serichol
Environment Artist

If you are looking for me, you can find me following the sun

Lianir
Coder
Case Study
Creating a Battle Pass system with NFT wearables - 100Avatars Garden in Decentraland
Case Study
How we made the Decentraland onboarding experience
News
Unity SDK7 Toolkit - Report 1