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.


søndag den 30. oktober 2016

Work on the extractors has finished

Finally finished the last few buildings for resource harvesting, here they are!



Each building represents the harvesting method of a basic resource, like crops, ores and oil. Currently the only building for resource gathering that's missing is the sawmill, which will be put up shortly in the coming week as it's been made by another section of the art department.

Staying in the same style as the factories, the design of each building is based off of a simple cartoon-like style made with vector graphics. Although this time around each building has been made to look slightly more 3D-like by adding a darker or brighter segment where one wall breaks off to another. This in turn makes the buildings look more interesting and, depending on the time remaining, would be something that could be added to the factories as well.

The colors reflect the very human-made colors that we are going for for the art style of this game. The contrast between nature and brick/red colored wood, for the farm. The very blue-gray colors for the mine and the industrial steel look for the pump jack. These colors are all picked off of the original mood boards to focus the color palette.

With these buildings done it is now easily visually represented which resource you will be gathering from the chosen location.

onsdag den 26. oktober 2016

Prototype for Student-E3

Wednesday, 26. oktober the HiddenGames team showed off the game in a small convention of upcoming games. We brought a working demo, which we were proud to present. The demo it self only showed the most basic features of our complete game. However, putting together the hard work of the past weeks was a fulfilling experience. 
A screenshot of a simple production line
The demo we showed off had only had two resources a raw and a refined type, which left the demo only needing 2 buildings a lumber yard and a factory producing refined goods. The player can also build roads to link up different structures and letting the player sell resources to the city. Cities serve as markets where the player can sell resources to make money, in the demo we have implemented two cities to show off the size of the possible game world. 
A screenshot of alot of production lines between two cities
The demo build also came with a few features like money and camera movement. The money in the demo was quickly implemented with unblanced payments for buildings initial and maintenance costs. The camera movement of the demo is the same the full game is most likely going to ues. Camera features will be further explained in full detail later.

Work in progress...

The newest addition to Corporate Quest's list of buildings, the Building Site.


The building site is used in-game as a visual representation of a non specialized building, whether it be a resource extractor or a factory. Before, for example, a Farm is built the player will put down a non specialized extractor which can be set to harvest the resource of choice.

The design for this prop follows the simple vector based graphics as the factories, and to add a bit of dimension to the building site the objects were drawn in a different 3D imitating style. Highlights and shadows work on simple structures, where as this prop incorporates several art pieces in one asset, which meant that the image contained high amounts of detail - which would be difficult to make good looking by sheer highlights and shadows.

Furthermore, the color scheme for the building site is based off of our man-made mood board look, with added colors from typical building site (orange, dirt brown and concrete).

San Francisco Sprite

Finished another city sprite, this time it is San Francisco. The sprite shows various iconic structures from the city; The Golden Gate Bridge, The Transarmerican Pyramid, The second tallest boulding in the city and a sign from Fishaerman's Wharp.

Our very own truck

Hours of work later and we've finally got a truck to transport supplies from A to B.


Based off of the american truck design, this truck is one of the key art assets for the visual presentation of our game's system. Therefore, the first thing that might strike the players eyes is the vibrant use of red as the trucks base color. This color was used as an extreme variant of the "brick wall" red/orange presented on our original man-made mood board, since these trucks need to be clearly visible to the player.

The style comprises of a minimal vector design approach with a few highlights and shadows to add a 3D-like effect to the truck. Furthermore, the highlights presented on the truck differ between matte and metallic surfaces: by lifting the highlight area from the edge for a metallic look.

tirsdag den 25. oktober 2016

Factory choices

They're finally here!



3 factories, 3 designs, 3 color schemes - all designed to close in on a look for the final version of the factory used in-game.

As per the art style defined at our announcement on the 17th of October, the in-game factories are designed in a vector based style. This style allows for players to easily distinguish buildings from the environment, and even makes distinguishing between separate buildings simple.

The color scheme has been picked off of the colors set by the mood board for the man made color palette. To make the factories a little more interesting than a classic factory, the choice of color is set to a very bright tone. This should make up for the dull vibes that viewers usually experience when looking at an old factory in shades of grey.

Each factory has drawn-on shading to spice up the structures and adding that cartoon look to create a 3D-feeling whilst staying in the 2nd dimension.

These factories are all designed by taking a mixture of old and modern factories and drawing up key parts of these looks.

Seattle Sprite

The first city sprite of Seattle is ready. It shows various iconic structures from the city like; The Space Needle, Columbia Tower, Pike Market and the University of Washington. There might be added some more iconic things the city is known for if there is enough time.

Seattle City

Moodboards/ Artstyle

Let's set the mood

To set up the style for the game we chose to research and develop a color style to capture the player's attention, and an art style for the in-game assets to specify the look of the game.

Choosing a color style

The goal of the color style was primarily to kind of distract the player from the game's systems and repetitive button-clicking by adding pleasing colors to define sprites and terrain. Therefore, the color selection process was broken up into two separate pieces: the man-made look of industrial buildings and general colors of structures, and the natural look of the terrain like the Seattle wilderness. This process would stand as a baseline which takes inspiration from the colors of real life surroundings.

These colors have been researched and gathered in the form of pictures. From these pictures we decided on colors that stand out in their environments and that give off the "essence" of the photo. The most important part of this analysis is that each color has to be vibrant in some form. To peak the interest of the player, the color scheme is set to be bright to really pop out as the player looks around the world.

Here you can see the pictures and the respective color palette chosen for each environment. A man-made color scheme for buildings, and a natural color scheme for the terrain.

Man-Made


The man-made color palette, set to be imitating real building colors whilst still being color full.

Nature


The natural color palette, each color is picked as a natural part of the Seattle surroundings.

The art style

The graphical art style for Corporate Quest is set for every sprite to be quickly and easily recognizable. As a basis each prop will be made using vector graphics to ensure that every artist is able to create sprites of equal quality. With the vector style we will incorporate 3D-looking parts to each prop to keep each asset interesting.

An example of the vector style which will be used as a reference for development.

Please note that the graphics style shown above is comprised exclusively of jagged edges, which will be a big part of making each asset to preserve time whilst still looking equal to each separate prop.

This, combined with the vibrant color palette should make it easy for the player to distinguish between different structures, and it contrasts the terrain with said structures. As we mentioned previously this style is used to keep the production time per asset short, while still providing a good looking experience.

mandag den 24. oktober 2016

Hidden Games

Hello, we are Hidden Games and we are a small company whose main focus is creating games.
Our team consists of seven people, three artists and four programmers.

Our newest work in progress game is called Corporate Quest. The game is about you being the CEO of a small production company, which has to fight its way to domination of the American industry by building up factories and resource extractors, as well as managing and selling your merchandise.

In the following weeks we will be posting updates about the games development and various decisions that we will be making throughout the process.

Spilprojekt 3 logo improved.png