A capstone project for Macalester College's COMP 446 by Cecelia Kaufmann, Lucy Rubin, and Linda Lor
This interactive web application takes you into the world of unicorns, with the main goal of the unicorn being outrunning the paparazzi to collect sparkles! Then, go spend those sparkles at the store to show off to all your friends! Finally, go chat with other unicorns while you are dressed in your finest attire.
This project uses the Django Framework to host the login and then a separate server to host the multiplayer/chatroom feature, which is then embedded within the wesbite. The game utilizes the Phaser Framework, and we also used Ajax for asychronous loading. For the front-end framework, we used HTML, CSS, and Javascript.
After cloning the above repository, here are the steps to get the uni-verse up and running. Please run these commands below. Running this command will download all of the software needed for the application to run.
First, ensure that you have the most up to date Python, which should be Python 3. Before begnning this process, you will want to be in the terminal and you will want to cd into the project directory.
Step 1: In the terminal, run "pip3 install -r requirements.txt"
pip install -r requirements.txt
Step 2: Then, create a virtual environment by typing "pip install virtual env" in the terminal.
pip install virtual env
Once this is run, create the virtual environment and activate it:
python3 -m venv venv
source venv/bin/activate
Step 3: Next, change your directory to be loginscreen:
cd loginscreen/
While in this directory, run the server with "python3 manage.py runserver"
python3 manage.py runserver
At this point, Django will print out a url in the terminal. If you go to that url, the website should be running (with an exception to the chatroom).
To host Uni-verse on your computer and allow users on the same network to join, instead first navigate to chatroom_template.htmland enter your IP address on line 45.
Then run the server with:python manage.py runserver http://your_ip_address:8000/
Step 4: To run the chatroom, we need to open a second terminal. Once the second terminal is opened, cd into the project, and install "npm install express".
npm install express
Step 5: Then run "node server.js" (this will activate the second server for the chat room).
node server.js
Step 6: And you are done!! Take the link in the first terminal (step 3) and put it into your browser. From there, you should be able to go into the Uni-verse! When you are done, Ctrl + C to break and then type "deactivate" to deactivate the virtual environment.
If you set up your computer as a host in Step 3, share that link with others who are on the same local network as you and you can play together!
First, ensure that you have the most up to date Python, which should be Python 3. Before begnning this process, you will want to be in the terminal and you will want to cd into the project directory.
Step 1: In the terminal, run pip install -r requirements.txt
pip install -r requirements.txt
Step 2: Then, run pip install virtualenv.
pip install virtualenv
Once installed, create the virtual environment and activate it:
virtualenv --python uni-versecomp446 venv
.\venv\Scripts\activate
Step 3: Next, change your directory to be loginscreen. While in this directory, run the server with "python manage.py runserver"
python manage.py runserver
At this point, Django will print out a url in the terminal. If you go to that url, the website should be running (with an exception to the chatroom).
To host Uni-verse on your computer and allow users on the same network to join, instead first navigate to chatroom_template.htmland enter your IP address on line 45.
Then run the server with:python manage.py runserver http://your_ip_address:8000/
Step 4: To run the chatroom, we need to open a second terminal. Once the second terminal is opened, cd into the project, and install "npm install express".
npm install express
Step 5: Then run "node server.js" (this will activate the second server for the chat room).
node server.js
Step 6: And you are done!! Take the link in the first terminal (step 3) and put it into your browser. From there, you should be able to go into the Uni-verse! When you are done, Ctrl + C to break and then type "deactivate" to deactivate the virtual environment.
If you set up your computer as a host in Step 3, share that link with others who are on the same local network as you and you can play together!
In this section, some things we credit will be based on file names. Note that these names may differ greatly from their original file name and had to be renamed for semantic reasons.
Unicorn Base and Clothing Assets: Linda Lor, Lucy Rubin
Dress Up Backdrop: Linda Lor
Get Sparkles Tileset: Lucy Rubin
Get Sparkles Sprites: Linda Lor, Lucy Rubin
8bitpaparazzi.mp3: TheQuinnDruRocks Hard
Get Sparkles Game Transition: Pixabay
countdown.mp3: Lesiakower
gameOver.mp3: Pixabay
Litte_Apprentice.wav: Tim Beek
friday_afternoon.wav: Tim Beek
monday_morning.wav: Tim Beek
waterfall.wav: InspectorJ
draw_pull_out.wav: Garuda1982
tick.wav: el_boss
equip.wav: alegemaate
purchase.mp3: kiddpark
camera_shutter.m4a: roachpowder
Confirm.wav: jdwasabi
Button & Containers Design: Lucy Rubin
Home Backdrop Image: Linda Lor
Rainbow Icon: hiclipart
Universe Logo: Linda Lor
HTML and CSS for the 8bit style container: robdimarzo
HTML and CSS for video game style buttons: reulison
Virtual Environment Set Up
Accessibility Resource
Django Login/Login Database Tutorial
Django User Authentication Tutorial
Positioning/parenting the phaser canvas
Removing border form iframe
Custom scrollbar from Eye Catching Scrollbar #4
Tag Inputs
Setting up mulitplyer server
Handling TypeError, Listen
Disconnecting a socket
Sending messages to iframe
Virtual Environment and Requirements.txt file
Customize font in phaser
User Permissions for audio
Volume control for AudioBuffer\
We would like to extend a huge thank you to Scratch for their Vector editor- which was used to make over 80% of the assets.
We'd like to say a huge thank you for checking out our project! :)
