Welcome to the game where you get to be your favorite animated characters!
Screen to Scene is a game where we created a platform where you can walk into an immersive experience in the screen and see the characters standing in the scene with 3D creations of the place the characters' most iconic location. The shows that were chosen were: SpongeBob SquarePants, Regular Show, The Courage the Cowardly Dog Show, and The Amazing World of Gumball. The scenes that are included in this immerisve experience are: the park of Regular Show, the houses of SpongeBob, Patrik, Squidward, and Courage, and then the school Gumball and Darwin attend.
These scenes will also have a secret transition that will lead you to a custom Roblox game! This game allows you to play as 1 of 6 characters, and you can choose between SpongeBob, Patrik, Mordecai, Rigby, Courage, and Gumball.
To access this space, click on the following GitHub Pages link: https://sachijoshi.github.io/Screen_to_Scene/projects/index.html
How to move around: The WASD keys on your keyboard correspond with directions: W [forward], S [backward], A [right], D [left]. You can also use your mouse on the trackpad to drag the screen around to look up, down, right, left or any direction.
Below are the various scenes that we have created with three.js, javascript, html, and css. Below it shows the inital scene the site opens up to which is from the Courage the Cowardle Dog Show:
You can then click through the different scenes from the menu button in the top left corner. Below are the other scenes you can immerse yourself in:
Below are the different characters you can choose from:
This game is an interactive adventure where players can explore, morph into different characters, and save their progress using checkpoints. When players first load in, they are greeted with an intro screen featuring smooth camera movements between two key points, creating a cinematic experience. Once the player clicks "Play," the intro screen disappears, and the Morph Menu and Reset Button become available. The Morph Menu allows players to transform into different characters, such as SpongeBob, with the camera seamlessly following the new character. Players can save their progress by touching checkpoints, which update their respawn location. If a player dies or falls off the map, they will respawn at the last checkpoint they touched. If no checkpoint is touched, the player will respawn at the starting position (Stage0). The Reset Button allows players to return to Stage0 at any time, giving them control to restart their progress if needed. This system provides a smooth, user-friendly experience with simple but effective mechanics.
We acknowledge that there are some improvements we can make to create an experience that is better for users of the site as well as users of the Roblox game.
- Add a barrier box around the scene so that users cannot indefinitely fly off the screen and keep moving further from the main area of the scene created.
- Add more secret entrances to the Roblox game and more easter eggs so that users are able to be surprised when they do different things on the screen and explore different aspects of the site.
- Add more details to the structures to make it very similar to what they look like in their animated series and incorporate some blender models for this.
- Optimize the Graphical User Interface [GUI] to look more modern.
- Implement more difficult obbies and different difficulty levels so that people with a more advanced skill set are able to play levels that match their skill level.
- Create a version where every morph model is able to move like they theselves are running in the scene and add more characters from the television shows so you are able to be any of the iconic characters.
-
Q: How can I access the game?
A: You can create your own Roblox account by following the steps below:
- Go to Roblox.com and click Sign Up.
- Fill out the required information (birthdate, username, password, etc.).
- Verify your email address (if prompted) to secure your account.
- Download and install Roblox Studio from here: https://create.roblox.com/
-
Q: How do I open and play the game in Roblox Studio?
A: Follow these steps:
- Clone or download the project files from this GitHub repository.
- Locate the .rbxl file in your downloaded files.
- Open Roblox Studio and select File > Open From File.
- Navigate to the .rbxl file and open it.
- Press the Play button in Roblox Studio to test and explore the game.
-
Q: What features can I expect in the game?
A: The game includes:
- A cinematic intro screen with smooth camera transitions.
- Checkpoints to save player progress.
- Morph buttons to transform into different characters.
- A reset button to return to the starting stage.
-
Q: Is it possible to play it without Roblox Studio
A: Yes, the link is below:
Thank you for exploring our project! Below is the team that made it happen.
Thank you to:
- Edwin Juarbe for helping create the initial site and connections between them with the link to the Roblox game, and creating the game from scratch.
- Sachi Joshi for designing the site including the different structures and character additions for each specific scene and the movements.
We both are currently in our CS460: Graphics course at the University of Massachusetts Boston, and this was our final project for the course. We used a lot of what we learned during the course of this semester and applied it to our project, such as the lighting, camera movements, WASD key movement, and we implemented Roblox Studio and other tools to create a project we enjoyed making. Thank you to Professor Daniel Haehn for guiding us through the semester and being very encouraging! Thank you to the CS 460 staff as well for all the help and feedback!
We would like to extend a heartfelt thank you to the Roblox community for providing access to an incredible library of free models, which played a vital role in the development of this project. A special thank you goes to the Roblox DevForum, which served as an invaluable resource for troubleshooting and learning new techniques. we also want to give a big shoutout to GnomeCode, BrawlDevRBX, and AlvinBlox for their insightful YouTube tutorials, which provided clear guidance and inspiration throughout the process