"Bioblox is a BBSRC funded project to explore the gamification of protein docking in 3D.
Protein docking is a complex problem involving the interaction of complex shapes. By using crowd sourcing in a playful context, combined with a computer assisted UI (User Interface), we plan to ultimately improve upon state of the art algorithms and solutions. We also plan to develop algorithms to discover novel docking arrangements between pairs of unbound proteins in the PDB (Protein Data Bank), on the basis of an intuitive UI.
Our experience comes on the one hand from the bioscience of proteins (Imperial team) and on the other from the games industry both for UI design and real time game physics (Goldsmiths team). We can collide molecules with thousands of atoms at full frame rate and render cross sections. We are also experimenting with different visualisations of the docking process."
BioBlox3D is developed using game engine Unity in C# for WebGL platform. It is available to play for free at bioblox3d.org. I was in charge of the gameplay, backend and the initial UI of the game.
The pipeline of the game starts with a python script reading a PDB (Protein Data Bank) file from the PDB website. Different views for the proteins are generated and stored as an asset bundle on the server. Once the user loads a level, the asset bundle for that level is downloaded and presented in the scene. The game allows the user to explore and select between hundreds of amino acids and thousands of atoms which form part of the structure of each protein.
Lobby, level selection and leaderboard panel
One of the big challenges we had is the memory allocation problem, as we aimed for a WebGL build we needed to calculate and allocate the correct amount of memory for the game to run in any computer loading any protein.
The game has been presented in several exhibitions and conferences like New Scientist Live, Develop, Imperial Festival and VizBi just to mention some. More info about the project can be found at bioblox.org
The gameplay flowchart I used to implemented the game.
This was BioBlox when I joined by October 2015 as development assistant. My first goal was to get up to speed with the code and prototype an improved user interface.
My plan was to place the interface over the edges of the screen, leaving a clear open space in the middle for the proteins. (1) The amino acid buttons for the proteins under each 3D representation.(2) The 'create connection' button. (3) A toggle panel for the tools. (4) Display of the score. At this stage, the game was only presenting 2 proteins only and the interaction with them were limited.
The first prototype. A bottom tool menu was implemented by now, icons were added and the score was represented in a visual way. This was the first approach and step to what BioBlox is nowadays.
A toggle menu was implemented by now and all the tools were grouped there. The amino acids buttons (to explore the proteins) weren't introduced to the user interface yet.
A first prototype of the amino acids buttons. The challenge was how to present visually 120 amino acids, for this I used a content size fitter.
This version introduced the amino acids buttons. These are generated by the PDB file of each protein. This allowed the user to pick amino acids and connect them. Alert messaged were implemented as well as the gameplay was taking shape.
The ID of each amino acid was added to the amino acids buttons. The color of each buttom represented the type of amino acid. Highlight to the selected amino was implemented. The background was fundamental as it offered contrast with the proteins.
The score went back numberic and positioned at the top-right corner. Drop down elements were included in the tool panel to select the different views for the proteins.
This was the last version of the game before the artist/designer arrived. The style I implemented for this version was a much more simple, white background and all the tools grouped in the toggle panel. A tutorial was introduced as well as we were close to a first release of the game.
What BioBlox is today.
This was one of the intro scene I did for the game, I'm always keen to have a really atractive lobby, an eyecandy, to catch the eye of the players. This was used but later on, as the game turned to be more a tool than a game, it was erased.