Difference between revisions of "Team:McMaster/Game"

Line 11: Line 11:
 
   <div class="w3-container w3-content w3-center" style="max-width:1200px;padding: 30px 30px;">
 
   <div class="w3-container w3-content w3-center" style="max-width:1200px;padding: 30px 30px;">
 
   <div style="position: relative; left: 25%;">
 
   <div style="position: relative; left: 25%;">
 +
 +
    <p><span style="color: #f2f0f0;"><strong><span style="font-size: 12.0pt; line-height: 107%; font-family: 'Arial',sans-serif;">Drylab-Human Practices Project</span></strong></span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">Drylab team collaborated with the Human Practices team to develop games, that would explain the steps in the Next Generation Sequencing (NGS) process. Meetings with the human practices team helped determine pre-existing games that are analogous to the steps in the NGS process. Using open source software as prototypes to the games, the three games (Fragmentation, Bridge Amplification and Assembly) were developed.</span></p>
 +
<p><span style="color: #f2f0f0;"><u><span style="font-size: 12.0pt; line-height: 107%; font-family: 'Arial',sans-serif;">Fragmentation</span></u></span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">The above image shows the starting page of the game.</span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">Fragmentation is analogous to fruit ninja game. In order to score points, the green DNA has to be sliced. The game ends when a red DNA is sliced. Failing to slice the green DNA will result in a loss of lives and each trial has 3 lives. Loss of all three lives will also result in the end of the game.</span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">The game was developed by referencing&nbsp; the fruit ninja game[1]. The green and red objects of the game were altered&nbsp; to graphics of DNA molecules. The sizes of these images were adjusted to fit the graphics on screen. High score and cumulative score were added to the game. High score is the score for the current game. Cumulative score is the score across all the games. Music and sound effects from a royalty free website [2] were also added to the game using audio methods in phaser.</span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">The following image shows the end screen of the game with the scores obtained in the game. </span></p>
 +
<p>&nbsp;</p>
 +
<p><span style="color: #f2f0f0;"><u><span style="font-size: 12.0pt; line-height: 107%; font-family: 'Arial',sans-serif;">Bridge Amplification</span></u></span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">The above image is the start screen of the Bridge Amplification game.</span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">This game is similar to knife throw. Clicking the DNA molecule at the bottom of the screen shoots it to a rotating plate with DNA primers. To score points, the DNA should not superimpose another DNA.&nbsp; Overlay of two DNA molecules on the plate ends the game. </span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">This game was developed by referencing a knife throw game[3]. The graphics of the knife and plate were changed to DNA and rotating plates of primer respectively. The sizes of images were adjusted. Scoring for this game is similar to the fragmentation game.</span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">The following image is how the game looks while playing. </span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">&nbsp;</span></p>
 +
<p><span style="color: #f2f0f0;"><u><span style="font-size: 12.0pt; line-height: 107%; font-family: 'Arial',sans-serif;">Post production</span></u></span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">After producing the games, a HTML script was written to link the games together. The script has a home screen, options page that links all the games together. </span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">The following image is the home screen.</span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">The following image is the options page. </span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">Title cards and an introduction to each game were also added to the script.</span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">The following images show the title card and the introduction of the fragmentation game.</span></p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">The introduction of each game explains a step of NGS and how to play the game.</span></p>
 +
<p><span style="color: #f2f0f0;"><u><span style="font-size: 12.0pt; line-height: 107%; font-family: 'Arial',sans-serif;">References to the game and music</span></u></span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">[1] <a style="color: #f2f0f0;" href="https://codepen.io/labdev/pen/sCAKe">https://codepen.io/labdev/pen/sCAKe</a></span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">[2] <a style="color: #f2f0f0;" href="http://www.bensound.com">www.bensound.com</a></span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">[3]<a style="color: #f2f0f0;" href="https://www.emanueleferonato.com">https://www.emanueleferonato.com</a> </span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">&nbsp;</span></p>
 +
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">&nbsp;</span></p>
 
      
 
      
  

Revision as of 02:41, 17 October 2018

Drylab-Human Practices Project

Drylab team collaborated with the Human Practices team to develop games, that would explain the steps in the Next Generation Sequencing (NGS) process. Meetings with the human practices team helped determine pre-existing games that are analogous to the steps in the NGS process. Using open source software as prototypes to the games, the three games (Fragmentation, Bridge Amplification and Assembly) were developed.

Fragmentation

The above image shows the starting page of the game.

Fragmentation is analogous to fruit ninja game. In order to score points, the green DNA has to be sliced. The game ends when a red DNA is sliced. Failing to slice the green DNA will result in a loss of lives and each trial has 3 lives. Loss of all three lives will also result in the end of the game.

The game was developed by referencing  the fruit ninja game[1]. The green and red objects of the game were altered  to graphics of DNA molecules. The sizes of these images were adjusted to fit the graphics on screen. High score and cumulative score were added to the game. High score is the score for the current game. Cumulative score is the score across all the games. Music and sound effects from a royalty free website [2] were also added to the game using audio methods in phaser.

The following image shows the end screen of the game with the scores obtained in the game.

 

Bridge Amplification

The above image is the start screen of the Bridge Amplification game.

This game is similar to knife throw. Clicking the DNA molecule at the bottom of the screen shoots it to a rotating plate with DNA primers. To score points, the DNA should not superimpose another DNA.  Overlay of two DNA molecules on the plate ends the game.

This game was developed by referencing a knife throw game[3]. The graphics of the knife and plate were changed to DNA and rotating plates of primer respectively. The sizes of images were adjusted. Scoring for this game is similar to the fragmentation game.

The following image is how the game looks while playing.

 

Post production

After producing the games, a HTML script was written to link the games together. The script has a home screen, options page that links all the games together.

The following image is the home screen.

The following image is the options page.

Title cards and an introduction to each game were also added to the script.

The following images show the title card and the introduction of the fragmentation game.

 

 

The introduction of each game explains a step of NGS and how to play the game.

References to the game and music

[1] https://codepen.io/labdev/pen/sCAKe

[2] www.bensound.com

[3]https://www.emanueleferonato.com