THE MALL

Created By:

1801451046 CYNTARA PRILLY ADWINDA

1801451084 NIKEN PRAMADHANTIE

The Mall is a simple simulation of a “mini” mall. Inside the mall, there are 10 stores. Each store has different brand but they might sell identical things. The stores inside are: Topshop, Guess, Clothing Store brand B, Bookstore, Cinema XXI, Chatime, McDonald, Bonchon chicken, Mart, Pharmacy, and Guess.  Player is placed inside a mall and will be shown what store he/she should go. Each time the game is reloaded, it will randomize the object that player should find.

The game is created with Three.js. As for the modelling, we use Blender. The game implements translation and rotation among axis to create player movement. We also use OrbitControls.js for zoom in/out controller. The game also uses third-person controller, and camera looks at the position of the player from top.

Here are our screenshot for the game:

Landing page. On the right hand side, player is shown the store he needs to find

Scroll mouse for the zoom out to give more clear views

Find the store, which is in this case is Chatime.

If player found the store, mission complete.

Here is our video demo for this project:

This week, Niken and I have been improving many things for our project. Such as; adding the object to become the player, adding camera onto the scene and the camera is following the player. We also made the camera to look at the object position. We also have created arrays to hold the object, and did the coding to get random items from the array.

We also adding some controllers for the player, which is using the keyboard arrow. We implement the translatation along an axis and rotation with matrix (multiplying the object we want to rotate with the rotation matrix along an axis with specified angle). We also can use the mouse to rotate and zoomin/out, so the view will be more clear.

Lastly, we added the position detector. We check and compare the player’s position and each store’s position. And if the position of the player is in the position of the store we’re searching for, then the mission is complete.

Tomorrow is our final presentation. We also finished the reports and made the video demo. Wish us luck!

Landing page. The text on the left is to show where and what thing needs to be purchased. It is randomized.

If the target store is found

Video demo making

We added more rooms for the mall (and will add more). Maybe, we are going to have 10 counters on our mall.

Last progress, we did not know how to load more than 1 object  in the browser. But we finally knew it. Before, we also had some problems on loading textures for our object in the browser. The textures can’t be seen, it was all black. But, today we finally can show the textures on the browser after watching some tutorial video from Youtube.

5 different objects (rooms) can be loaded in the browser

McDonald counter (chair has the textures)

Another object that has texture (The blue shelf)

We did the design for the store we’re going to put in our “mini” mall. We divided the jobs to do the design.

Clothing store (Top View)

Side view – Clothing store

Bookstore that has been imported to be displayed in browser

Currently, we’re still working on designing more rooms as well as the coding for the rooms and the players.

Name                                                           ID                                           Responsibility

Cyntara Prilly Adwinda                      1801451046                               Design, Coding

Niken Pramadhantie                          1801451084                              Design, Coding

Project Title: The Mall

Description:

This project is inspired from daily activities when someone goes to the mall and shop for certain things. The Mall project describe the behavior and activities of people when shopping in the mall. We also want to create an enjoyable and fun game for player by enabling them to explore the scene.

Continue reading →