Please use Chrome or Firefox. IE explorer will encounter some format issue.

Zhisheng Xu

Zhisheng XuZhisheng XuZhisheng Xu

Zhisheng Xu

Zhisheng XuZhisheng XuZhisheng Xu
  • Home
  • Projects
  • Work Experience
  • Photo Gallery
  • More
    • Home
    • Projects
    • Work Experience
    • Photo Gallery

  • Home
  • Projects
  • Work Experience
  • Photo Gallery

Client and project

The Black Girls Equity Alliance (BGEA) is an organization that strives to improve the outcomes for Black girls in child welfare, juvenile justice, education, and health. My primary responsibilities were to develop an interactive landing page and to create an embedded WebGL game that further extends the interactivity.

BGEA HOME PAGE

eDUCATIONAL WEB GAME

The first part of my work was a WebGL game created using GDevelop 5 and JavaScript. It was a 2D platformer game where the players needed to jump the black circle to the destination. The primary idea the client wanted to convey was the importance of reaching out for help when facing difficulties. A surprise moment was prepared at the end of the game.


Game link:

https://max24217.itch.io/life-bgea-experience?secret=pPXD4W0sd9klpSOSR4guQ8wVH5E

Straightforward mechanism

Multiplatform and virtual joysticks

Reach out for help when needed

Since the experience was a metaphor instead of a gamer-focused entertainment, I configured the user inputs to be as simple as possible. The game used keyboard inputs, and the difficulty of reaching the destination was manageable if not trivial.

Reach out for help when needed

Multiplatform and virtual joysticks

Reach out for help when needed

 The last platform was designed to be so high that the black circle could not jump onto it. After the circle fell into the abyss, the audience could press a key to reach out for help. Then a golden lifter would appear to help the circle to get to the last platform.

Multiplatform and virtual joysticks

Multiplatform and virtual joysticks

Multiplatform and virtual joysticks

This game was configured onto different platforms with responsive layouts and virtual joysticks. I spent plenty of time testing the game on various operating systems and hardware devices to ensure its accessibility for most audiences. 

The landing page

The second part of my work was to create a landing page with interactive elements and a back-end database to receive the audience's feedback. The webpage was hosted on Amazon EC2, and I used MySQL to record the data. 


Landing page link: (URL may change)

https://www.bgea-etc-2020.com/

Interactive story narration

Interactive story narration

Interactive story narration

I constructed a graphic story of a Black girl's living experience with issues and solutions suggested by the clients. Through clickable items, the audience could interact with the story and switch between reality and the ideal world. I also added a blinking animation effect to foster the immersive feeling.

Back-end database

Interactive story narration

Interactive story narration

Using MySQL, I coded a section where the audience could input how they felt about the landing page and the information presented. Both the client and audience could see how others felt about the content, and the client could adjust the webpage based on the feedback.

Responsive layouts

Interactive story narration

Responsive layouts

Same with the WebGL game, the landing page needed to run on all operating systems and hardware devices. The development process for configuring the responsive layouts was the primary bottleneck for this project as the client had high anticipation of this feature. 

Copyright © 2023 Zhisheng Xu - All Rights Reserved.

  • Home
  • Projects
  • Work Experience
  • Photo Gallery

Some videos use loyalty free music from Bensound.