Map Design

Introduction

This wiki will outline the design decisions involved with the map layout.

• 1. Map Layout Inspiration
• 2. Development of tile design
• 3. Development of map layout (Map design and player sprite)
• 4. Implementation in the codebase

Map layout inspiration

Option 1: Dining area centric

Overview

• Customer queue visible on the left.
• Large dining area with multiple customers, customers showing their order.
• Smaller food/ kitchen area at the top 2d - top down

Evaluation

Endorses gameplay that is more focused on the waiter/ waitress experience. Lower emphasis and space to design a comprehensive cooking experience. 2D top down is feasible and usually good the cooking type game.

Example/ inspiration

Inspiration from craftpix

Option 2: Kitchen centric

Overview

• 4 separate quadrants
• 2 cooking areas, 2 plating areas, vegetable boxes, sinks, garbage bins, order station, cutting boards, stoves, pots
• Would need to keep all 4 quadrants accessible as only one player 3d - top down (angled)

Evaluation

Provides a greater focus on the kitchen/ cooking and food preparation experience. Lower focus on customer satisfaction, food service and ordering. 3d map design as dimension to the map and adds to realism. However would be very difficult to implement.

Example/ inspiration

Development of tile design

Initial tile design

We started with designing the floor tiles. We decided on a checkered pattern for the floor since it adds to the cooking theme environment. We designed a 2:2 tile design. Usage of white colours too jarring and bright when implemented into the map. It was not pleasant to look at. We played with different colours.

Blue tile hexcodes

• Blue: #8fbbba
• White: #ffffff

Blue tile design

Purple tile hexcodes

• Purple: #9b848c
• White: #ffffff

Purple tile design

Final tile design

After reflecting on the harshness of the white, we decided to go for something that was a bit more pastel while including pastel. And rather than including white, we decided to go for lighter shades of the colour. Additionally, instead of going for squares, we design our tiles to include rectangular areas which made it more pleasant to look at. We settled on orange and blue. The 4:2 tile design adds to more angled look of map . Customer ordering section and kitchen cooking area more distinct from one another. This helps distinguish where the customers would be waiting.

• Visually appealing and less jarring with the absence of white colours
• Implementation of texture made tiles look more dynamic and interesting

Blue customer tile hexcodes

• Light blue: #9db7d2
• Dark blue: #7da1bf

Blue customer tile design

Orange kitchen tile hexcodes

• Light orange: #fcc996
• Dark orange: #eda66a

Orange kitchen tile design

Development of map layout

Option 1: Single quadrant map centric

Overview

One kitchen quadrant: Ingredients on the right, preparation on the left, cooking and plating in the middle and customer orders at the top.

Evaluation

Player able to cook meals quicker and navigate through the map easier due to closer quarters. Smaller map layout limits future implementations. Based on the design document and discussions had in the studio with the other teams, it seems that we were thinking a layout that allows for more space and implementation of different stations.

Mockup design

Option 2: Multi quadrant map centric

Overview

Two kitchen quadrants: Ingredients and preparation in right kitchen quadrant, cooking, plating and orders on the left kitchen quadrant.

Evaluation

Larger map to allow for more creative future implementations. It helps with the ability to serve more customers due to increased customer area section as well as increased distance between sections also decreases cooking speed.

This allows for the implementation of different stations and items to be added as well as the player to move around more when having to manage different tasks that need to be completed.

Mockup design

Final map design and player

Overview

After drawing and making the above prototype we decided to design a high-level prototype that we would be able to replicate in the game by filling in the map area with the tiles we designed. Hence we decided to go for a 2d top down look for feasibility since 3d would be very difficult to implement. We added benches to seperate the stations that would be added in future sprints. Shadows added to bench designs to have a better look.

We also decided to add a border added to line the outside of the building. Doors added at the top left and bottom left side of the map to allow for customers to come in and out in future implementations.

Evaluation

Map looks more dynamic and angled due to addition of shadows to benches. Map perimeters are clearer and map looks more cohesive. Customer entry and exit clear through addition of doors. The final design uses a colour palette that matches the design discussed with others as well as the theme of the game. The layout allows for the implementation of future features discussed.

Developed final map design

Bench creation

6 different types of benches will be added which includes a vertical left and right bench, vertical centered top and centered bottom bench and horizontal top and bottom benches. We designed our own benches since no assets we liked were found on the internet. Hence we decided to create our own similarly to the tiles as well as the map layout we designed.

Bench layout

Player sprite

We looked for a player sprite, a chef that had a pixel design that was pretty simplistic. We wanted to design our own but really liked one we found online. We liked the one above taken from https://opengameart.org/content/chef-animated-classic-hero-edit. There are also multiple movements for this sprite which is very useful when wanting to implement player movements in later sprints. We didn't find any options we liked so it was pretty easy picking the player sprite. It fit in well with out theme as well.

Implementation in the codebase

We modified a few files in order to create the above layout described. We modified the:

• ForestGameArea: Added the spawnBenches and spawnBench function that creates benches using the functions/functionality of the Bench.java file created. We added the spawnDoor function that adds the doors to the map. We also added the spawnWall function to create the walls around the game area, this goes with the makeBorder function. We modified the spawnPlayer function and also had to make changes to the coordinates for the spawnStations.
• MainGameScreen: Change the camera coordinates CAMERA_POSITION to change how the map is viewed on the computer window.
• TerrainFactory: This class was modified quite a lot. The variables and functions were renamed to include KITCHEN instead of FOREST. Additionally, the fillTilesRandom was replaced with fillTiles. No functions were added the same names were used as the original code provided to us, hence this is way not much javadoc is included since the functions stayed the same except for the blueTiles to create the customer area and a comment was included to describe its use.
• Created Bench class in game.entities.benches: This creates the benches (setting width, height and scaling) as well as a collision function that handles collisions createBench. However no testing was done for this function this is because collisions was not meant to be implemented in this sprint, was not included in our feature ticket hence we just added it for a better understanding of if the player could move enough when looking at the layout created.
• PlayerFactory: Just modified the player sprite
• assets/images folder: Added any images and created additional folders frame and benches in the stations folder as well as the tiles and other necessary images for the creation of the map.
• GdxGame: Modified the background colour to replace the pale yellow to an almond colour We made some very minor changes that were not mentioned here since this wiki only includes the main changes/additions made to the code.