Whitespace, Unity Script, and Facebook Critiques


Image showing the structure of Unity script

Learner description

I created the graphic above to show the structure of a Unity script in my Game Programming and Physics book. My targeted readers are high school physics students or readers interested in learning the topics I write about at a high school level. I also write material to be used in the classes I teach. My students will often gloss over when reading code, not taking the time to understand how things work, rather just caring that they work. So in their mind code is something to be copied and pasted. It either works or it doesn’t work. This lack of attention to important details cause confusion later when this understanding is assumed and needed to write code that works.

Solution and Graphic Justification

In creating the graphic above, I had to whittle away the content to what I was trying to teach with it. As it turns out, it is really just teaching about the opening and closing brackets and their importance to starting and ending chunks of code. The graphic uses color, shape, and space to chunk the code into the important parts. It also uses arrows with labels to clearly delineate the important parts. This knowledge is valuable not only to Unity scripts but also to other languages that also use brackets to chunk code. When I wrote this section in my book, I just pasted the script in, changed the font to Courier, and single spaced it like this:

Screen Shot 2016-03-28 at 10.27.07 AM

I then described the parts of the script in the text of the book. I have found that my students will skim over detailed technical text like this. I can’t blame them because I had a hard time writing this text. There are too many brackets, parentheses, and programming specific words. Here is a paragraph of the text I am referring to:

The important parts of this script are the void Start () and void Update () functions. Anything within the { and } brackets after Start () will happen once whenever the game starts. Anything within the Update () brackets happens every “frame” of the game. The frame rate of a Unity game depends on the speed of the system it is running on. A fast computer will have a faster frame rate than a slower computer.

I knew when I wrote it that it was terrible. I have found that often when something is difficult to write, it is better explained with a graphic.

Lohr (2008 p. 272) states that “Space can direct the eye to important information by chunking and separating instructional elements.” This graphic uses space in a subtle way. There is no huge whitespace between elements but the chunking and indenting that happens in programming to make code more readable is exaggerated in the graphic and highlighted by the colored arrows. The colored text beside the brackets uses proximity in space as well as color to show relationship.  I purposefully left example script out of the loops because my purpose for this graphic is to teach the important parts of the script rather than the coding details which will come later.

User Response and Critique

Below is my original graphic before user response and critique:

unity-scriptI posted this graphic to Facebook and asked my friends for suggestions/critique. I also showed the graphic to my wife Cheryl. Cheryl’s response was that the brackets were confusing and most of the text made no sense to her. The brackets did not show containment of the code because they didn’t really contain anything or show containment within the code brackets. I was also using brackets as my shape as well as describing brackets in the code, which were different things and confusing. It’s confusing to write this right now because of the term “brackets” mean two different things in the graphic above.

My friend John, who is a freelance artist also stated that the brackets were confusing. John also brought up the green text next to the “using” commands that was out of place and not well explained. He also helped me re-word all the explanations so they are clearer. Another friend Charlie found an errant space in the code and made some suggestions about how he writes code.

I revised my image to use arrows instead of brackets, changed the color of the “using” text, and posted my revised image.

Image showing the structure of Unity ScriptJohn had trouble with the “balance” of the two “Code within” explanations in green, explaining that if they look so similar then students would not read the second one. I re-worded the explanations a few times and reposted the graphic. A past student of mine, Robin, who is a graphic designer liked the graphic but said the white space between the green explanations was too large and the title needed tighter kerning.

Symmetry, where elements are equal, conveys a sense of calm  and predictability (Lohr 2008 p. 275). This predictability, John suggested, could allow the reader to skip reading the text because even the first few words in the sentences were similar. I had done this on purpose to create symmetry but was not thinking that it is actually the second explanation that has the more important information. I stretched the arrows and space between the brackets larger as well as wrote more in the second paragraph to emphasize it’s importance. Another friend, Nick, suggested I put the second paragraph in another color but I felt that was a bit too much color for this graphic.

I’m happy with the graphic I have created and feel it will be a great addition to my book.


Lohr, L. (2008). Creating graphics for learning and performance (2nd ed.).  Upper Saddle River, NJ: Pearson Education.

You may also like...

Leave a Reply

Your email address will not be published.