Thank you for participating in this test!
In this exercise, we’ll walk through the specification, planning, and development of a feature using Cocos Creator and TypeScript.
Main Goal: Plan and develop the proposed specification using MVVM Architecture and Reactive Programming patterns. While the provided UI/UX designs serve as a reference, feel free to explore your own ideas during development.
-
Install Cocos Creator dashboard.
- If you’re new to Cocos Creator, explore the documentation and API reference.
- If you’re transitioning from Unity, compare the two engines.
-
Install Node.js.
- If you are on MacOS, prefer to use Homebrew for the installation.
- Before opening the project, run
npm install
in the root directory. - NPM is a library registry and a package manager.
-
If you’re new to developing with TypeScript
- Go through the documentation reference.
- Explore the language syntax using the Playground.
- Refer to tutorials to deepen your understanding.
- The project includes ESLint settings. If you’re using VSCode, consider installing the ESLint extension for language assistance.
-
If you’re new to implementing Reactive patterns, start by understanding the Reactive Programming principles
- This project uses RxJs as the default Reactivity library.
- Feel free to use other libraries or solutions if you prefer.
-
As you work on the solution, consider making frequent commits rather than a single large one.
- We’re interested in seeing the steps you took to complete the assignment and understand your overall implementation plan.
-
Once you have concluded this task, commit your solution to a repository and share the link with us.
The necessary data settings can be found in the ./assets/settings/
folder. This directory contains the .json
files to be used as the data model
for the feature.
The art assets are located in the ./assets/sprites
folder and should provide sufficient support for developing the UI.
- Use this data set as a
starting point
. You’re also welcome to modify or expand this set as needed to create your solution. - We’ve included a
series of placeholder assets
for use within the project.- While you’re free to enhance or modify the existing assets to your liking, please avoid adding additional assets, especially if they are not Creative Commons licensed or related.
- We’ve included a
starting scene
in the project with a base configuration. You can either continue from there or build your own.
We will be developing the Hiring Tower of Heroes
feature.
Inside our base, there is a special tower building
capable of hiring mighty heroes
to fight alongside us. Each hero has their own price
and time to respond
for joining our forces.
The player HUD
holds some relevant information like:
- The amount of
currency
available - The town
signpost
- The tower
UI
(once activated)
Players can view the available heroes for hire and their information by clicking on the tower building
. The tower UI will slide up from the bottom
and display the building information
, the hero list
and the hero summon queue
. The UI container remains active until a click outside of the container
is registered.
The tower can queue up to 5 heroes
to be summoned, but it can only process one hero at a time
.
Once the player selects one of the available heroes from the list, the clicked portrait becomes highlighted
, activates the hire button
, and updates the price cost label
element. If the player has enough currency
to do the summon as also availability on the building queue
, the label has a green color
and can be clicked. If not, label turns red
and cannot be clicked.
After clicking
the hire button, the cost is deducted
from the player’s currency state, and a tween animation occurs at the currency HUD element
. The hero is then added
to the building queue for summoning. Once in the queue (and if first in line), the hero summon updates a progress bar
based on the hero’s cooldown settings, considering the time in seconds
.
If the tower is summoning a hero
and the building UI is not activated
, you must indicate that the summoning is in progress with an icon
on top of the building.
All hero summons are recorded on the town signpost
and can be checked at any time. The signpost counter becomes active
once we have our first hero summoned. It keeps track of the total number of heroes
summoned and available at the base.
When clicked
, it opens a UI dialog that provides detailed information
about all summoned heroes. To exit this dialog, the player must click on the exit button
. If any HUD UI is already active, you must first deactivate it
before opening this dialog.