CHAPTER 1

The Art of Programming Mechanics

Everyone can be taught to sculpt: Michelangelo would have had to be taught how not to. So it is with the great programmers.

Alan Perlis

1.1    Introduction

In 1979, art teacher Betty Edwards published the acclaimed Drawing on the Right Side of the Brain. The essence of the text taught readers to draw what they saw, rather than what they thought they saw. The human brain is so adept at tasks such as pattern recognition that we internally symbolize practically everything we see and regurgitate these patterns when asked to draw them on paper. Children do this very well. The simplicity in children’s drawing stems from their internal representation for an object. Ask them to draw a house and a dog and you will get something you and they can recognize as a house and dog (or, more accurately, the icon for a house and dog), but something that is far from what an actual house and dog look like. This is evident in the child’s drawing in Figure 1.1. The title of the book, Drawing on the Right Side of the Brain, also suggests that the ability to draw should be summoned from the side of the brain traditionally associated with creativity and that most bad drawings could be blamed on the left.

FIG 1.1 Dogs in the yard of a castle, by Tabytha de Byl, age 4.

Different intellectual capability is commonly attributed to either the left or the right hemispheres, with the left side being responsible for the processing of language, mathematics, numbers, logic, and other such computational activities, whereas the right side deals with shapes, patterns, spatial acuity, images, dreaming, and creative pursuits. From these beliefs, those who are adept at computer programming are classified as left brained and artists as right brained. The segregation of these abilities to either side of the brain is called lateralization. While lateralization has been generally accepted and even used to classify and separate students into learning style groups, it is a common misconception that intellectual functioning can be separated so clearly.

In fact, the clearly defined left and right brain functions are a neuromyth stemming from the overgeneralization and literal isolation of the brain hemispheres. While some functions tend to reside more in one side of the brain than the other, many tasks, to some degree, require both sides. For example, many numerical computation and language activities require both hemispheres. Furthermore, the side of the brain being utilized for specific tasks can vary among people. Studies have revealed that 97% of right-handed people use their left hemisphere for language and speech processing and 70% of left-handed people use their right hemisphere.

In short, simply classifying programmers as left brainers and artists as right brainers is a misnomer. This also leads to the disturbing misconception that programmers are poor at art skills and that artists would have difficulty in understanding programming. Programming is so often generalized as a logical process and art as a creative process that some find it inconceivable that programmers could be effective as artists and vice versa.

When Betty Edwards suggests that people should use their right brain for drawing, it is in concept, not physiology. The location of the neurons the reader is being asked to use to find their creative self is not relevant. What is important is that Dr. Edwards is asking us to see drawing in a different light—in a way we may not have considered before. Instead of drawing our internalized symbol of an object that has been stored away in the brain, she asks us to draw what we see—to forget what we think it looks like. In the end, this symbolizes a switch in thinking away from logic and patterns to images and visual processing.

There is no doubt that some people are naturally better at programming and others at art. However, by taking Edwards’ anyone can draw attitude, we can also say anyone can program. It just requires a little practice and a change of attitude.

1.2    Programming on the Right Side of the Brain

While it is true that pure logic is at the very heart of all computer programs, it still requires an enormous amount of creativity to order the logic into a program. The process is improved greatly when programmers can visualize the results of their code before it even runs. You may liken this to a scene from The Matrix where the characters look at screens of vertically flowing green numbers and text, but can visualize the structure and goings on in a photorealistic, three-dimensional virtual reality. To become a good computer programmer, you need to know the language of the code and be able to visualize how it is affecting the computer’s memory and the results of running the program.

Learning a computer language is one key to being able to program. However, understanding how the language interacts with the computer to produce its output is even more important. Good programmers will agree that it is easy to switch between programming languages once you have mastered one. The fundamental concepts in each language are the same. In some languages, such as C, C++, C#, JavaScript, Java, and PHP, even the text and layout look the same. The basic code from each aforementioned language to print Hello World on the computer screen is shown in Listings 1.1, 1.2, 1.3, 1.4, 1.5, 1.6.

FIG 1.2 The Mandelbrot set and periodicities of orbits.

Umberto Eco, the creator of Opera Aperta, described the concept of art as mechanical relationships between features that can be reorganized to make a series of distinct works. This is true of programming, too. The same lines of programming code can be reorganized to create many different programs. Nowhere is this shared art/programming characteristic more obvious than in fractals.

Fractals are shapes made up of smaller self-similar copies of themselves. The famous Mandelbrot set or Snowman is shown in Figure 1.2. The whole shape is made up of smaller versions of itself. As you look closer, you will be able to spot tens or even hundreds of smaller snowman shapes within the larger image.

A fractal is constructed from a mathematical algorithm repeated over and over where the output is interpreted as a point and color on the computer screen. The Mandelbrot set comes from complex equations, but not all fractal algorithms require high-level mathematical knowledge to understand.

The Barnsley fern leaf is the epitome of both the creative side of programming and the algorithmic nature of art. Put simply, the algorithm takes a shape, any shape, and transforms it four times, as shown in Figure 1.3. It then takes the resulting shape and puts it through the same set of transformations. This can be repeated ad infinitum; however, around 10 iterations of this process give a good impression of the resulting image (see Figure 1.4).

Creating images with these types of algorithmic approaches is called procedural or dynamic generation. It is a common method for creating assets such as terrain, trees, and special effects in games. Although procedural generation can create game landscapes and other assets before a player starts playing, procedural generation comes into its own while the game is being played. Programming code can access the assets in a game during run time. It can manipulate an asset based on player input. For example, placing a large hole in a wall after the player has blown it up is achieved with programming code. This can only be calculated at the time the player interacts with the game, as beforehand a programmer would have no idea where the player would be standing or in what direction he would shoot. The game Fracture by Day 1 Studios features dynamic ground terrains that lift up beneath objects when shot with a special weapon.

FIG 1.3 Transformations of Barnsley’s fern leaf.

FIG 1.4 Three iterations of Barnsley’s fern leaf transformations after (a) 2 iterations, (b) 5 iterations, and (c) 10 iterations.

FIG 1.5 An image created with Processing.

FIG 1.6 Artwork created by Casey Reas using Processing, as exhibited at DAM Gallery, Berlin.

1.3    Creating Art from the Left Side of the Brain

Most people know what they like and do not like when they see art. However, if you ask them why they like it, they may not be able to put their thoughts into words. No doubt there are some people who are naturally gifted with the ability to draw and sculpt and some who are not. For the artistically challenged, however, hope is not lost. This is certainly Betty Edwards’ stance.

A logical approach to the elements and principles of design reveals rules one can apply to create more appealing artwork. They are the mechanical relationships, alluded to by Umberto Eco, that can be used as building blocks to create works of art. These fundamentals are common threads found to run through all good artwork. They will not assist you in being creative and coming up with original art, but they will help in presentation and visual attractiveness.

The elements of design are the primary items that make up drawings, models, paintings, and design. They are point, line, shape, direction, size, texture, color, and hue. All visual artworks include one or more of these elements.

In the graphics of computer games, each of these elements is as important to the visual aspect of game assets as they are in drawings, painting, and sculptures. However, as each is being stored in computer memory and processed by mathematical algorithms, their treatment by the game artist differs.

1.3.1    Point

All visual elements begin with a point. In drawing, it is the first mark put on paper. Because of the physical makeup of computer screens, it is also the fundamental building block of all digital images. Each point on an electronic screen is called a pixel. The number of pixels visible on a display is referred to as the resolution. For example, a resolution of 1024 × 768 is 1024 pixels wide and 768 pixels high.

Each pixel is referenced by its x and y Cartesian coordinates. Because pixels are discrete locations on a screen, these coordinates are always in whole numbers. The default coordinate system for a screen has the (0,0) pixel in the upper left-hand corner. A screen with 1024 × 768 resolution would have the (1023,767) pixel in the bottom right-hand corner. The highest value pixel has x and y values that are one minus the width and height, respectively, because the smallest pixel location is referenced as (0,0). It is also possible to change the default layout depending on the application being used such that the y values of the pixels are flipped with (0,0) being in the lower left-hand corner or even moved into the center of the screen.

1.3.2    Line

On paper, a line is created by the stroke of a pen or brush. It can also define the boundary where two shapes meet. A line on a digital display is created by coloring pixels on the screen between two pixel coordinates. Given the points at the ends of a line, an algorithm calculates the pixel values that must be colored in to create a straight line. This is not as straightforward as it sounds, because the pixels can only have whole number coordinate values. The Bresenham line algorithm was developed by Jack E. Bresenham in 1962 to effectively calculate the best pixels to color in to give the appearance of a line. Therefore, the line that appears on a digital display can only ever be an approximation to the real line, as shown in Figure 1.7.

FIG 1.7 A real line and a Bresenham line.

1.3.3    Shape

A shape refers not only to primitive geometrics such as circles, squares, and triangles, but also to freeform and nonstandard formations. In computer graphics, polygons are treated as they are in geometry: a series of points called vertices connected by straight edges. By storing the coordinates of the vertices, the edges can be reconstructed using straight-line algorithms. A circle is often represented as a regular polygon with many edges. As the number of edges increases, a regular polygon approaches the shape of a circle.

Freeform objects involve the use of curves. To be stored and manipulated by the computer efficiently, these need to be stored in a mathematical format. Two common types of curves used include Bezier and non-uniform rational basis spline (NURBS).

A Bezier curve is constructed from a number of control points. The first and last points specify the start and end of the curve and the other points act as attractors, drawing the line toward them and forming a curve, as shown in Figure 1.8. A NURBS curve is similar to a Bezier curve in that it has a number of control points; however, the control points can be weighted such that some may attract more than others.

In computer graphics, a polygon is the basic building block for objects, whether in two dimensions (2D) or three dimensions (3D). A single polygon defines a flat surface onto which texture can be applied. The most efficient way to define a flat surface is through the use of three points; therefore, triangles are the polygon of choice for constructing models, although sometimes you will find square polygons used in some software packages. Fortunately for the artist, modeling software such as Autodesk’s 3DS Studio Max and Blender do not require models to be handcrafted from triangles; instead, they automatically construct any objects using triangles as a base, as shown in Figure 1.9.

FIG 1.8 (a) A Bezier and (b) a NURBS curve.

FIG 1.9 A 3D model constructed from triangles in Blender.

The wireframe model that represents a 3D object is called a mesh. The number of polygons in a mesh is called the polycount. The higher the polycount, the more triangles in the model and the more computer processing power required to render and manipulate the model. For this reason, computer game artists must find a balance between functionality and visual quality, as a high-resolution model is too costly with respect to making the game run slowly. The models must be dynamically processed and rendered in real time. In contrast, animated movie models can be of much higher quality, as they are not rendered in real time. Next time you are playing a game, take a closer look at how the models are constructed.

1.3.4    Direction

Direction is the orientation of a line. Depending on its treatment, it can imply speed and motion. A line can sit horizontal, vertical, or oblique. In computer graphics, physics, engineering, and mathematics, a Euclidean vector is used to specify direction. A vector stores information about how to get from one point in space to another in a straight line. Not only does it represent a direction, but also a distance, otherwise called its magnitude. The magnitude of a vector is taken from its length. Two vectors can point in the same direction but have different magnitudes, as shown in Figure 1.10a. In addition, two vectors can have the same magnitude but different directions, as shown in Figure 1.10b. A vector with a magnitude of 1 is normalized.

FIG 1.10 (a) Vectors with the same direction but different magnitudes and (b) vectors with the same magnitude but different directions.

Vectors are a fundamental element in 3D games as they describe the direction in which objects are orientated, how they are moving, how they are scaled, and even how they are textured and lit. The basics of vectors are explored further in Chapter 2.

1.3.5    Size

Size is the relationship of the amount of space objects take up with respect to each other. In art and design, it can be used to create balance, focal points, or emphasis. In computer graphics, size is referred to as scale. An object can be scaled uniformly in any direction. Figure 1.11 shows a 3D object (a) scaled uniformly by 2 (b), vertically by 3 (c), horizontally by 0.5 (d), and vertically by −1 (e).

FIG 1.11 A 3D object scaled in multiple ways (a) the original object, (b) scaled uniformly by 2, (c) scaled vertically by 3, (d) scaled horizontally by 0.5, and (e) scaled vertically by −1.

FIG 1.12 How can scaling move an object? (a) When vertices of an object around the origin are scaled, negative values become bigger negative values and the same with positive values. But the original center (0, 0) will remain (0, 0) when scaled. (b) If the vertices are all positive, then scaling them up will just make them bigger. And the final object moves location.

Note in Figure 1.11e how scaling by a negative value flips the object vertically. This can also be achieved uniformly or horizontally using negative scaling values.

Depending on the coordinates of an object, scaling will also move it. For example, if an object is centered around (0,0), it can be scaled remaining in the same place. However, if the object is away from (0,0), it will move by an amount proportional to the scale. This occurs as scaling values are multiplied with vertex coordinates to resize objects. A vertex at (0,0) multiplied by 2, for example, will remain at (0,0), whereas a vertex at (3,2) multiplied by 2 will move to (6,4). This is illustrated in Figure 1.12.

1.3.6    Texture

In art and design, texture relates to the surface quality of a shape or object. For example, the surface could be rough, smooth, or highly polished. In computer games, texture refers not only to the quality, but also to any photographs, colors, or patterns on the surface where the surface is defined by a polygon.

In games, textures are created using image files called maps. They are created in Adobe Photoshop or similar software. The image that gives an object its color is called a texture map, color map, or diffuse coloring. All images are mapped onto an object, polygon by polygon, using a technique called UV mapping. This aligns points on an image with the vertices of each polygon. The part of the image between the points is then stretched across the polygon. This process is shown on a square polygon in Figure 1.13.

To add a tactile appearance to the surface of a polygon to enhance the base texture, bump mapping is applied. This gives the object an appearance of having bumps, lumps, and grooves without the actual model itself being changed. Bump mapping is often applied to add more depth to an object with respect to the way light and shadow display on the surface. Figure 1.14 illustrates the application of a color and normal map on a soldier mesh taken from Unity.

FIG 1.13 The UV mapping process. Vertices of a polygon on an object are mapped to locations on a 2D image.

A variety of other effects also add further texture to a surface. For example, specular lighting can make an object look glossy or dull, and shaders, small programs that manipulate the textures on a surface, can add a plethora of special effects from bubbling water to toon shading.

1.3.7    Color

In the theory of visual art involving pigments, color is taught as a set of primary colors (red, yellow, and blue) from which all other colors can be created. The color perceived by the human eye is the result of light being reflected off the surface of the artwork. When all of the light is reflected, we see white. When none of the light is reflected, we see black. The resulting color of a mixture of primaries is caused by some of the light being absorbed by the pigment. This is called a subtractive color model, as the pigments subtract some of the original light source before reflecting the remainder.

The light from a digital display follows an additive color model. The display emits different colors by combining the primary sources of red, green, and blue light. For this reason, color is represented in computer graphics as a three- or four-numbered value in the format (red, green, blue, and alpha). In some formats, the alpha value is not used, making color a three-value representation.

FIG 1.14 A soldier mesh with and without a color map and a normal map.

FIG 1.15 The Adobe Photoshop color picker.

Alpha represents the transparency of a color. When a surface has a color applied with an alpha of 0, it is fully transparent; when it has a value of 1, it is totally opaque. A value of 0.5 makes it partially transparent. Values for red, green, and blue also range between 0 and 1, where 0 indicates none of the color and 1 indicates all of the color. Imagine the values indicate a dial for each colored lamp. When the value is set to 0, the lamp is off and when the value is set to 1, it is at full strength—any values in between give partial brightness. For example, a color value of (1,0,0,1) will give the color red. A color value of (1,1,0,1) will give the color yellow. The easy way to look up values for a color is to use the color picker included with most software, including MS Word and Adobe Photoshop. The color picker from Adobe Photoshop is shown in Figure 1.15.

Also included with most color pickers is the ability to set the color using different color models. The one shown in Figure 1.15 includes a Hue, Saturation, and Brightness model, as well as a CMYK model. For more information on these, check out http://en.wikipedia.org/wiki/Color_model.

1.4    How Game Engines Work

A game engine takes all the hard work out of creating a game. In the not so distant past, game developers had to write each game from scratch or modify older similar ones. Eventually game editor programs started to surface that allowed developers to create games without having to write a lot of the underlying code.

The game engine takes care of things such as physics, sound, graphics processing, and user input, allowing game developers to get on with the creation of high-level game mechanics. For example, in Unity, physical properties can be added to a ball with the click of a button to make it react to gravity and bounce off hard surfaces. Driving these behaviors, embedded in the engine, are millions of lines of complex code containing many mathematical functions related to real-world physics. The game developer can spend more time designing what the ball looks like and even selecting the type of material it is made from without having a background in Newtonian physics.

1.4.1    A Generic Game Engine

To understand how a game engine works, we will first look at a simple illustration of all its components. A conceptualization is shown in Figure 1.16.

The game engine is responsible for the running of a variety of components that manage all the game resources and behaviors. The Physics Manager handles how game objects interact with each other and the environments by simulating real-world physics. The Input Manager looks after interactions between the player and the game. It manages the drawing of graphical user interfaces and the handling of mouse clicks and the like. The Sound Manager is responsible for initializing and controlling how sound is delivered from the game to the player. If 3D sound is called for, it will ensure that the right sound at the right volume is sent to the correct computer speaker.

FIG 1.16 Parts of a generic game engine.

In addition to these managers are game objects. Game objects represent all the assets placed in a game environment. These include the terrain, sky, trees, weapons, rocks, nonplayer characters, rain, explosions, and so on. Because game objects represent a very diverse set of elements, they can also be customized through the addition of components that may include elements of artificial intelligence (AI), sound, graphics, and physics. The AI component determines how a game object will behave. For example, a rock in a scene would not have an AI component, but an enemy computer-controlled character would have AI to control how it attacks and pursues the player. A sound component gives a game object a sound. For example, an explosion would have a sound component whereas a tree may not. The physics component allows a game object to act within the physics system of the game. For example, physics added to a rock would see it roll down a hill or bounce and break apart when it falls. The graphics component dictates how the game object is drawn. This is the way in which it is presented to players on the screen. Some game objects will be visible and some will not. For example, a tree in a scene is a visible game object, whereas an autosave checkpoint, which may be a location in a game level, is not.

1.4.2    The Main Loop

All games run in the same way, as illustrated in Figure 1.17. There is an initialization stage in which computer memory is allocated, saved information is retrieved, and graphics and peripheral devices are checked. This is followed by the main game loop or main loop. The main loop runs continuously over and over again until the player decides to quit the game. While in the main loop, the game executes a cycle of functions that processes user input messages; checks through all game objects and updates their state, including their position; updates the environment with respect to game object positions, user interaction, and the physics system; and finally renders the new scene to the screen.

Essentially each loop renders one frame of graphics on the screen. The faster the loop executes, the smoother the animation of the game appears. The more processing that needs to be performed during the main loop, the slower it will execute. As the number of game objects increases, the amount of work the main loop has to do also increases and therefore slows down the time between frames being rendered on the screen. This time is called frames per second (FPS).

Game developers strive for very high FPS, and for today’s computers and consoles, FPS can extend beyond 600. In some circumstances, however, such as on mobile devices with less processing power, FPS can become very low with only several game objects, and the animation will flicker, and user controls will be nonresponsive. Having said this, beginner game developers need to be aware of this issue, as even on a very powerful computer, adding a lot of highly detailed game objects can soon bring the FPS to a grinding halt. Anything below 25 FPS is considered unacceptable, and as it approaches 15 FPS the animation starts to flicker.

FIG 1.17 How a game runs.

1.5    A Scripting Primer

Hard-core programmers do not strictly consider scripting as programming, as it is a much simpler way of writing a program. Scripting languages have all the properties of programming languages; however, they tend to be less verbose and require less code to get the job done. For example, the JavaScript and Java shown in Listings 1.4 and 1.5, respectively, demonstrate how the scripting language JavaScript requires much less code to achieve the same outcome as Java. The major difference between programming and scripting is that programming languages are compiled (built into a program by the computer) and then run afterward, and a scripting language is interpreted by another program as it runs.

When a program is compiled, it is turned into machine code the computer can understand. Compilation checks through the code for errors and then builds it into a program. Do not worry if you get lots of errors when you start programming. It is a normal part of the learning process. Some of the error messages will also seem quite vague and ambiguous for what they are trying to tell you. However, a quick search on Google will often reveal their true meaning.

C# is used in this book as the primary means of programming. Its syntax and constructs are closely related to C++, C, and Java; therefore, it is ideal to learn as a beginning language. It also provides a very powerful and yet simple way to develop game mechanics in Unity and many other game-editing environments.

Several fundamental constructs in programming are required to fully understand a programming language. These are variables, operations, arrays, conditions, loops, functions, and objects. However, the most fundamental and important concept that underlies everything is logic.

1.5.1    Logic

At the heart of all computers are the electronic switches on the circuit boards that cause them to operate. The fact that electricity has two states, on or off, is the underlying foundation on which programs are built. In simplistic terms, switches (otherwise known as relays) are openings that can either be opened or be closed, representing on and off, respectively. Imagine a basic circuit illustrated as a battery, electric cable, light switch, and light bulb, as shown in Figure 1.23.

When the switch is open, the circuit is broken, and the electricity is off. When the switch is closed, the circuit is complete, and the electricity is on. This is exactly how computer circuitry works. Slightly more complex switches called logic gates allow for the circuit to be opened or closed, depending on two incoming electrical currents instead of the one from the previous example.

FIG 1.23 A very basic electric circuit.

FIG 1.24 A conceptualization of an AND logic gate.

In all, there are seven logic gate configurations that take two currents as input and a single current as output. These gates are called AND, OR, NOT, NAND, NOR, XOR, and XNOR. The AND gate takes two input currents; if both currents are on, the output current is on. If only one or none of the input currents is on, the output is off. This is illustrated in Figure 1.24.

In computer science, mathematics, physics, and many more disciplines the operation of combining two currents or signals into one is called Boolean algebra (named after nineteenth-century mathematician George Boole) and logic gate names (i.e., AND, OR) are called Boolean functions, although the on signal in computer science is referred to as TRUE, or the value 1, and off is FALSE, or 0. Using this terminology, all possible functions of the AND gate can be represented in truth tables, as shown in Table 1.1. It should be noted from Table 1.1 that truth tables can be written in a number of formats using 1s and 0s or TRUEs and FALSEs.

Each Boolean function has its own unique truth table. They work in the same way as the AND function does. They have two input values of TRUE and/or FALSE and one output value of TRUE or FALSE.

TABLE 1.1 Truth Table for the Boolean Function AND

If you are just learning about programming for the first time right now, these concepts may seem a bit abstract and disconnected from real programming. However, as you learn more about programming, you will realize how fundamental knowing these truth tables is to a holistic understanding. It will become much clearer as you begin to write your own programs.

Quick Reference

Boolean Algebra

1.5.2    Comments

Comments are not actually programming code. They are, however, inserted lines of freeform text totally ignored by the compiler. They allow you to insert explanations about your code or little reminders of what your code does. They are very useful when you write some groundbreaking code, leave it for six months, and then come back to it, having forgotten what it does. The author’s advice is to use comments as frequently as possible. It is common practice to place comments at the top of each program file to give an overview of the entire code, as well as above each function. Another programmer may also insert comments if he makes a change. Some examples are shown in Listing 1.7.

There are two types of comments. The first is a way to block out an entire paragraph. It begins with a /* and ends with */. You can write anything you want between these characters and it will be totally ignored by the compiler. The second type is a one liner. A line starting with // will also be ignored by the compiler but only until the end of the line. Therefore, you could write this:

or this:

Use comments wisely and as you see fit. It is quite legitimate to write an entire program without comments; however, be warned, when you come back to code several months later you will be glad if you did leave them.

1.5.3    Functions

A function is a block that bundles a number of lines of code together to form a specific operation. It contains prewritten code that can be reused over and over again, saving programmers the stress of reinventing the wheel each time they write a program. Programmers can also write their own functions.

Whenever the author thinks of functions, she visualizes them as food processing machines. You put vegetables in, they get processed, and you get chopped, mashed, or minced vegetables out.

The most common newbie function taught is print() or a derivative thereof. This function takes input and prints it to the screen. For example,

will print

on the screen or console.

The functions available to you as a programmer will depend on the programming language. JavaScript has numerous standard functions, but also takes on added ones depending on the context. For example, when JavaScript is embedded into the HTML of a web page,

will display the text on the web page when viewed inside a browser.

1.5.4    Variables

A variable is the name of a piece of computer memory allocated for your program. Think of it as a storage box that you can put things into, take things out of, add to, and change. A variable in programming is similar to a variable in algebra that holds a numerical value. However, in programming, pretty much anything can be placed into a variable. In the line of code,

x is the name of the variable and it has a value of 50. If you continued with

another variable called y is being given the value of x (50) plus 30. The value of y in this case would be 80.

The differing types of information that can be stored in variables are called data types. These include integers (whole numbers, e.g., 5), floating-point numbers (numbers with decimal values, e.g., 3.14), characters (a single alphanumeric value), strings (words and texts, e.g., “hello”), Boolean values (e.g., true and false), and other data types made from mixtures of the aforementioned.

Variables do not just exist automatically in computer memory. They must be declared. The process of declaring a variable gives it a name, initial value, and a size. Some examples are shown in Listing 1.8.

If you do not know what value should be placed into a variable, you do not need to assign one. For example,

will create an integer variable called x and the value will be set to 0 automatically.

Variables in computer memory can be conceptualized as boxes in a large storage space. The different types of variables have different sized boxes. The smallest box is a Boolean, as you only need to store a value of 1 or 0 inside it. A character is the next size up. It would hold all the alphanumeric characters such as those appearing on the keys of your keyboard and a couple of miscellaneous others. The integer size box is even bigger, holding numbers between −32,768 and 32,767 and a float box bigger again holding numbers with seven decimal digits of significance between 0.000000 × 10⁻⁹⁵ and 9.999999 × 10⁹⁶. The exact size of the boxes will change depending on the operating system and computer processor, but the relative sizes remain the same. A conceptualization of memory allocation from variable declarations is shown in Figure 1.25.

FIG 1.25 A conceptualization of the memory allocation that occurs from Listing 1.9.

One thing to note from Listing 1.8 is the way characters and strings are given values. A single character is enclosed in single quotes and a string is enclosed in double quotes. The reason being that if they were not, the compiler would consider them to be other variable names.

This brings us to another matter about naming variables. Variables can be named anything you like, keeping in mind the following.

Variable names

•  Must start with a letter or number (e.g., myNumber, x, 7number, name10).

•  Cannot contain spaces (e.g., my Number)

•  Cannot be the same as a reserved word [these are the keywords used in the programming language (e.g., var, for, function, transform)]

•  Cannot be the same as another variable unless it is in a different function, so this is not valid

However, this is acceptable

Also keep in mind that variable names can make your code more readable and can reduce the need for comments. For example,

is ambiguous, whereas

has more meaning.

You will notice the use of capital letters in some of the variable names shown beforehand. This is just one convention of using several words in one name. The capital makes the variable name more readable as single words are easier to read. A variable name could also be written

using the underscore to separate words. This is totally a personal preference and makes no difference to the compiler; however, naming conventions^* are recommended. For example, if programming in C#, camel casing for variable names is recommended with the first letter being in lowercase. Because conventions can vary slightly between languages, they will not be covered in this book.

1.5.4.1    C# Variables

Variables in Unity C# usually appear near the top of the code file. Although they could be placed in a variety of locations, the best place is at the top because they are easy to find and they must be declared before they are used. We will examine other types of variables in later sections.

Consider the script in Listing 1.9.

The line showing the variable declaration is shown in bold. Note, do not use bold in your own code; this is for illustrative purposes only. The keyword private forces the variable to remain hidden for use inside the C# file in which it is declared. It cannot be seen for use by other code files. You can add many C# files into the same Unity application, and sometimes you will want to be able to share the variable contents between these. In this case, you would declare an exposed variable. In this example, the code would be the same as Listing 1.9, except the private keyword would be replaced with public.

When a variable becomes exposed, it also appears in the Inspector of the Unity Editor where values can be entered manually. The difference is illustrated in Figure 1.26.

FIG 1.26 A private and exposed variable in the Inspector.

FIG 1.28 The Unity error message displayed when a semicolon is missing from a line of code.

1.5.5    Operators

There are two main types of operators in programming: arithmetic operators perform mathematical operations between variables and values, and relational operators compare variables and values.

1.5.5.1    Arithmetic Operators

Basic math operators are shown in Table 1.2.

The assignment operator you may be more familiar with is an equal sign, and the multiplication and division operators are a little different to those used in traditional math. Note from the C# examples in Table 1.2 that values are placed into variables using the assignment operator. To use values already stored in a variable, you simply refer to them in the equations using their name. It is the same as high school algebra. More complex equations can also be created, such as

where parentheses work for order of operations as they do in traditional algebra (e.g., the y + z between the parentheses would be calculated first).

1.5.5.2    Relational Operators

Unlike arithmetic operators that can calculate a plethora of values, relational operators make comparisons that result in Boolean values (TRUE or FALSE). The most common operators are given in Table 1.3.

An important thing to note in Table 1.3 is the use of = versus ==. One equal sign means assign or place a value into a variable, and the double equal sign means compare two values. First-time programmers often get these mixed up, but with practice the differences become clear.

TABLE 1.2 Common Math Operators Used in All Programming Languages

Operator	Arithmetic Performed	Example in C#	Value of x from Example
=	Assignment	X = 2;	2
+	Addition	Y = 5; X = y + 3;	8
−	Subtraction	Y = 15; Z = 5; X = z−y;	−10
*	Multiplication	Y = 15; X = x*3;	45
/	Division	Y = 15; Z = 5; X = y/z;	3

TABLE 1.3 The Common Relational Operators Used in All Programming Languages

Operator	Arithmetic Performed	Example in C#	Value of x from Example
>	Greater than	y = 5; z = 2; x = y > z;	TRUE
<	Less than	y = 10; z = 3; x = y < z;	FALSE
>=	Greater than or equal to	y = 4; z = 4; x = z >= y;	TRUE
<=	Less than or equal to	Y = 3; z = 1; x = z <= y;	TRUE
==	Equal to	y = 12; z = 16; x = y == z	FALSE
!=	Not equal to	y = 12; z = 16; x = y != z	TRUE

It is not expected at this early stage in learning Unity to know this type of information. However, it can be handy to know where to find it, and the most invaluable resource you should have at your disposal is the Unity Scripting Reference. To access this information, while in Unity, select Help > Scripting Reference from the main menu. In the website that opens, try searching for Mathf and Time to see what is available to you.

1.5.6    Conditional Statements

Conditional statements allow the flow of a program to change when certain conditions are met (or not met). They rely on Boolean algebra for making decisions on which way code should flow. Conditional statements can divert code to other parts of code or can make the same statement of code repeat over and over.

Conditional statements, which are essentially the programmed form of Boolean algebra, cannot operate on their own. They need constructs around them to assess their value. The simplest form of these is an if-else statement.

Used quite a lot in simple artificial intelligence programming, if-else statements make an assessment of a statement and do one thing if that statement is true and another (or nothing) if it is false. The if-else statement was used in the logic circuit application mentioned earlier in the chapter. Think of it as the type of logic you might use in deciding whether or not to wear a raincoat, thus:

The if-else statement in C# looks like that in Listing 1.13.

For example, consider the script in Listing 1.14.

This program will print out “Y is greater than or equal to X” because the conditional statement inside the parentheses of the if statement will equate to false. If X were given a value of 20, the program would print out “X is greater than Y”.

The other programming construct that handles condition statements is a loop. A loop is a segment of code that runs over and over again until an ending condition is met. There are several types of loop constructs, but for now we are going to have a look at just one, the for loop.

Consider the code in Listing 1.17.

as the variable i starts with a value of 1, is then printed, has one added to the value, and is printed again five times. Imagine printing out all the numbers between 1 and 100. It would be a lot of code.

Enter the for loop. The for loop reduces such repetitive tasks down into a few simple lines. The basic format of a for loop is shown in Listing 1.18.

The first part of the for loop declares a variable and gives it an initial value. The second part performs a Boolean test on the value of the variable. If the test comes back true, the loop performs the code inside the parentheses. After the contents of the parentheses are finished, the variable value is updated, and the test is performed again; if true, the inside part runs again. This continues until the test becomes false and the loop quits.

A for loop to perform the same action as Listing 1.17 is shown in Listing 1.19.

TABLE 1.4 Shortcut Arithmetic Operations and Their Equivalent Longhand

Shortcut	Longhand	Description
i++	i = i + 1	Adds one to the value of the variable and replaces the original value with the new one.
i−−	i = i − 1	Takes one away from the value of the variable and replaces the original value with the new one
i + = 2	i = i + 2	Adds two to the value of the variable and replaces the original value with the new one.
i − = 2	i = i − 2	Takes two away from the value of the variable and replaces the original value with the new one.
i *= 2	i = i * 2	Multiplies the value of the variable by two and replaces the original value with the new one.
i /= 2	i = i / 2	Divides the value of the variable by two and replaces the original value with the new one.

1.5.7    Arrays

Sometimes a single variable is a less efficient way of storing data and objects. For example, consider changing the color of each of the cubes created in Listing 1.20, not initially at the beginning of the program, but randomly and constantly while it is running. In Listing 1.20, a single variable is used to create nine cubes. However, the variable itself only ever holds one cube at a time. Each time a new cube is created, the variable is overwritten with a new one. This means that after a new cube is created and assigned to aP, it is no longer possible to access the properties of the previous cube. Even the ability to change its position is gone. Therefore, we need the variable aP to hold not just one game object, but nine.

This can be achieved by making aP into an array as shown in Listing 1.23.

In Listing 1.23, the variable aP is no longer a single game object but an array. An array can store anything, including integers, floats, and game objects. If the original aP was a single storage box in memory, this new aP is a row of storage boxes, where each box has its own index number.

The first box in the array is indexed with a 0. To refer to each box individually, their names are aP[0], aP[1], aP[2], aP[3], aP[4], aP[5], aP[6], aP[7], and aP[8]. This is the reason for changing the for loop in Listing 1.23 to begin counting at 0. The variable i can be used as the array index. The first time the loop runs, aP[i] is equivalent to writing aP[0].

Because the y position of the first cube was initially 1 and i now starts at 0, the position must be set with i + 1 to keep this consistent.

1.5.8    Objects

Objects are complex data types. They consist of a bunch of variables (sometimes called properties) and functions (sometimes called methods). In most of the previous examples, you have already worked with objects. A GameObject is an object. A cube is an object. Most of the items you work with when coding that are not integers, floats, strings, or characters are objects. A class defines the data type of an object.

Let us assume that we have a simple class called Square. The class definition acts as a template for making many Square objects. Figure 1.32 illustrates how the variables of the class can be set to create differing objects. Each object is called an instance of the class. In this case, setting the variable values for Square allows for a variety of Square objects to be created. Although they all look different, they are still squares and retain the essence of a square, which is to have four equal sides and 90° angles.

The functions of an object can be used to set the values of the variables or change the behavior. For example, the Rotate function in the Square class might update the rotation variable and thus change the orientation of the object.

1.6    A Game Art Asset Primer

This primer will not teach you how to create game assets. Such topics are books on their own. It will, however, point you in the right direction to get started creating your own assets, as well as where to find ready-made ones. Most importantly, this primer will introduce you to the different types of assets and how to get them into a Unity game.

When it comes down to it, there are two types of art assets used in games: 2D and 3D. Two-dimensional art assets are the most used, as everything in the game has a 2D visual element. From trees to buildings, terrain to explosions, and characters to user interfaces they all include 2D art. In addition, normal maps and shading maps are also 2D images.

1.6.1    The Power of Two Rule

Since the inception of computer graphics, people have been trying to create superior and higher resolution images. The quality has not been restricted by the ability of the artist to create, but by the computer hardware’s ability to process. Computer games need to quickly render frame after frame of real-time animation that changes with game flow influenced by user input. Unlike an animated movie, in which the contents of each frame are known from the outset, the interactive nature of a computer game means that the artist will never know what will be in any particular frame. The game itself needs to render frames on the fly. This requires a lot of processing power. This is why, over the years, as hardware performance has improved, so too has the quality of game graphics.

However, as a game developer you will still want to push the boundaries of quality, and knowing a few simple tricks can help you optimize your art assets to get the best out of the graphics processing. One such trick is to follow the power of two rule.

Computers continuously process data in cycles in order to push it through the processors, whether it be the central processing unit or, more commonly for graphics, the graphical processing unit. Processors can only handle so much data in one cycle and therefore it is chunked into packages of certain sizes.

Earlier in this chapter we examined the most elementary values in computing. They were 0 for on and 1 for off. These values are the basis for binary code that is used to encrypt all values in computer memory. The smallest amount of computer memory is a bit. It can store either a 0 or a 1. If we put two bits together, they can store four values: 00, 01, 10, or 11. Three bits can store eight values: 000, 001, 011, 010, 011, 100, 101, or 111. In fact, the number of values that can be stored is 2 to the power of the number of bits or 2 number of bits. Therefore, eight bits (called a byte) can store 2⁸ or 256 values.

A computer processor has a limited number of bytes it can push through in one cycle. By making an image file a power of two in dimensions, it optimizes the number of cycles required to process it. For example, if an image were nine bytes in size and the processor could process four bytes per cycle, the first eight bytes of the image could be processed in two cycles. On the third cycle the ninth byte would be processed. This would mean three whole empty bytes of space wasted during the third cycle.

Imagine it as though you have a dishwasher that can hold four plates. You need to wash nine plates. You would do two full cycles and then have only one plate in the third cycle. For the same amount of dishwashing you could have invited another three guests to dinner! This illustration is exacerbated as file sizes become larger.

If you sacrifice processing cycles, you will sacrifice quality and speed. Ideally, images should have width and height values that are a power of two, for example, 2, 4, 8, 16, 32, 64, 128, 256, etc. The image does not need to be square; for example, the width could be 16 and the height could be 128. Making an image this size in dimension will lead it to occupy a space in computer memory that is also a power of two in size.

A digitized image is not just the size of its width and height, but also its depth—its color depth. The color depth is defined as the number of bits required to store the color values of each pixel. When a pixel is colored according to its red, green, blue, and alpha values that take up 8 bits (1 byte) each, it is said to have a color depth of 32 bits.

Therefore, an image that is 16 × 32 pixels with a color depth of 32 bits is 16,384 bits in total size. This is equal to 2¹⁴; a power of two! Because computer memory processes in chunks whose sizes are also a power of two, it will result in an optimized use of each processing cycle.

But what happens if your texture is not a power of two? Your image will be resized or rescaled. If it is rescaled, the game engine will make it into an image with a power of two width and height closest to that of the original. This means that the original image will be squashed or stretched to fit into the new space. This could result in undesirable distortions in the texture. If the image is resized, the original could be cut off or extra blank space added around the edges in order to make it fit into a power of two texture. Either way, the result could be something that you do not want, as it may misalign your UV mapping.

1.6.2    Using Other People’s Art Assets

Sometimes it is not worth your time recreating 3D models and textures when they are available on the web. For example, if it will cost you a week’s worth of work to create a model that someone is selling on the web for $50, then it is worth purchasing if you can afford it. There are also many free 3D models available for use under a variety of licensing formats. Others are royalty free, which means that you pay for them once and then use them as many times as you like under the terms of the license.

There are many online websites for which you can freely sign up and download models for use in your own games. Some of the better ones include the following:

•  Unity Asset Store: assetstore.unity.com

•  TurboSquid: turbosquid.com

•  HighEnd3D: www.highend3d.com

•  Cubebrush: www.cubebrush.co

The model format used most widely and accepted in game engines is 3Ds. This was the original file format created by Autodesk’s 3D Studio DOS release. This format can also be created and modified by Autodesk’s 3D Studio Max, Maya, and Blender.

FIG 1.42 An unwanted Animator component attached to an imported model.

1.7    Summary

Game art and game programming are two sides of the same coin. This chapter examined the complementary nature that both art and programming play and suggested that anyone can learn to program, and anyone can understand the logic behind art. While you may not become fluent in both art and programming, you will gain knowledge, and appreciation for both domains is important for working in the games industry. In addition, it is absolutely necessary for artists working in the area to appreciate the technical limitations placed on their artwork by game engines and computer hardware. Some simple planning ahead and modeling within the restrictions of a games platform can eliminate a lot of future time, money, and heartache.

^*  For more information about naming conventions, see http://en.wikipedia.org/wiki/Naming_convention_(programming).