Group: Vladimir, Dariga
Concept
We initially proposed a Box Musician Game that was intended to be a rhythm game with a physical controller and notes to play. Though, during the implementation process we have decided to move away from the idea of making a project all about the music and use the physical controller for the Chill Adventure game to move across different game levels instead. The concept of moving across different levels while avoiding threats was also inspired by Vladimir’s midterm project.
Interaction design:
The main components behind interaction with the player are the physical board and the physical controller both made of wood. The controller is moved across the board and this movement is then reflected on the game screen. Player needs to use their hand to navigate through their game experience.
The concept behind using Arduino:
As proposed, we are using 2 ultrasonic sensors to detect the change in the position of the physical wooden controller and make the movement reflected in the p5js game screen. We use the speaker to play tones of different frequencies upon the collection of coins and we use a servo motor to rotate frequently to signal the unfortunate event of the player’s death.
The concept behind p5.js:
p5.js code implementation handles most of the game design and implementation. Code implementation includes movement across the screen, collision detection, and change of screens when the player has completed a certain level to move to the next one/finish the game, with the possibility to restart the experience. p5.js handles graphics of the game, shapes, text displays, etc. p5.js overall uses the Entity-component system design pattern, which you can read more about in Vladimir’s Midterm Blog Post
The game has several “Scenes”: The Menu scene, the Play scene (the levels), and the End scene. Each scene is completely separate from the others and contains its own logic. The Play scene receives a level (a list of strings) as its parameter and loads every part of the level. This includes walls, tiles, the player, and NPCs. You can see the levels in the folder ‘levels’: ‘level1.txt’, ‘level2.txt’, and so on. These were generated using a Helper Level Generator Script (.py).
For the entities in the levels, we use sprite sheets and even animate some of them (e.g. coins). Also, we implemented an NPC AI that follows the player, as well as a random movement AI that uses Perlin noise to decide the velocity at each moment.
We paid special attention to designing the levels so that they are not too frustrating to complete, considering our unconventional play method. Doubly so after the user testing.
The communication between Arduino and p5.js:
Arduino and p5.js communicate in several ways:
- Arduino sends X and Y coordinates mapped from the readings of ultrasonic sensors to p5.js so that position of the player is accurately reflected on the game screen
- p5.js send to Arduino info that the player has virtually died and this would trigger the action of rotating servo motor – with the goal of making sound.
- p5.js send to Arduino info about the tone and frequency to play from speaker whenever a coin is collected, or similar.
Some of the initial challenges we faced involved tracking the position of the controller. We first thought about placing two sensors in parallel and using the space between their waves to create a coordinate plane, like they do here: 2D tracking using Math. However, after trying this out, we found that we would need a very big area (more than 2 meters squared) and it was still very imprecise and buggy. Therefore we changed our approach to use two sensors which are perpendicular to each other, one tracking X and one tracking Y position.
The final Arduino implementation of how tracking position works in the project is presented below. X and Y from trackPosition () would be sent to p5.js for further processing.
void trackPosition() {
float d1, d2;
d1 = getSensorResult(trig1Pin, echo1Pin);
delay(10);
d2 = getSensorResult(trig2Pin, echo2Pin);
d1 = constrain(d1, 10, 150);
d2 = constrain(d2, 10, 150);
X = mapFloat01((float)d1, 10.0f, 150.0f);
Y = mapFloat01((float)d2, 10.0f, 150.0f);
}
float getSensorResult(int trigPin, int echoPin) {
// Send pulse.
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
// Read pulse duration.
long duration = pulseIn(echoPin, HIGH);
// Calculate distance from duration.
float distance = (float)duration * 343.0f / 2000.0f;
return distance;
}
float mapFloat01(float x, float minX, float maxX) {
return (x - minX) / (maxX - minX);
}
Code snippet from the communication of p5.js with Arduino from the p5 side:
// Send answer to Arduino.
const isPlayerAlive = this.entityManager.get("player").length > 0;
const collectionDelay = 0.3 * FRAME_RATE;
if (this.shouldSendPlayerDiedSignal) {
// Send death signal.
this.shouldSendPlayerDiedSignal = false;
this.game.sendArduino("2\n");
} else if (
this.lastNpcCollectionFrame + collectionDelay >
this.currentFrame
) {
// Send tone.
const t = this.currentFrame - this.lastNpcCollectionFrame;
const f = floor(map(t, 0, collectionDelay, 200, 1500));
this.game.sendArduino(`3,${f}\n`);
} else {
// Send OK signal.
this.game.sendArduino("1\n");
}
The last challenge was to make sure that activation of the rotating servo motor, playing tones from the speaker, and tracking position worked well together. The adjustments were made for use of delay() to not make one operation prevent other ones from working properly for the purposes of the project. To check the final implementation in Arduino, you can refer to the Arduino Code
Embed sketch:
What are some aspects of the project that you’re particularly proud of?
We’re proud of how we made our unconventional controller. Our controller may initially be frustrating to play with, but there is a learning curve, and smooth precise movements are possible with enough practice. We’re also happy that we created an interesting enough, although possibly frustrating, game to play and keep the user’s attention.
Though, we should admit we found the experience of making the game slightly weird, unconventional and to some extent frustrating rewarding and creative in a sense. There are a lot of other games which are easy and relaxing, but for this project, we felt we would want our players to get challenged and driven to succeed through all the tough walls, confusing moves, and undefined threats they face in the game.
What are some areas for future improvement?
A bigger model can be made with better ultrasonic sensors and a larger area. This would enable easier and smoother control. Also, the possibilities in p5 are endless. We can expand our game with new levels, create a completely different type of game, or even create something that’s not a game.
We can also work on making the design of both p5.js start screens and physical components fancier and more appealing, though that was not the goal in our project experiences.