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

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.

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. 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.

Adds to the cooking theme environment

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 liked the following one 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.