Cubey vs. The Universe is now available on Steam.
Cubey vs. The Universe is now available on Steam.
A tangent I came upon during my previous attempt at tracing the history of “leading lines” is the “rule of thirds.” I think in general, it appeals to me to ask, “Where do these visual composition rules come from?”
The Origin of the Rule?
The “rule of thirds” is often attributed to John Thomas Smith’s Remarks on Rural Scenery from 1797.
Two distinct, equal lights, should never appear in the same picture: One should be principal and the rest sub-ordinate, both in dimension and degree: Unequal parts and gradations lead the attention easily from part to part, while parts of equal appearance hold it awkwardly suspended, as if unable to determine which of those parts is to be considered as the subordinate.
Analogous to this ‘Rule of Thirds’ (if I may be allowed to so call it) I have presumed to think that, in connecting or in breaking the various lines of a picture, it would likewise be a good rule to do it, in general, by a similar scheme of proportion; for example, in a design of landscape, to determine the sky at about two-thirds; or else at about one-third, so that material objects might occupy the other two: again, two thirds of one element, (as of water) to one third of another element (as of land); and then both together to make but one third of the picture, of which the other two thirds should go for the sky and aerial perspectives. … In short, in applying this invention, generally speaking, to any other case of light, shade, form or color,
Note here he seems interested in surface area of the painting, rather than the positioning of points of interest. One or two thirds of the painting should be occupied by one “element” or another. (Water or land.)
He also talks about further sub-dividing areas. Like his example dividing between land, water, and sky: if you give the sky two thirds, then for the remaining third, you could apply the same rule to divide two thirds water and one third land.
And there’s nothing about where in the picture these divisions should lie. Now any indication that the division between these elements should align with vertical and horizontal lines. The division between land and sky might naturally do so on the horizon, but the presence of hills and mountains can complicate that.
(A minor aside: he claims these imbalances “lead the attention easily from part to part” which does nicely tie in with the “leading lines” discourse that directing the attention from one part to another is a thing that is desirable. Though the method of achieving that goal is not quite the same as “leading lines.”)
Wikipedia on the other hand describes the rule of thirds as:
The guideline proposes that an image should be imagined as divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.
For which it cites a 2003 book, Learning to see Creatively, which appears to be focused on photography. So now I’m interested in where did this shift in meaning occur? Somewhere between 1797 and 2003 gives us a big range.
Why the Shift in Meaning?
This book from 1922: “How to Make Good Pictures” was published by the Eastman Kodak Company and is subtitled: A Book for the Amateur Photographer. It talks about landscape composition on pages 36 and 37. It does not call this the “rule of thirds” but it calls the horizon line “the more conspicuous” and says it should be “one-third from the top or from the bottom.”
And finally that the most important position in a picture is always more or less towards the center either to the right or left; the exact center should be avoided as this divides the picture into equal parts
The horizon line, which in most landscapes is the more conspicuous, should never divide the pictures into two equal parts, but should be approximately either one-third from the top or from the bottom.
So that does place the horizon in the same place that Smith would advise. But it kind of tries to have two reasons behind this. It divides the picture, which feels like Smith’s version, but it’s also about positioning a “conspicuous” object near the “most important position.”
Was the shift in meaning encouraged by photography? Some camera viewfinders will display grids that divide the view into thirds. It’s a lot easier to tell an amateur photographer to line something up with a line on the viewfinder than require they estimate a surface area.
Here’s a demo with a recent camera, which will overlay a grid that divides the screen into thirds or sixths. (Interesting that they divide the thirds into halves, rather than thirds again. Smith’s original version applied the rule fractally, dividing the subsections again into thirds.) This viewfinder is linked from the Wikipedia entry on viewfinders and has grid lines that align with the thirds.
My own camera (a Nikon D40) does not have such grid lines in the viewfinder, though it marks the auto-focus which does align with where these lines would be if it was divided horizontally. When I searched for this camera, I found people objecting to the lack of grid lines. In a forum here someone asks why the Nikon D40 doesn’t have them, and this review lists grid lines under “what’s missing.” That their absence is noteworthy shows they’re very common.
I wonder if I could find a history of viewfinders that would say how prevalent it really is, and whether it became more common over the years?
A Tangent About the Golden Ratio
The Talk page for the Wikipedia article on rule of thirds also contains a lot of argument about whether to include mention of the Golden Ratio, I guess because a lot people connect that with the rule of thirds? Like, 2/3 is 0.6666 and 1/1.618 is 0.618 which is only 0.048 off, so maybe the *real* reason for anyone to find the rule of thirds pleasing is because it’s *almost* the golden ratio. Though the reverse could work just as well. Maybe people aesthetically like the golden ratio because it’s almost like dividing things into thirds.
The golden ratio is mathematically interesting but I haven’t been convinced that there’s any particular reason why people would be aesthetically drawn to things proportioned off it.
Retroactive Application of the Modern Version
Like the “leading lines” post, it’s very easy to find modern writing applying the current version of this rule to paintings of the past, but I’m interested in what attitudes were contemporary with the painters.
This references the rule of thirds describing a 1770 painting, Horse Frightened by a Lion, George Stubbs. Remarks on Rural Scenery was written in 1797. These ideas could have easily been in the zeitgeist before Smith wrote it down, but if George Stubbs had something like this in mind while painting, I’d argue it would be more like that “balance of elements” approach than like the modern “align with a grid.”
The composition in this painting follows the rule of thirds, with the land in the upper part creating a line, and the horse resting on the crossing of two lines.Composition in Romanticism paintings – Google Arts & Culture – User-created
What should I take away?
I don’t want to say that the original version of the rule is necessarily better, like the more recent use is some kind of a corruption of the true form of the rule. But being aware of the older use could give you an alternate way of looking at visual composition.
Recently released this game, Cubey vs. the Universe, on itch.io. It’s a puzzle game where you roll a cube person and need to match the faces of the cube to move.
It’s an improved version of an old game I made called Cube Roller. This version has graphics made by Thomas Murphy, an actual 3D modeler, instead of just me, and music by Nathanaël Wsiaki.
I put more thought into how the random maps are generated. There are some quality-of-life improvements like it has fully customizable controls. There’s a score-multiplier system that could add some depth for people pursuing a high score.
I posted a gist on GitHub where I was playing with modifying the projection matrix for the camera in Unity.
For background, a matrix is basically a grid of numbers. A vector is a series of numbers. And you can multiply a vector by a matrix you transform that vector in some way, as defined by the matrix. For 3D graphics, you can depict a position in space as a vector and use a projection matrix to decide where that position will appear on the screen.
In normal operation in Unity, you set some parameters like the field of view and near and far clipping planes, and it auto-calculates the projection matrix for the camera.
This shows an example of shifting a tilt-shift lens to photograph a building while keeping parallel vertical lines. You can do the same thing with the projection matrix.
I think that would be suited to some games. See here, you could have a top-down camera that’s viewing the floor completely parallel to the screen, while keeping the vanishing point below the screen.
You might also use it in a platformer. For aesthetics, a lot of landscape photographers and painters prefer to have the horizon a third from the top or bottom, rather than half-way. This would allow you to do that, while keeping the vertical and horizontal lines square.
For these scenarios, I made a OnePointPerspective script. I guess I called it that because it made me think of drawing with a single point of perspective. Unity does have a lensShift property that does a similar thing, but my script also offsets position to compensate and keep the camera aimed at a given subject.
I also made a ZoomInOffset script which is geared towards zooming into a particular portion of the screen. Here you can see the original view, one where I rotate the camera to zoom in on the chef, and one where I use ZoomInOffset. Note it keeps the checkers oriented the same, while rotating the camera doesn’t.
I’ve seen people make the incorrect claim that rotating a camera at a single point will be indistinguishable from panning an image. This example shows how that isn’t quite true.
( It does work when viewing with the human eye, because the human eye doesn’t need to be displayed on a flat surface, so you don’t have single vanishing points like you do in linear perspective. But that’s another discussion. )
You can do a lot of other stuff, many of which will be disorienting. You can, for example, make things get larger in the distance instead of smaller, but I find in practice it makes me feel like everything has reversed normals.
( This is maybe where I get into James J. Gibson’s The Ecological Approach to Visual Perception where you perceive underlying 3 dimensional invariants based on correlated transformations. When multiple things on screen transform simultaneously, you respond to how those transformations correlate to one another. What people will probably be familiar with is parallax. Something near the “camera” moves quickly while something far away moves slowly, and that helps you perceive one as near and the other as far. The projection matrix is very much creating these sorts of correlations, so when the correlation was backward, such that distant things were larger, my brain instead perceived them as closer. )
Anyway, towards the end of experimenting with projection matrices, I made some more free-form scripts. ProjectionMatrixExperiments and ProjectionReplace. Both let you apply Translate, Rotate and Scale transformations, but ProjectionReplace also lets you adjust individual elements in the matrix.
Although I described the Matrix as a grid, Unity displays it like this. You can figure out where each number goes in the grid based on the name. E13 would go in column 1, row 3.
So if you play around with that, you too could make cameras like this:
Some recent video game discourse over “leading lines” got me thinking about what is the history of the concept? Obviously it was a thing in photography and/or painting before it was ever used in video games, but for how long?
This reminded me of a quote form Linda Nochlin’s Realism (emphasis mine):
Nobody,’ Perrier insisted, ‘could deny that a stone-breaker is as worthy a subject in art as a prince or any other individual. … But, at least, let your stone-breaker not be an object as insignificant as the stone he is breaking.’ The same point was made by Louis de Geoffroy in discussing the Burial at Ornam: ‘the funeral of a peasant is not less touching to us than the convoy of Phocion. The important thing is to avoid localizing the subject, and in addition, to emphasize the interesting portions of such a scene.’
Not specifically anything about leading lines, but both are about visually emphasizing subjects of the painting. And are prescriptive enough about it to feel Courbet is doing something wrong by not providing such emphasis. The Stonebreakers was painted in 1849 and Burial at Ornans was painted in 1849-1850.
So this train of thought lead to me searching Archive.org for old writing using the phrase “leading lines” in this way. I did find that people were using “leading lines” this way at least as early as the 1800s.
Here I found a book from 1905 that appears meant to teach art appreciation, which makes multiple references to leading lines as an attribute the student should note:
Would it not have been easy to make this a stiff, uninteresting picture? How has the artist avoided such an effect? Does it denote a scientific study of design? Is there an elaborate arrangement of leading lines? Or a brilliant effect from opposing masses of light and dark? Is it conceived in a naturalistic temper?Outlines for the Study of Art
The Art Journal proved a good source. Here’s one from 1882(?)
‘Merry as the Day is long,’ by Mr. Fred. Morgan. The best picture which we have ever seen from Mr. Morgan’s easel. Three children playing in a farmyard, and climbing about a pair of huge timber wheels, are contrasted with the tired form of an old labourer to whom they are gleefully shouting. The shadows are rather blue, and there is a want of force in the composition of light and shade, but the colour is harmonious and warm, and the leading lines are thoroughly expressive and agreeable.The Art Journal
Here’s an earlier case where a painting is complemented on its use of leading lines:
In the blue drawing-room are a picture of ‘The Marriage of St. Catherine,’ by Andrea Schiavone, pleasing in the leading lines, glowing in the colouring …From The Penny Magazine 1840
From 1825 I found an example using it in reference to architecture rather than painting.
The horrible deformities called Steeples, … are unfortunately ever introduced in such situations as to ruin the effect of the porticoes over which they stand, by an arrangement which in most cases interferes with the leading lines of the main feature.A footnote in Illustrations of the Public Buildings of London (1825)
Though these references don’t necessarily say the leading lines are used to guide the eye. Much of the “leading lines in video games” discourse is about using those lines to draw attention to something in particular, but these old quotes seem to evaluate them aesthetically pleasing in themselves and make no note of what is being emphasized. I start to wonder if they originally meant “leading” as “foremost” and someone retroactively took it to be about leading the eye about the image? A folk etymology that in-turn changes the use of the phrase.
So I search for “leading the eye” and find this from The Art Union Monthly:
A coast-view is somewhat of a trial for a landscape painter; for consisting generally of so little, the want of objects must be atoned for by the finest feeling in leading the eye over the generally flat surfaces of which these scenes are composed.Art Union Monthly (1842)
So that supports the idea that paintings were considered in that way and there was an expectation that painters are playing a part in leading the viewer’s eye.
Maybe I need to read something like this book? The Education of the Eye by Peter de Bolla.
It claims that at the moment when works of visual art were first displayed and contemplated as aesthetic objects two competing descriptions of the viewer or spectator promoted two very different accounts of culture.
It would make sense to me if the idea of “leading lines” developed in parallel with the idea of the art connoisseur. The connoisseur wants a framework to discuss the painting in more detail than “this is good.”
I’m also interested in how different movements in painting thought about it. From Linda Nochlin’s Realism, as well as some other contemporary criticism of the realists, I get the sense they would paint things that many saw as unpleasing composition, because it reflects what they would naturally see in real life. While the Romantics, for example, I get the sense they were willing to paint what might be “unrealistic” to support the desired composition of the painting.
I got a few people to run a program I made to test their accuracy with the thumbstick on a gamepad.
What kicked off this train of thought, was I was considering radial UI as an interface. How many options could you reasonably include in a radial menu? That would depend on how accurate you could count on people being.
The test showed the user an arrow indicating a direction they needed to match. They then needed to point their thumbstick in the same direction as the arrow and press a button.
I put each used through three phases. The first and last phase showed no visual feedback about the direction their thumbstick is facing. The second phase did show the direction they are pressing as another arrow and they needed to match the two arrows. Repeating with no visual feedback in the final phase was to test whether accuracy would improve after the second phase.
To ensure everyone was tested on a full range of directions, I generated 30 directions for each phase, each within a different 12 degree range, and then shuffled them. So every 12 degree segment is tested once per phase.
The mean average for degrees inaccuracy in phase 1 was 10.9 and in phase 2 was 10.4. Median went from 9.2 to 8.8. So it doesn’t feel like the training phase lead to a huge improvement.
Maybe there’s a small cluster of rightward at the top and bottom right. There may or may not be a slight rightward skew, but it’s a small enough sample it might be a coincidence.
In terms of improving after the test phase, I found as many subjects were worse during the third phase, just as many as improved. For accuracy, if we had a 5-section radial menu, it would require accuracy within 36 degrees, which would fit most of this. 6-section radial would require 30 degree accuracy, which would start excluding a few people here. In practice, I’m sure I’d add visual feedback for accuracy, but it’s an interesting experiment.
Maybe also I’ll try a future test where, instead of arbitrary direction on the circle, visually divide it into segments like a radial menu. Then see how people fare with 5 segments, then 6, then 7 and so on.
A collection of paintings I’ve been doing on a general theme. I figured I’d put them up here.
I hadn’t done much physical painting really. I drew a lot but just with ink or pencil, so no colour. I made some colour images on computer, but the way you choose colours is very different on computer. So the process of mixing colours to match what I’m seeing has been a useful exercise, I think.
I saw this article on why kids loves garbage trucks. And it got me looking at games about garbage trucks.
Obviously there must be a garbage truck simulator in the vein of Euro Truck Simulator or Train Simulator.
I found Recycle: Garbage Truck Simulator but since this was kicked off by kids who love garbage trucks, I saw how much focus the trailer puts on managing the whole system over just driving the truck.
From one of the negative reviews on that: “You can’t control the garbage man only the driver which sucks.” Which is a neat perspective of what that person wanted out of a garbage truck game.
Some android games seem more aimed at kid level, but then are also kind of cheap. This one doesn’t show any animation for the actual pick up, just fading out and then the garbage is gone? This feels like, for a garbage truck game, a critical lack of juice, if the act of picking up garbage is completely glossed over like that.
There’s this one where apparently the garbage man is a transformer? But just does a “knocking one foot” animation next to the garbage cans instead of a more fitting animation.
This one shows a suitable animation for picking up the dumpsters, but dropping off the garbage at the dump it sort of, tips a dumpster back out of the truck? I don’t think that’s how it works.
I guess one tricky thing is if you do want to target an audience young enough to delight in garbage trucks, you also have to make it much simpler than actually driving a garbage truck. If you want to make a highly accurate garbage truck simulator, then you’ll lose a lot of that younger audience.
Is there some way to push an element of garbage collection further? To make it sort of the Crazy Taxi of garbage collection? Not to mean just like Crazy Taxi but you drive a garbage truck, because the underlying nature is different. So exactly what way you want to push the craziness is different.
One thing I’d considered before was Crazy Taxi but you’re delivering pizzas, but the down side is you then go back to the pizza place for pick-up. The starting point of your delivery is always the same, where a taxi game lets both your start and end point keep changing. Garbage collector would have the problem that you’re typically following the same route over and over. So can you just have a list of routes and you just try to get the fastest time on each route?
Or should it be more like Paper Boy? You’re not just racing for time, but you can somehow do a better or worse job picking up the garbage. Maybe you can throw garbage?
Maybe there’s some fun to be had from the need to switch between driving mode and pick up mode? It does have a kind of frantic “juggling” aesthetic I like in some games?
One thing I see sometimes on the game design subreddit, is questions of the form “Is ____ considered good / bad game design?”
So I guess I have two pet peeves with that. One, it does a passive voice attempt to ignore exactly who is doing the considering. Two, it isolates one element from the game as a whole.
Analogy with colours
For analogy, I’m going to imagine painters, asking if something is a good colour. “I’m making a painting. Should I use blue?” It doesn’t make sense to answer that without seeing the rest of the painting.
You can’t very well choose the colours for a painting by going through each colour and getting and up / down vote in isolation. You have to consider the context you’re using the colour.
But also you can’t really say there’s a single objective evaluation whether a design is good or bad. At least not if you want to consider game design as an art form rather than an optimization problem. To be an art form there needs to be room for interpretation and different aesthetic choices.
This is where I’m bothered by the passive voice, “is it considered …” Considered by whom?
To return to the colour analogy, consider colour theory. For all the attempts to systematically understand colours, there isn’t really in colour theory that says, these colours are good, these colours are bad, or even these colours in combination are good or bad. It might say you have a complementary colour scheme, or analogous, or triadic. But when it comes down to it, you’re going to make an aesthetic choice for whether that’s something you want to use.
Bisexual lighting vs. teal and orange
Back in the day, when people noticed all the movie posters were teal and orange, some people would slide into the comments to let us all know that actually, teal and orange is good because they’re complementary colours.
But, like I said, deciding you want to use complementary colours is an aesthetic choice. A more recent trend has been the bisexual lighting with pink, purple and blue, which are analogous rather than complementary.
Colour theory can tell us a lot about how colours work together, but you still have to make an aesthetic decision about whether that’s the way you want them to work together.
Game feel is an aesthetic
I see people when discussing game feel, often try to short-cut directly to, “this is good game feel, this is bad game feel.”
Game feel has the word “feel” in it. I guess some people want to interpret that as “feels good” or “feels bad” but I interpret it more like: “this feels rough while this feels smooth.” This feels heavy, this feels light. This feels hard, this feels soft.
Those are choices where the right answer depends on context, and it also depends on your aesthetic preferences.
In UX, modes are when the same input results in a different action depending upon the state of the program.
I’ve played games where there’s a “town” mode and a “action” mode, where your “fight” actions are replaced with “talk to” actions, so you can’t run around the town attacking people.
Two games I’ve played lately have got me thinking about contextual controls.
First is Alan Wake.
Second is Flinthook.
Flinthook has a grappling hook, which will grab onto loops in the level, and launch you forward once it grabs one. The grappling hook can also be used to pop bubbles, for some enemies that are protected by a bubble shield.
The game doesn’t expect you to aim precisely at a loop, and if it did, that would be frustrating. In the heat of the moment, you can’t be expected to aim within a 10 degree range with a thumbstick. So there’s a pretty forgiving auto-aim.
But I can see how that gets complicated by the alternate use for the hook, to pop bubble shields. If you mean to pop a bubble shield, and it grabs a loop instead, it will launch you directly towards a shielded enemy. If you really did want to grab a loop, maybe you’ll accidentally fall to your doom.
Alan Wake usually changes modes more scene-to-scene than moment to moment. It’s more like the town mode versus
Alan Wake frequently sets you up for a particular scene, and lets you play out that scene with whatever subset of abilities you will have. Maybe you have a gun, so you can shoot the ghosts. Maybe you only have a flashlight that temporarily slows them down. And there are town-mode scenes where you don’t have either. But not just your items change, but you might lose the ability to run and jump, because you’re not in danger right now. You move at a normal walking pace instead of run. There’s one scene, where Alan’s wife screams from the next room, and suddenly you can run again. Because the character is suddenly in a state where they are willing to run.
A lot of games have contextual actions, where the same button will do different things based on where you are located. An “action” button that opens a door if you’re in front of a door, turn on a light if you’re in front of a light, talk to a person if you’re in front of a person. Does the player’s mental model accept “action” as a single ability? I think this is safe. We have lots of mouse-controlled games where precisely what action you take depends on what you click on, so controlling it with the position of the main character makes sense, too.
In UX, you’re supposed to be very cautious when relying on modes. Are you making something the user could be confused about which mode they are in?
I guess two things to consider about modes here are, visibility and granularity.
The Alan Wake example has a larger granularity than Flinthook. It changes from scene to scene, after you reach a new area and/or have a cut scene. Where in Flinthook, it can change because you were two inches to the left and now a different thing is in range. The Town Mode is large granularity while the Action button is smaller granularity.
Visibility is important if you want the players to not be confused by the change in behaviour. A lot of games with an Action button will have an on-screen prompt that comes up when you’re in range of an item you can interact with. With the mouse-cursor example, hover-state to show clickable areas serves the same purpose. Alan Wake will include in the cut-scenes when you’re given a gun or a flashlight, etc. It may be less explicit when you are in town mode or not.