Gamasutra is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
July 21, 2019
arrowPress Releases







If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 

Applying the Elements of Design and Principles of Design in Level Art

by jeremy price on 03/18/11 07:40:00 pm   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

Great looking models, textures, and ambiences and lighting are very important to making our games look as good as they can.  Yet without a solid composition to build upon, the visual structure of our environments will be never as compelling or attractive as they can be.

The Challenge: Creating compositions in a real time game environment is different from static images such as a photograph or painting in the sense that the camera or the player’s frame of reference is always moving. The player moves through a 3 dimensional space, which effectively creates a brand new composition with every frame.

This is similar to film, but can differ if there is a ‘free camera’, where the player has physical control over what the camera is looking at.  If this is the case there are no guarantees that the player will be looking where you want them to, when you want them to. With a free camera the artist needs to persuade the player’s eye (and camera) to the places they want them to look, or go.

Due to the complications created by an ever-changing frame of reference and an unpredictable camera, level composition should be looked at as the sum of many smaller compositions instead of one large one. All possible viewing angles and player/camera positions should be considered and then the appropriate compositions built from these starting points.

Creating compositions: elements and principles:

  The “elements of design” and the “principles of design” have been called the language of art, or the building blocks used to create art. For the environment artist, they are the modular pieces, tile sets, prop objects, and lights we have to build our levels.

1. The Elements of Design:

The elements of design provide a tool set to the artist similar to visual Lego pieces with which images can be constructed. There are 7 types of elements...

Line

shape

size

space

colour

texture

value

Line: Line is anything that is used to define a shape, contour or outline.  It communicates length and direction, and can have an emotional impact on the viewer depending on its angle. The 4 different types of lines are horizontal, vertical, oblique, and curved.

Here are some examples…

Horizontal lines: These imply calm and rest.

vertical lines: communicate power and strength.

Oblique lines: suggest movement, action, or change

Curved lines (S lines): portray quiet and calm

Lines are a very useful for leading the eye of the player to a desired location, or in the direction you want them to travel.

 

Shape: shapes are created through combinations of lines, but can also be made by a change in colour or tone. The following are the different categories of shapes...

Geometric – architectural shapes, manufactured or ‘inorganic’

Organic – natural shapes, or those created by curved irregular lines

Positive/Negative – the shapes created by the physical objects that occupy space, or lack thereof.

static – stable and immobile shapes

dynamic – shapes that imply movement or activity

 

Size (scale): Size is the relationship between the proportions of shapes, since you don’t know how big anything is until it’s placed in reference of something else. Differences in size will place a visual emphasis or lack of emphasis on a shape

Space: This is the negative space (or negative shape) created through the arrangement of negative shapes.

Colour: The subject of colour would be a whole separate paper, or book even, so I’ll define it very briefly. Simply put, every colour is the result of mixing a Hue, a Value, and an Intensity. Colours can be warm or cool. A wide range of contrasts can be created using colour. For a more thorough explanation, refer to Johannes Itten’s “Art of Colour”

Texture: Environment artists are well acquainted with textures. As an element of design,' texture' refers to the way a surface looks.  Matte, shiny, bumpy, etc. are all textures.

Value: The final element is value. This is also sometimes called ‘Form’. Value refers to the lightness or darkness of an object, a shadow, or a colour. Value can be increased or decreased by adding white or black, or increasing/decreasing the intensity of its lighting.  The location of light sources and their intensity has a huge influence on a appearance of the scene and on the emotional response of the player.

 

 

2. The Principles of Design:

The “Principles of design”  are the techniques used for the effective arrangement and distribution of elements into a composition.  The principles are...

Balance

direction

emphasis

proportion

rhythm

economy

unity

Just as multiple elements can be combined together, so can multiple principles.  Artists are definitely not limited to one principle per image. By understanding and applying these principles to our levels we can be more effective in achieving our visual goals, and communicating our ideas to our audience.

Balance: Balance is a result of the fact that the player’s eye will unconsciously use the middle of the screen as a fulcrum, a center point of the left and right side. Balance is achieved by arranging elements so that neither side is visually overpowering or heavier than another.

All the elements an artist has to work with have a visual weight associated with them, depending on their colour, value, and size. Dark elements weigh more than light elements, large elements weigh more than small elements, etc. Maintaining visual balance requires consciously distributing an appropriate number of ‘heavy’ and ‘light’ elements on either side of this fulcrum, at appropriate distances. There are 2 ways to balance elements on the screen, symmetrically, and asymmetrically.

Symmetrical Balancee is pleasing to the eye and has an emotional effect of peace, calm, and tranquility. There are 3 different types of symmetrical balance… Translatory, Rotational, and Axial.

Translatory Symmetry is where elements at the same height in the Y axis are copied from right to left.

Rotational (Radial) Symmetry is the rotation of elements from a common pivot

Axial (Mirror) Symmetry is where elements are balanced equally on both sides of the fulcrum

Asymmetrical Balance: Asymmetrical balance is achieved by arranging elements of differing size and weight unevenly around the fulcrum so that they balance each other respectively.

Another asymmetrical balance is one large dominant element offset by many smaller/lighter elements.

Asymmetrical compositions generally have a greater sense of visual tension and have an opposite emotional effect on the player than symmetrical balance. They instil a feeling of excitement, curiosity, or anxiety.

Direction: Direction is given by the arrangement, angle, and distribution of elements. The visual flow created by direction is used to lead the player’s eye through a composition, or even more literally, used to physically lead the player where the designer wants them to go.

Direction can be used to emphasize depth and the scale of a location or area. the placement of dark and light values are very powerful tools for creating direction.

Emphasis: The emphasis in a level is the environmental focal point of a location.  This is also known as a ‘center piece’ or a ‘hero object’. 

Direction can be used to lead a player through an area, but you don’t stop them with emphasis points of interest, the area will not be interesting and they’ll run past all your hard work.

Proportion: Proportion in composition refers to the size relationship of elements versus each other, and vs. the world as a whole. Structural proportions (like the distance between a ceiling and floor) are used for a number of things. They can create visual emphasis and importance, and can have an emotional effect on player such as power, intimidation. Proportion also refers to the Golden Mean and the Rule of Thirds.

In videogames our dynamic and player-controlled camera’s make it difficult to implement these aspects of proportion into our compositions, but in certain circumstances they can be a used. These proportional ‘rules’ have been studied for hundreds of years, and are very important in composition due to the emotional response it brings from the viewer. The golden mean is 1 : 1.618, or this…

The rule of thirds is the division of screen into 3 equal sections vertically and horizontally. When elements are placed at these intersections the composition will be more pleasing to the viewer.

Rhythm Rhythm is the repeating occurrence of visual elements.  Rhythm is visually soothing to our eyes and people instinctively will follow a rhythmic pattern. In a composition, Rhythm can be used to create depth in a scene. It can create a sense of movement, or place emphasis on an object.

Economy A level in a videogame is typically filled with movement, VFX, sounds, and maybe a little too frequently someone trying to shoot you.  With all of this action (and distraction) a composition needs to read very quickly and clearly. If it is too complex, cluttered, or subtle, it will be missed and lost.  This is where ‘economy’ comes in.

If you can remove an element within a design and the design still works then you can communicate your composition more efficiently. When creating a composition there is no need to offer more than what is required. Use what you need, optimize where you can.  (Just like polygon modeling:)

The following are different examples of economy, using symmetry, direction, rhythm, and size, and emphasis.

Unity: The last of the principles of design is Unity, also called ‘unity within variety’. Unity is the relationship between all the separate elements of a scene or level.  It creates a feeling of ‘wholeness’ to a scene, the sense that everything is tied together visually.

One method of achieving unity is through proximity.  When placing props for example, small clusters or groups is more aesthetically pleasing to a composition than randomly scattering them about.

Repetition also results in unity.  This can be the repetition of colour, shape, texture, or other elements.

Continuation is a more subtle technique involving controlling the eye movement and intentionally leading it back into a composition.

 

-jeremy price


Related Jobs

DMG Entertainment
DMG Entertainment — Beverly Hills, California, United States
[07.19.19]

Technical Artist
FoxNext Games
FoxNext Games — Los Angeles, California, United States
[07.18.19]

Graphic Designer/2D Production Artist
Hi-Rez Studios
Hi-Rez Studios — Alpharetta, Georgia, United States
[07.18.19]

Senior Technical Artist
Build A Rocket Boy Games
Build A Rocket Boy Games — Edinburgh, Scotland, United Kingdom
[07.18.19]

Senior Animation Programmer





Loading Comments

loader image