Inspired by the video game SimCity , in this project, we would like to build a virtual reality world where a user can design their own city. The user will play as a designer to place different buildings in a city, including parks, office buildings, schools, factories, hospitals, municipal buildings, and so on. Ideally, we would like to give the user the ability to design roads and streets as well as traffic lights. The city's layout will then be rated by the pedestrians in the city. The pedestrians will walk around the city, and their moods will change in response to the buildings they walk by. For example, if the office buildings are too clustered, pedestrians would probably feel bored. If the hospitals and police stations are too separate, pedestrians would probably feel unsafe.

• A 2D map builder that allows the user to manipulate a 2D map and a top-down view 3D city will generate and change correspondingly.
  • We plan to accomplish most of this in Assignment #6 individually to gain more hands-on experience with aframe.
  • This feature will probably require a lot of 3D models.
  • Ideally, buildings are instantiated with OOP. Each type of building is a separate class. Each type of building will have a different effect on a pedestrian.
  • The map will have a collision detector so that buildings cannot be too close to each other.
  • The user can remove a building from the map or clear the entire map
  • Optionally, there should be a button to save the map to the local storage.
• Pedestrians will walk around to rate the city
  • Some animated 3D models that can walk smoothly
  • Pedestrians should be able to search for a path to walk (To start, there will be only one road)
  • Dynamically display their rating based on the surrounding buildings
• A traffic system (two ideas for now):
  • There are a lot of driving cars in the city so the user has to design the positions of traffic lights to resolve the tradeoff between the safety of pedestrians and the efficiency (speed) of the transportation
  • (When the user can design roads) Using some path-finding algorithms, the cars will find some road to go, providing more interactions. e.g.A car might go over the speed when there are too few police stations, scaring the pedestrians

We have implemented the basic 2D map editor in 2D. In the “Edit” Mode, users could choose from different types of building models and place them on the map. The buildings are differentiated by their colors. Removing and collision detection are also implemented. They could further see the “city” they have already built from scratch by entering the “View” Mode, in which they are able to navigate in VR and experience the city of their own creation in 3D. User can also move to a building by clicking it.

We also plan to add rotation, but it is hard to display the UI to the user as the user cannot see which face the building it is. A model will possibly be added on the right of the panel to display the building so that the user can preview the building and rotate it.

We have small thoughts on bringing AR into the CIMS City, such that they are able to interact with current buildings in some way with fiducial markers. We are looking for a way to work with AR camera. Ideally, the camera is only open when the user wants to add something, and it will be turned off once the item is added.

Also, the current model with pedestrians may be difficult to increase its flexibility or adding motions and individual actions that could possibly be triggered if they are near certain types of building models etc. We are considering changing the pedestrians into cars (to make it easier by getting rid of animations), which would have less flexibility yet easier to implement and seem more neatly in the map.

We have implemented the new version of background music for the game (inspired by the original soundtrack of SimCity 2000) to give the game a metropolitan vibe. Road elements are now available to be added as roads on the panel in editing mode, which would automatically be reflected as “bricks” on plane in the 3D mode. Ideally with further development, pedestrians are able to wander around the streets and are only allowed to walk on such restricted regions only.

The process of adding road bricks is similar to choosing building models on the edit panels. Roads objects are interpreted by the program as smaller planes on top of the massive grass playground we have for designers.

It would be more convenient for designers if they could toggle around a specific region and pave the roads automatically over that selected area. Should I advance in this by increasing the width & height property for the road metadata so that every click reaches a wider scope, or should I try to change the default “paving-editing” process by changing the state of mouse cool down, so that the bricks would be paved when the designer is hovering over the map?

When first entered the game, players could see a blank 2D control panel, which serves as the canvas for them to place models. The colored squares on the side have captions indicating the type of building models they each support, as well as different graphics of the roads that players could select from. Once a building has been selected, a 3D preview of it is displayed to the left of the panel, with left and right arrows allowing players to rotate the model to their desire; then by clicking on the canvas, a colored square representing the building would be placed on the 2D panel, and an actual 3D model of the building would appear correspondingly on the 3D map down below. Types of buildings include offices, apartments, hotels, schools, parks, stadiums, and straight and turning road graphics. Buildings are not allowed to intersect with each other, and they may not be placed on top of the roads.

When players want to make changes to what they have already built, the green box works as an eraser to commit partial changes if they click it first and click the parts they want to get rid of on the 2D panel; if they are looking for a complete start over, the red sphere would clear up the panel and gives them a fresh start. On the top right corner, the BGM button allows the player to turn on or off the background music for the game. After they finish editing the city, clicking the “view” button on the left-right corner helps them to enter the VR world and see for themselves what the city looks like in 3D; they could navigate the city around using W-A-S-D. They could always make more changes by clicking “edit.”

Roads must be paved so that it goes across from top to down so that there could be traffic in the city. Detecting whether there is a way from the top to the bottom uses a Union-Find data structure, whereas finding all possible paths uses a Depth-First-Search algorithm. If the road is paved correctly, clicking the “test” button would generate cars rushing across the city, entering from the top and exiting at the bottom. Although animation is not implemented in the aframep5 library, the turning of a car is achieved by ‘spinY.’ The passengers in the car would rate the city according to the buildings they see on the road; to meet all essential needs of the citizens, the designer should place all types of buildings within a reasonable distance. On the control panel, the player can see how satisfied each passenger is with the city. The more satisfied a passenger is, the more yellow it appears on the control panel.

If the player ever feels confused about what is missing or how they could improve, by clicking “need help?” we would provide you with ideas on how to increase the overall satisfaction level of the city — be careful of the hidden meanings between that advice, they will guide you to the correct direction if you interpret it correctly. The type of voice message generated is communicated through the toPlay variable in the main javascript file to the help page using iframe. The variable indicates the type of missing building, and the corresponding voice message hints would therefore be delivered to the player.

For future development, more models of buildings could be incorporated, and the types of roads could also be added for design purposes. Ideally, we would love to introduce animation to the city, like walking pedestrians and running water. Right now, the roads only have cars racing through, and it would be interesting to have pedestrians walking around the streets to see the city for themselves while giving out their ratings. The original SimCity also has a variety of infrastructure that asks the player to design, such as setting up garbage recycling stations and electricity; those are also excellent additions to the current project. Also, the current conversation page could be more elaborated with some AI chat models like chatGPT. However, we need to wait for their API.