Developing 3 animated web game frontend elements
Budget: $1,500 – $3,000 USD
Project Requirements
Project UI at a glance: (See Google Doc for illustration) https://docs.google.com/document/d/1ffBlFUmM-zFcP_Zyy6oLOLJ57QHlonOfG8C8N5mjBv4/edit
Upwork project budget and timeline:
The whole project has a fixed budget, AND you must complete the work within 2 weeks after the starting date.
Milestones paid in following:
30% on completion of "score effects" and "star bar effects"
50% on completion of “dancing stickman”
20% (on-time bonus) If you complete all three elements per requirements on time, within 2 weeks.
Project requirements:
We would like to have web front-end development for graphical elements in our game. The game is similar to Xbox Just Dance. The difference is that the user will show up in the game as a 2D stickman in real-time.
We provide real-time inputs and you just need to write 3 front-end components to be included in our web game UI.
We want 3 different game UI components to be done, described below.
1) Score effects: Contains 2 elements below, size and position are variables
Element 1: Word - Good, Great, Perfect
Solid single color (COLOR is a variable)
WORD and the POINT numbers are also variables, FONT is a variable. (When POINT = 0, do not show the number).
Every alphabet has a halo outline around it (you can see it if looking closely, or reference the “Just Dance” sample) – COLOR of halo is a variable
Element 2: Background and animation effects
Large halo shape for each word with different size and different color – color is a variable
The fireworks animation when each word is triggered has 3 states – total animation effect should finish in about X second (TIME in SECONDS is a variable).
2) Star bar effect: (POSITION is a variable)
A rectangle bar triggered by a percentage progress number (X%) from the backend.
Before the game starts, the backend will pass in
The bar height, width and color (HEIGHT, WIDTH, COLOR are variables);
A schema for star trigger position (1 - x%, 2 - x% … etc.)
Paint the initial state: the bar and stars will be painted in one semi-transparent gray, which is a BASE COLOR variable. Placement of each star is based on the % numbers on the bar = 100% (see the “Just Dance” example or our own mock).
The color bar is triggered by the% number from the backend and will increment.
When a x% star trigger is reached, a colorful star will be painted. We want to add a simple animation effect, for example, “enlarge and shrink in place” or “twinkle”? Depends on what you have.
3) “Self” dancing stickman rendering
Apply stikman graphic styling to the joint points delivered via backend (see illustration above)
Stickman COLOR is variable for all body parts (Color can be semi-transparent)
Limbs are rectangles with rounded corners (ROUNDING DIAMETER is a variable, WIDTH is a variable)
Hands are to connect wrists to index (15_19, 16_20)
Lower legs are to connect to ankle joints (26_28, or 25_27)
Feet are to connect the heel and ankle, (27_29, or 28_30) and then heel to index (32_30, or 29_31)
Head is a circle (DIAMETER is a variable)
Body is a rounded-corner rectangle area, connecting dots 12, 11, 23 and 24 (ROUNDING DIA is a variable)
Every body part has a halo outline around it (like the “Just Dance” stickman) – COLOR and RADIUS of halo is a variable
Scale every stickman to the same “bounding box” (AKA same dimension) and then print on UI
Developer: Please define the “interface” to call frontend components above.
Summary of Inputs - We’ve mixed config and real time input together here, we can specify more later if needed.
Score Effects Input params:
width: number
height: number
background-color
word-color
halo-color
font
word: string
point: number
Star Bar Effects Input params:
width: number
height: number
star-positions: array
bar-color
star-color
percentage
Stickman Input Params:
width
height
color
halo-color
halo-radius
stick-width
rounding-radius
head-diameter
pose: array
Project UI at a glance: (See Google Doc for illustration) https://docs.google.com/document/d/1ffBlFUmM-zFcP_Zyy6oLOLJ57QHlonOfG8C8N5mjBv4/edit
Upwork project budget and timeline:
The whole project has a fixed budget, AND you must complete the work within 2 weeks after the starting date.
Milestones paid in following:
30% on completion of "score effects" and "star bar effects"
50% on completion of “dancing stickman”
20% (on-time bonus) If you complete all three elements per requirements on time, within 2 weeks.
Project requirements:
We would like to have web front-end development for graphical elements in our game. The game is similar to Xbox Just Dance. The difference is that the user will show up in the game as a 2D stickman in real-time.
We provide real-time inputs and you just need to write 3 front-end components to be included in our web game UI.
We want 3 different game UI components to be done, described below.
1) Score effects: Contains 2 elements below, size and position are variables
Element 1: Word - Good, Great, Perfect
Solid single color (COLOR is a variable)
WORD and the POINT numbers are also variables, FONT is a variable. (When POINT = 0, do not show the number).
Every alphabet has a halo outline around it (you can see it if looking closely, or reference the “Just Dance” sample) – COLOR of halo is a variable
Element 2: Background and animation effects
Large halo shape for each word with different size and different color – color is a variable
The fireworks animation when each word is triggered has 3 states – total animation effect should finish in about X second (TIME in SECONDS is a variable).
2) Star bar effect: (POSITION is a variable)
A rectangle bar triggered by a percentage progress number (X%) from the backend.
Before the game starts, the backend will pass in
The bar height, width and color (HEIGHT, WIDTH, COLOR are variables);
A schema for star trigger position (1 - x%, 2 - x% … etc.)
Paint the initial state: the bar and stars will be painted in one semi-transparent gray, which is a BASE COLOR variable. Placement of each star is based on the % numbers on the bar = 100% (see the “Just Dance” example or our own mock).
The color bar is triggered by the% number from the backend and will increment.
When a x% star trigger is reached, a colorful star will be painted. We want to add a simple animation effect, for example, “enlarge and shrink in place” or “twinkle”? Depends on what you have.
3) “Self” dancing stickman rendering
Apply stikman graphic styling to the joint points delivered via backend (see illustration above)
Stickman COLOR is variable for all body parts (Color can be semi-transparent)
Limbs are rectangles with rounded corners (ROUNDING DIAMETER is a variable, WIDTH is a variable)
Hands are to connect wrists to index (15_19, 16_20)
Lower legs are to connect to ankle joints (26_28, or 25_27)
Feet are to connect the heel and ankle, (27_29, or 28_30) and then heel to index (32_30, or 29_31)
Head is a circle (DIAMETER is a variable)
Body is a rounded-corner rectangle area, connecting dots 12, 11, 23 and 24 (ROUNDING DIA is a variable)
Every body part has a halo outline around it (like the “Just Dance” stickman) – COLOR and RADIUS of halo is a variable
Scale every stickman to the same “bounding box” (AKA same dimension) and then print on UI
Developer: Please define the “interface” to call frontend components above.
Summary of Inputs - We’ve mixed config and real time input together here, we can specify more later if needed.
Score Effects Input params:
width: number
height: number
background-color
word-color
halo-color
font
word: string
point: number
Star Bar Effects Input params:
width: number
height: number
star-positions: array
bar-color
star-color
percentage
Stickman Input Params:
width
height
color
halo-color
halo-radius
stick-width
rounding-radius
head-diameter
pose: array