```

 

ProjectRoot
│
├───Content
│   ├───Art
│   │   ├───Backgrounds
│   │   └───Sprites
│   │       ├───Animals
│   │       │   ├───CatSparkle
│   │       │   ├───Chihuahua
│   │       │   └───SlothPapa
│   │       ├───Emojis
│   │       ├───Food
│   │       │   ├───Drinks
│   │       │   ├───Ingredients
│   │       │   ├───Meals
│   │       │   └───Snacks
│   │       └───Utensils
│   │
│   ├───Audio
│   │   ├───BGM
│   │   ├───Octave
│   │   └───SFX
│   │
│   ├───Blueprints
│   │   ├───Actors
│   │   │   ├───Customers
│   │   │   ├───Foods
│   │   │   └───Utensils
│   │   ├───GameModes
│   │   ├───Managers
│   │   └───UI
│   │       └───Widgets
│   │
│   ├───Fonts
│   │   └───Press_Start_2P
│   │
│   ├───Materials
│   │
│   │
│   └───Scenes
│
└───Source
    ├───Game
    │   ├───Actors
    │   │   ├───Customers
    │   │   ├───Foods
    │   │   └───Utensils
    │   ├───GameModes
    │   ├───Managers
    │   └───UI
    │
    └───Utility
        ├───Audio
        ├───Singleton
        └───Miscellaneous

```

Gameplay Architecture

Drag and Drop in UE5

It is proved to be successful using Blueprint to drag and drop UI objects. Colliders are not required to detect any interaction.

In order to make `drag-and-drop` UI works. We need at least two `widget blueprints`, assuming the main UI is already attached to the `level blueprint`. The required blueprints are listed below.

• Draggable Item
• Destination
• Dragging Image (Optional)

Draggable Item

Destination

In this case, the destination is the customer, as a widgget plueprint.

9-Slices

https://sgarces.com/?p=215

UE5 doesn't have Sprite Editor comparing to Unity. The closest feature that could split an image into 9 parts is Box>Margin.

It promises to keep the image or texture in a stable shape. However, it doesn't blend well.

This is the result produced by Unity; the corner shape and style are completely reserved for pixel art.

In the other hand, UE5 doesn't seem to reserve the sharpness for each pixel.

Slate UI

Slate is a underlined UI system for UE5.

1. UI Development

Unity is often praised for its user-friendly UI development tools, including a visual editor that allows you to create and arrange UI elements directly in the scene, as well as prefab support for UI components. If your game heavily relies on UI and you find Unity's UI system more intuitive, it may be a strong argument in favor of using Unity.

2. Pixel Art:

Unity has a long history of supporting pixel art games and features that are well-suited for this art style. Margin is not the replacement of 9-slices.

1. UI Workflow Complexity:

UE5's UI development workflow can be more complex compared to Unity. To create UI prefabs, in UE5, UI elements are typically created as Widgets. Managing them involves more steps and may not be as intuitive for UI-centric development.

2. Pixel Art Support:

KebabLala relies on pixel art, so there will be challenges in getting pixel-perfect rendering and scaling in UE5, as it has traditionally been more geared towards high-fidelity graphics.

3. Performance Overhead:

Unreal Engine is known for its advanced graphics and rendering capabilities. It will be overkill to use UE5 for 2D pixel game.

A cutout mask(aka. inverted mask) is commonly used in tutorials or highlighting specific elements. Unlike traditional masks that show what's inside them and hide everything outside, a cutout mask works in reverse.

Implementation

   1. Create a shape (circle, rectangle, etc.) as a parent where you want your "window" or "cutout". Make sure you add the "mask" component.
   2. Create an image inside the mask(parent), and set it dark but leave alpha around 200-230 like a darkened overlay. Expand it outside of the screen.
   3. Work with materials, please visit CutoutMask.cs

Result: Result:

During Gameplay: DOTween assists in creating movements and alpha transparency, transitions, and animations, making the gameplay more dynamic and engaging.

During Paused Game: A special feature of DOTween was utilized, allowing animations to run even when the game's timescale is set to 0 (paused). UI transitions and feedback are still presented to the player.

I chose Model-View-Controller (MVC) as the backbone pattern for this game. This architectural pattern separates the game's logic into three interconnected components:

Model: Represents the core logic and data of the game. It consists of all the game mechanics, rules, and data storage, ensuring the game behaves as intended.

• In this case the model is any `scriptableobject` files where it contains the data of the object.

View: It represents the visual elements and UI of the game. This is what the player interacts with – everything they see, from characters to menus.

Controller(Manager): Acts as an intermediary between the Model and the View. It takes the input from the players through the view, processes it (with possible updates to the Model), and returns the output display to the View.

By adopting the MVC pattern, the overall scripts became organized. Issues could be isolated to one of the three components. Furthermore, it is efficient if the project grows bigger and open for collaboration, as multiple developers could work on different components without causing conflicts.

Drag-and-drop system(80%)

• Able to deliver both drinks and kebab plates to customers.
• Still have some bugs from its collider

Level Config

• The game is playable in every level. From level 0(tutorial) to level 5(Final)
• The config includes:
  • Dynamic shelf activation; the updated code structure allows shelves to appear based on the level.

Level 1 Settings

Level 5

How does the config work?

Core Classes and Architecture

• LevelSelectManager

Customer Countdown and Reaction

• Within a given time for each customer, serve the order before the time runs out.
• The customer will get upset and leave.

Food ID with StringBuilder

• Drinks have 4 digits id: 0000(cola), 1111(ayran)
• Look at Full Recipe as a reference:
  • The plate has 9 digits. The ID will be 000000000 if the plate is empty
  • The more products we add to the plate, the more 1 will appears in the id.
  • 111111111 means the plate contains all mixture