Digital Media Portfolio_Xinyuan Liu

This portfolio features a wide range of projects that demonstrate my ability to create visually compelling designs. From immersive digital art design and game design to storytelling and future architectures. I have used industry-standard software such as Unity, Unreal Engine, Touchdesigner, Maya, Adobe Photoshop, Illustrator, and InDesign to create polished and professional designs.

The dual pursuit of technology and art is the hallmark of digital media. In <Interactive Digital Art Collection> section, I used Touchdesigner, Unity and Azura Kinect to implement an interactive installation that combines human motion and digital graphics. During the development of this project, I designed the visual effects of each program and implemented the interfaces in software. This project allowed me to experience the complete process of an installation from design to programming to hardware interface debugging.

Video games are an important part of digital media. The two game design projects in this portfolio highlight my proficiency in using industry standard level design tools and software. My experience with game engines such as Unreal Engine and Unity allows me to create visually stunning and technically sound environments. This technical expertise is reflected in the seamless integration of environmental storytelling, lighting, sound design, and level scripting into my projects.

Digital media is the method of storytelling. In the project "Up-Side-Down", I used a variety of design approaches to tell a fiction story, from graphic design and comics to 3D design and rendering. My proficiency in professional design software such as Maya, Adobe Photoshop, Illustrator and V-Ray allowed me to combine different ways to tell a story that would be immersive to the readers.

Technology has driven the development of digital media and further changed the way people live their lives. My architectural projects demonstrate my thinking about how technology can change our lives. Through collage, diagrams, renderings and videos, I depict how people's lifestyles have changed, driven by hyperloop and lightweight modular technology.

The six projects above demonstrate my design and technical skills in different industries and disciplines, while expressing my understanding of digital media. To better present my work, I use not only static graphics and diagrams, but also dynamic videos and gifs. these media are available on my personal website: staneos.weebly. com.

01# Interaction Design Collection

Using Digital Graphs to Create Immersive Experience

Interactive Media Art Project

UCLA Academic Project

Tutor: Matthew Conway

Individual Work

Software: Touchdesigner, Unity, Adobe Illustrator

Hardware: Azura Kinect

Video: Interactive Digital Art

In this project I focused on the relationship between human motion and digital art.

When designing these interactive patterns, I returned to the essence of object movement: form, speed and direction. I designed the interactive programs in Touchdesigner and Unity based on these three variables and patterned them.

As participants make movements, the patterns in the images change in tandem. The relationship is in fact the essence of interaction: the person pulls the trigger to influence the image and is motivated by it to interact more. This "interaction" relationship and the patterns themselves are all immersive experiences.

I used battery nodes in Touchdesigner and Unity with C# to generate a series of graphs or meshes that can change with the map base.Then I used Azure Kinect to capture the human movement and sync the processed pattern to Touchdesigner and Unity to generate a dynamic image base. Finally, I used project mapping to project it onto the display wall to achieve an immersive effect.

"Gone with Wind"

The main focus is on the direction and speed of human motion. When people make an action or move, the white dots will show the effect of being blown away by the wind.

"Figure in Geometry Pt.I"

The participant's motion affects the color and fluctuation of the lines. These lines identify the position and figure of the participant, and the closer the person is to the screen, the darker the lines are.

"Figure in Geometry Pt.II"

As the participant moves, the cube array rotates with the body's figure. The direction and speed of rotation depends on the movement of the participant.

"Shape of Velocity"

When the participant's hand moves, the sphere array is left with a depressed track. When the speed of hand movement is high enough, the spheres will be thrown out of the array and take on different colors. The higher the speed, the more spheres will be thrown out and the brighter the color will be.

02# Mist City

Souls-like Level Design Using Unreal Engine 5

Game Project

Individual Work

Software: Unreal Engine 5, Maya, Adobe Illustrator

Video: Mist City

Game Design Document：Mist_City_LDD

For gifs and video, please visit: http://staneos.weebly.com/curv117-281782.html

"Mist City" is a single-player souls-like ARPG level set in a fictional city in medieval Europe. The player is a demon hunter who comes to hunt demons that have infested Mist City. Player will encounter the NPC "Charlie". Charlie is the chief knight of Mist City, he will give player a series of side quests and help player explore the secrets of Mist City.

In the process, the player will encounter a series of challenges, a medieval city full of demons, a variety of monster challenges, and finally an exciting boss battle. Also, player will explore in this place and gradually penetrate the secrets of this city.

Synopsis

● 1 main quest

● 2 side quests

● 2 Boss Fights

● A mysterious religious city full of demons

● 12 explorable branch routes

● 3 epic gameplay moments

● An epic background with a miserable story

Design Goals

● Create a souls-like level with challenging enemies and reasonable shortcuts.

● Create more choices for players to battle and explore.

● Create impressing moments that make this level memorable.

● Craft a story that fits the level.

Enemies

● Demon Soldiers

A Souls-like Level

● Designed a dark fantasy experience.

● Player can only save game and refill HP at scarce Bonfires.

● Player can only respawn at bonfires.

● Designed 7 shortcuts leading to bonfires at reasonable points of the level.

I took inspiration from Dark Souls III and wanted to design a Souls-like level. I developed my Level Design Document (LDD) and then implemented it into the engine (UE5). In order to help create a dark fantasy experience for the player, I designed the city to include a medieval castle, two cathedrals and a crumbling medieval European town to add more visual interest. Compared to modern architecture, medieval churches are more complex in structure and larger in size, which can cause players to have a greater desire to explore.

The enemies in the early stages of the level are mainly Demon Soldiers, which do medium damage and have low movement speed and HP.

● Creepers

The Creeper will appear in the middle phase of the level, they will hide behind the eaves, walls and beams to ambush players. the Creeper has high movement speed, low damage and HP, but will appear in groups.

● Elites

The elites have higher HP and damage, and they usually appear singly, but there will be three in front of the final boss room door.

Shortcuts

In this project, I designed 7 shortcuts leading to bonfires at reasonable points of the level.

Shortcuts in Souls games, are often regarded as moments of relief, triumph, and a sense of progress for players. They serve as crucial connections between distant locations within the game world, allowing players to bypass treacherous areas or lengthy paths they have already conquered.

Gifs for better explaination:http://staneos.weebly.com/curv117-281782.html

More Choices

In many combat scenarios, I designed multiple routes of attack: players can choose to face the enemy directly or sneak up on them through high places or side paths, which are often rewarded with unexpected items.

In the level, the player will see items on the high side or across the gap. In this way I hope to encourage players to explore the map more instead of just paying attention to the main quest.

Gifs for better explaination:http://staneos.weebly.com/curv117-281782.html

Gameplay Highlights

1. Lowering the water

Player can lower the water level of Poison Town to reveal a new explorable area. The purpose of such design is to give players a tangible sense of empowerment. They have control over their progression and can actively manipulate the environment to their advantage. This design choice reinforces the game's themes of overcoming challenges through player skill and strategy.

Gifs for better explaination:http://staneos.weebly.com/curv117-281782.html

2. Stabbing the sword into dragon's head.

I did such design to add to the sense of epicness and spectacle. It provides players with a memorable moment where they feel like they are taking down a massive and ancient creature in a grandiose fashion. It's a thrilling and satisfying moment for players to execute a successful plunging attack on the dragon's head and witness its defeat.

Gifs for better explaination:http://staneos.weebly.com/curv117-281782.html

The objects close will block the player's view, which will also prompt the player to keep moving forward to get a better view and more information.

I have aggravated the second floor of the church here to guide the way: such as placing items, glowing torches, and the visual transformation that requires going inside to get a panoramic view. Because here is a shortcut to the bonfire.

It contains an exploration area with two tutorial levels. The overall style is a reference to the High Wall of Lothric level in Dark Souls III.

Players can observe the area from a safer place to understand their next path and the location of some of the enemies, while seeing the church in the distance and the items closer.

The purpose of such design is to give players a tangible sense of empowerment. They have control over their progression and can actively manipulate the environment to their advantage.

Cave of Captivity Grace Church

Mist Wall Grace Church 2F

Mist Wall Poison Town

Cave of Captivity is where the game starts and a tutorial level. Player will alse meet Charlie here.

Mist Bridge

Players can kill enemies in two ways: head-on hard or by climbing up a ladder and dropping down to attack.

Mist Gate

If the player chooses to go up, he will find that he does not hold the royal rune so he cannot enter.

Poison Town

If the player activates the mechanism, the water in the town will be released, opening the next level.

After opening the gates, players will be attracted to the giant dragon in front of them. Here players will find that once they enter the flames, they will die. This will make the player feel confused and frustrated.

Here is the first boss room. Here I also turned the opening of the elevator room towards the player and used light to guide the player to open the second shortcut.

Poison Town

The lower level of the town is divided into three open areas, also a battle level.

Dragon

Grace Church 1F

As the player's perspective changes and the light is guided, the player will find a ladder and a door, both of which lead to different levels of the same room.

There is an archive point here with the npc quest. npc will tell the player: there is something on the balcony above the hall door that can help the player kill the evil dragon. This is a side quest.

Here the people who rebelled against the demon king are imprisoned, and they also died in the cell long ago. Players need to kill Elite to get the key to the cell door.

This was once the church of Princess Sunshine. After the church was invaded by the devil, the princess was nowhere to be found.

Players can enter the library and observe the location of the enemy in the dark, at this time players can choose to kill small monsters first, then backstabbing elite monsters, or frontal attack.

Mist Castle Mist Castle

Mist Castle

Mist Castle

Dark Archive Mist Castle

There will be Creeper hiding in the dark on the beams of the room to sneak up on players.

An epic background with a miserable story

Mist City was once a thriving and prosperous country. One day, a plague swept through Mist City and many people died from it, including the king.

After the death of the king, the twin princes disagree on how to deal with the plague: the elder prince Marfa thinks they should seek the power of the devil to complete their own evolution to overcome the plague. The younger prince, Marman, believes they should seek help from other nations.

The battle ends with the defeat of the young prince, who considers himself ashamed of his father and the people and commits suicide in front of them. Marlin, the princess, also disagreed with her brother Marfa's strategy, but she had no real power, so she could only persuade Marfa every day, and was eventually imprisoned by him in the Cave of Captivity.

Years later, the people in Mist City had been assimilated by demons, and the town was flooded by rainwater due to lack of management. Marfa stayed in the cathedral to study demonic spells, day after day. Like her older brother, Marlin prayed in the caves, hoping that one day the country would be saved.

Several years later, the player came to the city and met Charlie, and together they defeated the demon king and liberated the city.

Closing Thoughts

● Designing a good level requires extensive, timely testing and that many details that tripped up others were unnoticeable when designing by myself. Asking others to test was very helpful to the integrity of the level. At the same time, during the design process I would ask myself from time to time: could there be a more interesting design than this?

● Playing great games of the same genre helps me a lot when I don't have a thought. I would keep thinking while playing the game: 'Why did the designer do this?' and 'What can I learn from it? . (Of course this is also a kind of relaxation for me lol)

● At first I didn't have a clue about the story. But as the level design progressed, I would be inspired by many scenes and design the story. Then the story and the level design gradually became a two-way process. This constant inspiration made the project very interesting for me.

03# Cursed Village

Treyarch-style Zombie Level Design Using Radiant

Game Project

Level Style: Sandbox Survival Level

Individual Work

Software: Radiant, Maya, Adobe Illustrator

Video: Cursed Village

For gifs and video, please visit: http://staneos.weebly.com/curv117.html

In this project, I set out to create a treyarch-style zombie gameplay experience taking place in an abandoned Chinese village.

The focus is :

1. How to guide players to unlock new areas and make choices

2. How to make it both challenging and fun

3. How to combine level and narrative design

Pre-Production

Before I start to design each level, I will study and analyze some successful cases and classic levels, and fully understand the system and gameplay of such games.

Then I analyzed the locations where my levels took place, focusing mainly on the unique local spatial forms and styles, and through 2D drawing to push how to combine the characteristics of the zombie mode level with the local space style.

Treyarch-style Zombie System Analyze

Map Flow Chart

Treyarch-style Zombie Map Analyze

3D Blockout

The whole map is divided into two parts: the above-ground village and the underground base.

The above-ground village section includes three ritual locations: the courtyard at the birthplace, the abandoned mansion and the temple on the hill. The village part of the level is mainly based on narrow streets connecting open areas, and in this way combines indoor and outdoor overload.

The main components of the underground base section are the elevator room, the base gate, the weapons room, the doctor's room, the teleportation room, the laboratory and the ancient graveyard. Players in this area will often move up and down.

Guidance

Use items and distant landscapes (buildings, scenes, etc.) as points of interest to attract and guide the player in this direction.

Challenging and Fun

The representative spatial forms of the Chinese-style Jiangnan water street are the winding and narrow streets and rivers. When players face large groups of zombies, the narrow space will become a great challenge for them. But each space is connected to one or more other spaces, so players always have a way back in this sandbox.

Combine Level and Narrative Design

Underneath the abandoned village lies a secret base for biochemical experiments and is connected to the village's ancient cemetery, so it becomes the player's main task to find out what happened in the village.

04# Up-Side-Down

Black Market Among Reflected Worlds

Project in Fabricated World

Tutor: Lu Ye

Individual Work

He sold everything, even the right of human being. They throw away the Down world, to get more developed. Those useless tears, do not put on your face. Nothing has been changed, nothing will be changed.

“Two Gravity, Two Worlds.”

“The Upper World”

No worry of poverty and pollution.Feeling so blessed to be an Upper citizen!

“The Down World”

Picking trash all my life fed up with this!

Wish I were an Upper citizen!

Stealing into The Upper is ILLEGAL in the city. If you really want to, deal with me in the BLACK MARKET !

“Black Market Among Mountains”

Yes, Sir.

Government uses the tower to draw resources from down world. Kill everyone who tries to steal to the Upper !

Getting to the Upper through this will be arrested and killed ！ I have to find another way! Really !?

Junction of the two worlds... interesting, maybe I can make a profit here.

Hey, young man, I know a secret way to the Upper. Just in mountain observatory!

Yeah...... there's a Gravity Rotating Device in the observatory. All you have to do is dealing with me!

Yeah..... Let's play tricks on the mice down world. Ah...hahahaha!

“Flow

“Black

Market”

of the Upper”

“The Chaos Atrium”

In fact, all of them will be transfered to a WRONG gravity field, then trapped in the CHAOS ATRIUM.

In the end, the Exalted Uppers will see a wonderful play of the mice in the Atrium.

Ah...hahahahahaha!

“They are all DECEIVED

！”

“Flow of the Down”

Rotating Device Basement

Entrance

Double Shear Wall

Chaos Atrium

Viewd from the direction of the Down World

Viewd from the direction of the Upper World

Entrance

Play Floor

Bar Floor

View Floor

VIP Room

This is the place you said,right?

Basement ?? Seriously ??

Exactly!

Here're all of my properties.They are all yours now.

The tunnel is so dark and narrow ！

In case of being found, go through here.

Thank you, sir !

Oh ！ I have entered the Rotating Device ！

Before we start， you have to pay me your everything!

The door is open. Now go chase your own freedom!

The ORDER and the sense of HOLINESS of the space make me feel like an Upper!

I'm so happy that...... wait, WHAT THE HELL is happening here ？！

Seeing the good life of the Uppers makes me more eager to keep going ！

This must be the rotating device. Can't wait to get in!

Finally, I'll be the Upper!

Ladies and gentlemen, let's enjoy a funny show of the stupid people from Down world ! Hey! WHO ARE YOU REALLY !?

Finally，I get rid of the bloody Down world ！

The old man lied to all of us !!

Me? I'm JUST a businessman from Upper world. Ah...hahahaha!

There's no way out!

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

WOW ！

11.

12.

13. WHAT!?

14.

15.

We

In the end, the poor people get lost in the space forever.

05# Reconfigurable Landscape

Modular Landscape for LA28

Architecture Project Collaborative Project

Team Members：Yixiao Huang, Fanghui Xiang

My contribution: Project Design, Video Processing, Graphic Design

Software: Rhino, Unity, Adobe Premiere, Photoshop

Video:

https://www.youtube.com/watch?v=LcjnkGAJvlM

ARRIVAL is famous for its unique lightweight materials, local microfactory, and the production method of modular plug-ins. Unlike others who just used their products in the design, we adopted their technology to create the Olympics Live Site exclusively for ARRIVAL. The Olympics taken over by ARRIVAL is about a new paradigm of the factory but not a bunch of buses.

This year, we cooperated with ARRIVAL, an automotive production company, to use their technology and products to design a mixeduse facility on the street for the LA2028 Olympics.

Our site is located around the staples center downtown. Through an analysis of challenges and opportunities, we have defined our LA28 vision. We wanted to transform the street into 3D Live Park and turn fan zone in original left-over spaces into landmarks, enhancing the original three enclosed venues and making the Downtown Venue an ever-increasing destination. At the Olympics it is like a mountain surrounding the venue, constantly transforming according to the needs of the event, shaping an iconic entertainment landmark. And after the Olympics, the mountain will explode and be redeployed over Wilshire Blvd. in various sets for different civic events, such as market, show, food service, playground, gallery, and even can combine into housing, all of these will make the Wilshire Blvd a new pedestrianized corridor of LA.

Multiple Voxel Types

We have designed a variety of voxels to produce different combinations of forms and functions. These spatial prototypes include: walkways, stairs, terraces, lawns, lounge areas, restaurants, sports areas, and recreational areas.

The voxels are interconnected by fixed structures and will be combined in different ways before, during and after the Olympic Games.

In the pre-Olympic period, they are mainly used as recreation and rest areas. In the Olympic Games, they will be used as restaurants, transportation areas and performance areas.

After the Olympics, they will be dispersed all over LA as shelters for the homeless.

Voxel Reconfigure Video: https://www.youtube.com/watch?v=LcjnkGAJvlM

Pre-Game Section

On Site Legacy-Vertical Park Video:https://www.youtube.com/watch?v=YTUYiXiUR7c

Wilsher Blvd Legacy-Bus Stop

Wilsher Blvd Legacy-Residential

06# Hyper-Station

Urban Complex Design Based On Hyperloop Technology

Experiment Project without Site

Tutor: Lu Ye

Individual Work

Background: The Hyperloop is a proposed mode of passenger and freight transportation, first used to describe an open-source vactrain design released by a joint team from Tesla and SpaceX. Hyperloop is described as a sealed tube or system of tubes with low air pressure through which a pod may travel substantially free of air resistance or friction.The Hyperloop could potentially convey people or objects at airline or hypersonic speeds while being energy efficient compared to existing high speed rail systems. This, if implemented, may reduce travel times compared to train and airplane travel over distances of under approximately 1,500 kilometres (930 miles).

Project: Based on the concept of vertical processing functions such as highrise buildings, and combined with the characteristics of Hyperloop, hyperloop stations can also handle the traffic inside the building vertically. In this way, the platform space can be more closely integrated with the functions, thus stimulating the vitality of the building's elder brother space and improving the efficiency of flow transmission.

What is Hyperloop？

Intrudunction of Hyperloop:

Speed:1200KM/H

Weight:3t/Pod

Time:2025

Designer: Elon Musk

The Hyperloop capsules will travel in a near-vacuum tube to reduce dragsignificantly. Valves and pumps will keep internal air pressure at about100 Pascals, or one-thousandth the air pressure at sea level.

PAYLOAD

Hyperloop Tech's cargocapsule will be about 70 feet long,big enough to hold a standard 40-foot intermodal container.Thecapsule should weigh about 68,000pounds and could oretically accelerate from zero to 750mph inless than a minute.

How to coordinate with Hyperloop ？

COMPRESSOR

Mounting a giant compressor fan on the front of the capsuleis what makes the hyperloop possible,transferring huge volumes of air away from the nose.Without it, the pod would be pushing all the air in front of it,like a syringe,or you'd have to spend big bucks on a bigger tube. Respect theKantrowitz limit-the top speed allowable given a tube-to-pod-area ratio.

Low Weight:3t/Pod

Hyperloop Tube

AIR BEARINGS

The capsule will ride on acushion of air pumped from the bottomof lunchtray-size sleds. Landing gear mayneed to be deployed as it comes to a stop.

PROPULSION

The Hyperioopcapsule speeds along a"magnetic river" propelledby linear induction motorsspaced along the tube orinstalled as a continuousstrip. Linear induction, usedon maglev trains and the Toeiedo Line in Tokyo's subway,has no moving parts and lowmaintenance costs.

High Speed:1200KM/H

"Buy a cozy cottage in our steel constructed choice lots, less than a mile above Broadway, only ten minutes by elevator. All the comforts of the country with none of its disadvantages."

Celestial Real Estate Company

Structure Column

More Functions and Space in Hyperloop Station

Free Tubes

The extremely low weight(3t/Pod) of hyperloops allows its tracks to be lifted much higher by light structures than any others railway transportation, so the location and form of the tubes are more flexible and free.

With its near-sonic speeds, the Hyperloop is a nearly revolutionary improvement in transportation efficiency, requiring more pipelines, platforms and functions for the same station.

Based on the concept of vertical processing functions such as high-rise buildings, and combined with the characteristics of Hyperloop, hyperloop stations can also handle the traffic inside the building vertically. In this way, the platform space can be more closely integrated with the functions, thus stimulating the vitality of the building's elder brother space and improving the efficiency of flow transmission.

Conceptual Hand Plot by Hyperloop One Company

Platform Typology

Study of Platforms and Structure

The Single-Tram platform is a basic plantform with some traffic functions and spaces. It saves spaces and is the prototype of other kinds of plantforms.

Through the close combination with the highway, passengers can quickly achieve the transformation of the means of transport.

As the flow of people increases, so does the number of tubes and the size of platforms. The Road-Crossed platform combines with the road more closely and has more traffic spaces.

The Green Gallery plantform combines art gallery and grass slopes with the hyperloop platform. People waiting for trams can enjoy the space and natrual views with the visitors and residents together.

The Green Park platform is a whole natrual view space. It provides the passengers, the visitors and the residents with the space where they can have outdoor activities.

The Playground Platform contains a soccer field and five runways. It mainly serves the passenger who come here for sport activities and the residents living in the complex.

1.Single Tram Platform

2.Road-Sided Platform

4.Green Gallery Platform

6.Playground Platform

5.Green Park Platform

3.Road-Crossed Platform

Function Analysis

Structure & Traffic Column

Vertical Transportation

Residence Zone

Outerdoor-Platform

Theatre Playground Platform

Office Building

Flow Of Passengers

Hotels

Art Gallery

Road-crossed Platform

Shopping Mall

Shopping Mall

Road-sided Platform

Subway Parking Lot

Highway

Flow Of Stuffs & Visitors

1.Road-Crossed Platform

2.Shopping Mall

3.Road-Sided Platform

Road-Crossed Platform

Inside of Structure

Hyperloop Elevator

Circulation Core of Museum

1.Green Gallery Platform

3.Theatre

2.Outdoor Garden Platform 4.Hotel

Green Gallery Platform

Playground Platform