![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/95bf4b0b-c01b-4c9e-b3b7-ca183e9c02d5_rw_1200.png?h=e1d02de1aca1e56c5b5e481e4e05b334)
Listener is an HTML/CSS/JS game which you control using only your voice/sound. The game uses 3 microphones, each with a differently styled 3D-Printed enclosure- two of the microphones look like ears, and talking into one ear makes the creature move in that direction. there is a bigger, more central microphone that causes the creature to jump vertically.
My focus with this game was to create an immersive experience by breaking down the border between the player and the game. As such, having a solid world design with enough intrigue to draw people in was paramount, and served to strengthen the shift in player dynamic I gave to the game. In a way, the player does not "play as" the creature- rather, the creature is it's own entity that the player must work together with. This forges a relationship unlike that of having an avatar.
I made Listener my second semester of Sophomore year, 2019.
World Design & Assets
![The cute, blind creature](https://pro2-bar-s3-cdn-cf2.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/35e73e4e-49f9-4ed5-bd30-77d4c7c40676_rw_600.png?h=49e38c79d411cd2cd080da6e1bdc87c0)
The cute, blind creature
![The first area. get over the wall.](https://pro2-bar-s3-cdn-cf6.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/ab5bd9a5-87c6-4bf6-a42d-c7c134308c0c_rw_1200.png?h=8a24733c6084db46fcb3397aee6b5ede)
The first area. get over the wall.
![The second area. The gate moves up with your voice.](https://pro2-bar-s3-cdn-cf2.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/3beb6845-2b1e-43fb-9a99-286e045c0493_rw_1920.png?h=34f84a9a4391c172b3bdece5072f7973)
The second area. The gate moves up with your voice.
![The third area. A small break with relaxing scenery.](https://pro2-bar-s3-cdn-cf3.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/e5ed914b-67ff-420f-b787-978cd669c654_rw_1200.png?h=2e28a17724984a4be85ad0fe927e7832)
The third area. A small break with relaxing scenery.
![The fourth area- the climax. Modulate your voice well to get across.](https://pro2-bar-s3-cdn-cf2.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/3a3333c9-08e2-41c9-8039-5e6fdcc58bc2_rw_1200.png?h=fdd496d683829cf74e5fdfc2a1ca073a)
The fourth area- the climax. Modulate your voice well to get across.
![The final area. Mimics the real world setup you play the game with.](https://pro2-bar-s3-cdn-cf1.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/cb355942-402e-486c-94ba-4b2861f45fb0_rw_1200.png?h=b976f8b2b7f5d3ad23956fd59e282737)
The final area. Mimics the real world setup you play the game with.
![End screen. Game would restart after ~20 seconds for next person.](https://pro2-bar-s3-cdn-cf2.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/3d9cb060-b80f-4bfa-b3c6-0022cd1bea69_rw_1200.png?h=667c1eaf8e78ab8e18a2c5a833ebed57)
End screen. Game would restart after ~20 seconds for next person.
![3D model of the ears that would encase the microphones.](https://pro2-bar-s3-cdn-cf.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/1b69abfe-3d54-4986-867e-74f3dc6c5fa8_rw_1200.png?h=ad96094b1ccc9835503b12a323805daa)
3D model of the ears that would encase the microphones.
![3D model of the peristyle that surrounded the central microphone.](https://pro2-bar-s3-cdn-cf1.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/ce580028-3805-4893-91bb-6671def27c32_rw_1200.png?h=98b2d5e5ca281c8e92dc4478bd058200)
3D model of the peristyle that surrounded the central microphone.
ENd of Semester show
![Setup at EOS Show](https://pro2-bar-s3-cdn-cf5.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/680ac3ad-316a-4421-b68a-71038e09ecee_rw_3840.jpg?h=0f5aca10d173fc507405749ac036ab39)
Setup at EOS Show
![People playing the game during the show](https://pro2-bar-s3-cdn-cf3.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/ecdd4dba-b1ac-4fbd-a1ca-16b700ee684f_rw_3840.jpg?h=246eaff44a7315169f4c34d1ba7df411)
People playing the game during the show
![Setup at EOS Show](https://pro2-bar-s3-cdn-cf3.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/e20f0de7-5bf8-43c4-a1fe-35bb715bd0f8_rw_3840.jpg?h=9fa85e183b9e813692cc779c6e53bf4a)
Setup at EOS Show
![Closeup on one of the microphones](https://pro2-bar-s3-cdn-cf6.myportfolio.com/7bef0e95-89c7-464d-b083-fff6eb5b89ca/ac5082c9-fc90-44ff-8c94-39084bd2da69_rw_3840.jpg?h=26b84705f53e9b2be5a72a76bb6aa0d7)