Author Archive

DISCHORD / SPACE QUEST PIZZA

By Ladan, Shikhar, Peiheng


Project description:

Space Quest Pizza is an endless arcade game with a simple goal (with a twist). Collect the pizza and avoid the enemies. The goal may be simple but it is the interactions that add the difficulty in the game as multiple players control the same character and have to work together to survive in the game.

 

GitHub Link: https://github.com/ace5160/dischord_game

screen-shot-2018-11-25-at-6-12-56-pm

Ideation:

2. brainstorming:

img_5683

Initially with this project,  we wanted to explore how to combine the music and visualizers into a game. We decided as group to work with the strength we had in the group which was game design, and visual design.

In the meeting, we talked about what were some  ideas we could execute. Music based Dungeon Crawler, Midi Controller Game (Guitar Hero inspired).  We talked about pros and cons as well a feasibility and the skills we all could contribute to the project.

Finally, we got a direction. We wanted to create a game that was aesthetically strong that incorporated music somehow. Our initial game idea was a dungeon crawlers game that incorporated and aspect of cooperation that folks had to figure out as they played the game. The music drove the aesthetic and rhythm of the game as every-time that a player got a power up it would change the genre of the music playing plus the aesthetic of the game. And we named it DISCHORD.

2. Dischord game

This is the initial sketches for our first game idea Dischord.

img_5768

First ideation session of the game we talked about what were the things we would have liked to explore with this project. There was an interest in gameplay and music. We came up with a dungeon crawler that was driven aesthetically and dynamically by music.

We started out building the game the p5.js games library. We initially created the game before were introduced fully to PunNub. We thought we would just build out the game fully and incorporate the network afterwards. Not realizing that the network would affect the type of messages we could send.

On our first meeting/ question session with Nick and and Kate we realized we couldn’t just incorporate pubnub into the backend after we created the game. There was suggestion made by both Nick and Kate on how to move forward the one that we felt we could execute in the time we had was to create a browser based game with a phone controller.  Once we had a pivot point we started trying to put their suggestion into the game we already had but were finding it difficult with connecting with PubNub.

We were not able to get the p5 play library to work with PubNub.  We decided to start from scratch and we found a piece of code that incorporated a second screen controller with moved ball with the built-in accelerometer of the device. We talked about what kind of interaction we wanted in the game. Once we simplified the interaction about multiple players controlling one avatar we started building out the game. Once we simplified the controls to moving a ball on screen up and down we were able to start world building and goals of the game. Once we moved to simpler code skeleton we built out the rest of the interaction for the game. Once we simplified the code this when we moved away from the Dischord game concept and moved toward the space quest pizza.

 

3.  Space Quest Pizza

As mentioned above, we started to adjust the game architecture because of pubnub. This idea came into existence when our old game could not be achieved due to technical issues. We went to the game lab and spoke to them about interactions in games. We also looked at a few games which used unique interactions in the context of networking. This is what drove us to the idea of space quest pizza. A simple avoid and collect game which requires an immense collaboration and dialogue between all players.

sketch

In the end, we decided that the game consists of a master screen and several mobile devices, and users can choose any of the four buttons including the top, bottom, left and right to control the movement of the game characters on the master screen through these different keys.

The game character needs to avoid the enemy character that constantly appears in the game. If it touches the enemy, the character will die. It need to try its best to get falling pizzas and get more score, which will be displayed at the top of the master screen of the game.

At the same time, on the first page of the game, we set two options: a two-persons group and a four-persons group. The device interfaces of two-persons group will get up-down button, and left -right button. The four-persons group will get up, down, left, and right buttons respectively. In addition, users need to scan the QR code on the first page of master screen to get the button interface on the phone. The QR code does not have any introduction. Users need to click the key to know which direction they get. We wanted to make the game more funny because of this sense of mystery and to get users to work closely with other users at the beginning.

 

Coding processing:

1, Game skeleton 

The game idea was derived from our brainstorming where we wanted a multilayer game which was intense and music was a big element in the game.

Dischord was supposed to be a multilayer music based dungeon crawler where all the players had the common objective of surviving and getting to the goal. All the obstacles and power ups were based on three music genres (pop, rock and R&B). The obstacles in the game had a visualizer behaviour.

In terms of the code for Space quest pizza. We started off with p5.play to help us with collisions and sprite creation. After working on the level design we realized that establishing a pubnub connection and p5.play was not feasible.

We went back to the drawing board and changed the idea, that’s where we started off with space quest pizza. This time without p5.play.

For the enemies, we used the keep function to allow them to chase the player. Each enemy is targeting areas around the player so it gives them separate behaviours of their own.

For the collisions we just compared the x and y coordinate values of the enemy and the players.

 

Music:

Music was an important part of both of the game ideas we had. For the Dischord as seen in the video the concept we were going for was that the environment moved according to the beat of the music. Once the player got a power up it changed the game play environment colour and rhythm. The video below show the initial idea of how the environment would move based on the music. This was something we ultimately wanted to add to the space quest pizza but didn’t have enough time. 

The finalized music that was added in the background of SQP was music that Ladan composed and once we heard it as group agreed it went well with the game play.

 

Pubnub connection:

In the initial game plan, the connection is that when all users playing the game, their characters’ actions will be displayed synchronously on all users’ interfaces. We tried to complete this interaction by controlling different devices through pubnub. At the beginning, we had a relatively simple understanding of pubnub. We believed that data, image and function could be transmitted through pubnub. After trying many coding and discussing with Kate, we found that pubnub could not transmit images or even animations. So this plan is undoubtedly difficult to implement in pubnub.

So as mentioned in ideation, Nick suggested that we adjust our idea to a more achievable plan. Instead of displaying the game processing synchronously from multiple devices, all users who enter the game can control the movement of a character on the master screen through a handheld device.  The only messages that would be sent across PubNub would be up, down, right, left.

Therefore, in the final game, users can click the buttons on the mobile phone screen to control the movement of a character on the master game screen, so as to get scores for eating pizza or avoid enemies. We set different values from 1 to 4 for the top, bottom, right and left buttons. When pubnub transmits different values to the the master game screen, XY position of the character will change according to the received value, thus generating the function of movement.

 

Visual design:

One of the major decision that drove design aesthetics was our group members wanted to explore pixel art. Once we decided how we wanted the look and feel of the game it was easy to go forward with the designing of the layout and characters. The reason we wanted to explore pixel art was to support the nostalgic feeling of videos games. Also we wanted to combine the retro arcade feel with the modern technology of networking. This would engender emotional resonance with our game.

We went through a few iterations of the background first

65ff0ae6-064c-498b-b871-f64cdfbc3a94 09eec551-993b-48eb-a20a-b4fe78c227fd

 

 

 

 

 

 

2ebc5a97-eecf-4817-b964-e955245930eb

 

b4d11105-3cb8-4a77-92bd-391071d7cb0e 3d69b919-6a99-4fc3-8eda-4bd6457b7706

We picked a space theme for the game which was very nostalgic to the arcade feel with games like Galaga and asteroids. After that we started with our pixel art iterations. We started simple and kept making the visuals better bottom up. The colour pallet was dark hue and a blue shade. For the game entities we used a lighter palette to distinguish main and background in the game easily.

alien-buttons_%e7%94%bb%e6%9d%bf-1

To make the game visually more relevant to the theme, we downloaded an Alien Language  font from the Internet and made different buttons to display on the phone.

 

User testing before in last day:

Feedback:

In the Game Mechanics, we planned to make the character get one point for every pizza it ate, to improve player’s motivation. However, due to the time and code, this function was not fully  implemented. 

In addition, QR codes are close to each other, and since there is no hint, when a group of people rush to try the game — like the presentation day — some people will scan the same QR codes, causing some confusion.

We received positive feed back on the look and feel of the game. One of the part we could have grown on was the achievement portion of the game play. It wasn’t clear to players what they were supposed to do if it wasn’t for us letting them know. Also wasn’t clear when the game ended.

Future iterations:

We plan on adding a few new features in the game in terms of mechanics and interactions.

  • we plan to make the controls randomized between the players at some instance while in game to add another level of complexity and have players collaborate to an even more extent.
  • Showing how long the players stay alive to make them feel like they are achieving something.
  • We plan on making this a exhibition game project where the controls would be split depending upon the number of people in the room. This we plan on achieving using an ultrasonic sensor at the entrance of the room which can detect when someone enters the room.
  • For the next iteration we want to incorporate the music in the game play aspect by having sounds for when the players is moving but also music in the background. Also a small visualization with the stars moving and twinkling to the music.  To give the game play for dynamism.

 

References:

  1. https://molleindustria.github.io/p5.play/docs/classes/Group.html
  2. http://molleindustria.github.io/p5.play/examples/index.html?fileName=asteroids.js
  3. https://creative-coding.decontextualize.com/making-games-with-p5-play/
  4. https://www.youtube.com/watch?v=4cusD-ut9I0
  5. https://phaser.io/tutorials/getting-started-phaser3/part5
  6. https://www.pubnub.com/tutorials/javascript/multiplayer-game/
  7. http://spaceteam.ca/
  8. https://p5js.org/
  9. https://forum.processing.org/two/discussion/23531/how-to-pause-play-a-sketch-with-the-same-button
  10. https://www.reddit.com/r/javascript/comments/5mjcdh/is_there_a_way_to_pause_frames_in_p5js/
  11. https://www.pubnub.com/developers/demos/pongnub/

Reminders – An online exhibition about Chinese labour corps

By Pei heng  Zhao

 

“Race does not exist as a matter of biological fact, but only as a consequence of a process of racialisation… But racialisation is often more insidious. It means that we see things that don’t exist, and fail to recognise things that do.

– Gregory Smithsimon

 

Project Description:

Reminders is an online exhibition about Chinese Labour Corps ( abbreviation CLC ), which was a force of workers recruited by the British and France government in World War I.

14

Visitors have to complete three blank-filling-questions to drag random words on the web page into blank (gap) to complete the whole sentence. All three sentences are negative racism comments about the Chinese Labour corps. After completing the three, visitors will receive a positive comment from a newspaper at that time about the contribution of the Chinese Labour corps. Finally, visitors will enter a page, which is about the Chinese cemetery of the British Army at noyelles-sur-mer and Gravestone in noyelles-sur-mer. By this online exhibition, visitors can explore this history and these labours by themselves. Through the understanding of different comments on the same historical event, visitors can have a deeper understanding and reflection of racism, historical truth and collective memory.

 

GitHub:https://github.com/Norbertzph/CLC

 

Process journey:

1,Concept/Inspiration

I come from China, and there is very little mention of China’s role in the first world war in Chinese history lessons. Near the Remembrance day, I noticed that many passers-by started wearing poppy. I had known about it before, but I still went online and looked up the origin of the custom. By accident, I found that China sent up to 140,000 labourers served for both British and French forces in Europe during the first world war, which filled the gap of British and French wartime labor force and contributed a lot to the victory of the Allies in the first world war. But I, as a Chinese, cannot see this mass of people in Chinese history textbooks or in western memorial ceremonies. At the same time, I have seen many positive and negative comments about the Chinese people who contributed to this issue in the newspaper. What makes people so polarizing about the people who helped them win the war?So I decided to take the opportunity of project 3 to build an online exhibition about them.

 

2,  brainstorming

When the theme was decided, I began to think about how to present it. My original idea was to draw a map of Europe, and when visitors click on different parts of the map, they could see the casualties of the CLC in various places, as well as the comparison of the battlefields where they worked in those days through pictures. The plan is not difficult to implement, but the problem is that it is difficult to find accurate information to support the idea.

img_5540
And then, when I did my research on the CLC, I found that a lot of the British and French newspapers at that time, many of them were positive, For example, “The Chinese labourers were recruited by careful selection… In addition, The results of the medical examinations show that most Chinese labourers are in good health, which is good news for our country to continue to recruit labourers there. ” describes how the CLC is strong here, how to help the French. But in other newspapers at the same time, there were many comments of the CLC bringing pestilence and drugs. I was fascinated by this polarizing assessment. This explains why, after the war, most CLCS were paid very little and were immediately repatriated under the pressure of public opinion, even though the postwar British and French Labour force was relatively short, and the lives of these rural men did not change materially.
So I started thinking about how to incorporate those comments into this online exhibition.
I thought about showing blurry historical photos of the CLC, and then visitors would have to draw the outline of the entire historical photo to show the comments. But the experience is unimpressive and requires patience.

img_5532

image_from_ios

Making painting function with potentiometers

Finally, I came up with the blank-filling-questions. The game requires people to focus on the disordered words and then arrange them into a normal sentence to learn the meaning. So I decided to use this form to mix up the negative reviews.

When visitors open a web page, they have no idea what the words mean, but as they drag them to try to form a sentence, they come to understand that they are discriminatory. But until they complete all the sentence combinations, they don’t know who the words are describing, but they already have a certain impression of the words. After completing the combination, they can get a positive description of the contributions made byCLC. They will suddenly understand why people have such discriminatory descriptions of those who have contributed so much and even given their lives. Finally, they can choose to enter the last page and see the Chinese cemetery of the British Army at noyelles-sur-mer, where many CLC members are buried.

img_5530

 

3, Implement

 

img_5531

In the early stages of implementing the idea, I spent most of my time studying how to move words from one place to another and fix in a specific location. The initial plan was to divide the site into two sections, one with the words scattered, and one with the designated areas to fill in at the top. Set an x and y coordinates for each word. When the word is dragged to the specified x and y coordinates in the top area, it will be fixed, then drag the next word to the specified position, and finally go to the next page.

img_5321

In the early stages of implementing the idea, I spent most of my time studying how to move words from one place to another. The initial plan was to divide the site into two sections, one with the words scattered, and one with the designated areas to do the blank-filling-questions in the top. Set an x and y  location number for each word. When the word is dragged to the specified x and y location in the top area, it will be fixed, then drag the next word to the specified position, and finally go to the next page.

But with this approach, long sentences can be a bit of a hassle, and I had some difficulty in dragging one word and fixing the location. At the suggestion of classmates, I simplified the blank-filling-questions: visitors need to move a word on the page to the designated position in the sentence to make the sentence complete. I use the map feature to convert the two potentiometer data into  x y coordinate position with a screen size range that allows it to drag the specified word.

img_5373
In the original plan, the visitor would drag all the words to the designated location and the page would automatically jump to the next page. But in implementation, I added a button in the Arduino because of achievable. When user dragged the word to the specified position to get a complete sentence,  the button can be pressed to the next page.

circuit:

screen-shot-2018-11-11-at-11-26-06-pm
In visual design. When users are still in the blank-filling-questions phase, the background is a blurry historical images. Users have no way of knowing who these sentences describe. When they finish all the blank-filling-questions, users can enter a very clear historical picture of members of CLC facing the camera smiling. The images are as vivid as they are today. Such contrast and vividness make people think more about why people who made such great contributions and just looks like all of us today, will be forgotten or even blackened.

On The last page of The exhibition is a picture of the entrance to The Chinese cemetery of The British Army at noyelles-sur-mer. Next, I’ll try to convert it to Google street view, where visitors can see what this cemetery of 842 Chinese labourers looks like today.

img_5403

 

I have always been fascinated by how to convey boring art or historical knowledge to users through interactive experience. The Reminder project is the first step for me to officially embark on this exploration. Reminds me of my visit theCanadian history museum in Ottawa, there is a exhibition about many discriminations to various ethnic group in the  Canadian history, but only words and pictures on display in the window, it is hard to trigger empathy of most visitors. If these black history can be transfer into a more profound experience of digital method to the younger generation, maybe also a small change in this world of rising nationalism and the far right.

 

Reference:

1, https://aeon.co/essays/race-is-not-real-what-you-see-is-a-power-relationship-made-flesh

2,https://www.scmp.com/magazines/post-magazine/long-reads/article/2172435/chinese-labour-corps-first-world-wars-forgotten

3,https://aeon.co/essays/race-is-not-real-what-you-see-is-a-power-relationship-made-flesh

4,https://create.arduino.cc/projecthub/user3330224/paddle-a-sketch-tm-81acd2

5,https://github.com/creativetechnologylab/etch-a-sketch-p5js

 

 

Use of this service is governed by the IT Acceptable Use and Web Technologies policies.
Privacy Notice: It is possible for your name, e-mail address, and/or student/staff/faculty UserID to be publicly revealed if you choose to use OCAD University Blogs.