tirsdag den 1. november 2016

Icons for building

Keeping it simple...

As a way for the player to navigate the UI of Corporate Quest, the newest addition to the game is a small one, yet still terribly needed for a better user experience. Enter, the build menu icons...

The three icons designed as the visual representation of buttons on the build menu.

These icons were made as a very clear and very simple way to guide the player's mind without the use of text. Since we are working with limited space at the bottom of the screen, where the build menu is located, we purposefully wanted to avoid using text as a means of description. Therefore, a series of build menu icons were made with the sole goal of visually implicating that this button is the way to build this specific element in the game.

Their design style is based on the simple fact that every icon uses as little detail as possible to depict the essence of the structure, or concept, that you want to convey. With this in mind, every icon is made as bare-boned as possible - visualizing only the most important parts of the structure to let the brain do the rest.

Update on the factory look

Breaking news...

The way factories look on the playing field have been updated in the latest version of the game. Here's a quick look at the new factory assets that have made it into the game.

A look at the 5 different factories as they will appear in the game.

Whenever the player specializes a factory to produce a special kind of product, the specific product will be shown above the factory to indicate that it's currently working on making that resource.

This design choice was implemented for the player to easily locate and know which resource is currently being produced by the different factories.

Icons are placed above each factory to indicate the specific resource as a direct indicator. Furthermore, a change to the factories as a whole has been made due to time pressure and the way factories are organized. The change comes down to the choice between factory sprites. Instead of choosing only one factory design and further designing this factory, we chose to use all factory designs and appoint different jobs to these factories - as can be seen on the picture above.

Furthermore, this update included small tweaks to the factories. The color schemes were changed a bit as some colors were merely experimental (this change is mostly visible on the grey factories - the ones producing the metal bars on the picture). At the same time a tiny change was made to the look of the base colors of the factories - light walls and darker walls. Throughout the game's development the art style has been refined as the artists figured out the best ways of drawing each sprite. Now, as the factories were reworked, these improvements have been added to these first-generation sprites as well.

Get on the resource hype train!

Here comes the long awaited sprites for some of the resources that you have available to you in Corporate Quest.

First, we have the wood sprites. The raw wood log, and the wood plank.






Next up, we have the iron sprites. The iron ore sprite, and the iron bar sprite.






And last, but certainly not least, we have the coal sprite and steel bar sprite.




All these sprites were, again of course, made using the previously mentioned vector graphic style. The most basic of the resources, like raw wood, iron ore, coal etc. are essential to making the products you want to sell to earn all the big money.

The first 4 resources

You get a resource, and you get a resource, everyone gets a resource...

The first batch of resources have been made and are ready for use inside the game.

The four different resources: Wheat, Bagels, Oil, and Plastic.

The resources are a key part of the game play. Resources are the products which you harvest and sell for money, they are the reason for constructing buildings and shipping with trucks.

Every resource is divided into two groups: basic resources and refined resources. Basic resources are harvested via extractors and sent to either a city to then be sold or is sent to a factory for refinement. Refining these resources grants the factory a deposit of refined resources which can be sold at a higher price.

The style used for these resources once again follows the original vector graphic basis with a very simplistic approach to the visual imagery. Each resource image was designed for the player to be able to easily identify the specific resource off of a common object. This was important since such materials as plastics don't have a specific form - so the form we chose had to mimic something that everyone knows is made of plastic. (Also, the choice of bagels as a resource instead of common bread was made to Americanize this aspect of the game).

This time the colors for the props weren't pre-picked off of the available mood boards, but rather by looking at each resource's generic colors and ensuring that they are vibrant enough to compliment the other props made for the game.

Heatmap


To give the player a visualisation of where the largest amount of resources are located, we've created a heatmap. This will help the player choose the optimal location for the extractor building. 

The heatmap script uses an array of vectors together with an intensity and radius variable for each point to calculate each point's contribution to the heat map.
Using a gradient texture the script will select a level of gradient depending on the variables for that point
In the code snippet below the arrays are created with the length of count, which is the amount of points. Then the script cycles through the points using a for loop. Each point is assigned a random position, radius and intensity.

        positions = new Vector2[count];
        radiuses = new float[count];
        intensities= new float[count];

        for (int i = 0; i < positions.Length; i++)
        {
            positions[i] = new Vector2(Random.Range(-scaleX, scaleX), Random.Range(-scaleY, scaleY));
            radiuses[i] = Random.Range(radiusRangeMin, radiusRangeMax);
            intensities[i] = Random.Range(intensityMin, intensityMax);
        }

After the points have been calculated they're sent to the shader using SetVectorArray and SetFloatArray.

material.SetInt("_Points_Length", positions.Length);
        material.SetVectorArray("_Points", positions.Select(v => (Vector4)v).ToArray());
        material.SetFloatArray("_Radius", radiuses);
        material.SetFloatArray("_intensity", intensities);

The GetIntensity method takes a vector2 position and returns the intensity of resources in that loaction by taking the intensity of all the points near the vector2 position.
This is the intensity that will decide the amount of resources that can be harvested from an extractor placed in that position.

    public float GetIntensity(Vector2 pos)
    {
        float intensity = 0;
        for (int i = 0; i < positions.Length; i++)
        {
            if (Vector2.Distance(pos, positions[i]) < radiuses[i])
                intensity += intensities[i];
        }
        return intensity;
    }