University Open Day

We had a stand in Computer Science at the University of York Open Day on Saturday. We took the opportunity to show the prospective students what they can do using programming skills from the CS course.

We hooked up a tablet computer to a monitor so that people could see as one person played the game. 

The reception for Floqua was very positive. People enjoyed playing the game and it made it easier to explain the research behind the app as they were playing. We received comments about the quality of the graphics and that Floqua is novel as a game.

We hope that everyone who attended had a good day and found out more about the University of York.

Floqua is released

Our summer students have now finished their 9 weeks work. We are very proud of what they have achieved. We have released version 1 of Floqua on Google Play with 12 introductory levels and we will soon be releasing the next level set. The Complex City apps website is now active where you can find out more about the project and the scientific research that has been used in Floqua. 

A Floqua level in progress

Colour Schemes

In order for the app to be accessible to as many people as possible, the colours used should be tested for colour blindness. This ensures that any element does not become hard to spot and text does not become illegible, even if the user is colour blind.

The general colour scheme was tested before creation:

Colour blindness checks for the planned colour scheme

Of particular interest were the colours of the fish. These need to be distinct to any user for certain elements of the gameplay to make sense. This meant some adjustment of the original planned colours for four varieties of small fish:

Initial colours - problems on red-green blindness types

 As can be seen, some of the colours are almost impossible to distinguish if a person is red-green colour blind.

New colours - fish are much easier to tell apart

The adjusted colours are now distinct for those with colour blindness. The simulation tool used can be found here: http://www.etre.com/tools/colourblindsimulator/

Feedback session: 3 weeks

After 3 weeks of development, we ran a feedback session in YCCSA to check that we were making a game people would like to play, and gather ideas for future versions.

 

After integrating the current game engine with the graphics, menu screens and levels produced so far, we gathered around 15 friendly people from YCCSA. They played the game on phones, tablets and laptops, and gave us loads of useful feedback that we will use to improve the game in future versions.

In general, people seemed to be really impressed with the game. They liked the originality of the game mechanic, the smooth, intuitive gameplay, and the graphics. In future versions, people asked to see more variety and animation in the environment, which would enable more puzzle-based levels and upgrades to exploit the complexity of the flocking algorithm.

We recorded 82 separate points that people made about the game! (A mixture of initial reactions, good points, bad points and ideas for improvement.) The main routes we identified for extending and improving the game are:

1. Interactive environments
1. Predators, water currents, animated obstacles.
2. Feedback between the fish and their environment – the environment being able to damage the fish and affect their movement, and the fish being able to change and destroy their environment.
3. This allows us to design puzzle-based levels, which the player must solve by understanding how the flocking fish interact with different types of environment.
2. Upgrades
1. Players can use points to buy upgrades for their fish/flock, and different types of fish.
2. Different fish will have different skills, rather than being generally “better”. So the player can choose which fish/upgrades to use for each different puzzle level.
3. Social Networks
1. Different fish have different flocking parameters depending on which fish they are interacting with.
2. This gives more mechanics for making puzzles, and more upgrade choices.
3. Real fish behave like this, so this could make the game more biologically realistic, and allow it to be used for education/research, as well as for fun.

We also decided to make a website to explain the science behind flocking, and to host downloadable versions of the game.

A big thankyou to everyone who came to the feedback session. Your comments will really help to improve the game.

Basic Interface

With the game mechanics coming into place, the user interface will soon be needed.

A map through the planned interface was drawn out by hand to make sure the path through the various menus and screens is logical and will provide all the necessary options. This is the skeleton from which the actual content can be built.

Interface Map (click to full view)

Designing Sprites

This process began with some paper sketches of elements within the game - thinking about the relative size of the fish, obstacles etc. and how they appear on the screen.
 

Next, some pen and ink sketches were used to have more clear designs to work from when producing the digital version. This ensures the vector images aren't too stiff and geometric: if working directly to vector, it can be tempting to use more generic, oversimplified shapes and the designs become unimaginative.

Finally, the designs are drawn digitally in a vector format. This allows easier resizing of the sprites to suit different screen sizes.

Integrating Game Engine and Graphics

After receiving some of the initial graphics for the game I integrated them into the game engine, the result is shown below. Personally I think it's looking really good, just a few small scaling issues.

Designing the Game Engine

When approaching the programming of this application I decided to use the libgdx framework. Libgdx is a cross-platform development library based on OpenGL. I decided to do this as not only does it allow the game to be run both as a windows application and an android application, but also preforms much better on mobile devices than the standard android sdk.

At the moment the game simulates a shoal of fish swimming around a tank, With one fish being user controlled.  The user is shown an area, the size of their screen, of the game map which they can explore with their shoal.

The Flocking Algorithm - The Technical Bit:
The game uses the flocking algorithm to control the movement of fish within the game. Programmatically each fish has a 3 distances defined from it's centre, effectively making the three rings representing the repulsion, orientation and attraction zones.
The fish also has a cone of angles, defined as it's viewing zone, the fish can only react to other fish within this cone.
 When changing the position of a fish, its position is checked against the position of all other fish, if another fish is within one the fishes zone it's position vector is added to the total for that zone.
When a fish has analysed all other fish and their positions it can execute, changing it's position, based on the other fish.
According to the algorithm the fish's repulsion zone takes priority, this means that if another fish is within the repulsion zone the fish will move itself away, regardless of how many fish are within the orientation and attraction zone, this is reflected in the algorithm.
If their are no other fish in the repulsion zone then the fish can react to the others in their orientation and attraction zone.

In this game the user plays as one of the fish, the leader of the pack, obviously in order for the player to be controlling and moving a fish within the shoal the algorithm cannot be perfectly implemented, however I think I managed to get around this (relatively) elegantly by making the user controlled fish appear to all other fish as multiple fish i.e. the other fish are weighted towards the player, for example if the weighting was 10 the fish  would act as if there were 10 fish moving in the same direction and from the same position as the player.

Although this can't really be shown in a screenshot, I have tried my best in the above. The larger green fish represents the player and the blue fish represent the rest of the shoal. Something to bear in mind- the graphics on this screenshot are very much programmer art.


Obstacles and Walls:


I have added walls to the game at the perimeter of the background to prevent the fish from escaping, and obstacles within the game that the fish can't pass through. The interaction between a fish and an obstacle/wall is similar to a bounce, where the relative component of the fish's velocity is inverted. For example on the diagram below the Y-Component of the fish's velocity would be inverted upon hitting the wall whilst the X-Component can remain the same. Once the fish is no-longer touching the wall it returns to executing the flocking algorithm.

Designing the Logo

The first graphics job was to design the logo for Complex City Apps. 

This started out with some quick sketches for ideas. There was already a plan for the direction we wanted to go: something simple, eye-catching and scalable, as the logo will need to appear on anything from documents to mobile screens.
 
After a bit of design work, a few alternatives were printed and offered to some YCSSA staff for feedback. It always helps to get different opinions on a design, as personal tastes can vary.
 

Designs for feedback - small changes make a big difference!

Feedback suggested that we might make the logo more specific to York to strengthen the connection to the University of York. A few alterations to the skyline brought the logo to its current state. Is the York detail too fiddly and distracting, or good branding? Let us know your opinions in the comments.

York themed logo

Flocking Algorithm

The flocking algorithm that we are using for our first app is by Couzin et al. Using this method of flocking, each of the individuals has three zones around it. The outer zone represents a region of attraction, the individual will be attracted to others if they are within this zone. In the next zone the individual will try to orientate itself to try to fly in the same direction as other individuals. If another individual gets too close and enters the central zone then they will be repelled. Behind each of the individuals is a blind spot in which they cannot see. The research paper by Couzin et al gives much more detail.

First Application: Flocking

Awklet Flock by D. Dibenski source Wikimedia Commons.

Our first application will be a game based on flocking.

Flocking is a well known area of research. Boids is an example of a computer simulation of a flock. In a flock each individual has certain rules of behaviour and the combination of these individual behaviours determines the overall flock behaviour.

The properties of the rules control different aspects of the flock behaviour, such a how closely the individuals crowd together.

Getting Started

Complex City Apps is starting up as part of YCCSA at the University of York. Our aim is to produce applications based on research.

We are currently writing the specification for our first application. We are looking forward to two summer students joining us in July to produce the app.

We'll all post our progress as we go along, so watch this space.