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;
    }

mandag den 31. oktober 2016

Camera Control


Hello i'm Lars from the HiddenGames Programmer Team.

Recently i've been working on a Camera Control Script for the video game Corporate Quest with Thorulf,  it turned out well and is now in full use in the demo we are making. 

What is it and why did you make it?
The reason why we made this was for the feeling of dragging around the map like it was a paper. We also wanted to limit the players view, to ensure they focus on Seattle first before the other parts of the map. The camera movement was decided to be free map movement around a dedicated part of the game, where you can zoom in and out on cities.


How do you use it?
It works like this:
  • Hit the right mousebutton while moving the mouse in the opposite direction of where you want to go
  • Zoom in and out with the mouse scroller to show more or less of the map 
How does the script looks like?
The script would be too long to describe completely as it fills 100 lines, but i'll highlight the most interesting parts

Rightclick mouse and drag
The script checks for input from the right mouse button, if there's input it takes the input and inverts it. The script then checks the limit that was set in the editor to see if it can move and if it can, then the code will move the camera.

// Camera dragging movement
if (Input.GetKey(KeyCode.Mouse1)) { 

// Gets the movement in unity units and inverts it for correct controls
Vector3 input = (Camera.main.ScreenToWorldPoint(Input.mousePosition) - Camera.main.ScreenToWorldPoint(lastMousePos)) * -1;

//Gets the screen size for limiting of movement
Vector2 camPosTopRight = Camera.main.ScreenToWorldPoint(new Vector3(Screen.width, Screen.height, 0));
Vector2 camPosBottomLeft = Camera.main.ScreenToWorldPoint(new Vector3(0, 0, 0));

//moves the camera if movement doesnt cross the limit
if (camPosBottomLeft.x + input.x > camLimitBottomLeft.x && camPosTopRight.x + input.x < camLimitTopRight.x) transform.Translate(new Vector3(input.x, 0));

if(camPosBottomLeft.y + input.y > camLimitBottomLeft.y && camPosTopRight.y + input.y < camLimitTopRight.y)
transform.Translate(new Vector3(0, input.y));

lastMousePos = Input.mousePosition;
}

Figure 1 - Code behind the mouse drag movement script


Camera Limit
To prevent the player from scrolling out of the map, we wanted to make limits in the editor to fit the map as it develops, you can drag two vectors in the editor to determine the camera limits.


Figure 2 - Camera Limits in the scene editor


Get ready to rumble!

Seriously, get ready because these bad boys are gonna rock your world. Here is the last three Exstractor sprites that were made for Corporate Quest. They were of course made using the same vector style graphics that were mentioned in previous posts. There is an extractor for harvesting wood which is the Sawmill, there is an extractor for mining which is the Mining Bagger, and then there is the black sheep of the trio, the Multi-Purpose Extractor. The colors were chosen based on our moodboards, to make the extractors look human-made compared to the environment. Shadows were also used, to create a 3D-like effect.