Studio: Merge Objects

Studio: Merge Objects

Overview

This project showcases the core merging functionality, allowing players to instantiate different objects on a collision.

Controls

Button Click: Spawn in primitive objects

Components

Mergeable Component

Defines objects that can be combined with other elements to create new ones.

Schema:

level: ecs.string

A string representing the object's current state (e.g. "can"), used solely for identification purposes.

Functionality

Tracks the of an object for combination logic. Used in conjunction with other components to determine valid combinations (e.g., "cylinder" + "sphere" creates a torus).

MergeHandler

Handles the logic for combining two mergeable objects and spawning in a new interactable object.

Schema:

entityToSpawn: ecs.eid
spawnedScale: ecs.f32
mergeWith: ecs.string

determine which object the two merging objects combine into.
determines the scale of the newly spawned object.
determines the other entity that the current entity should be able to merge with.

Functionality

Listens for collision events between two mergeable objects (e.g., "sphere" and "cylinder"). Spawns new entities based on valid combinations.

UIComponent

Handles UI interactions such as button clicks for spawning specific objects in the scene, as well as injecting HTML into the window for pop-up texts and messages.

Schema:

sphere: ecs.eid
cylinder: ecs.eid
spawnedScale: ecs.f32

, all refer to an entity ID to clone and spawn in as a primitive when clicking the respective button.

determines the scale of the entity to be spawned at.

Functionality

Creates buttons that allow players to spawn specific objects (e.g., cylinder, sphere) into the scene. Spawns objects at predefined positions when buttons are clicked. It also performs all the styling and construction of messages and other text boxes that appear during the game.

Project Setup

Main Entities/Objects

Sphere and Cylinder object to be spawned, and Torus object to be merged into and created from a sphere and cylinder.

Organization/Relationships

Sphere + Cylinder = Torus

Customization

Customizing Combinations

To add new combinations or modify existing ones: Add a MergeableComponent to an object and modify the level (e.g., "cube").

Add a MergeHandler component to an object to be merged and specify entity to be created (entity must exist in the scene beforehand. Spawning works by cloning components). Set the entity to be merged with by typing the string value of the other entity's in the corresponding field. MergeHandler should also be applied to the other entity as well, filling out the fields with the first entity's information.

Technical Details

Asset Formats

All assets are represented as simple 3D models compatible with Three.js (THREE.Object3D).

Input Manager

Mapped Actions:

Click / Tap: Selects an object or combines two elements when dragged together.

Asset Attribution

All assets used in this project are custom-created.