top of page
微信截图_20220128183907.png

Mochi

As a SOLO ARTIST, UIUX DESIGNER, and SOUND DESIGNER for the team, it is such a giant challenge for me. 

As an ARTIST, I conceptualized characters, objects, environments, VFX, and other art assets with an emphasis on design specs, technical requirements, and best practices after a deep discussion with the game designer. 

As a SOUND DESIGNER, I composed 2 8-bit style background music and edited sound effects according to the game theme. 

As a UIUX DESIGNER, I created 2 sets of intuitive UI systems with aesthetic appeal, graphic design elements, and visual details that enhance user experience. I have also playtested our game many times and provided valuable and executable feedback on interaction details and improved the user experience. 

PROJECT DELIVERABLE

2D Art

UIUX Design
Game Design
Sound Design

TIMELINE

Fall 2022

3 Months

TOOL

Unity

Aseprite

Stable Diffusion

FL Studio

Audacity

TEAM

Team
new loading 02-07-07.png
team-07.png

OVERVIEW

STORY

Placeholder

ART ASSETS

Environment

Floor

edge wall left top.png
edge wall top.png
edge wall top.png
edge wall top.png
edge wall right top.png

Box Decoration

box 02 grid top.png
Environment
edge wall side left.png
edge left top.png
edge wall side left.png
edge left.png
edge wall side left.png
edge left bottom.png
edge wall left bottom.png
edge wall side top.png
edge wall coner right.png
edge top.png
edge right top.png
edge wall coner right.png
edge wall top.png
edge center.png
edge double corner R.png
edge single rotate.png
edge end r.png
edge bottom.png
edge right bottom.png
edge wall coner right bottom.png
edge wall side top.png
edge wall side top.png
edge wall side top.png

X 12

edge wall right bottom.png
edge double corner R.png
edge wall right top.png
edge wall side right.png
edge wall right bottom.png

X 29

box 01 top.png
box 02 grid top.png
box 02 grid bottom.png
box 01 bottom.png
box 01 grid.png
box 01 mid.png
box 01 bottom.png
box 02 mid.png
box 0102 mid.png
box 01 mid.png
box 01 bottom.png
Art Assets
move.png
move.png
move.png
move.png
move.png

I have created over 40 tiles for the ENVIRONMENT and ENVIRONMENT DECORATION

Each piece of floor tile and edge tile is designed to be able to be connected in the Unity tile map. 

I deliberately embellished the border with a DARKEN PATTERN to make the border blend with the black background more smoothly. 

​

large scale charactor 01.png
glasses 19.png
hat 09.png
large scale charactor 01.png
hat 16.png
glasses 17.png
move.png
move.png
move.png
move.png
move.png
move.png
move.png

Objects

Fence

Portal

Object
fence1.png
fence9.png
fence2.png
fence4.png
fence5.png
fence6.png
fence3.png
fence4.png
fence8.png
fence7.png
fence9.png

Tree

tree.gif
tree1.png
tree2.png
goal yellow.gif
goal yellow1.png
goal yellow6.png
goal yellow2.png
goal yellow4.png
goal yellow5.png
goal yellow3.png

Light Bulb

Cannonball 

light bulb yellow.gif
light bulb purple.gif
bullet yellow.gif
bullet yellow1.png
bullet yellow2.png
tree4.png
tree3.png
tree5.png
tree6.png
tree7.png
tree8.png
tree9.png
tree10.png
tree11.png

Floor Decoration

floor dec ver second.gif

Drone & Laser

laser purple2.png
laser purple1.png
drone left.gif

Spawn Spot

spawn.gif
spawn2.png
spawn1.png
floor dec ver second6.png
floor dec ver second7.png
floor dec ver second5.png
floor dec ver second4.png
floor dec ver second3.png
floor dec ver second1.png
floor dec ver second2.png
floor dec ver second9.png
floor dec ver second8.png
floor dec ver second10.png
floor dec ver first.gif

Battery

canon ver 3.png

Mosaic

mosaic.gif

Tank

ROBOT purplr.gif
ROBOT yellow.gif

Conveyor Belt

belt new new.gif
load machine2.png
load machine3.png
load machine1.png
floor dec ver first3.png
floor dec ver first4.png
floor dec ver first1.png
floor dec ver first2.png

Stone Box

box 04-13.png

Bridge

bridge.png
bridge.png

VFX

Explosion

explosion.gif
explosion1.png
explosion2.png
explosion3.png
explosion4.png
explosion6.png
explosion5.png
explosion7.png
explosion8.png
explosion9.png
explosion10.png
move.png
move.png
move.png
move.png
move.png

For the objects, especially for INTERACTABLE OBJECTS, my team and I mean to design with some strong colors to make them stand out in the grayish environment.

And we finally decide to use a high-contrast color set like PURPLE and YELLOW to represent BAD and GOOD

During the game design process, we keep the idea of PURPLE is BAD and YELLOW is GOOD.

large scale charactor 01.png
glasses 11.png
hat 17.png
large scale charactor 01.png
glasses 03.png
hat 07.png
move.png
move.png
move.png
move.png
move.png
move.png
move.png

User Interface

UI Design

In-Game User Interface

- Hacking Panel

storage mini.png
card panel ver 002.png
infinity.png
card bar.png
compile1.png
compile2.png
compile3.png
card action darker.png
card action.png
card shadow.png
card dark.png
card slot cover with lock.png
card slot.png
card slot glass cover.png
cursor2.png
cursor3.png
cursor1.png

- Cursor

- Mysterious Symbol

moon.png
lingxing.png
false.png
HEXAGON.png
heart.png
true.png
card slot cover.png

Default

Hover

Drag

oval.png
left.png
parallelogram.png
square.png
right.png
triangel.png

- In-game UI

  Final Present

storage mini.png
card slot.png
card dark.png
card slot cover.png
card slot.png
card dark.png
card slot cover.png
card slot.png
card action.png
card slot cover.png
moon.png
heart.png
right.png
infinity.png
card panel ver 002.png
card bar.png
card bar.png
card slot.png
card slot.png
card slot.png
card slot.png
card slot.png
card slot.png
card action darker.png
card shadow.png
card action.png
card slot glass cover.png
lingxing.png
card slot glass cover.png
left.png
card shadow.png
card dark.png
card shadow.png
square.png
false.png
card slot glass cover.png
card slot glass cover.png
card slot cover with lock.png
card slot cover.png
cursor2.png
compile1.png

System User Interface

- Dialog

dialog box-14.png
dialog choice-14.png
dialog arrow 01-14.png

- Dialog Final Present

dialog box-14.png
dialog choice-14.png
dialog arrow 01-14.png

- System

credit stay.png
home stay.png
move.png
time-13.png
times-13.png
chips-13.png
chip-13.png
retry stay.png
quit stay.png
next stay.png

- Frame

frame stay.png
frame hover.png
frame click.png
loading.gif

- Loading Page

  Final Present

- Costume System

arrow stay.png
arrow hover.png
arrow click.png
return click-11.png
close click-11.png
close hover-11.png
close stay-11.png
return stay-11.png
return stay.png
trophy gold.png
trophy silver.png
trophy copper.png
skin lock-07.png
skin bottom-14.png
skin text-14.png

- Costume System

  Lock Page

  Final Present

lockdown first-07.png
skin text-14.png
close stay-11.png
return stay-11.png
move.png
move.png
move.png
move.png
move.png

I have designed two sets of UI.

One is the IN-GAME UI such as the hacking panel, storage panel, chips, and card slot.

To match the theme of cyber security, the in-game UI has been iterated many times. 

​

The other one is the SYSTEM UI for the menu, loading page, pause and failure page, costume page, and leaderboard. 

​

large scale charactor 01.png
hat 22.png
glasses 18.png
large scale charactor 01.png
hat 06.png
glasses 02.png
move.png
move.png
move.png
move.png
move.png
move.png
move.png

Accessories

Accessories

Hat

hat 16.png
hat 15.png
hat 13.png
hat 12.png
hat 18.png
hat 11.png
hat 07.png
hat 08.png
hat 06.png
hat 03.png
hat 02.png
hat 01.png

Glasses

glasses 25.png
glasses 24.png
glasses 17.png
glasses 16.png
glasses 23.png
glasses 04.png
glasses 14.png
glasses 15.png
glasses 13.png
glasses 12.png
glasses 11.png
glasses 01.png
hat 14.png
hat 21.png
hat 09.png
glasses 22.png
glasses 03.png
glasses 19.png
hat 10.png
hat 17.png
hat 05.png
glasses 18.png
glasses 20.png
glasses 05.png
hat 22.png
hat 04.png
hat 20.png
glasses 10.png
glasses 06.png
glasses 26.png
hat 23.png
hat pico.png
hat 19.png
glasses 21.png
glasses 09.png
glasses 02.png
glasses 08.png
glasses 07.png

Costume System

Final Present

skin bg.png
skin bottom-14.png
arrow stay.png
arrow stay.png
arrow stay_edited.png
arrow stay_edited.png
large scale charactor 01.png
hat 05.png
glasses 25.png
glasses 22.png
glasses 05.png
glasses 23.png
glasses 21.png
hat 11.png
hat 02.png
hat 04.png
hat 23.png
frame stay.png
move.png
move.png
move.png
move.png
move.png

For the ACCESSORIES for the costume page, I designed a whole bunch of hats and glasses.

Users can choose whatever they like to decorate their little mochi.

Eventually, the decorated mochi character will show on the leaderboard page. 

large scale charactor 01.png
glasses 15.png
hat 18.png
large scale charactor 01.png
hat 14.png
glasses 10.png
move.png
move.png
move.png
move.png
move.png
move.png
move.png

Character

Character

Walking State

walk up.gif
walk up1.png
walk up2.png
walk up3.png
walk up4.png
walk left.gif
walk left1.png
walk left2.png
walk left3.png
walk left4.png
walk down.gif
walk down1.png
walk down3.png
walk down2.png
walk down4.png
walk right.gif
large scale charactor 01.png
large scale charactor 02.png
large scale charactor 04.png
large scale charactor 03.png

Fainted and Sleeping States

Client Required Eastern Egg

sleep-13.png
success false-13.png
toaster.gif
toaster2.png
toaster1.png
toster big.png
character 001 wings.png
character 001.png
character 001 ver 2.png
unknown.png

Full-Body Standing Illustration Iteration

arrow stay_edited.png
arrow stay_edited.png
arrow stay_edited.png

Sound

Final Design

You may also like

Screenshot 2021-10-18 141733_edited.jpg

VR & AR Game

Game Design, UIUX Design

Case Study

UIUX Design, Research

IMG_2293.JPG

Other Work

Class Work & Marketing Skills

xingqiudianyingpiao_edited.jpg

Planner

Layout Design, Daily Life Record

bottom of page