tag:blogger.com,1999:blog-51604276484979430802024-03-13T10:13:06.546-07:00Casual EffectsMorgan McGuire on Graphics & GamesMorganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comBlogger82125tag:blogger.com,1999:blog-5160427648497943080.post-53736379728166404442016-12-28T19:20:00.002-08:002017-03-05T12:05:34.362-08:002017 State of Virtual Reality #1: Platforms & Content<i>This two-part article describes the state of virtual reality technology and research at the beginning of 2017. I'm writing it for a technical audience. For a more philosophical discussion for a general audience, see my <a href="https://youtu.be/Hwqz2wacIbk">Virtual Reality: The Actuality of Total Cinema</a> talk video.</i><br />
<i><br /></i>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-Rko2oAt_U34/WGRiIKUsbsI/AAAAAAAAICo/yEsOGYW0z84d4yuo8g4jMpMyQou4iY0HgCK4B/s1600/IMG_1384.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="185" src="https://3.bp.blogspot.com/-Rko2oAt_U34/WGRiIKUsbsI/AAAAAAAAICo/yEsOGYW0z84d4yuo8g4jMpMyQou4iY0HgCK4B/s400/IMG_1384.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Peeking out from under a virtual reality display prototype</td></tr>
</tbody></table>
<i><br /></i>
<br />
<a name='more'></a><br />
<h2>
Setting the Standard</h2>
<b>Virtual reality (VR) </b>is a collection of technological visions for an immersive computer-driven experience. Different groups have different definitions, and definitions are important for technology--scientists and engineers need to specify what they're building.<br />
<br />
<h3>
Telepresence</h3>
I put the base level of VR technology at <b>telepresence</b>: the point at which the player's senses and instincts treat the virtual world as real. This happens even through the player knows at a cognitive level that it is not. Today's <i>best</i> VR experiences already achieve this, although many low-end "VR" experiences fall a little short.<br />
<br />
Telepresence requires at least real-time 3D rendering, 6 degrees-of-freedom tracking of the player's head (and ideally hands), a wide field of view, and low latency (delay) between motion and the image updating.<br />
<br />
It is easy to spot when a first-time VR player is experiencing telepresence. They start laughing hysterically and keep saying, "I'm really in this other place." And it is indeed a magical feeling, even after having experienced it many times.<br />
<br />
<h3>
Holodeck VR</h3>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-SXVBX4Et9RE/WGPfuK8Xm_I/AAAAAAAAIBc/TOr_pQBd62AtfZ0lz2RXKazTSyE3u-79wCK4B/s1600/Riker_Jungle_Holodeck_2364.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://1.bp.blogspot.com/-SXVBX4Et9RE/WGPfuK8Xm_I/AAAAAAAAIBc/TOr_pQBd62AtfZ0lz2RXKazTSyE3u-79wCK4B/s320/Riker_Jungle_Holodeck_2364.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Holodeck VR:</b> The Holodeck fictional virtual reality<br />
technology depicted in <i>Star Trek: The Next Generation</i></td></tr>
</tbody></table>
To me, the ultimate goal of VR is the <b>Holodeck</b> on <i>Star Trek</i>: a room that you enter which can become any location.<br />
<br />
Objects appear indistinguishable from reality with physical form, weight, smell, and every other property. You can walk without limitation in any direction and don't have to wear any special equipment because it is built in to the room.<br />
<br />
The Holodeck is probably long way in the future. The primary challenge is having the player unencumbered.<br />
<br />
<h3>
Matrix VR<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-JX3IsYZK_Do/WGPpVUmEisI/AAAAAAAAIB4/s8KCjs3mqgoQ3ShDhxdTMfy_0WOi9DcDACK4B/s1600/7812b2e10aa7a88996465ab0a2ce9d05.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="219" src="https://3.bp.blogspot.com/-JX3IsYZK_Do/WGPpVUmEisI/AAAAAAAAIB4/s8KCjs3mqgoQ3ShDhxdTMfy_0WOi9DcDACK4B/s320/7812b2e10aa7a88996465ab0a2ce9d05.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Matrix VR</b>: <i>The Matrix </i>is a dystopian film featuring<br />
fictional virtual reality technology and martial arts</td></tr>
</tbody></table>
</h3>
A more near-term goal is something like the VR shown in <i><b>The Matrix</b></i>, <i>Harsh Realm</i>, <i>eXistenZ</i>, or <i>Total Recall</i>, in which the computer simulation interfaces directly with the player's mind.<br />
<br />
This avoids the mechanical problems of physical senses by simply bypassing them, while providing an experience identical to the Holodeck.<br />
<br />
This kind of technology could be practical within a decade, if there was really demand for it. However, like most people, I have reservations about using technology that directly interfaces with my nervous system.<br />
<br />
<h3>
Avalon VR<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-Rq_lRyeJOPE/WGPpw6wtmAI/AAAAAAAAICA/h4EPkRV10YQlq01L3TfQOA9GN0dW4heLwCK4B/s1600/3789631705_dd3ed32197.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://2.bp.blogspot.com/-Rq_lRyeJOPE/WGPpw6wtmAI/AAAAAAAAICA/h4EPkRV10YQlq01L3TfQOA9GN0dW4heLwCK4B/s320/3789631705_dd3ed32197.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Avalon VR: </b>The fictional VR headset from the film <i>Avalon</i><br />
resembles today's real-world products.</td></tr>
</tbody></table>
</h3>
For a non-invasive VR experience the most practical near-term goal matches the systems described in <i>Snow Crash</i>, <i>Ready Player One</i>, <i><b>Avalon</b></i>, or <i>The Lawnmower Man.</i><br />
<br />
The VR systems in those books and films have head-mounted displays, haptic harnesses, and lots of tracking devices. These bear great physical resemblance to products available today. However, the specifications on today's products are far below what is necessary for total immersion.<br />
<br />
I hope that in the next five years we'll see consumer technology for VR that resembles this "Avalon VR" vision. Most of this article is devoted to describing progress and future challenges towards this goal.<br />
<br />
Players will have seamless and convincing physical interaction with objects through audio, haptic, <i>and</i> visual feedback; be able to move relatively freely (although perhaps not by walking); make changes to the virtual world; and have virtual bodies. The book <i>Ready Player One</i> proposes many solutions for heterogeneous input devices, user interfaces, and even economics of such an environment.<br />
<div>
<br /></div>
<h3>
Augmented Reality</h3>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-oP2FcwKnApQ/WGRy74t4r6I/AAAAAAAAIDo/2QLqdLNp21k_4L-SJnpAhNtjxkeQJMRXgCK4B/s1600/magic-leap-dragon.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="192" src="https://2.bp.blogspot.com/-oP2FcwKnApQ/WGRy74t4r6I/AAAAAAAAIDo/2QLqdLNp21k_4L-SJnpAhNtjxkeQJMRXgCK4B/s320/magic-leap-dragon.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Visualization of what augmented reality would<br />
seem like, by Magic Leap</td></tr>
</tbody></table>
<div>
<b>Augmented reality </b>takes the real world and seamlessly adds virtual 3D content. The fictional hologram displays in <i>Star Wars</i>, <i>Minority Report</i>, <i>Iron Man</i>, and <i>Avatar </i>are a weak form of AR. </div>
<div>
<br /></div>
<div>
The Microsoft <a href="https://www.youtube.com/watch?v=ihKUoZxNClA">Hololens demo</a> is actually a better depiction of the goal of AR than most films. Just beware that this demo as captured on video doesn't really match the experience you'd have today with the product: the camera's limited field of view and editing out of failure cases makes an admittedly impressive technology seem too much like magic.</div>
<div>
<br /></div>
<div>
Arguably, the Holodeck experience is augmented reality, although the point in the Holodeck is to replace everything except the players so I consider it more VR than AR.<br />
<br />
Limited AR experiences, such as Google Glass, just provide a kind of heads-up display over the real world. These are useful for maintaining situational awareness and eye contact in scenarios where today we would look down at a cell phone or tablet. However, they are only a small step towards the much greater application of integrating apparently-3D virtual objects into the real world.<br />
<br />
What I've been describing so far is free-space AR that can appear anywhere in a room around you and is observed through some kind of special glasses. There are also two variants that are much more limited, but also sufficiently practical as a result of those limitations that they are already widely deployed.<br />
<br />
<b>Projection mapping</b> re-colors an existing real-world surface. There are several firms that specialize in applications of this technology, such as <a href="https://system76.com/weekend-project/arsandbox">watershed simulation</a> in a real sandbox or <a href="https://vimeo.com/184283369">public art shows</a>.<br />
<br />
<b>Hand-held display AR</b> superimposes virtual elements onto a live viewfinder video feed, such as on a cell phone. <a href="http://www.pokemongo.com/">Pokemon Go</a> was a recent low-end example of this, where the compositing of real and virtual objects was ignorant of lighting and depth. <a href="https://www.youtube.com/watch?v=vDNzTasuYEw">Ikea's AR tablet and phone app</a> is a more compelling example that allows visualizing furniture in real environments. </div>
<div>
<br /></div>
<h3>
Marketing VR</h3>
Anything remotely 3D and interactive has probably been marketed as VR in the past. For example, in 1993, the original DOOM game. The practice of using the term "virtual reality" loosely in marketing continues.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-n69QTseponA/WGPglq7EF5I/AAAAAAAAIBo/PL-EnVtsnjU4DU8SZ9EyQjsFldTW5StuwCK4B/s1600/Doom_gibs.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://4.bp.blogspot.com/-n69QTseponA/WGPglq7EF5I/AAAAAAAAIBo/PL-EnVtsnjU4DU8SZ9EyQjsFldTW5StuwCK4B/s320/Doom_gibs.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">id Software's DOOM in 1993</td></tr>
</tbody></table>
Today, many panoramic, stereo films (also known as "360 video") are marketed as "virtual reality". These lack any interaction, the player has no avatar, and the player can't move in 3D. These are really just personal versions of a stereo OmniMax film.<br />
<br />
This is still interesting content to view with a head-mounted display, but it doesn't really capture the full potential of the VR vision. In the extreme, some that don't even use a head-mounted display are called "VR": these are just panoramic videos played through viewers that notice when you've rotated a hand-held mobile device. That's a nice user interface, but I think labeling it "VR" is disingenuous.<br />
<br />
Some head mounted displays for watching traditional movies are called "VR" platforms, even though they lack every element of VR--they are really just fixed displays seen through lenses to make them easier to focus on.<br />
<br />
<h2>
Current Technology</h2>
<div>
<h3>
Components</h3>
A consumer VR system features:<br />
<br />
<ul>
<li>a head-mounted display (the "goggles") containing a cell-phone panel and two lenses to make it possible to focus on the device up close</li>
<li>audio, usually through headphones connected to the head-mounted display</li>
<li>head tracking</li>
<li>hand tracking, typically through a hand-held controller</li>
<li>a computer, which is built into the display for mobile</li>
</ul>
</div>
<div>
<h3>
Displays</h3>
Current displays provide about 1080p resolution to each eye at 90-120 Hz, which is about 2-3x smoother updates than a typical console game. They offer about 110 degrees for a horizontal field of view, which is only half of what you can see in real life but is enough to at least feeling claustrophobic.<br />
<br />
<h3>
Cables</h3>
For high-end, desktop-powered VR platforms, there's a thick cable connecting the display to the computer. This is needed for several reasons.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/--4nZi6HaK5g/WGR_AEWIGOI/AAAAAAAAIE0/wnxsJRxG17gmOz63LyiHefVEnza885D8ACK4B/s1600/IMG_0782.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="153" src="https://3.bp.blogspot.com/--4nZi6HaK5g/WGR_AEWIGOI/AAAAAAAAIE0/wnxsJRxG17gmOz63LyiHefVEnza885D8ACK4B/s320/IMG_0782.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Desktop VR requires a thick power and video cable today</td></tr>
</tbody></table>
<br />
The most significant reason to use a cable is just power consumption. Think about how fast your phone battery runs down if you stream video from the web or run the camera for a long time. Desktop VR content is about ten times as rich as a streamed HD movie, so you'd run out of power in about fifteen minutes with a cell phone-sized battery or about an hour with an external head-mounted power pack. A cable allows the display to be light and run cool.<br />
<br />
The image quality and delay in frames can also be several times better when using a wired connection than a wireless one. This is why professional e-sports game players use wired mice and gamepads even though wireless ones are more convenient...and why they use low-latency monitors.<br />
<br />
It is <i>just</i> <i>possible</i> to transmit video to a head-mounted display wirelessly today, but only for short periods and at a risk of increasing latency (some of which can be hidden by software if you are moving very smoothly). The announced <a href="http://uploadvr.com/tpcast-wireless-vive-kit-works/">TPCast</a> add-on product for HTC Vive makes it wireless and there are rumors that Hololens and the next Oculus Rift will be wireless as well. However, when VR resolutions and frame rates jump in late 2017 or 2018, wireless solutions will again become impractical...at least until there are comparable advances in that technology.<br />
<br />
This arms race will likely continue for a decade for desktop VR. Mobile VR entirely avoids the problem by simply rendering on the display itself, but has quality limitations as a result.<br />
<br />
<h3>
Lenses<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-qmJlFxXeMcQ/WGR6veLEDqI/AAAAAAAAIEQ/-QS52TaYDBIqoocJP74y5j4ZeTb5DXztgCK4B/s1600/oculus-rift-sdk-0.3.1-sbs-rendering-2.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="192" src="https://4.bp.blogspot.com/-qmJlFxXeMcQ/WGR6veLEDqI/AAAAAAAAIEQ/-QS52TaYDBIqoocJP74y5j4ZeTb5DXztgCK4B/s320/oculus-rift-sdk-0.3.1-sbs-rendering-2.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The pre-distorted image sent to the display of the Oculus Rift.<br />
When viewed through the lenses, this looks relatively normal.</td></tr>
</tbody></table>
</h3>
The lenses in a VR display allow you to focus at an apparent depth of about a meter even though the device is only centimeters from your eyes. Unfortunately, they also create chromatic aberration (color fringing), barrel distortion (fisheye), and glare. The images shown are pre-distorted to attempt to counter some of this, but at today's resolutions it is impossible to make the entire screen look good.<br />
<br />
<h3>
Latency</h3>
To avoid headaches and motion sickness in VR, the platform must provide not only high frame rates and a reasonable resolution and field of view, but also low <b>latency</b>. Latency is the delay between when you move your head and when the image on the screen updates.<br />
<br />
There's a big difference between latency and throughput. Throughput can be measured in frames per second or pixels per second. Latency is just time.<br />
<br />
<a href="http://2.bp.blogspot.com/-EJHyPrvJ3Cg/WGR9HJM7NUI/AAAAAAAAIEo/BzVi16P5epcMKSjD5_w-m1Dj2lKpnhD8ACK4B/s1600/7696161_orig.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="174" src="https://2.bp.blogspot.com/-EJHyPrvJ3Cg/WGR9HJM7NUI/AAAAAAAAIEo/BzVi16P5epcMKSjD5_w-m1Dj2lKpnhD8ACK4B/s320/7696161_orig.png" width="320" /></a>Consider a car assembly line. With 1000 stations of robots and humans working on a car as it moves through the factory, one finished car might emerge every minute from the factory. That's high throughput. It is what we're used to worrying about for 3D games.<br />
<br />
Now, think about the path of one individual car. It might take two days for that car to go from raw metal at the front of the factory to a finished car at the back after the 1000 different assembly operations are performed. This is the latency. It doesn't matter how many cars were produced in two days if we're waiting for one specific car.<br />
<br />
When you move your head in VR, you don't care about the throughput of how quickly you can see out-of-date image frames update. What you want is for the latency to be very low for the new frame showing the rotated view to display.<br />
<br />
That is, in VR, if latency is too high (say, around 50 milliseconds), then it appears that you are dragging the world with you as you move, and it then snaps into place after a moment. This makes your visual system react as if <i>it</i> is malfunctioning, and you essentially get sea sick. The best VR systems keep perceived latency down to about 10 ms today through a combination of prediction, fast components and algorithms, and warping.<br />
<br />
The power of the GPU and quality of the software greatly affect latency as well. Unfortunately, the last two decades of computer architecture all <i>increased</i> latency to increase throughput. This means that a lot of the image quality that we see in the best 3D games is not possible in VR right now. We have to strip down rendering pipelines to make them render with low latency.<br />
<br />
<h3>
Tracking<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-JkDlkZxBZ7g/WGR5w_sJ5mI/AAAAAAAAIEE/NalYs5OSR0cZY4XrEE4Q6O96IkEyUC7MQCK4B/s1600/lighthouseslide1.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="212" src="https://3.bp.blogspot.com/-JkDlkZxBZ7g/WGR5w_sJ5mI/AAAAAAAAIEE/NalYs5OSR0cZY4XrEE4Q6O96IkEyUC7MQCK4B/s320/lighthouseslide1.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Valve's diagram of their inside-out tracking of<br />
the signal from light house beacons</td></tr>
</tbody></table>
</h3>
For the images on the display to update correctly, your head must be tracked very accurately in the real world. <b>Inside-out </b>tracking systems such as the HTC Vive compute the position of the head and hands by looking at reference points in the world from the head-mounted display.<br />
<br />
The HTC Vive specifically uses "light house" laser beacons for a kind of radar-like triangulation, but it is possible to do this based solely on cameras. The laser beacon approach scales well to many objects in the VR space and gives the lowest latency and highest accuracy of technologies available today<br />
<b><br /></b>
<b>Outside-in</b> systems such as the PSVR and Oculus Rift use a camera mounted near the computer to look at the head-mounted display. When properly calibrated, these can be very accurate and have the ability to potentially track individual fingers and whole bodies in the style of Microsoft's Kinect devices. Outside-in systems also don't require power sources for the tracked objects, which is why Oculus Rift's controllers rarely need the batteries changed--they are primarily there for transmitting button presses.<br />
<br />
Most tracking systems are augmented by accelerometers in the display and controllers, which drift over time but provide very low-latency updates of rapid or unpredictable movement.<br />
<br />
<h3>
Scales</h3>
The best VR experiences today are called "nomad VR" or "<b>room scale</b>". These allow you to walk freely around an area of at least a few square meters. Cleverly designed applications can make that area feel much larger by adjusting content to steer you back towards the center of the space.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-5QfPoi1k9PE/WGSA5DqHVTI/AAAAAAAAIFA/fOyLl9t_DpIRGBpRV9a41OCADZUv7f8FACK4B/s1600/steamvr-setup-1-680x348.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="164" src="https://2.bp.blogspot.com/-5QfPoi1k9PE/WGSA5DqHVTI/AAAAAAAAIFA/fOyLl9t_DpIRGBpRV9a41OCADZUv7f8FACK4B/s320/steamvr-setup-1-680x348.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The SteamVR tool accepts both room-scale<br />
and standing configurations</td></tr>
</tbody></table>
It is of course hard to create room-scale content because the experience designer doesn't know what size <i>your</i> room is. Content has to be designed to automatically resize or to choose the smallest common size, perhaps something like 1.5mx1.5m.<br />
<br />
<b>Standing VR</b> captures some of the telepresence of room scale by making the player stand in a single place. The player has freedom to duck, jump, lean, and turn, but not to walk. Locomotion must be accomplished by other mechanics such as teleportation or driving a vehicle.<br />
<br />
<b>Seated VR</b> is the most restrictive. The player is seated, ideally in a swivel chair to at least allow continuous rotation. Sitting can greatly reduce telepresence and limits player head motion and thus parallax. However, it is a natural fit for experiences and is the most practical to deploy...especially for mobile VR, which tends to lack good absolute tracking today and could leave the player stumbling into real-world objects if standing or walking.<br />
<br /></div>
<h2>
Specific Hardware</h2>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-L2bbk4RfLqg/WGRfP-DEwKI/AAAAAAAAICU/9ShfxYesVNU2rOt42YPF5UHdspQ3vIqtgCK4B/s1600/IGB_006055_Visore_stereoscopico_portatile_Museo_scienza_e_tecnologia_Milano.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://2.bp.blogspot.com/-L2bbk4RfLqg/WGRfP-DEwKI/AAAAAAAAICU/9ShfxYesVNU2rOt42YPF5UHdspQ3vIqtgCK4B/s320/IGB_006055_Visore_stereoscopico_portatile_Museo_scienza_e_tecnologia_Milano.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://en.wikipedia.org/wiki/Stereoscope">Brewster stereoscope</a>...circa 1870</td></tr>
</tbody></table>
The first steps on the path to Avalon VR-style technology began long ago. Stereo viewing glasses are at least 150 years old. <a href="https://en.wikipedia.org/wiki/The_Sword_of_Damocles_(virtual_reality)">Sutherland and Sproull</a> built a head-mounted computer display with positional tracking in the 1960's.<br />
<br />
Even early Holodeck VR technology <a href="http://dl.acm.org/citation.cfm?doid=129888.129892">began in the 1990</a>'s. Technology similar to today's consumer head-mounted displays has been in research labs for over a decade.<br />
<br />
However, only recently was this technology available to the general public. Economies of scale from cell phone production drove down the cost of two key technologies for virtual reality: cameras (for tracking) and high-resolution display panels (for the head-mounted display). This made it possible to build consumer VR platforms for about US$500. Simultaneously, US$200 consumer GPUs became powerful enough to drive these displays in real-time.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-5CYFrhPep5U/WGRfXyIyvJI/AAAAAAAAICc/sp2yOWzUbeYkUxlyKAKih6liEFVdVIoBACK4B/s1600/SutherlandHMD2.jpeg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://4.bp.blogspot.com/-5CYFrhPep5U/WGRfXyIyvJI/AAAAAAAAICc/sp2yOWzUbeYkUxlyKAKih6liEFVdVIoBACK4B/s320/SutherlandHMD2.jpeg" width="213" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sutherland and Sproull's "Sword of Damocles"<br />
...circa 1964</td></tr>
</tbody></table>
In 2016, the first mass-market consumer VR platforms launched. New platforms are now being announced every month, and the existing ones are rapidly being upgraded. At this moment (January 2017), the most significant platforms are:<br />
<br />
<ul>
<li><b>HTC Vive</b>, which has the best tracking and display for freedom of movement and visual immersion</li>
<li><b>Oculus Rift</b>, which has the best controllers for natural interaction</li>
<li><b>PSVR</b>, which has the best movies and games available for it</li>
<li><b>GearVR</b>, Google <b>Daydream</b>, and Google <b>cardboard</b>, which are the most affordable and the easiest to use</li>
</ul>
<br />
Expect new devices, such as midrange <a href="http://www.theverge.com/2016/10/26/13418156/microsoft-windows-10-holographic-virtual-reality-headset-announced-price">Windows 10 head mounted displays</a>, to emerge very soon. Lenovo announced their low-cost headset shortly after this article was first published.<br />
<br />
It would be reasonable to assume that every major peripheral vendor and tech company from Amazon and Apple to Dell and Razer has a VR product currently in development. Likewise, expect rapid iteration from Google, Oculus, and Valve (co-maker of the Vive) on their tracking and controllers this year and in the future.<br />
<br />
<a href="http://3.bp.blogspot.com/-r1mBk0U0Z6A/WGR87utmsxI/AAAAAAAAIEg/TqQ-VijzJdk5asKIElWqVo1XtFGbv3y0QCK4B/s1600/url.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://3.bp.blogspot.com/-r1mBk0U0Z6A/WGR87utmsxI/AAAAAAAAIEg/TqQ-VijzJdk5asKIElWqVo1XtFGbv3y0QCK4B/s400/url.jpg" /></a>Several augmented reality devices are also coming to market. <a href="https://www.microsoft.com/microsoft-hololens/en-us">Microsoft Hololens</a> is the most sophisticated that has been announced so far, but many more are coming soon, including <a href="http://castar.com/">CastAR</a>, <a href="https://www.magicleap.com/">Magic Leap</a>, <a href="https://www.metavision.com/">Meta</a>, <a href="http://www.optinvent.com/">ORA-2</a>, <a href="http://www.atheerair.com/smartglasses">AiR</a>, and <a href="https://epson.com/moverio-augmented-reality">Moverio</a>. VR is just in its infancy. AR has much farther to go, and few of these are likely to survive the technological and economic hurdles of the market, let alone provide a good consumer experience in the next year. However, they are really important for engineering and research applications.<br />
<br />
<h2>
Content</h2>
The virtual reality experiences available are rapidly expanding, with an average of one significant game or film releasing <i>per day</i>. Some are cross-platform, but most are platform-exclusives funded by the platform vendors.<br />
<br />
As a rule of thumb for the high end, right now PSVR has a great lineup of games and films, Oculus Rift is second, and HTC Vive has the smallest library of good content. Expect that to change significantly in the next six months as vendors start creating more of their own content and platform-exclusive deals expire.<br />
<br />
<h3>
Games</h3>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-Y8UuM4VnZP0/WGRo5O38pPI/AAAAAAAAIC4/1SYBOtUBWCIUHOS9pk2clYs1kpZRPKRagCK4B/s1600/Crytek_TheClimb_Announcement_Screenshot5.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://3.bp.blogspot.com/-Y8UuM4VnZP0/WGRo5O38pPI/AAAAAAAAIC4/1SYBOtUBWCIUHOS9pk2clYs1kpZRPKRagCK4B/s320/Crytek_TheClimb_Announcement_Screenshot5.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>The Climb</i> is an action-packed VR game that is<br />
extremely comfortable, self-paced, and nonviolent</td></tr>
</tbody></table>
Some fully interactive experiences that I recommend are:<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-Fc7T1NkU-WA/WGRpbMcpjVI/AAAAAAAAIDA/nooODbCjj70zcRoHzDgg7WlTT1GKKQ-owCK4B/s1600/maxresdefault.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://4.bp.blogspot.com/-Fc7T1NkU-WA/WGRpbMcpjVI/AAAAAAAAIDA/nooODbCjj70zcRoHzDgg7WlTT1GKKQ-owCK4B/s320/maxresdefault.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fans couldn't wait for Valve to make an official VR game<br />
and released their own, quite good, <i>Portal Stories</i></td></tr>
</tbody></table>
<br />
<ul>
<li><i><b>The Lab</b> -</i> Valve's free demo suite provides some of the most comfortable and immersive content available</li>
<li><i><b>The Climb </b>- </i>a beautiful and well-designed arcade interpretation of extreme rock climbing</li>
<li><b><i>Google Earth</i> </b>- fly over the entire 3D planet, from satellite height to street level. It is easy to lose track of hours here with virtual travel despite a confusing control scheme.</li>
<li><i><b>Vanishing Realms</b> </i>- a dungeon-crawling experience with some of the best movement controls and satisfying hack and slash action</li>
<li><i><b>Superhot VR</b></i> - a fully-formed, native VR experience that is also a great post-modern video game</li>
<li><b><i>Playstation VR Worlds</i> </b>- PSVR's answer to <i>The Lab</i>, which sadly is not free. However, the London Heist and Ocean Descent portions are worth the price of the whole bundle.</li>
<li><i><b>Star Wars: Battlefront X-Wing VR</b></i>: exactly what you'd hope it would be</li>
<li><i><b>Fast Action Hero</b></i> - a rapidly iterating shootout simulator available while in development</li>
<li><i><b>Portal Stories</b></i> - a free fan game set in the world of Valve's <i>Portal</i> games makes clear how great a full-budget PortalVR title could be.</li>
<li><b><i>Robo Recall</i> </b>- the trailer makes this look like yet-another-shooter, but Epic has polished the VR gameplay for two years to make the world feel completely solid and the gameplay maximally fun. Slightly limited by confusing teleportation mechanic and lousy hand tracking on the rift.</li>
<li><b><i>Budget Cuts</i> </b>- James Bond meets satire in this promising demo of an in-production title</li>
<li><i><b>AudioShield</b></i> - an aerobics class disguised as something reminiscent of <i>TRON</i></li>
</ul>
<br />
These will soon be eclipsed by many others, but right now offer the best blend of comfort (i.e., not making the player motion sick), interesting content, good controls and mechanics, and quality visuals.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-5plmooFnuqo/WGRp1QPbHXI/AAAAAAAAIDM/0NmgdxbIsR4GS24VkaFimraXHecEU5LUQCK4B/s1600/ADR1FT_08.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="188" src="https://3.bp.blogspot.com/-5plmooFnuqo/WGRp1QPbHXI/AAAAAAAAIDM/0NmgdxbIsR4GS24VkaFimraXHecEU5LUQCK4B/s320/ADR1FT_08.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>ADR1FT</i> is a great game if your stomach can handle<br />
tumbling in zero-G. Unfortunately, many people's can't. </td></tr>
</tbody></table>
There are plenty of other experiences such as <i>ADR1FT</i>, <i>EVE: Valkyrie</i>, <i>I Expect You To Die</i>, and <i>Edge of Nowhere</i> that have amazing elements, but which I can't recommend to general audiences because of some design flaw or motion sickness issue.<br />
<br />
Although there are some VR patches and fan tributes, there are some worlds that haven't yet received full VR releases which I think most gamers are eagerly hoping to see announced. For example, <i>Portal</i>, <i>Ethan Carter</i>, <i>Skyrim</i>, <i>The Witness, Star Wars, DayZ, Left 4 Dead, Mechwarrior, </i>and <i>Deus Ex</i>. It is hard to imagine that the owners of that intellectual property won't follow through on this market potential.<br />
<br />
<h3>
Films</h3>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-epcnx0QV6cc/WGRzKy1UgHI/AAAAAAAAIDw/tmPvMxXLCnUvUS1n0_wgJCV4PKqN26hBwCK4B/s1600/Penrose_Allumette-cloud-city-dock.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://2.bp.blogspot.com/-epcnx0QV6cc/WGRzKy1UgHI/AAAAAAAAIDw/tmPvMxXLCnUvUS1n0_wgJCV4PKqN26hBwCK4B/s320/Penrose_Allumette-cloud-city-dock.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Allumette</i></td></tr>
</tbody></table>
There are thousands of VR "films" available. Some of these, like <i><a href="https://storystudio.oculus.com/en-us/henry/">Henry</a></i> and <i><a href="http://store.steampowered.com/app/460850/">Allumette</a></i>, are rendered in real-time so that you can move freely in the environment by walking around. You can't affect the story or change the world, but it feels solid and three dimensional.<br />
<br />
The best two real-time non-interactive VR experiences I've had are:<br />
<ul>
<li><i><a href="https://www.viveport.com/apps/2bbf1a52-7b88-41fc-b06b-a8a5b0ee801f">Pearl </a>- </i>Google's upbeat and interesting father-daughter story, marred only by some awkward cuts and rendering dropouts during them.</li>
<li><i><a href="https://www.oculus.com/story-studio/films/dear-angelica/">Dear Angelica</a></i> - Oculus' gorgeous mother-daughter story...with somewhat buggy camera placement and the usual Rift distortion in the perphiphy.</li>
</ul>
Either would be credible as an animated short were the technology a little more robust (I'm viewing these on top of the line equipment, so the problems are clearly software).<br />
<br />
Others are "360 video"...stereo panoramas in which you can look around, but not move from the center of the world. These are the most common, because they are the easiest to produce and can be live action. <i>White Room 02B3</i> is a nice example.<br />
<br />
A few of the 360 video films allow some limited interaction, changing the story or at least its pace slightly based on your gaze. <i>Colosse</i> and <i>WILD - the experience</i> are both in this category. I think we'll see some more of this.<br />
<br />
I have yet to see a VR film that wouldn't have been better as a conventional film with faster pacing and tighter editing. However, I expect that to change. Content creators are still bravely exploring the medium, and largely have to move cautiously as they work out the conventions and capabilities of this new medium.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-pn7nop4eGKE/WGR8pzs3p0I/AAAAAAAAIEY/yhjj3JF_3SIwpn-6sPuzCTxKAHAPCMG_ACK4B/s1600/nba-next-vr.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://1.bp.blogspot.com/-pn7nop4eGKE/WGR8pzs3p0I/AAAAAAAAIEY/yhjj3JF_3SIwpn-6sPuzCTxKAHAPCMG_ACK4B/s320/nba-next-vr.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">NextVR's live VR sports viewer</td></tr>
</tbody></table>
That said, I think that the killer application of passive virtual reality content will be 360 videos of sports games and theatrical performances. This is content that is relatively cost-effective to capture compared to new narrative experiences.<br />
<br />
It is reasonable to expect audiences to pay something like US$10 to see an event in VR that they would pay US$300 per seat for live, when VR can increasingly capture a significant portion of the experience of being present. Apps such as FOX Sports VR, Lionvision VR, NextVR, and VOKE TrueVR are currently available for this purpose, and I think major networks are likely to launch their own native applications in 2017.<br />
<br />
For mobile VR, the other great killer application is watching regular non-VR films inside a virtual reality theatre. This allows you to watch any movie on your phone on a bus or plane and feel as if you were in a theatre. Several apps are available for each of the mobile VR platforms today for this experience.<br />
<br />
The same technique could theoretically be used to create virtual monitors to provide a desktop-computing experience with only a keyboard, phone, and network connection to a virtualized PC. However, software for doing so in a turnkey fashion doesn't exist--yet.<br />
<br />
<br />
<i>Part 2 of this article describes the hardware, software, and user interface challenges we face for virtual reality in 2017.</i><br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor of Computer Science at <a href="http://cs.williams.edu/">Williams College</a>, a researcher at NVIDIA, and a professional game developer. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-24717755282406522662016-12-22T13:40:00.001-08:002016-12-22T14:04:12.087-08:00Just Add VR: Cameras<i>How can a game engine retrofit virtual reality in a near seamless way onto non-VR 3D content? How should a game engine's camera controller for a VR experience combine tracked data from the real world, player motion input, and simulation data?</i><br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-pjiYQJafXqs/WFxF-fKe1DI/AAAAAAAAH8k/J-pqR1E16sQHLHzp6lPwp0wpcw3MnbpvQCK4B/s1600/Screen%2BShot%2B2016-12-22%2Bat%2B4.29.23%2BPM.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="160" src="https://2.bp.blogspot.com/-pjiYQJafXqs/WFxF-fKe1DI/AAAAAAAAH8k/J-pqR1E16sQHLHzp6lPwp0wpcw3MnbpvQCK4B/s320/Screen%2BShot%2B2016-12-22%2Bat%2B4.29.23%2BPM.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mike Mara using a G3D::VRApp game with physics</td></tr>
</tbody></table>
<br />
Virtual reality research isn't just about rendering algorithms and tracking devices. Software engineering for new kinds of input and output is always an important challenge.<div>
<br />This article describes the upcoming API and scene graph design for the <a href="http://g3d.cs.williams.edu/">G3D Innovation Engine'</a>s experimental VR library, focusing on camera design.<br />
<br />
<a name='more'></a><br />
<br />
The new design is a refinement of the <a href="http://casual-effects.blogspot.com/2015/01/adapting-camera-entity-for-virtual.html">original o</a>ne that I published about a year ago. It is similar to how Unity's VR support works and is based on many discussions with their team and other game developers. My collaborators, my students, and I use this API regularly with HTC Vive, Oculus Rift, and Oculus DK2 VR systems.<br />
<br />
The changes that we accumulated in the last year are based on experience creating many VR experiments and demos.<br />
<br />
While the G3D implementation is available to everyone and this documents it, my primary goal in this article is to explain the design process for VR developers facing similar challenges in other engines.<br />
<br />
<h2>
Traditional Graphics Cameras</h2>
The camera entity in most non-virtual reality first-person games is bolted to the player character at head or chest height. The character moves according to simulation rules based on player gamepad or keyboard input, and the camera simply moves with the character. In as much as there is a "scene graph", it is simply that the player character is in world space (or temporarily parented to a vehicle or moving platform) and the camera is parented to the character.<br />
<br />
<h2>
VR Camera Challenges</h2>
<h3>
Head Tracking (Real Movement)</h3>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-bE5jelBgcLE/WFxFD9_sRZI/AAAAAAAAH8U/ibTukZK2Kk0tfixeCcNOlUUFSGyzCU07ACK4B/s1600/1-u6KJ6Te2Zlu4Ljxyg0J-AA.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="204" src="https://2.bp.blogspot.com/-bE5jelBgcLE/WFxFD9_sRZI/AAAAAAAAH8U/ibTukZK2Kk0tfixeCcNOlUUFSGyzCU07ACK4B/s320/1-u6KJ6Te2Zlu4Ljxyg0J-AA.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Room-scale VR schematic from the HTC Vive manual</td></tr>
</tbody></table>
For virtual reality (VR) the camera scene graph is significantly more complicated. The player may be walking around a tracked volume as for Vive "nomad" or "room-scale" VR, standing in front of the machine with Oculus Rift, or seated and wearing any VR head-mounted display (HMD). In all of these cases we can consider a real-world <i>tracked volume</i> that the player's real-world head is relative to and obviously able to move without virtual constraints within.<br />
<br />
What should the VR system do when the real-world movement places the camera inside of a solid virtual object? How should the rendered player avatar respond to real-world movement to prevent the rendered avatar from being decapitated by extreme real head movement?<br />
<br />
<h3>
Virtual Movement</h3>
In-game movement may be affected by flying the virtual camera or moving a character avatar. That movement may be via teleportation, gestural input creating physics system simulation, spline-based motion tracks, or controller-based input.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-f5njUlD695I/WFxH9RMM_MI/AAAAAAAAH88/9kgsXa_kIQo3foiYB6EhK7GsFgPt3OfbgCK4B/s1600/Screen%2BShot%2B2016-12-22%2Bat%2B4.38.43%2BPM.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="172" src="https://4.bp.blogspot.com/-f5njUlD695I/WFxH9RMM_MI/AAAAAAAAH88/9kgsXa_kIQo3foiYB6EhK7GsFgPt3OfbgCK4B/s320/Screen%2BShot%2B2016-12-22%2Bat%2B4.38.43%2BPM.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Default G3D virtual movement controls</td></tr>
</tbody></table>
The net placement of the VR camera used for rendering must be based on a combination of the virtual camera's movement, the tracked real-world movement of the head, and the offset from the head to the "eye" (per-eye display).<br />
<br />
Although no current commercial VR system tracks the player's real-world body, the virtual body is frequently used for collision detection against the world to prevent players from breaking gameplay by stepping through virtual walls.<br />
<br />
Does virtual movement move the head? The tracked volume? The virtual body? How do we maintain the parenting relationships between these? What<br />
<br />
<h3>
Generality Constraints</h3>
In the rare case where you are building a single application for a dedicated demonstration installation, then you can dictates the movement mechanics and VR platform for the experience. For example, teleportation and standing VR.<br />
<br />
However, an application that must work with multiple VR platforms (the only current economically-viable strategy today) requires a flexible design that can satisfy multiple movement mechanics and VR platforms with a single scene graph. For a <i>game</i> <i>engine</i>, the VR design should ideally work even with scenes originally authored without VR support by upgrading the scene graph to support a tracked head and somehow adapting the screen-based rendering to stereo VR rendering.<br />
<br />
<h2>
A Scene Graph</h2>
<div class="separator" style="clear: both; text-align: left;">
Below is our current solution to a VR scene graph that works with legacy desktop scenes. After scene load, the G3D::VRApp automatically injects multiple dynamically-constructed objects into the scene graph:</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li><b>vrTrackedVolume</b> is an (invisible) G3D::MarkerEntity with bounds matching the tracked volume as reported by the SteamVR/OculusVR driver. It is initialized to the scene's default camera position in world space, but dropped to the nearest surface vertically downwards by a ray cast and has all roll and pitch removed.</li>
<li><b>vrHead</b> is a G3D::MarkerEntity that is a simulation child of VRTrackedVolume. That is, VRHead is in the object space of vrTrackedVolume. The position of vrHead in that object space is updated each frame based on real-time tracking data from the VR driver.</li>
<li><b>vrEye[0]</b> and <b>vrEye[1]</b> are G3D::Cameras that are simulation children of vrHead using offsets queried from the VR driver. They have projection matrices defined by the VR driver and all other parameters copied from the scene's default camera. </li>
<li><b>vrController[</b>0...<i>n</i> - 1<b>] </b>are G3D::MarkerEntitys representing the tracked non-head objects, which are the game controllers/"wands" under current VR systems. These are simulation children of vrTrackedVolume.</li>
<li><b>debugCamera</b> is a G3D::Camera which is always inserted by any G3D::GApp. G3D::VRApp retains this behavior.</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-lFqek5mQi4w/WFw6MAud7fI/AAAAAAAAH7w/3DZX7LxFn8gQuoqONJUZNDzAkwYpqY-HACLcB/s1600/IMG_20161222_153343.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="166" src="https://3.bp.blogspot.com/-lFqek5mQi4w/WFw6MAud7fI/AAAAAAAAH7w/3DZX7LxFn8gQuoqONJUZNDzAkwYpqY-HACLcB/s400/IMG_20161222_153343.jpg" width="400" /></a></div>
<h3>
Motion</h3>
The default camera manipulator in G3D::GApp is a G3D::FirstPersonManipulator that interprets gamepad or mouse + keyboard input as moving the debugCamera when it is set as the G3D::GApp::activeCamera. G3D::VRApp retains this behavior, but also moves the vrTrackedVolume to move with the defaultCamera when it is active.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-jhgB8-i3CAA/WFxE31tWAdI/AAAAAAAAH8M/NyOYIOxpMm8PeGWmMUXF_KEFStXw7ClVgCLcB/s1600/17543-b90570d44a91a75b26d6199f0712b20e.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="178" src="https://3.bp.blogspot.com/-jhgB8-i3CAA/WFxE31tWAdI/AAAAAAAAH8M/NyOYIOxpMm8PeGWmMUXF_KEFStXw7ClVgCLcB/s320/17543-b90570d44a91a75b26d6199f0712b20e.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Prototype new controllers for HTC Vive</td></tr>
</tbody></table>
<i>This means that gamepad input corresponding to virtual movement moves the physical room's reference frame relative to the virtual world. It does not move the virtual head explicitly.</i><br />
<br />
The vrHead's <i>world space</i> position changes due to virtual movement because it is a child of the vrTrackedVolume. If you want to test for collisions, you have to do so based on a body inferred from the vrHead or the vrHead itself, <i>not</i> from the vrTrackedVolume that is creating the motion.<br />
<br />
Pressing the "B" button on a game pad, middle mouse button, or touch pad on Vive teleports the vrTrackedVolume a position in front and below the current camera based on a ray cast.<br />
<br />
This default behavior is useful for debugging and demos, and allows importing any G3D scene (or retroactively substituting VRApp for GApp as a base class for many programs). When an experience has a specific movement mechanic that is tailored to its simulation and content, that experience can replace this default manipulator with its own.<br />
<br />
I'm debating whether the default manipulator should apply rigid body physics or ray casts to prevent the vrHead from moving through walls. My current inclination is not to because the default behavior is typically used for debugging and full control is best in that situation. However, it might be helpful to provide a built-in manipulator with this behavior that developers can easily switch to. I like the <a href="http://store.steampowered.com/app/322770/">Vanishing Realms</a> mechanic of pushing the vrTrackedVolume <i>backwards</i> when the player's real or virtual motion moves the vrHead inside of a virtual object, instead of the <a href="http://www.theclimbgame.com/">The Climb</a> solution of disconcertingly blacking out the screen.<br />
<br />
<h3>
Rendering</h3>
<div>
The VRApp::onGraphics method automatically runs the GApp::onGraphics3D code <i>twice </i>every frame, temporarily switching out the active camera for vrEye[0] and then for vrEye[1]. VRApp maintains two HDR framebuffers, two GBuffers, and two post-processing pipelines to seamlessly support this behavior. G3D's shadow maps are always memoized if shadow casters and lights have not moved between frames, so shadow maps are only rendered once and then reused for both eyes automatically.</div>
<div>
<br /></div>
<div>
Because of this design, most G3D::GApp subclasses can be switched to G3D::VRApp subclasses and even custom rendering that wasn't intended for VR will still work. Two great examples are the CPU ray tracer and GPU ray marcher, which use radically different rendering algorithms than the default GPU rasterization deferred shading pipeline.</div>
<div>
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-j5wPjpwHnUM/WFxHDghaxdI/AAAAAAAAH8w/br8bUdCZbrUEoFgXq-NQiKN-ifTkxp8GQCK4B/s1600/maxresdefault.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://3.bp.blogspot.com/-j5wPjpwHnUM/WFxHDghaxdI/AAAAAAAAH8w/br8bUdCZbrUEoFgXq-NQiKN-ifTkxp8GQCK4B/s320/maxresdefault.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Limited field of view proposed by <a href="http://www.cs.columbia.edu/2016/combating-vr-sickness/images/combating-vr-sickness.pdf">Fernandes and Feiner</a></td></tr>
</tbody></table>
<div>
When the vrTrackedVolume is in non-teleportation motion due to controller input, a post-process erases portions of the screen outside of an artificially-narrowed field of view. I adopted this effect because it almost completely eliminates motion sickness for me during camera motion in <a href="https://vr.google.com/earth/">Google Earth</a> and <a href="http://store.steampowered.com/app/520010/">Climbey</a>, in agreement with scientific results by <a href="http://www.cs.columbia.edu/2016/combating-vr-sickness/images/combating-vr-sickness.pdf">Fernandes and Feiner</a>.</div>
<div>
<br /></div>
<div>
When developing a non-VR title, it is common to design effects by letting the frame rate fall below target in prototyping and then optimize it back up when the result is visually satisfactory. For VR, that's not acceptable. The developers will get sick if the program is not always hitting the target frame rate and latency. It is also very hard to judge the quality of visuals in VR when not at full frame rate.</div>
<div>
<br /></div>
<div>
To ensure that the experience hits its performance goals even while in development, G3D::VRApp automatically scales rendering quality. This behavior can of course be tuned and disabled if something in the scaled algorithms is what is being developed. The scaling monitors frame duration over successive periods of ten frames and adjusts the following when frame duration is too long:</div>
<div>
<ol>
<li>Motion blur and depth of field quality and radius</li>
<li>Bloom radius</li>
<li>Ambient occlusion radius and quality</li>
<li>Rendering resolution</li>
<li>Stereo (VRApp automatically drops to monocular vision as a last resort to attempt to halve frame duration)</li>
</ol>
<h2>
Virtual Virtual Reality</h2>
</div>
<div>
Despite all of the effort of making G3D::VRApp able to automatically adapt non-VR content and applications to VR, we also have to handle the reverse. A G3D::VRApp that is run on a machine <i>without </i>an HMD needs to emulate an HMD in order to make development easier...sometimes we don't have enough HMDs for everyone on the team, or don't want to use an HMD when debugging a non-graphics interaction or simulation issue.</div>
<div>
<br /></div>
<div>
It is possible to configure a "null driver" under SteamVR, but this is complicated and error prone. It (unfortunately) does not appear to be an officially supported part of SteamVR. We're currently working on a design for emulating a HMD (and tracked controllers, even when they don't exist) but it is proving surprisingly hard to implement in an elegant manner. The two obvious alternatives are emulating the entire SteamVR API or having two complete paths for every location that calls into it. </div>
<div>
<br /></div>
<div>
Emulating SteamVR is tricky both because that API is constantly evolving and because SteamVR objects expect to be passed to one another's methods and support features not exposed in the public API. Duplicating all control paths is awkward because it spreads the emulation code across the entire VRApp.</div>
<div>
<br /></div>
<div>
An elegant solution might be to wrap SteamVR with a very similar API and then build an emulation subclass. Extra abstraction layers tend to just increase maintenance cost and lead to code bloat, but in this case it appears the most attractive solution...unless we can convince the SteamVR team to just provide native HMD and controller emulation!</div>
<div>
<br /></div>
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor of Computer Science at <a href="http://cs.williams.edu/">Williams College</a>, visiting professor at NVIDIA Research, and a professional game developer. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
</div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-38574449261371806632016-12-21T08:04:00.001-08:002017-01-05T02:13:37.581-08:00Obscure and Intelligent Science Fiction Films and Television<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ZyxP5Ab7rFM/VKYf9NtC2eI/AAAAAAAACKI/k4C7qmEVeVc/s1600/Posters-the-sarah-connor-chronicles-633733_1057_1563.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://4.bp.blogspot.com/-ZyxP5Ab7rFM/VKYf9NtC2eI/AAAAAAAACKI/k4C7qmEVeVc/s1600/Posters-the-sarah-connor-chronicles-633733_1057_1563.jpg" width="216" /></a></div>
History and drama fetishize only slight variations of the one possible world that we already know. There are infinite worlds that <i>could be</i>. I want to explore those and enjoy doing so through science fiction.<br />
<br />
Entertainment is its own justification, and I'm the first in line for many films that are "merely" entertaining. But as for any genre or setting, a sliver of science fiction goes far beyond popular art. The works that do this are worth simultaneous contemplation for their themes, admiration of their production techniques, and satisfaction of the emotional ride.<br />
<br />
<a name='more'></a><br /><br />
Science fiction can move us outside our biases through analogy. For example, the <i>Star Trek</i> family of television shows dissected contemporary politics and ethics through corresponding alien civilizations. The <i>Alien</i> films explored gender and power inside horror and action frameworks.<br />
<br />
Science fiction can explore the implications of technological advances by following a thread forward to its logical conclusion. A single discovery in the right environment is the flapping of a butterfly's wings that changes everything<span style="background-color: white; color: #1c2336; font-family: "palatino" , "palatino linotype" , "georgia" , "times" , "times new roman" , serif; font-size: 15px; line-height: 18px;">—</span>gunpowder, antibiotics, relativity, the transistor<span style="background-color: white; color: #1c2336; font-family: "palatino" , "palatino linotype" , "georgia" , "times" , "times new roman" , serif; font-size: 15px; line-height: 18px;">—</span>science fiction posits the impact of the next flap, perhaps anti-gravity, efficient fusion, faster-than light travel, or artificial intelligence.<br />
<br />
Science fiction can also explore complex interactions in real science or technology by disrupting them. It can make us feel fragile or invincible by revealing possibilities.<br />
<br />
There are many lists of great science fiction films and many debates about them. Instead of contributing another comprehensive list, this article summarizes some gems that stand out for their respect for the material and audience, but are less well known than the big hits due to twists of fate and marketing.<br />
<br />
Tastes vary. I focus on those works that I personally enjoyed and expect my students to as well, at the expense of some other critically-recognized films like <i>Alphaville </i>and <i>Forbidden Planet</i> that may be less exciting for a modern viewer. Of course, there are some films that others consider science fiction masterpieces that I don't see the objective value of, such as <i>Stalker </i>and <i>Primer</i>. That's the nature of art and criticism. Moreover, you've probably seen some obscure films that I've missed, so I welcome suggestions of what is missing from this list. My definition of "obscure" is of course local. These are films and television shows that weren't well-known in my circle of friends and colleagues, but you may travel in different circles.<br />
<br />
<br />
<h2>
<i>Things to Come</i></h2>
<div>
(1936 film, director: <span style="font-family: inherit;">William Cameron Menzies, writer: H. G. Wells</span>)<br />
<br />
<a href="http://1.bp.blogspot.com/-Gk8sLI7b1GI/VKYjBY0DDoI/AAAAAAAACK8/NhMQDHeXGeM/s1600/still177.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="153" src="https://1.bp.blogspot.com/-Gk8sLI7b1GI/VKYjBY0DDoI/AAAAAAAACK8/NhMQDHeXGeM/s1600/still177.jpg" width="200" /></a>Wells wrote "The Story of the Days to Come" in 1897, extended it in 1933 as "The Shape of Things to Come", and then wrote the definitive version <i>Things to Come</i> as a film. He accurately predicts the outbreak of WWII due to megalomaniac dictators, the rise and significance of air power and chemical weapons, and then shows a preview of a quasi-utopian future society arising from the ashes.<br />
<br />
This is a sprawling epic that moves through several genres, settings, and themes. It would have felt fresh and of its time if produced in 1960<span style="background-color: white; color: #1c2336; font-family: "palatino" , "palatino linotype" , "georgia" , "times" , "times new roman" , serif; font-size: 15px; line-height: 18px;">—</span>that it was actually made in 1936 is mind-blowing.<br />
<br /></div>
<h2>
<i>District 9</i></h2>
(2009, director: Niell Blomkamp, written by Niell Blomkamp and Terri Tatchell)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-6DGkapnoU0s/VKYilatmkTI/AAAAAAAACK0/lqjnGcBAfE8/s1600/district-9_prawn.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="85" src="https://3.bp.blogspot.com/-6DGkapnoU0s/VKYilatmkTI/AAAAAAAACK0/lqjnGcBAfE8/s1600/district-9_prawn.jpg" width="200" /></a></div>
This movie careens between generic ideas like political-media satire and apartheid analogy in a structure that is dangerously close to that of the offensive white savior epics such as <i>Dances with Wolves</i>, <i>Avatar</i>, <i>Last of the Mohicans</i>, <i>Tarzan</i>, <i>Mississippi Burning</i>, <i>The Last Samurai</i>. It seems like a recipe for low-budget, derivative disaster.<br />
<br />
However, <i>District 9</i> is simultaneously funny, uncomfortable, and satisfying as an action film. The humor and criticism are sharp. The plot and characters often contradict expectations, and the mixture of well-executed special effects beside laughably bad ones is clearly intentional: Blomkamp knows when to mock his own production and when to awe the audience.<br />
<br />
Blomkamp's films since have unfortunately failed to live up to this spectacular debut.<br />
<br />
<br />
<h2>
<i>Ghost in the Shell</i></h2>
(1995, director: Mamoru Oshii, written by Kazunori Ito)<br />
<br />
<a href="http://1.bp.blogspot.com/-Pi1tUlL2rNg/VKYnUUx3CGI/AAAAAAAACLU/TeAHe6JGmgg/s1600/ghostintheshellbdcap6_original.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="112" src="https://1.bp.blogspot.com/-Pi1tUlL2rNg/VKYnUUx3CGI/AAAAAAAACLU/TeAHe6JGmgg/s1600/ghostintheshellbdcap6_original.jpg" width="200" /></a>The original cut of <i>Ghost in the Shell</i> revolutionized computer animation by combining 2D and 3D techniques in a cool, cyber-noir setting with big ideas about identity, bodies, and minds...all working as an analogy for Japan grappling with its new technology-heavy identity on the international stage. Admittedly, it is only obscure outside of Japan.<br />
<br />
The 2.0 version remasters the 3D shots and some special effects. Yet the original remains the best version of a film that set the tone and look for much of the early 2000's science fiction including <i>The Matrix</i>. It presents a heady mix of detective fiction, action scenes, and deeper themes of sex, gender, identity, and the body. If you're new to the art style, consider that <i>Ghost in the Shell </i>and <i>Akira</i> are often considered the two front-runners for the best anime ever produced and start with both of them.<br />
<br />
<br />
<h2>
<i>Torchwood: Children of Earth</i></h2>
(2009 television series, directed by Euros Lyn, written by Russell T Davies, John Fay, and James Moran, originally broadcast on BBC One)<br />
<br />
<a href="http://2.bp.blogspot.com/-Co86eiYZ28E/V7w8YRo63II/AAAAAAAAFjQ/XHFcZ7MNEFMy742OfHoJ8jIUPuH2lftHwCK4B/s1600/16j.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="114" src="https://2.bp.blogspot.com/-Co86eiYZ28E/V7w8YRo63II/AAAAAAAAFjQ/XHFcZ7MNEFMy742OfHoJ8jIUPuH2lftHwCK4B/s200/16j.jpg" width="200" /></a><i>Torchwood </i>began as a campy, smutty spinoff of Doctor Who with a monster-of-the-week setup. It was <i>X-files</i> meets <i>Barbarella </i>and not something one publicly admitted watching.<br />
<br />
In season 3, <i>Torchwood</i> transcended its fun-but-lightweight roots. <i>Children of Earth</i> comprised five 60-minute episodes telling a single story. In it, extra terrestrials give the British government assistance with an epidemic in exchange for 10% of the world's children at a future date; now they've come to collect. The show explores human potential and legacy, parenthood, mortality, notions of greater good, government overreach, and notably lets a bisexual lead character be simply a character, and an unapologetic one at that.<br />
<br />
<br />
<h2>
<i>Torchwood: Miracle Day</i></h2>
<div>
(2011 television series, various directors and writers, head writer Russell T Davies, originally broadcast on BBC One and Starz)<br />
<br />
<a href="http://2.bp.blogspot.com/-KUlBlEcYUAM/VKYhWduN0sI/AAAAAAAACKU/WSJnqabV_60/s1600/TW%2B05.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="133" src="https://2.bp.blogspot.com/-KUlBlEcYUAM/VKYhWduN0sI/AAAAAAAACKU/WSJnqabV_60/s1600/TW%2B05.jpg" width="200" /></a>Many great science fiction novels, such as those of Ursula K. LeGuin, make one small change from reality and then use how that changes the universe that to look back at ourselves with new eyes in diverse topics. <i>Miracle Day </i>is in this tradition. It asks, "What if no-one died anymore?" but until the last episode, wisely ignores addressing the MacGuffin of <i>what caused </i>this change.<br />
<br />
Instead, it makes a hard science-fiction exploration of what we mean by "death" and all of the issues around population, politics, health care, and death. The biology and medicine facts are carefully researched, reminiscent of Michael Crichton's work. Even the computer science elements of hacking and tracing hold up. This realism sets the stage for an authentic exploration of state abuse of authority, dehumanization, public health, healthcare economics, ethics, medicine, death, grief, and triage. It also addresses major issues such as accountability and response to whistleblowers.<br />
<br />
Except for the strangely terrible fifth episode, this "season" of the series is consistently good, although it is obvious that there are different directors and writers for each episode. The fifth episode makes a tone-deaf analogy to the Nazi holocaust and jerks the characters around in illogical and out-of-character ways. Fortunately, it is skippable; the plot points are re-covered later. A properly nuanced version of the same theme is presented in the ninth episode. There, we see the "good guys" struggling with ethics in the face of pragmatism and state-sanctioned murder.<br />
<br />
Many of the characters are dynamic and change their ethos and actions over the course of the series. One of the most complex is Oswald Danes, who is played by Bill Pullman. Danes is a confessed pedophile, rapist, and murderer who is first presented as completely reprehensible. Throughout the series, we're constantly forced to face that he is intelligent and capable of compassion and ethical action, and asked whether he is ever deserving of compassion as well.<br />
<br />
<br />
<h2>
<i>Edge of Tomorrow / Die Another Day</i></h2>
(2014, directed by Doug Liman, written by Christopher McQuarrie, Jez Butterworth, and John-Henry Butterworth)<br />
<br />
<a href="http://4.bp.blogspot.com/-VS8ufgp5FxA/VrC8XXCKvNI/AAAAAAAADC8/qAF_jZdTTLM/s1600/ct-edge-of-tomorrow-review-20140605-001.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="134" src="https://4.bp.blogspot.com/-VS8ufgp5FxA/VrC8XXCKvNI/AAAAAAAADC8/qAF_jZdTTLM/s320/ct-edge-of-tomorrow-review-20140605-001.jpg" width="320" /></a>You may be surprised to find a Tom Cruise vehicle labeled "obscure and intelligent." Yet, this movie is a clever <i>Starship Troopers</i> meets <i>Groundhog Day</i> mashup in setting and plot that also brings new ideas to the mix.<br />
<br />
There is some great acting all around and really clever direction. The ending is weak, but the opening is brilliant. A completely botched marketing campaign, which included renaming the film half-way through its release, means that a surprising number of people are unaware of this film despite its brand-name star.<br />
<br />
I suspect that marketers simply don't know how to handle Cruise in science fiction: <i>Oblivion</i> and <i>Vanilla Sky </i>were marketed as space opera and romantic drama respectively, but are also (relatively) intelligent science fiction.<br />
<br />
<br /></div>
<div>
<h2>
<i>New Rose Hotel</i></h2>
(1998, director: Abel Ferrara, based on a story by William Gibson)<br />
<br />
Christopher Walken, Willem Dafoe, and a script by William Gibson: of course the movie is sexy, violent, and plays like a perpetual hallucination. Although the cinematography is very much of its time (the 1990's) and the script is inscrutable, the acting and atmosphere are sharp.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-iM_8IdtW6_w/VdkwjPU258I/AAAAAAAAC1I/9bCUDxJG6CE/s1600/8wci93.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="174" src="https://3.bp.blogspot.com/-iM_8IdtW6_w/VdkwjPU258I/AAAAAAAAC1I/9bCUDxJG6CE/s320/8wci93.jpg" width="320" /></a></div>
<i>New Rose Hotel</i> invokes both the good and the bad of 1990's film aesthetics: reverberating synthesizers on soundtrack; minute-long shots; mid-range, moving cameras; lots of black vs. red, green, or blue composition; and low-fidelity video intercuts. Imagine <i>The Conversation</i> meets <i>To Live and Die in LA. </i>You can decide which of those elements are worth keeping indefinitely in movies and which have become a joke.<br />
<br />
Although she lacks the name recognition of the male leads, Asia Argento carries the film's most intense physical scenes (often, half naked but still empowered). She's cast as a sexual attractant for Dafoe's character, but the real sexual chemistry is between nominally-straight characters played by Walken and Dafoe. Their half-improvised conversations are more tensely erotic than the numerous heterosexual soft-core sex scenes.<br />
<i><br /></i>
One caveat on this recommendation is that you could either stop <i>or</i> start watching at the one-hour mark without missing anything. The entire film repeats in flashbacks after that point, with a few tiny new scenes interjected. I'd be satisfied with either treatment but find both together unnecessary.<br />
<br />
<br /></div>
<h2>
<i>Total Recall 2070</i></h2>
<div>
(1999 television series, <a href="http://www.imdb.com/title/tt0159920/fullcredits">various</a> directors and writers for twenty-one 44-minute episodes, plus a pilot which doesn't have plot continuity.)<br />
<br />
<a href="http://2.bp.blogspot.com/-FslcOImAFj0/VKYmanCZgpI/AAAAAAAACLI/jWIgEZVhg8I/s1600/Total-Recall-2070-Machine-Dreams-1999-ScreenShot-21.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="152" src="https://2.bp.blogspot.com/-FslcOImAFj0/VKYmanCZgpI/AAAAAAAACLI/jWIgEZVhg8I/s1600/Total-Recall-2070-Machine-Dreams-1999-ScreenShot-21.jpg" width="200" /></a>This is effectively an extension of the <i>Blade Runner</i> film, with little relation to the 1990 or 2012 <i>Total Recall</i> films or the Philip K. Dick stories behind all of these. That's for the best, because <i>Total Recall 2070</i> sets a consistent tone from <i>Blade Runner</i> using themes and plots from Asimov's Robot novels (especially <i>Caves of Steel</i>)...and then runs with it at top speed for its one glorious season.<br />
<br />
The series is brooding, dark, and philosophical. The leads are strong. The cinematography is dutiful to its noir inspirations, if not particularly inspired itself. The series completes its story arc with a satisfying ending. I wish there had been more seasons, but am grateful this was self-contained instead of left unfinished in the manner of <i>Firefly.</i> </div>
<div>
<br />
<br />
<h2>
<i>Galaxy Quest</i></h2>
</div>
<div>
(1999, director: Dean Parisot, writers: David Howard and Robert Gordon)</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-2xZM9KOE7ek/V7w-Rq4V2LI/AAAAAAAAFjo/T20bmIYaxoMSMxk0ZB22qc5Rj2h6dn5pgCLcB/s1600/galaxy_quest2.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="68" src="https://2.bp.blogspot.com/-2xZM9KOE7ek/V7w-Rq4V2LI/AAAAAAAAFjo/T20bmIYaxoMSMxk0ZB22qc5Rj2h6dn5pgCLcB/s200/galaxy_quest2.jpg" width="200" /></a></div>
<div>
This parody is actually the best <i>Star Trek</i> movie--and I say that as a convention-attending fan of <i>Star Trek</i>. <i>Galaxy Quest</i> embraces and excels at the Roddenberry's utopianism and fantastic, relatively hard-science future. It also satirizes Roddenberry's bizarre and often sexist designs, the mixed quality of <i>Star Trek</i> writing, and the now-classic tales of how <i>Star Trek</i> has affected its actors. </div>
<div>
<br /></div>
<div>
Since the series and movies never allowed themselves this self-reflection (in the way that, say, <i>Doctor Who</i> has), the parody excels: as enjoyable film criticism and as an enjoyable film in its own right. <i>Guardians of the Galaxy</i> nearly (and I think, accidentally) pulls off the same for <i>Star Wars, </i>but the writing isn't as sharp and it lacks the explicit jabs at its implicit source material. </div>
<div>
<i><br /></i></div>
<h2>
<i>Terminator: The Sarah Connor Chronicles</i></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-gb3aO10k8IU/VKYhraKLYSI/AAAAAAAACKc/WauUVm69-6M/s1600/terminator-the-sarah-connor-chronicles-season-1-3-the-turk-terminators1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="96" src="https://4.bp.blogspot.com/-gb3aO10k8IU/VKYhraKLYSI/AAAAAAAACKc/WauUVm69-6M/s1600/terminator-the-sarah-connor-chronicles-season-1-3-the-turk-terminators1.jpg" width="200" /></a></div>
<div style="text-align: left;">
(2008-2009 television series, <a href="http://www.imdb.com/title/tt0851851/fullcredits?ref_=tt_ov_st_sm">various</a> directors and writers for 31 episodes, including James Cameron credited on all episodes)</div>
<br />
<div>
<i><br /></i>
Like <i>Alien </i>and <i>Aliens</i>, <i>Terminator </i>and<i> Terminator 2</i> were both great films in different genres that were followed by a series of hit-or-miss lesser films. <i>The Sarah Connor Chronicles</i> follows <i>Terminator 2</i> in the chronology and canon, and wisely ignores all of the other films in the series. Given more space to work than a single film, this series explores the core themes of the films with considered depth.<br />
<br />
Most robot and cyborg films are thematically about being human. <i>The Sarah Connor Chronicles</i> evaluates ethics, love, responsibility, and identity. It is my favorite entry in the series, sitting somewhere between T1 and T2 in terms of tone. Most episodes are 30 minutes of philosophy and character development...cumulating with ten minutes of Summer Glau throwing killer robots through walls so that Lena Heady can machine gun them down.<br />
<br />
It was so good that it obviously had to be cancelled...regrettably, before Amazon and Netflix were picking up intense shows that didn't work well on broadcast TV.<br />
<br /></div>
<h2>
<i>Metropolis</i></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-nbo2ji4LErA/VKYh5q4xDdI/AAAAAAAACKk/l2fMbQeHWkQ/s1600/metropolis-lang-3.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="137" src="https://1.bp.blogspot.com/-nbo2ji4LErA/VKYh5q4xDdI/AAAAAAAACKk/l2fMbQeHWkQ/s1600/metropolis-lang-3.jpg" width="200" /></a></div>
(1927, director: Fritz Lang, writer: Thea von Harbou)<br />
<br /></div>
<div>
Long before the cold war, this film predicts increased disparity under capitalism, communist revolution by workers, and violent turn of artificial intelligence. Reflects on the ultimate outcome of the past century that opened with the Industrial Revolution and French Revolution and embraces the ideas of Karl Marx, which were then rising.</div>
<div>
<br /></div>
<div>
The film was cut severely by the publisher to bring down the running time and satisfy Weimar censors in 1927. The most complete version available today was released in 2010 and based on a recently discovered print.<br />
<br />
Lang is one of the earliest directors with a strong visual language and this film influenced nearly every science fiction film that followed. Yet even without that, it stands on its own today as a relevant and effective film.</div>
<div>
<br />
<br /></div>
<h2>
<i>
Brazil</i></h2>
<div>
<div class="separator" style="clear: both; text-align: left;">
(1985, directed by Terry Gilliam, written by Terry Gilliam, Charles McKeown, and Tom Stoppard)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://1.bp.blogspot.com/-r9_1n-hojs0/VKYiU8BiNnI/AAAAAAAACKs/-E7AhDa66cg/s1600/Brazil_Lowry1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="107" src="https://1.bp.blogspot.com/-r9_1n-hojs0/VKYiU8BiNnI/AAAAAAAACKs/-E7AhDa66cg/s1600/Brazil_Lowry1.jpg" width="200" /></a>I think this is the best science fiction film ever made, and it is sadly unknown to most science fiction fans. Gilliam (with his frequent collaborator McKeown) and Stoppard can't help but produce sharp, dark comedy. The strength of the movie is in its contrasts: absurdist humor vs. deadly series themes, bright colors vs. horrifying sequences, overacting vs. Price's subtlety.</div>
<div class="separator" style="clear: both; text-align: left;">
Part of what makes the movie powerful is its resonance with reality. While the sets and performances are over the top, the oppressive and dehumanizing future it depicts is unquestionably our present. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<h2>
<i>La Jetée</i></h2>
</div>
<div>
<a href="http://2.bp.blogspot.com/-jGETjvWQd64/VyX_7mtcaMI/AAAAAAAADyg/vcimPxo45yIe7JfOwusH7htFwB-N91k5wCK4B/s1600/P_original.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="180" src="https://2.bp.blogspot.com/-jGETjvWQd64/VyX_7mtcaMI/AAAAAAAADyg/vcimPxo45yIe7JfOwusH7htFwB-N91k5wCK4B/s320/P_original.jpg" width="320" /></a>(1962, written and directed by Chris Marker)<br />
<br />
You need to watch the movie. Any description sounds so pretentious that it is hard to believe that this works, but it does. Plus, <i>La Jet</i><i>é</i><i>e</i> it is short, so if even you disagree with me, then you haven't lost much time.<br />
<br />
This is a photo essay plus poem as a film, consisting almost entirely of individual black and white shots coupled with indecipherable dialog and a voiceover. It was hugely influential on the genre, to the extent that nearly any time travel plot references <i>La Jet</i><i>é</i><i>e</i> (sometimes unknowingly). <i>Twelve Monkeys</i>, <i>The Time Traveller's Wife</i>, several <i>Doctor Who</i> story arcs, and <i>Primer </i>are examples of ideas first presented so powerfully by Marker.<br />
<br />
It helps a lot that Marker's style is not affectation but due to budget limitations. It also helps that the voiceover prose poem is really good, as are the individual photographs.<br />
<br /></div>
<h2>
<i>Twelve Monkeys</i></h2>
</div>
<div>
<a href="http://1.bp.blogspot.com/-q16kyMVc2j4/VyYAOekPsYI/AAAAAAAADyo/6YnQMttD4Y0gyNDQzDnGCEeErO-cmKvCgCK4B/s1600/leadImage_large.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="218" src="https://1.bp.blogspot.com/-q16kyMVc2j4/VyYAOekPsYI/AAAAAAAADyo/6YnQMttD4Y0gyNDQzDnGCEeErO-cmKvCgCK4B/s320/leadImage_large.jpg" width="320" /></a>(1995, directed by Terry Gilliam, written by David and Janet Peoples)</div>
<div>
<br /></div>
<div>
Gilliam's take on the sci-fi classic <i>La Jet</i><i>é</i><i>e</i>. He aims to reinterpret the ideas rather than directly adapt it, although the nature of the reinterpretation is inspired. Marker's natural history museum becomes safari animals wandering through the streets of New York, and these visuals in turn clearly inspired later <i>Crysis </i>and <i>Last of Us </i>video games.<br />
<br />
Marker, Gilliam, Brad Pitt, and Bruce Willis is a very odd group, and for me at least, it works. The movie is dark, although less so than <i>Brazil</i>, and has something of the sense of the writers, director, and actors all competing to see who can act more insane. Gilliam keeps the whole together and the time paradoxes and questions of sanity make this a thinking-person's sci-fi romp.<br />
<br />
Now that there is a television series, this movie may be less obscure than it once was.<br />
<br /></div>
<h2>
<i>
eXistenZ</i></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-CWIkqlApNAI/VrC_jjkESQI/AAAAAAAADDI/RKQYiAtnnMU/s1600/201507_cronenburg_existenz_hero1_970.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="179" src="https://3.bp.blogspot.com/-CWIkqlApNAI/VrC_jjkESQI/AAAAAAAADDI/RKQYiAtnnMU/s320/201507_cronenburg_existenz_hero1_970.jpg" width="320" /></a></div>
<div>
(1999, written and directed by David Cronenberg)<br />
<i><br /></i>
<i>eXistenZ </i>and <i>The Matrix</i> are both films heavily featuring virtual reality that were released in 1999. <i>The Matrix </i>deserves its success and fame<span style="background-color: #f0e7db; color: #1c2336; font-family: "palatino" , "palatino linotype" , "georgia" , "times" , "times new roman" , serif; font-size: 15px; line-height: 18px;">—</span>not since <i>Star Wars</i> (1977) has a film elevated visual effects and integrated cultural and genre cues so masterfully (and frankly, the plot and characters of <i>The Matrix</i> hew pretty close to those of <i>Star Wars</i>). <i>The Matrix</i> invented the modern science fiction and action blockbuster. </div>
<div>
<br /></div>
<div>
So, what happened to <i>eXistenZ</i>? Well, Cronenberg doesn't make blockbusters. He makes mind-busters. <i>eXistenZ</i> probes deeply into our relationship with entertainment technology. The obligatory game-within-a-game setup is present, but handled more deftly than <i>Avalon</i> and <i>Inception</i> later would, but the film is about bodies and/vs. minds, seduction by entertainment, acting and roles, and human relationships mediated by technology.</div>
<div>
<br /></div>
<div>
The film is weird, disgusting, and sexy. It pushes emotional buttons but also wears its artifice visibly so that we're prompted to engage the ideas and not believe in the film. The biology-based technology is a refreshing spin, and the reliance on mostly practical effects was a wise choice for keeping the film tactile.</div>
<div>
<br />
<br /></div>
<h2>
<i>Moon</i></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-OrKswHeeQSs/WFrIW-vknSI/AAAAAAAAH6g/ubCd_itfdPsZcBTeUotj60ARThJXjSZUACLcB/s1600/moon-28.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="133" src="https://3.bp.blogspot.com/-OrKswHeeQSs/WFrIW-vknSI/AAAAAAAAH6g/ubCd_itfdPsZcBTeUotj60ARThJXjSZUACLcB/s320/moon-28.jpg" width="320" /></a></div>
(2009, dir: Duncan Jones, screenwriter: Nathan Parker)<br />
<br /></div>
<div>
<a href="http://1.bp.blogspot.com/-x0cNySZTYe8/V7xBETNh4HI/AAAAAAAAFj4/IbjDMgJaPUwfHhuSbSPfMy5zj6epXll7QCK4B/s1600/Moon-Rescue.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a><i>Moon</i> is a hard-as-rocks sci-fi thriller that can't be described much without spoilers; it is in the vein of Arthur C. Clark or Robert Heinlein, but with the Niven-Pournell dark edge from <i>A Mote in God's Eye</i>.<br />
<br />
I like that the cinematography is intentionally three decades out of style. If you enjoyed <i>The Martian </i>and <i>2001</i>, then put this at the top of your list.<br />
<br />
<br /></div>
<div>
<h2>
<i>Cloud Atlas</i></h2>
<h2>
<a href="http://4.bp.blogspot.com/-e2OmGbe-eNM/VyYA8zvINcI/AAAAAAAADy0/qVTiDogGaiUdR7AKkF1ptlsJJZNJ_k2xgCK4B/s1600/sonmi-451-and-hae-joo-chang-scaling-neo-soul-2144-cloud-atlas.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="145" src="https://4.bp.blogspot.com/-e2OmGbe-eNM/VyYA8zvINcI/AAAAAAAADy0/qVTiDogGaiUdR7AKkF1ptlsJJZNJ_k2xgCK4B/s320/sonmi-451-and-hae-joo-chang-scaling-neo-soul-2144-cloud-atlas.jpg" width="320" /></a></h2>
</div>
<div>
(2012, Lana Wachowski, Tom Tykwer, and Andy Wachowski, 171 minutes)<br />
<br />
<i>Cloud Atlas</i> is the Wachowskis' masterwork. It is inspired by a similar, great novel by David Mitchell, but Tykwer and the Watchowski siblings reworked it completely for the film, writing and directing as a collective.<br />
<br />
This is <i>every</i> movie. It takes some great actors and great visual effects, and then proceeds to follow an emotional and thematic thread instead of a narrative one through several times, genres, and characters. There's a screwball comedy, a sea going epic, a darkly comic science-fiction film, and action film, a touching drama...all mixed up with characters who are immortal souls instead of people. Some of the cinematography and effects are gorgeous and some are intentionally goofy to break the fourth wall. I'm not a fan of self-consciously "intelligent" narratives and dialogue; this film is intelligent <i>as a film</i> and feels confident to largely throw the narrative and dialogue overboard to unencumber the experience.<br />
<br />
<i>Cloud Atlas</i> is a production masterpiece with great performances, set pieces, and post-production work. It combines the literally sublime and profane. This is a film people love or hate, and mostly hate according to reviews. However, I think that if you genuinely love movies and are willing to surrender to one by filmmakers who love them too, then you're in for a terrific experience.<br />
<br />
<br />
<h2>
Honorable Mentions</h2>
In closing, I'll also mention a few episodes of television series that are well-known but have some individual episodes that are obscure, exceptionally intelligent compared to the series, and stand alone for viewers who are not invested in the whole series.<br />
<br />
In the <i>X-Files</i>, some episodes of note are those that are outside of the main arcs and mix humor with dark, violent themes: <b>Clyde Bruckman's Final Repose</b> (1995, dir: Darin Nutter, writer: Darin Morgan), <b>Jose Chung's <i>From Outer Space</i></b> (1996, dir: Rob Bowman, writer: Darin Morgan), and <b>Small Potatoes</b> (1997, dir: Cliff Bole, writer: Vince Gilligan).<br />
<br />
<a href="http://4.bp.blogspot.com/-ConVW8cpNNY/WFqn4Owb_1I/AAAAAAAAH6Q/lQXCDAR0D-wuykRjNOhuU6QmDHSeicl4ACK4B/s1600/6x10-the-girl-who-waited-doctor-who-25227808-1024-576.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="180" src="https://4.bp.blogspot.com/-ConVW8cpNNY/WFqn4Owb_1I/AAAAAAAAH6Q/lQXCDAR0D-wuykRjNOhuU6QmDHSeicl4ACK4B/s320/6x10-the-girl-who-waited-doctor-who-25227808-1024-576.jpg" width="320" /></a>In the new <i>Doctor Who</i>, several episodes in which the Doctor is largely absent lend enough freedom to explore concepts or characters more deeply. These include <b>Blink</b> (2007, Hettie MacDonald, writer: Steven Moffat), <b>The Girl Who Waited</b> (2011, dir: Nick Hurran, writer: Tom MacRae), <b>Vincent and the Doctor </b>(2010, dir: Jonny Campbell, writer: Richard Curtis),<b> </b>and <b>Flatline</b> (2014, dir: Douglas Mackinnon, writer: Jamie Mathieson). The last is a bit strange; what makes that episode intelligent is not the plot but the fact that it is used to critically reflect on the <i>Doctor Who</i> formula.<br />
<br />
Various <i>Star Trek </i>series, <i>Babylon 5</i>, <i>Battlestar Galactica</i>, <i>Stargate</i>, and other long sci-fi series of course have some outstandingly intellectual individual episodes, but those are less accessible to the non-fan because of character continuity.<br />
<div>
<br /></div>
<i>Orphan Black</i> is an odd show. The plot isn't smart (although it isn't especially stupid, either) and the writing is usually passable but not brilliant. Yet the <i>acting</i> and direction are phenomenal, as Tatiana Maslany convincingly plays five radically different clones as main characters and many supporting clones. She's often portraying one character pretending to be another, and the layering is somehow clear. I recommend at least the first few episodes of this underrated show. It's one of the best science fiction performances ever filmed and earned her the Primetime Emmy in 2016 along with many other awards and nominations.<br />
<br />
<a href="http://2.bp.blogspot.com/-j7990orR_DY/WFqnYz26N7I/AAAAAAAAH6I/-u34JxajBn4ywjtx9xlEjEeoYpG0j6sJgCK4B/s1600/maxresdefault.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="180" src="https://2.bp.blogspot.com/-j7990orR_DY/WFqnYz26N7I/AAAAAAAAH6I/-u34JxajBn4ywjtx9xlEjEeoYpG0j6sJgCK4B/s320/maxresdefault.jpg" width="320" /></a>Finally, while they were well-known at the time, Paul Verhoeven's science fiction films seem to have fallen off the cultural radar and are unknown to younger moviegoers. I think they were ahead of their time and are due for reevaluation (although hopefully not more "reboots" and remakes). These are extremely violent, cynical, and dystopian films that are easy to dismiss as salacious entertainment. However, that cynical dystopian edge is increasingly prophetic. Check out <i>Starship Troopers,</i> <i>RoboCop, </i>and<i> </i>the original 1990 <i>Total Recall.</i><br />
<i><br /></i></div>
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-72542814748596149472016-08-12T05:43:00.002-07:002016-08-14T04:17:17.277-07:00Strategies for Avoiding Motion Sickness in VR Development<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-sZ43vQtJPcY/V62GJhb9kcI/AAAAAAAAFQQ/LPV37AUzhDYdMPrN3T86NpAoCPsqnw1bACK4B/s1600/v1.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://3.bp.blogspot.com/-sZ43vQtJPcY/V62GJhb9kcI/AAAAAAAAFQQ/LPV37AUzhDYdMPrN3T86NpAoCPsqnw1bACK4B/s400/v1.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Image from <i>The Lawnmower Man </i>of how <i>not</i> to<br />
develop in VR if you want to avoid motion sickness.</td></tr>
</tbody></table>
Motion sickness occurs in virtual reality (VR) when an incorrectly-operating or poorly-designed experience creates inconsistent stimuli between your physical body motions and the visuals displayed in the head-mounted display (HMD).<br />
<br />
<a name='more'></a><br />
Imagine that you turn your head to the left and the image in the HMD doesn't rotate extremely soon at exact the same rate (...or rotates the wrong way, as has happened to me many times when debugging transformations!).<br />
<br />
In this case, your brain will receive conflicting input from your vestibular system's sense of acceleration measured through the inner ear, your neck muscles' proprioceptive feedback, the brain's own high-level intentions, and your eyes. When that happens, your body is evolutionarily conditioned to assume that you are sick from an infection or poison. That's normally a good assumption in these conditions, which are what you might experience from a high fever or excessive alcohol.<br />
<br />
If you <i>were </i>experiencing these symptoms due to a toxin, then a good response would be to immediately void everything in your stomach to eliminate the toxin and induce a headache to make you slow down and close your eyes.<br />
<br />
Of course, there's nothing wrong with your body in VR. Instead, the world (as rendered) is broken and your eyes are fine. But your body doesn't "know" that, so you'll eventually vomit and have a terrible headache if the conditions persist. That's "simulator sickness" or "VR motion sickness."<br />
<br />
Nobody can avoid sickness in these conditions, no matter how forgiving their vestibular system is. I'm extremely resistant to motion sickness. I don't get sick on a small boats rolling in the ocean or fast driving on a mountain road. I play first-person video games and <i>good </i>VR experiences for hours without problems. But if I'm in a bad VR experience for a minute I feel sick until well into the following day.<br />
<br />
I've worked with multiple VR technologies for over a decade. I've never seen anyone actually vomit in VR from motion sickness. So, I don't think you need to fear that unless you're already experiencing nausea or vertigo from another source before you go in. However, I have seen and experienced near-daily headaches and developers who had to go home after only an hour of work many times. In the last year I've been able to work almost every day in VR and helped many people through VR sessions with infrequent discomfort.<br />
<br />
Below are the practices we've developed in my lab for minimizing and avoiding motion sickness and simulator-induced headaches.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-YM7rb4jeAWI/V63Atnffp3I/AAAAAAAAFQg/fUk-Tzbw5GAdm_6s5QaDi8bLG0x04ikLACK4B/s1600/91o5iNLqTdL._SY679_.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://1.bp.blogspot.com/-YM7rb4jeAWI/V63Atnffp3I/AAAAAAAAFQg/fUk-Tzbw5GAdm_6s5QaDi8bLG0x04ikLACK4B/s200/91o5iNLqTdL._SY679_.jpg" width="146" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">"Dramamine Naturals" are just ginger</td></tr>
</tbody></table>
<h2>
Medical</h2>
<ol>
<li>Take <b>preventative medication before entering VR</b> (depending on the type, up to two hours ahead of time). Different bodies and metabolisms respond differently to medications. For most people, <a href="http://www.ncbi.nlm.nih.gov/pubmed/12576305">ginger </a>is the most effective preventative. You need a lot, though--<a href="http://amzn.to/2bcElDz">Dramamine Naturals</a> or the condensed extract pills work best, although the <a href="http://amzn.to/2aMnouD">candi</a>es are tastier if you don't mind eating a lot of sugar too. For other people, scopolamine (Transderm Scop), promethazine (Phenergan), cyclizine (Marezine), dimenhydrinate (Dramamine), and meclizine (Bonine) are effective. Most have the side effects of drowsiness and dry mouth.</li>
<li>As you start to become ill, take your usual headache remedy.</li>
<li>Obviously, <b>don't use alcohol</b> or other substances that reduce balance or perception when in VR. Modifying circulation can also be problematic. I avoid excessive <b>caffeine</b>, but whatever your normal intake is or slightly less should be fine; if the alternative is a caffeine-withdrawal headache, then that would not be great prevention. The same applies to <b>nicotine</b>.</li>
<li>Don't use VR if you are already ill, including <b>allergy congestion</b>. I often take half a dose of pseudoephedrine (Sudafed) before entering VR to reduce my normal allergy symptoms.</li>
<li><b>Wear your glasse</b>s in VR (contacts may be easier, but all current HMDs allow normal-sized eyeglasses.</li>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-VOTOyXHaVx0/V63BEjoV50I/AAAAAAAAFQo/vv-dcyIQpAY2U7PeHoBHeg1MV8UyZZvkgCK4B/s1600/GPE001.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://3.bp.blogspot.com/-VOTOyXHaVx0/V63BEjoV50I/AAAAAAAAFQo/vv-dcyIQpAY2U7PeHoBHeg1MV8UyZZvkgCK4B/s200/GPE001.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">A tasty alternative to motion sickness pills.</td></tr>
</tbody></table>
<li>There's anecdotal evidence that spicy, salty, and greasy foods make some people more susceptible to motion sickness. Certainly overeating won't help.</li>
</ol>
<div>
<br /></div>
<h2>
Best Hardware Practices</h2>
<div>
<ol>
<li>Ensure that the <b>inter-pupil distance (IPD)</b> adjustment on the HMD is set correctly for you. Most people are about 62 mm. If your eyes are spaced much closer or wider, then you'll need to calibrate. Not all devices are hardware adjustable.</li>
<li>Put the <b>eye relief setting</b> at the maximum distance that is comfortable. For many people, this is as far as possible on a DK2. Not all devices are adjustable.</li>
<li><b>Use the HMD like binoculars</b>. Don't actually put on the HMD. Flip the head straps out of the way and press it to your face with one hand like a pair of binoculars. Keep your hand well to one side so that you don't block the tracking mechanisms. (You'll need your other hand for the controller.) Only look in VR for a few seconds at a time, just to verify that whatever you were testing is working. This will allow you to debug even broken VR programs all day without actually being in VR.</li>
<li><b>Stop immediately </b>if you feel motion sickness. I really mean immediately. Two seconds of bad motion is enough to warn you and get out before you're sick. If you try to "push through," then you'll fail--biology is against you. After about 30 seconds you're going to feel strange...and that feeling will take hours to go away. After a few minutes you'll feel really ill. The effects are cumulative, so a few bad one minute sessions will make you unable to work for the rest of the day. Once you're sick, the only remedy is to wait up to 24 hours.</li>
</ol>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-0NqyCmCwdbs/V63B6Mu3aZI/AAAAAAAAFQ4/AJuRRKZYoLEx4gGgg9PaReKBXDmvr_pBQCK4B/s1600/oculus-rift-ipd-adjustment-glasses.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://3.bp.blogspot.com/-0NqyCmCwdbs/V63B6Mu3aZI/AAAAAAAAFQ4/AJuRRKZYoLEx4gGgg9PaReKBXDmvr_pBQCK4B/s320/oculus-rift-ipd-adjustment-glasses.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Rift IPD adjustment (under right thumb)</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-QWpb1SapL5M/V63CFcLAVyI/AAAAAAAAFRA/NrZnoUPnVJgEClTw4myGD2ZNq4x5jkNoACK4B/s1600/hqdefault.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://1.bp.blogspot.com/-QWpb1SapL5M/V63CFcLAVyI/AAAAAAAAFRA/NrZnoUPnVJgEClTw4myGD2ZNq4x5jkNoACK4B/s320/hqdefault.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DK2 Eye Relief adjustment</td></tr>
</tbody></table>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="http://4.bp.blogspot.com/-BBpf7whlBeg/V63BfHXIttI/AAAAAAAAFQw/TTQ5PiLUWtU-jyKHHv_foHjnHeG02i8agCK4B/s1600/htc-vive-ipd-adjustment-eye-relief-setup-guide-pamphlet.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="106" src="https://4.bp.blogspot.com/-BBpf7whlBeg/V63BfHXIttI/AAAAAAAAFQw/TTQ5PiLUWtU-jyKHHv_foHjnHeG02i8agCK4B/s320/htc-vive-ipd-adjustment-eye-relief-setup-guide-pamphlet.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px;">Vive IPD and eye relief adjustments</td></tr>
</tbody></table>
</div>
<div>
</div>
<h2>
Best Software Practices</h2>
<div>
<ol>
<li><b>Never move the camera programmatically</b>. The viewpoint should only move relative to the visual references due to the movement of the player. Don't allow it to be jolted by physics or flown using the controller. But what if you have a driving or flying game? The key is "relative to the visual reference." If you display a cockpit and the player moves relative to the cockpit, then this will usually feel stable. Even in those cases, make sure that movement of the vehicle is due to player input. When the player anticipates the movement correctly, motion sickness is reduced. Teleporting with an abrupt cut at the player's direction is a good mechanism for traversing large distances without a cockpit. Most successful VR experiences without vehicles work this way.</li>
<li><b>Minimize latency. </b>Turn off all post-processing effects, minimize draw calls, and keep scene complexity low when developing. Disable triple buffering. Ensure that you're processing input and tracking data as soon as possible in the frame.</li>
<li><b>Display HUD elements about 1.25m from the viewer.</b> The lenses in the HMD make the display surface seem about 1.25m (4 feet) away when focusing. The exact distance varies with HMD. Placing HUD elements much closer will make the player cross-eyed and cause headaches.</li>
<li><b>Avoid text</b> in VR, and keep what text you must display have neutral-colored and large. The resolution on current HMDs is low and the chromatic aberration correction is imperfect. Reading under those conditions causes eye strain and headaches. (Plus, text rendering is frequently slow!)</li>
<li>Display a lot of <b>stable reference objects</b>. Cockpits, textured walls, starfields, mountains...anything that helps your eyes track unmoving parts of the world to distinguish its own motion from that of moving nearby objects. </li>
<li>Display a <b>body avatar</b>. This makes the experience seem more real to the visual system and provides a stable reference when not in a vehicle. Some people find otherwise, but I think the key idea here is that a body avatar acts like a cockpit for walking experiences.</li>
</ol>
<div>
<br /></div>
</div>
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" /><i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
</div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-7926924307913707572016-08-06T13:03:00.000-07:002016-12-16T10:17:53.691-08:00Graphics and Games Lecture Videos<div class="separator" style="clear: both; text-align: left;">
<i>This blog post archives all of my video lectures on computational graphics, virtual reality, and film and media studies topics. I will add to the post as more talks are digitized. Links are to project pages. Following the SIGGRAPH system, I'm rating these "Advanced," "Intermediate," and "Beginner" based on how much knowledge each lecture assumes about games and graphics from the audience.</i></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Advanced</h2>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/rVh-tnsJv54/0.jpg" frameborder="0" height="270" src="https://www.youtube.com/embed/rVh-tnsJv54?feature=player_embedded" width="480"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://graphics.cs.williams.edu/papers/TransparencySIGGRAPH16/">Peering Through a Glass, Darkly at the Future of Real-Time Transparency</a></div>
<div class="separator" style="clear: both; text-align: center;">
(SIGGRAPH 2016 Invited Talk)</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/jWe5Ae22Ffs/0.jpg" frameborder="0" height="270" src="https://www.youtube.com/embed/jWe5Ae22Ffs?feature=player_embedded" width="480"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://graphics.cs.williams.edu/papers/TransparencyI3D16/">Phenomenological Transparency</a></div>
<div class="separator" style="clear: both; text-align: center;">
(I3D 2016 Research Paper)</div>
<br />
<h2 style="clear: both; text-align: left;">
Intermediate </h2>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/ajzmr6g76s8/0.jpg" frameborder="0" height="270" src="https://www.youtube.com/embed/ajzmr6g76s8?feature=player_embedded" width="480"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://graphics.cs.williams.edu/papers/ArtistI3D13/">The Augmented Artist: Computation and Content Creation</a></div>
<div class="separator" style="clear: both; text-align: center;">
(I3D 2013 Invited Talk)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Introductory</h2>
<div>
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/Hwqz2wacIbk" width="480"></iframe>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://graphics.cs.williams.edu/creatinggames/">Virtual Reality: The Actuality of Total Cinema</a></div>
<div class="separator" style="clear: both; text-align: center;">
(Williams 2016 Faculty Lecture Series)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/biW01vDTHKw" width="480"></iframe>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://graphics.cs.williams.edu/creatinggames/">Creating Games</a></div>
<div class="separator" style="clear: both; text-align: center;">
(Williams 2016 Alumni Talk)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" /><i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-48481579942073652632016-08-04T12:15:00.006-07:002016-11-08T03:34:58.950-08:00Her Story (Understanding Games #4)<i>This is the fourth article in a series documenting my <a href="http://casual-effects.blogspot.com/2016/05/game-camp-for-grownups.html">Game Camp for Grownups</a> at <a href="http://www.williams.edu/">Williams College</a> for introducing humanities faculty to the medium of video games. [Previous: <a href="http://casual-effects.blogspot.com/2016/07/inside-understanding-games-3.html">#3: Inside</a>]</i><br />
<i><br /></i>
<a href="http://1.bp.blogspot.com/-sF6VeVK-pkQ/V5qwqdnHEGI/AAAAAAAAFFE/9VrcIm9mb70tkC8yr5HP9Z-0bIN1di6ngCK4B/s1600/Her_Story_screenshot_02.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://1.bp.blogspot.com/-sF6VeVK-pkQ/V5qwqdnHEGI/AAAAAAAAFFE/9VrcIm9mb70tkC8yr5HP9Z-0bIN1di6ngCK4B/s320/Her_Story_screenshot_02.jpg" width="320" /></a><b>"<a href="http://www.herstorygame.com/">Her Story</a>" (2015)</b><br />
Designed by Sam Barlow<br />
Starring Viva Seifert<br />
For Windows, OS X, iOS, and Android<br />
<i><br /></i>
This is one of the most wildly unique games made in the past decade. "Her Story" presents mature themes in a truly nonlinear narrative, and does so relatively successfully. Its innovations include a search engine as the primary mechanic and the most effective use of video in any game to date.<br />
<a name='more'></a><br />
The terrific work in this game by Viva Seifert foreshadows what virtual reality acting may become, where a performance dances with the player through fragmentation and interaction, but retains its original integrity.<br />
<br />
<a href="http://1.bp.blogspot.com/-91AJ2Cj-oyc/V6OTucM2aSI/AAAAAAAAFLQ/SZ5PCJkHxv832lOuwns4HilTRlumySpxQCK4B/s1600/886d9c7d-e773-414b-9542-8dbc87262b15-bestSizeAvailable.jpeg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="192" src="https://1.bp.blogspot.com/-91AJ2Cj-oyc/V6OTucM2aSI/AAAAAAAAFLQ/SZ5PCJkHxv832lOuwns4HilTRlumySpxQCK4B/s320/886d9c7d-e773-414b-9542-8dbc87262b15-bestSizeAvailable.jpeg" width="320" /></a>"Her Story" won the Seumas McNally grand prize at the Independent Games Festival; the BAFTA Debut Game, Game Innovation, and Mobile Game awards; and was near-universally praised by critics.<br />
<br />
For me, "Her Story" captured the feeling of acting in a police procedural despite the interrogation being prerecorded instead of interactive in the usual sense for a game conversation. I value mechanics that accurately evoke the narrative and themes of the game, and nothing has ever been as effective for this type of content as "Her Story".<br />
<br />
"Her Story" uses game mechanics, but clearly draws from film and theatre media as well. I've attended several interactive theatre, nonlinear theatre, and live-action role playing events, and none were as effective as "Her Story" at handling a complex narrative. I find this its greatest strength.<br />
<br />
This is our final narrative experience. In this series, we've built from the emergent <i>Pac-Man DX+</i> that is close to the center of games as a medium to "Her Story", which is well overlapped with other, more progressive and narrative forms. I'm happy to call all of these experiences "games" while acknowledging that diversity of approach in the structure and conventions of the works.<br />
<br />
It is well worth reflecting on how the difference in medium for a work affects literacy within it. Even if you came to this series with zero previous gaming experience, you now have physical literacy with games. You can navigate menus, manipulate controls, recognize and solve puzzles, react under tight timing constraints, and aggressively and creatively explore a space. (We've followed a specific trajectory through games that provides continuity of experience. We haven't remotely exhausted the interesting mechanics and experiences that lie off that one path...the remainder of the series will address that somewhat, but you also have a lifetime in which to explore the rapidly expanding medium of games.)<br />
<br />
However, there is another level of game-literacy that these narrative experiences reveal. While some of the communication means are shared with other media--for example, dialogue, text, symbols, music, and expressions--many of the ways that games communicate with the audience are unique. Consider:<br />
<br />
<ul>
<li>The force feedback in "Inside" while the player character's breath is running out; this makes me feel extremely claustrophobic and desperate. It has no equivalent in film or prose. </li>
<li>The dense, hard-to-explain relationships in mechanics between game objects, often understood first at an intuitive and physical level (as in <i>Pac-Man DX+</i>) before at an intellectual level.</li>
<li>The nonlinearity and piecing together of a narrative from individual clues. Probably most of <i>Monaco</i>'s storyline is understood by most players on a single play-through. With "Inside", a week of serious offline consideration and likely two play-throughs are required to process most of what is happening in the game at a story and thematic level. I expect that many players leave "Her Story" understanding a majority of the story, not not all of it. After two play-throughs I still hadn't seen all of the content.</li>
<li>The disassociation of the content from the mechanics. At a tough puzzle in "Inside", most players will stop feeling the sting of a character's death or the fear of a threat when the sequence repeats, and start approaching it logically. That is part of normal gameplay. Normal viewing of a film or play or reading of a book does not encourage this level of analysis and emotional detachment from the content (nor the level of emotional attachment with structural and technical elements that the audience will pump their fists in the air at a successful turn for the characters!)</li>
<li>The level of empathy created by controlling a character (for example at the end of "Inside") with different movement constants or means.</li>
<li>The sense of confusion when the bearings are unfamiliar and demand that the audience resolve that confusion. Other media progress without the audience, so one can sit back and wait for understanding. Games require an actively engaged audience. They refuse to proceed unless the player demonstrates some understanding and rises to the challenge.</li>
</ul>
<br />
"Her Story" isn't primarily about empathy, although your strongest empathy will likely be for the enigmatic player character that is never directly shown on screen. It is about confusion, nonlinearity and piecing together, frustration, fiero (emotional accomplishment), and an emotionally powerful narrative accomplished <i>without</i> empathy or traditional shock/twist structure in a narrative.<br />
<br />
Many players who started this series with limited experience are just developing a form of literacy that enables them to read story and themes advanced by the mechanics (even in emergent games). This is natural, and it is some evidence that games really are a separate medium worth explicit study, and not just interaction tacked on to other methods of communication and storytelling that are well understood.<br />
<br />
I don't think it is necessary to finish "Her Story" to get most of the value out of it. If you've had your fill after two hours, I think it is acceptable to go read a plot synopsis on Wikipedia or another site so that you understand the whole narrative. Most of the mechanics come out in the first hour of play, and you'll understand about 80% of the story after two hours. There isn't a big finish at the end, just a patching of the last few holes.<br />
<br />
It is really hard to discuss the game further without spoilers, so I'll just let you play it!<br />
<br />
<h2>
Post-Game Questions</h2>
<br />
<ol>
<li>The first three games that we looked at--<i>Pac-Man</i>, <i> Monaco</i>, and<i> "</i>Inside"--had common video game state: the coordinates for objects, counters and timers, and information about physical properties of the world. "Her Story" is structured very differently. What is its state?</li>
<li>What are the rules of "Her Story", in terms of the mechanics?</li>
<li>Describe the story objectively. Who are the characters? What happened? Who was the murder victim? Who was the murder? What was the motive?</li>
<li>Who is the player's character in the game? (Hint: it is not the detective)</li>
<li>How does the game give the player feedback on their progress?</li>
<li>What triggers the ending of the game?</li>
<li>Why doesn't the <i>Othello</i> game-within-a-game provide a single-player mode against a computer opponent, since "Her Story" is intended to be played by a single player?</li>
<li>What are all of the ways that the "mirror" theme is evident?</li>
<li>What are the mechanics outside of the video search that the game uses to build the world and provide information about the narrative?</li>
<li>Consider the process of producing "Her Story". How would you design all of the clips? How would you manage the transcripts to ensure that the player is led in a reasonable path without overly determining it? How would you sort the entries for responding to a query, given that the UI intentionally shows only five and doesn't allow scrolling?</li>
<li>Inside is (nearly) 100% linear and predetermined. That's one way to present a narrative in a game. "Her Story" is nearly 100% nonlinear and undetermined. Although it has no emergent mechanics in the classic sense, the player has total freedom for the order in which they travel through the content of the game. Discuss what kinds of stories are amenable to each approach, and the merits of each for an interactive medium.</li>
<li>How does "Her Story" play differently, and affect the player differently, when played with a group instead of alone? For comparison, I find that "Inside" changes a little, but not as much in a group setting.</li>
<li>What are the strengths and drawbacks of the no-instructions approach of this game? Compare that to "Inside"s lack of questions.</li>
</ol>
<i><br /></i>
<i>Coming next week: a survey of the breadth of games: Solus, AudioShield, Cities: Skylines, Rocksmith 2014, XCOM, Firewatch, and Portal 2</i>
<i><br /></i>
<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" /><i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-70586408462837317072016-07-20T14:51:00.002-07:002016-07-20T14:51:33.781-07:00McGuire House Rules for Space Cadets: Dice Duel<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-AdEn963Hv64/VzpYd06MknI/AAAAAAAAD78/X9QcHOq__3E6XhRBAXrKX-iRf-bmxsGxwCK4B/s1600/pic2664987_md.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://4.bp.blogspot.com/-AdEn963Hv64/VzpYd06MknI/AAAAAAAAD78/X9QcHOq__3E6XhRBAXrKX-iRf-bmxsGxwCK4B/s320/pic2664987_md.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://boardgamegeek.com/image/2664987/space-cadets-dice-duel">Image by Stephen McPherson</a></td></tr>
</tbody></table>
<i><a href="http://amzn.to/2a1fArW">Space Cadets: Dice Duel </a></i>is a team cooperative space ship combat game. Playing it feels like being on the bridge in <i>Star Trek</i>, but with laughter when things don't go your way.<br />
<br />
You can think of it as either a hardcore party game or the world's most casual tabletop RPG. The main mechanic is team communication.<br />
<br />
<i>SC:DD</i> is designed for 4-8 players, works for 2-12, and unlike most large games, actually gets better as the teams get larger. I've played with children as young as 7 years of age and hardcore adult gamers.<br />
<br />
You can play <i>SC:DD</i> in about half an hour, and will probably want to play at least two sessions back to back. The game slows down a bit as you become more experienced because your defense will improve and duration is determined by successful attacks.<br />
<br />
There is an excellent expansion called <a href="http://amzn.to/29MEOeO"><i>Die Fighter</i> </a>that I recommend for large groups or when your team has become a well-oiled machine.<br />
<a name='more'></a><br />
<a href="http://2.bp.blogspot.com/-g3qII067DNc/V47xxF5lcDI/AAAAAAAAE8Q/yBCoq5sUOAIc63crauHVBu_Ty_NehWQiwCK4B/s1600/pic1650556.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="299" src="https://2.bp.blogspot.com/-g3qII067DNc/V47xxF5lcDI/AAAAAAAAE8Q/yBCoq5sUOAIc63crauHVBu_Ty_NehWQiwCK4B/s320/pic1650556.png" width="320" /></a>There are a number of similar previous games that <i>SC:DD</i> builds on. Although I enjoy all of those, I think <i>SC:DD</i> is the current best of the breed. It is much easier to learn and less stressful than<i> <a href="http://amzn.to/2a1f2Cp">Space Alert</a></i>, doesn't require the extreme commitment of <i><a href="http://artemis.eochu.com/">Artemis</a></i>, and has more strategy than <i><a href="http://www.sleepingbeastgames.com/spaceteam/">Space Team</a></i>.<br />
<br />
Some actions have the spatial orientation and ridiculous failure modes of <i><a href="http://amzn.to/2a1f2lJ">RoboRally</a></i>, but <i>SC:DD</i> game is much easier, faster, and at least for me, fun. There's also the original <i>Space Cadets</i> (i.e., no dice in the name) game, which is a similar concept but too complicated and without the sonic and physical joy of rolling a ridiculous number of dice continuously for half an hour.<br />
<br />
<i>Space Cadets: Dice Duel</i> is very well designed. We don't make many changes to the base rules, however, those rules are ambiguous on a few points. There are a few other rules that are confusing, simply under-emphasized, and only one that I think actually detracts from play.<br />
<br />
Below are the McGuire house rules. Beyond clarifications, the only intentional changes to the original rules are that time-freezing actions may not be queued and that repairs only take one crystal out of play.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/--SycGT6Hyc8/V47x4QVTQ5I/AAAAAAAAE8Y/Rr072uIPao4RYiEqvgBLFbSlMk5yye-rgCK4B/s1600/die-fighter-stuff_g9qjov.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="168" src="https://1.bp.blogspot.com/--SycGT6Hyc8/V47x4QVTQ5I/AAAAAAAAE8Y/Rr072uIPao4RYiEqvgBLFbSlMk5yye-rgCK4B/s320/die-fighter-stuff_g9qjov.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The fighter ship station from the expansion pack</td></tr>
</tbody></table>
<h3>
Basics</h3>
<div>
<i>Make sure that you have a big table so that you don't drop dice on the floor or knock other pieces that are in play...you're going to have a large group of people all rolling a lot of dice at the same time!</i></div>
<div>
<br /></div>
<div>
The goal of the game is to shoot down the opposing team's space ship. Each ship can take four hits before exploding. The game is played in real-time. There are no turns!<br />
<br />
It isn't as crazy as you might think because rolling dice...and thinking...inherently take time, so there is a natural pace of progress. Anything complicated also has built-in rules for pausing play, called "freezing time".</div>
<div>
<br /></div>
<div>
To run your ship, your team must operate six stations on the space ship bridge: </div>
<div>
<ul>
<li><b>weapons</b> (loading torpedoes)</li>
<li><b>sensors</b> (targeting and jamming torpedoes)</li>
<li><b>helm</b> (flying the ship)</li>
<li><b>tractor beam</b> (picking up crystals, moving the enemy ship, and dropping mines)</li>
<li><b>shields</b> (which have to constantly be adjusted!)</li>
<li><b>engineering</b> (generating power for the other stations)</li>
</ul>
You may divide these up any way that you wish among your players. You can also benefit from having a captain who has no explicit station in a large group. I find that helm and engineering are the most difficult stations to operate.<br />
<br />
Helm and tractor should sit right in front of the board to easily reach the ships. It is convenient if engineering can also be near the center, but that is not essential.</div>
<div>
<br /></div>
<div>
The stations each have a card for placing dice and some icons that remind you of key rules. These won't make sense until you already know the rules, but once you do, they are very helpful. There is also a custom, color-coded set of dice for each station. </div>
<div>
<br /></div>
<div>
<b>Engineering's</b> job is to roll the six white "energy" dice and give them to the five numbered stations corresponding to the die rolls (there is no station number six). As with all dice in this game, you can re-roll any subset as often as you'd like until you obtain the numbers that you want. Engineering can power stations or not at its discretion. It is helpful of teammates call out their station's number when in need, for example, "Give me twos!"</div>
<div>
<br /></div>
<div>
<b>All other stations</b> can roll a number of their own dice equal to the number of energy dice that they have been given. When the station officer likes what has been rolled on a station die, they can return one energy die to engineering and put that station die on the station card. Station dice can be removed at any time for free, but re-rolling and placing them again takes energy.<br />
<br />
You can't save a good roll on a station die on the table to avoid committing to it...place it immediately on the station or lose it (this matters when hitting nebulae and asteroids).</div>
<div>
<br /></div>
<div>
Energy dice can be relinquished at any time without using them if they are needed to be rerolled to power other stations, and they can be queued up on a station even if the officer is not currently re-rolling station dice. Both of those are important strategies.</div>
<div>
<br /></div>
<div>
Station officers should tell their teammates when tasks have been accomplished or problems occur, such as "rear torpedo loaded" or "forward shields are completely down."</div>
<div>
<br /></div>
<div>
For your first game, officers only need to know the rules for their own station. This greatly simplifies the learning curve. You can look up the rules for tractoring another ship or handling torpedoes when the need arises because both of those actions pause the game.<br />
<br /></div>
<h3>
Time-Freezing Rules</h3>
<b>On a time-freezing action ("fire", "tractor", or "warp"), everyone must immediately put everything down on the table (not on a station card)...</b> It is common to have just rolled a good result and want to record it before you forget which dice are in play, but you must either remember or re-roll in that case. Otherwise, it is too tempting to put that a new die on a station and affect the outcome of the time-freezing action, which would be unfair.<br />
<br />
.<b>..except for a ship that has been picked up for movement or crystal warp by the helm.</b> If the helm's hand is on the ship, then when time freezes, that movement completes, and then the time-freezing action occurs. This holds even if the ship that triggered the time freezing action is the one moving.<br />
<br />
<b>You cannot queue time-freezing actions</b>. When in a time-out to resolve firing, for example, nobody may declare that they are firing until time has resumed.<br />
<br />
<h3>
Tractor Beam Rules</h3>
You can activate the tractor beam to pick up a <b>single</b> crystal, move a mine one square in any direction, or move a ship one square in any direction.<br />
<br />
You must have twice as many lightning bolt symbols as the distance to the target (round <i>up</i>). Range is computed in the same way as firing, but the tractor beam is omnidirectional. Tractoring an object on the square that your ship occupies costs one lightning bolt (even though the distance is zero).<br />
<br />
After tractoring, all tractor dice are removed from the station. This includes the A and B mine dice if they are on the tractor station.<br />
<br />
To move an enemy ship, you must shout "tractor," which freezes time.<br />
<br />
<h3>
Mines</h3>
A mine can be dropped in the same square as the ship when you have the mine attached to the tractor/mine station and one of the orange dice is on the A or B spot. After dropping a mine, remove all station dice from the tractor/mine station.<br />
<br />
Placed mines are triggered when a ship moves <i>into</i> the square on which they sit. Moving out of the square or residing in the same square does not activate them. When a mine is triggered, it does one damage to each ship in the square. This cannot be blocked or jammed. It does not affect the shield or sensor dice in any way.<br />
<br />
Mines can be moved by tractor beams and destroyed by torpedoes. They are automatically hit when targetted and in range by a torpedo.<br />
<br />
<h3>
Torpedo Rules</h3>
<div>
The torpedo rules are the most complicated in the game. Fortunately, when you need them, time is paused and you can read through them carefully. They actually are straightforward if you carefully follow the following sequence in order:</div>
<ol>
<li>The <b>weapons officer</b> calls out "fire" and then immediately afterwards, either "front" or "back" and "1" or "2" (or in a different order). [With the expansion rules, or if there are mines on the board, the weapons officer also names the target immediately.] Nobody else can fire a torpedo. The full set of three words must be said relatively quickly...you can't say "fire" to pause the action and then think about what you want to fire.</li>
<li>Time immediately freezes.</li>
<li>The weapons officer removes the fired torpedo(es) from the weapon station. You can't cancel or undo firing---once you've said "fire", those torpedoes go.</li>
<li>The sensor officer determines if the target is in the cone of fire. The cone is pictured on the weapons station. It begins with the one square that the firing ship is on, expands to three squares on the next row adjacent to the firing ship, and then continues to grow.</li>
<li>If the target is not within the cone of fire, remove all of the attacker's target dice and end the torpedo process. Otherwise, continue...</li>
<li>The <b>sensor officer</b> measures the distance between the ships. This is the <b>larger</b> of the horizontal and vertical distances between the ships, but it must be at least 1. If the ships are on adjacent squares, the distance is 1. If the ships are in the <i>same</i> square, the distance is still 1.</li>
<li>If the distance <i>plus</i> the target's jamming symbols <i>minus</i> the firing ship's target symbols is greater than or equal to zero, then the torpedo(es) all hit.</li>
<li>Remove all of the attacker's target dice and the defender's jammer dice. If there is no hit, end the torpedo process. Otherwise, continue...</li>
<li>The defending <b>shield officer</b> determines the hit side (front, back, left, right) based on the relative positions and orientations of the ships. If the ships are exactly on a diagonal, the defending shield officer chooses which of the two appropriate sides on which to take the hit.</li>
<li>Assign damage based on the number of shields on the hit side:</li>
<ul>
<li><b>0 shields</b>: all torpedoes cause damage.</li>
<li><b>1 shield:</b> roll one weapon die for each torpedo. It causes damage on a 1 or 2 explosion symbol.</li>
<li><b>2 shields:</b> roll one weapon die for each torpedo. It causes damage on a 2 explosion symbol.</li>
<li><b>3 shields</b>: no torpedoes cause damage.</li>
</ul>
<li>Remove all of the defender's shield dice on the hit side</li>
</ol>
<div>
At the end of the torpedo process, restock any used crystals to random crystal locations in space by rolling energy dice, and then restart time.</div>
<div>
<br /></div>
<h3>
Crystal Rules</h3>
<div>
Crystals may be spent at any time on the following: </div>
<div>
<ul>
<li><b>Emergency activation</b> (1 crystal). Put one crystal in the recycling area. Take any one die (you'll probably want it to be a station die) and put it in any position you want. For example, you can take a shield die, rotate it to face forward, and put it on the forward station.</li>
<li><b>Warp</b> (1 crystal). Say "Warp" to freeze time. Put one crystal in the recycling area. Roll two energy dice. Pick up and move your ship to one of the crystal squares corresponding to a rolled number (you can't cancel the warp if you find that neither of your options is desirable!) </li>
<li><b>Partial repair</b> (2 crystals). Put one crystal in the recycling area and swap a second for one of your damaged energy dice. That second crystal is out of the game, and the hull damage to your ship remains (and is marked by the crystal).</li>
</ul>
</div>
<div>
<b><br /></b></div>
<div>
<h3>
<b>Optional Ridiculousness</b></h3>
<a href="http://4.bp.blogspot.com/-CF09olmxeYo/V4_ps8qTmSI/AAAAAAAAE9A/Kd06h8GnwJ4RrsJYr4rGvrtora2y6vqOgCK4B/s1600/IMG_20160720_102741.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="141" src="https://4.bp.blogspot.com/-CF09olmxeYo/V4_ps8qTmSI/AAAAAAAAE9A/Kd06h8GnwJ4RrsJYr4rGvrtora2y6vqOgCK4B/s200/IMG_20160720_102741.jpg" width="200" /></a>When playing with family and especially fun friends, we add a bit more flavor. We build custom spaceships for the board out of Lego, name our teams, and compose whole victory songs with choreography for successful attacks. This is not part of the rules, but I recommend the practices if you have an appropriate group.</div>
<div>
<i><br /></i>
<i><br /></i>
We really love the <i>Space Cadet: Dice Duel </i>mechanics. We're exploring many new options for applying these kinds of rules to other coop, real-time simulation games.</div>
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-66049755636683845872016-07-19T19:03:00.002-07:002016-08-16T11:26:33.742-07:00Inside (Understanding Games #3)<a href="http://1.bp.blogspot.com/-0Rf6TlGf3d8/V4RfrVtF-KI/AAAAAAAAE2c/Qcjt80tuI-YceODDkAgkNUnNdhY9ZRlKgCK4B/s1600/Inside-Header.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a><a href="http://1.bp.blogspot.com/-0Rf6TlGf3d8/V4RfrVtF-KI/AAAAAAAAE2c/Qcjt80tuI-YceODDkAgkNUnNdhY9ZRlKgCK4B/s1600/Inside-Header.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a>
<i>This is the third article in a series documenting my <a href="http://casual-effects.blogspot.com/2016/05/game-camp-for-grownups.html">Game Camp for Grownups</a> at <a href="http://www.williams.edu/">Williams College</a> for introducing humanities faculty to the medium of video games. [Previous: #2:<a href="http://casual-effects.blogspot.com/2016/07/monaco-understanding-games-2.html">Monaco</a>]</i><br />
<br />
<b>“Inside” (2016) </b><br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-OeEiDiKg-cA/V47J-lNwfmI/AAAAAAAAE6g/qJwCdpzy68sh90yaUM_KEElAkk6D41CDgCK4B/s1600/maxresdefault.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://3.bp.blogspot.com/-OeEiDiKg-cA/V47J-lNwfmI/AAAAAAAAE6g/qJwCdpzy68sh90yaUM_KEElAkk6D41CDgCK4B/s320/maxresdefault.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">"Inside"</td></tr>
</tbody></table>
Designed by J. Carlsen<br />
Directed by A. Jensen<br />
Developed and published by Playdead for Xbox One and Windows<br />
<br />
Jensen and Carlsen’s previous game, “LIMBO,” was a spectacular combination of 2D platforming mechanics, puzzles, environmental storytelling, narrative, ambient audio, and 2D art.<br />
<br />
<a name='more'></a>With “Inside,” they’ve polished and matured that formula into what looks to be the game of the year.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-1pzkT18Plzc/V47b74JmpiI/AAAAAAAAE7o/EeR-8WM9_DgBK0mD5G-wLQKooYMIwg71QCK4B/s1600/Limbo-2.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://2.bp.blogspot.com/-1pzkT18Plzc/V47b74JmpiI/AAAAAAAAE7o/EeR-8WM9_DgBK0mD5G-wLQKooYMIwg71QCK4B/s320/Limbo-2.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">"LIMBO"</td></tr>
</tbody></table>
<b>Unlike most games, you must to play all of the way through "Inside" to appreciate it</b>. If you stop even 80% of the way through, then you'll miss essential elements of the game. It is fine to play the game with a group of people and pass the controller around. Just make sure that everyone has chance to control each of the types of challenges, for example: under water, shockwaves, etc.<br />
<br />
It should take you about three hours to complete the game, provided you don't get stuck anywhere for too long. If you <i>are</i> stuck on a puzzle and would like to move on, I consider it acceptable to use a <a href="http://www.polygon.com/inside/2016/7/1/12074742/puzzle-help-solutions#toc">walkthough guide</a> (but don't read ahead...only consult the guide to move past a specific puzzle). That's because this particular game communicates through the narrative and the feel of movement, not the puzzle solving.<br />
<br />
Technically, "Inside" has two endings, and only one choice in the entire game: which ending to drive for. However, the second ending is nearly impossible to achieve without a lot of time investment and looking at a guide. I can't believe that the typical player is expected to play it. I recommend that when you've seen the credits roll on the first ending you simply look up a video of the second ending so that you'll know what it is.<br />
<br />
<h2>
Flawless</h2>
While there are many great games, I can think of only a handful of flawless ones.<br />
<br />
<a href="http://3.bp.blogspot.com/-ak_Aq_46Xiw/V47JysQMyNI/AAAAAAAAE6Y/sLSw38M2nqkg8NXn8NAl3zlD1DUTeb0pACK4B/s1600/INSIDE-Xbox-360.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="180" src="https://3.bp.blogspot.com/-ak_Aq_46Xiw/V47JysQMyNI/AAAAAAAAE6Y/sLSw38M2nqkg8NXn8NAl3zlD1DUTeb0pACK4B/s320/INSIDE-Xbox-360.jpg" width="320" /></a>Flawless games are the ones where the technical elements, the controls, the balance, and the mechanics all are perfect for each other and what the game achieves and there is no room for improvement.<br />
<i><br /></i>
<i>Super Mario Bros.</i>, <i>Tetris</i>, <i>Metroid: Zero Mission</i>, <i>Ocarina of Time</i>, <i>Age of Empires III</i>, and everything Tim Schaffer made at LucasArts are in this category. In recent history, <i>Portal</i> and <i>Portal 2</i> are flawless. <i>XCOM</i> almost achieves this company, but it is held back by the cut scene visuals, which will look dated in a few years. (It is hard for any game with realistic human characters to be flawless today because real-time computer graphics and artificial intelligence still aren't very good at depicting humans.)<br />
<i><br /></i>
"Inside" is flawless. The art style of "Inside"<i> </i>abstracts the human characters in an animated style that needs no improvement and will age well. Volumetric lighting, fire, water, and glass are all rendered perfectly through careful art direction, even though each of these is considered an open problem in graphics technology. These effects are all used to guide the player and enhance tone.<br />
<br />
It is the first 3D game that I've seen with zero aliasing (no jagged edges or flickering). That alone is a huge achievement, because many people feel that aliasing is the primary visual difference between CGI film and games.<br />
<br />
The puzzles and platforming elements are tuned as well as possible. They present a challenge that gives the player a sense of accomplishment on defeating them, but are not so hard as to drive most to quit in frustration. The diversity of platformer mechanics employed is impressive. These include lock and key, physics, jumping puzzles, audio puzzles, timing puzzles, patterns, arcade sequences, backtracking, side quests, and ordering puzzles (e.g., crossing a river with a fox and geese).<br />
<br />
Pacing is excellent. Just as a style of play becomes familiar or the story starts to wear thin, the game layers more complexity and introduces twists. The overarching story and ending(s) are sublime.<br />
<br />
Although there is nothing I would change about "Inside," I do not present it as the acme of video games or a model for what all other games should be like. It has perfectly executed its own unique design, but game design is a vast space. Some games excel with novel mechanics, complex 3D graphics, choice-driven narratives, and other directions which "Inside" does not explore. This is a great game and there's a lot of room for other types of great games as well.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-LbZVU14u-eg/V47KFeeSr_I/AAAAAAAAE6o/QbsevpoFyhQ2kmCCSPgomNeses3-A887ACK4B/s1600/Playdead-Inside-Screenshot-Piggy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="https://4.bp.blogspot.com/-LbZVU14u-eg/V47KFeeSr_I/AAAAAAAAE6o/QbsevpoFyhQ2kmCCSPgomNeses3-A887ACK4B/s400/Playdead-Inside-Screenshot-Piggy.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2>
Between Film and Games</h2>
In this series, I use "media" as a generalization of medium, genre, and form. I've discussed how media provide structures and conventions. An individual work often draws on multiple media. It is important to analyze each work using the appropriate tools. So, what are the right tools for "Inside"?<br />
<i><br /></i>
Last week's game, <i>Monaco,</i> is close to the center of mass of the "video game" medium and leverages mostly game-like structure: foregrounded mechanics, meaningful choices, and a unique experience driven by them on every play through. We analyzed <i>Monaco</i> as a video game and downplayed the narrative and characters. A game like<i> </i>that is called <i>emergent</i> because the mechanics allow many different situations to arise based on player choice. "PAC-MAN DX" is also emergent.<br />
<br />
"Inside"<i> </i>draws equally from animated film and video game structure. It is a purely <i>progressive </i>game, in that the player works through a predetermined linear progression with minimal (in this case no) real choices. We can apply some of the tools of video game analysis to "Inside" for discussing the control feel and the layered puzzle mechanics. But the purely progressive nature, strong narrative, breathtaking visuals, and ambient soundtrack of this work signal that we must also analyze it using techniques from animated film.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-RymvYA_jtQI/V47brrCkw_I/AAAAAAAAE7c/JH6zS8QwLD4mqd8ShpsiI1B4Q8ZPGXPIACK4B/s1600/uncharted-4-story-trailer-04-1280x720.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://3.bp.blogspot.com/-RymvYA_jtQI/V47brrCkw_I/AAAAAAAAE7c/JH6zS8QwLD4mqd8ShpsiI1B4Q8ZPGXPIACK4B/s320/uncharted-4-story-trailer-04-1280x720.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Uncharted 4</i></td></tr>
</tbody></table>
Progressive games are good for narratives but create a clear tension between giving the player apparent control and actually restricting it. Naughty Dog's <i>Uncharted </i>series is one of the few progressive game series in which this tension is resolved well. The immaculate design of those games predicts and manipulates the player's desires so well that many players simply don't feel manipulated or constrained. (<i>The Last of Us </i>is also by Naughty Dog and has a similar design and is arguably even better. It introduces enough RPG elements to make the combat sequences more emergent even though the overarching narrative is tightly controlled, and the narrative scenarios are more sophisticated.)<br />
<i>The Stanley Parable</i> is a progressive game that directly criticizes other progressive games.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-Wk0JYq5tdhI/V47bMHUnfeI/AAAAAAAAE7U/CJ-73WmpVsM54csoJDl5yPyK-uXSyCQIACK4B/s1600/images.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://4.bp.blogspot.com/-Wk0JYq5tdhI/V47bMHUnfeI/AAAAAAAAE7U/CJ-73WmpVsM54csoJDl5yPyK-uXSyCQIACK4B/s400/images.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>The Stanley Parable</i></td></tr>
</tbody></table>
"Inside" takes an extremely sophisticated approach that lies between that of <i>Uncharted</i> and <i>The Stanley Parable</i>. It motivates the player with the classic, implicit platformer command that dates back to <i>Super Mario Bros.: Go Right!</i><br />
<br />
"Inside" then introduces a very compelling narrative, which is told solely through environmental storytelling. This draws the player on, and, combined with excellent use of light, music, and visceral terror (of drowning, of capture, of execution, ... and various worse horrors later in the game), drives gameplay so that there is little desire to make any choice except move to the right of the screen, <i>quickly</i>. This is the <i>Uncharted</i> approach, and where the game draws heavily on film-like conventions.<br />
<br />
But even as it manipulates the player, "Inside" reflects its structure with the in-game themes of control and manipulation. As with <i>The Stanley Parable</i>, the creators are clearly aware that they've made a purely linear experience, with no choices. One can construct a strong argument that the game is self-aware of its status as a game, based on the main and secret endings (I won't present that argument here, to avoid spoilers.)<br />
<br />
Unlike <i>The Stanley Parable</i>, "Inside" doesn't criticize progressive games. It is presenting a film-like narrative and enhancing the experience by making you responsible for the maintaining the progression. I don't think I would have felt terror in watching some of the scenes in a traditional film, but I was near panic when playing them. When surreal and grotesque elements emerged in the final sequences, my reactions to them were very different than they would have been for a film. The sense of identification with the protagonist is much stronger in a well-executed game than in a well-executed film; <i>Inside</i> bridges the two.<br />
<br />
<h2>
References</h2>
"Inside" is artistically related to its predecessor, "LIMBO." I don't see that as a reference, however. Carlsen and Jensen are iterating on their vision and "Inside" is probably closer to it.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-2rLVq4-vatg/V47bAE6jScI/AAAAAAAAE7I/XlByFQlp5ngLbJ9MhhJnNoeXmmG_iQy0ACK4B/s1600/1.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://4.bp.blogspot.com/-2rLVq4-vatg/V47bAE6jScI/AAAAAAAAE7I/XlByFQlp5ngLbJ9MhhJnNoeXmmG_iQy0ACK4B/s320/1.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Another World</i></td></tr>
</tbody></table>
"Inside" strongly references <i>Another World</i> (a.k.a. <i>Out of this World</i>), <span class="Apple-tab-span" style="white-space: pre;"> </span>Éric Chahi's 1991 video game. <i>Another World </i>was commercially and critically successful at the time of its release, and deservedly so--the game's structure, story, and visuals were among the best ever achieved in 2D and ahead of their time.<br />
<br />
<i>Another World</i> has since been lost from the general public's gaming consciousness (compared to, say, <i>PAC-MAN</i>) but remains a cult classic. Like <i>The Velvet Underground & Nico</i> for pop music, <i>Another World's</i> influence on game designers was significant beyond the work's direct impact. In "Inside," the visual style, progressive narrative, overall tone, and some specific elements (e.g., the worms, the pig charge, swimming) are so clearly from <i>Another World</i> that they must be explicit homages.<br />
<br />
As the progenitor of all medium and long-form platformers, <i>Super Mario Bros.</i>'s imprint is strong on its descendants. "Inside" even uses the exact same controls: directional pad movement, A button for jumping, and B button for actions. The responsiveness of the controls is refreshing at a time when many artistically-inclined platformers are a bit loose, and the complexity of mechanics explored with simple controls references some of <i>SMB</i>'s expansiveness...timing, sliding, different types of challenges, and so on.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-GqYz6mKR5OI/V47aXf6j8AI/AAAAAAAAE64/OZv-J7LOumEGI8h_NeiGN-ln6L5MTwOYwCK4B/s1600/Videodrome%2B-%2B3.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="112" src="https://1.bp.blogspot.com/-GqYz6mKR5OI/V47aXf6j8AI/AAAAAAAAE64/OZv-J7LOumEGI8h_NeiGN-ln6L5MTwOYwCK4B/s200/Videodrome%2B-%2B3.jpg" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cronenberg's <i>Videodrome</i></td></tr>
</tbody></table>
I have no evidence of conscious reference, but overall "Inside" feels very much like what we'd see if David Cronenberg remade Andrei Tarkovsky's <i>Stalker</i> (1979). The grotesque aspects, themes of control...and media, metamorphosis, endless dripping military-style installations, supernatural elements, and meditative pace speak to both of those film influences.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-hVQuMUqW7u0/V47ajloHjyI/AAAAAAAAE7A/utlfRxv6TXQsDN0AT79NiwML9z0wzsLHgCK4B/s1600/screenshot-4.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="112" src="https://2.bp.blogspot.com/-hVQuMUqW7u0/V47ajloHjyI/AAAAAAAAE7A/utlfRxv6TXQsDN0AT79NiwML9z0wzsLHgCK4B/s200/screenshot-4.jpg" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Portal 2</i></td></tr>
</tbody></table>
Likewise, <i>Portal 2</i>'s environments and environmental storytelling must have affected Carlsen and Jensen. <i>Portal 2</i> and "Inside" are both platformer puzzle games with strong narratives and dystopian, semi-fascist settings. They are very different games, but complement each other, and I suspect that without <i>Portal</i> <i>2 </i>to set the bar and fire the imagination, "Inside" would have tackled a less ambitious scope.<br />
<br />
<h2>
Post-Game Activities</h2>
<div>
<ol>
<li>"Inside" leverages both short (animated) film and game conventions, so let's analyze it as both. If you've just completed the game, then the story and ending must be foremost in your mind. Think of the experience as a film. Objectively describe its elements:</li>
<ol>
<li>Characters (protagonist, antagonist, supporting cast)</li>
<li>Setting</li>
<li>Plot points, including the MacGuffin, climax, and denouement (don't interpret, just literally state what happened)</li>
<li>Visual style and key composition elements</li>
<li>Audio style and key themes</li>
</ol>
<li>Now, consider the objective elements of the experience as a game. Each sequence presents different mechanics and they are quite diverse, so pick one, such as "the shockwaves" or "the mer-child." Describe:</li>
<ol>
<li>The gameplay state</li>
<li>The animation state</li>
<li>The player controls</li>
<li>The rules (how the state evolves over time and due to player inputs)</li>
<li>The high-level player choices</li>
</ol>
<li>Having objectively described the game, now consider the effect on the player of the combination of mechanics and narrative. List emotions that you felt at different points in the game, and describe how those elements conspired to make you feel this way. The jump scares, moments of horror, and sublime moments are easy to remember...but most players actually have several moments of laughter (comic, not nervous), delight, and fiero, in this game that they may not remember by the end. It may help to play with someone else and note their reactions as you proceed.</li>
<li>Many players will see several (gruesome) deaths of the boy. The game then resets the puzzle as if time had gone backward. But real time has not gone backward, and the player remembers those experiences and the tone that they set. How do these discredited events function in a narrative game?</li>
<li>Interpret the game. There are several specific points which are complex, and occasionally ambiguous (I'm deliberately phrasing this to avoid spoiling the ending):</li>
<ol>
<li>Who is the boy? Why is he running? Is he escaping or running into the facility.</li>
<li>Why are the factory workers wearing masks? Why is the boy not wearing a mask? (These are really important points.)</li>
<li>What is the facility?</li>
<li>Why are there children at the facility with the workers?</li>
<li>When you encounter drones that you can't control...who or what is controlling them?</li>
<li>The sequence where you impersonate the drones in the line is dense with meaning at a meta level. How does that sequence mirror and reflect on the game as a whole? Consider the interpretation of this given that the drones can themselves operate the mind control devices...</li>
<li>What is the relationship between the worms, the pigs, the drones...and the ending?</li>
<li>What is the back story on the drone people? How did they come into existence? What is their future?</li>
<li>What causes the shockwaves?</li>
<li>What happens to the boy when he's deep underwater and the mer-child plugs him in?</li>
<li>Who are the other characters looking into the final tank?</li>
<li>What is the relationship between the boy and what he finds in the final tank?</li>
<li>Is the boy really the protagonist of the game?</li>
<li>Who are the mer-children? How did they come to be?</li>
<li>Is the player present as an implicit character in the game, or entirely outside of the game?</li>
<li>Who is the player controlling for the end sequences of the game?</li>
<li>What happens at the end of the game? Is this a happy ending? A tragedy?</li>
<li>Interpret the second ending.</li>
</ol>
</ol>
</div>
<h2>
Recommended Reading</h2>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-vlY0YfuFrAk/V47k4Z91YkI/AAAAAAAAE8A/8DRhj2B_Bs0gMU5vH3DtZde-v-KdlyCWQCK4B/s1600/shadow-of-the-colossus.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://3.bp.blogspot.com/-vlY0YfuFrAk/V47k4Z91YkI/AAAAAAAAE8A/8DRhj2B_Bs0gMU5vH3DtZde-v-KdlyCWQCK4B/s320/shadow-of-the-colossus.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Shadow of the Colossus</i></td></tr>
</tbody></table>
As in "Inside," some radically different games use similar techniques to create emotional attachment to characters. I'm thinking of <i>Portal 2</i>, <i>Grim Fandango</i>, <i>Shadow of the Colossus, To the Moon</i>, <i>Two Brothers</i>, "Gone Home," "Firewatch," <i>Journey</i>, and <i>XCOM</i>. In many cases, these aren't the player character. In <i>Portal 2</i> and "Gone Home," the characters who we feel so strongly about don't even appear on screen.<br />
<br />
<a href="http://3.bp.blogspot.com/-gJg969npX20/V47kup2s0II/AAAAAAAAE74/k7L54OuyJbErv5OsiAtADSAzAmrfOlPTQCK4B/s1600/41sbTPs-MQL._SX334_BO1%252C204%252C203%252C200_.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://3.bp.blogspot.com/-gJg969npX20/V47kup2s0II/AAAAAAAAE74/k7L54OuyJbErv5OsiAtADSAzAmrfOlPTQCK4B/s200/41sbTPs-MQL._SX334_BO1%252C204%252C203%252C200_.jpg" width="134" /></a>Isbister, <i><a href="http://amzn.to/29HyKTF">How Games Move Us: Emotion by Design</a></i>, MIT Press 2016 discusses some of the techniques specific to interactive media that create (or, manipulate) emotional connections with characters.<br />
<br />
"Inside" and its spiritual predecessor, <i>LIMBO</i>, can be classified as both popular and potentially fine art. Upton, <i><a href="http://amzn.to/29D5yg1">The Aesthetic of Play</a></i>, MIT Press, 2015 explains the different kinds of art to which different games aspire and shows the value in each. It then explores the spaces between these, which "Inside" inhabits.<br />
<br />
<br />
<br />
<i>Next: <a href="http://casual-effects.blogspot.com/2016/08/her-story-understanding-games-4.html">Understanding Games #4: Her Story</a></i><br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-73445297340596593962016-07-12T19:17:00.002-07:002016-07-19T19:39:54.753-07:00Monaco (Understanding Games #2)<i>This is the second article in a series documenting my "<a href="http://casual-effects.blogspot.com/2016/05/game-camp-for-grownups.html">Game Camp for Grownups</a>" at <a href="http://www.williams.edu/">Williams College</a> introducing humanities faculty to the medium of video games. [Previous article in the series: #1 <a href="http://casual-effects.blogspot.com/2016/07/pac-man-dx-intro-to-games-1.html">PAC-MAN DX</a>]</i><br />
<b><i><br /></i></b>
<b><i><br /></i></b>
<b><i>Monaco: What’s Yours Is Mine </i>(2013)</b><br />
Designed by A. Schatz and A. Nguyen<br />
Developed by Pocketwatch Games<br />
Published by Majesco Entertainment for Windows, OS X, Xbox 360, and Linux<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-_WQ18wrZ5HM/V4USh3I0LKI/AAAAAAAAE2s/W70Jla2ldUIjKe4Egwepcw4EGQcVDttuACK4B/s1600/monaco-header.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="182" src="https://3.bp.blogspot.com/-_WQ18wrZ5HM/V4USh3I0LKI/AAAAAAAAE2s/W70Jla2ldUIjKe4Egwepcw4EGQcVDttuACK4B/s320/monaco-header.jpg" width="320" /></a></div>
<i>Monaco </i>is an indie video game that combines the elegance of the “PAC-MAN” game with the theme of the <i>Ocean’s Eleven</i> movie. It is best experienced with four players on a couch cooperating to execute heists...which invariably go wrong.<br />
<br />
An early version of <i>Monaco</i> won the 2010 GDC Independent Games Festival Excellence in Design and Seumas McNally Grand Prize awards. The McNally award for independent games is comparable to the Sundance Grand Jury Prize for independent film.<br />
<br />
<a name='more'></a><br />
<h2>
Advice for Playing</h2>
<div>
<i>Monaco </i>doesn't have a great tutorial on the controls and strategy...it is an indie game that expects more literacy and perseverance than we might have for our second game ever. The actual gameplay is accessible, you just need some advice:<br />
<br />
<h3>
Controls</h3>
<br />
<ul>
<li>Use the left stick to move</li>
<li>Hold the left trigger to sneak, so that you don't alert the guards. (Other noises such as healing and the Mole digging will also alert guards!)</li>
<li>Use the right stick to aim when you have a gun</li>
<li>Use the right trigger to use your current item: shoot a gun, launch a smoke bomb, plant explosives, etc.</li>
<li>The A button selects on menus. The B button cancels or returns to the previous menu. This is most important on the character selection screen.</li>
<li>The A button brings up the HUD for a short period of time. It displays your character's inventory and health around the character and the current objective on the lower-right of the screen.</li>
<li>The start button swaps between online and local play on the main menu</li>
<li>Pressing continuously against a door brings up a timer. When the timer completes, the door is unlocked and you can walk through it. Some doors lock behind you.</li>
<li>You can also "open" bushes and hide in them, unscrew light bulbs, activate computer terminals, and take other actions to affect the map.</li>
<li>The Mole's digging mechanic is the same as opening a door, but he can use it on most (but not all) walls.</li>
<li>The Cleaner just runs over an unalarmed guard from behind to use his ability</li>
</ul>
<br />
<h3>
Strategy</h3>
<br />
<ul>
<li>This is a game about map traversal, not primarily about twitch. Remember what you learned in PAC-MAN.</li>
<li>Monaco is primarily a stealth & strategy game. Move slowly, keep the team together, and plan your movements from safe zone to safe zone.</li>
<li>You will very rarely use guns. They are distributed sparsely and have little ammo. Save them for a desperate moment, or a carefully planned attack.</li>
<li>This is a role playing job...everyone has to pick a good combination of roles for the map, and then actually play them. Let the Locksmith open doors, wait while the Cleaner runs out and neutralizes the guards, have the Mole strategically create new passages for you, etc. Do not "Rambo" and run off on your own.</li>
<li>When one player is in a bush or the exit, it is held open and others can run in without a timer.</li>
<li>When one player has unlocked a door and is standing in its doorway, the other players can run through it. Have the locksmith open doors and then hold them open so that others can go through.</li>
<li>You can hide in the exit, a bush, or a catwalk until things calm down, and then leave it again.</li>
<li>You can't hide in a bush while a guard is watching you...break line of sight first</li>
<li>Guards display their state with icons, which slowly fill up as they change state:</li>
<ul>
<li>ZZZ (Sleeping): you can sneak in front</li>
<li>No icon: you can sneak past behind</li>
<li>?: the guard is looking for you, but not yet alarmed</li>
<li>!: the guard is alarmed and actively seeking you to attack</li>
</ul>
<li>When you're going to "die", run to some place that will be easy for the team to revive you. Avoid dying right in a patrolled hallway or in a bank vault covered with laser trip wires because it will be hard for someone to stay there long enough to heal you.</li>
<li>You should be able to complete most levels in 5-10 minutes one you have a good plan. Assume that your first play through on each level is just to explore the map and make a plan, and that you'll have to play each one twice.</li>
</ul>
<br />
<h3>
Concepts</h3>
Some high-level ideas to consider as you play <i>Monaco </i>are:<br />
<br />
<ul>
<li><b>Implicit design</b></li>
<ul>
<li>Player communication + cooperation as a mechanic</li>
<li>Time as a resource</li>
<li>Fiction explains the rules</li>
<li>Fiction in place of (vs. requiring) assets; the game in the mind</li>
</ul>
<li><b>Emergence</b></li>
<ul>
<li>Complex scenarios from simple rules</li>
<li>The players' experiential stories vs. the games' explicit narrative</li>
</ul>
<li><b>Minimalism</b></li>
<ul>
<li>Complex interactions from simple controls</li>
<li>Less-is-more graphic design</li>
<li>Dynamic and tiny user interface for significant state</li>
</ul>
</ul>
<div>
<br /></div>
<br />
<h2>
Cooperative Multiplayer</h2>
Each player in<i> Monaco </i>controls a character on the (cooperative) heist team. As in cooperative games such as<i> Left 4 Dead</i>, <i>Team Fortress</i>, and <i>Overwatch</i>, each character has a specific role created by their unique abilities. This increases cooperation through interdependence.<br />
<br />
<i>Aside: this style of game is sometimes called an "action role-playing game" (ARPG) to distinguish it from theatre-exercise style "role playing" of inhabiting a character; "pen-and-paper role-playing games" such as Dungeons & Dragon use "role" in both senses.</i><br />
<br />
For example, the Redhead charm enemies and the Mole can break through walls. All characters can perform the basic functions of manipulating weapons (which are sparsely distributed), picking up loot, and opening doors.<br />
<br />
As with the <i>Left 4 Dead </i>series, the mechanics of <i>Monaco</i> particularly reward teamwork and make players feel dependent on one another. Many levels are best accomplished with a plan and each player filling a specific role. Player characters can't be killed...but they can be knocked unconscious and must be revived by each other. Player communication is one essential mechanic for the game, and it interestingly is a mechanic that is implicit instead of coded in the game's rules and software.<br />
<br />
<i>Monaco</i>'s style of multiplayer fits the game's theme and has a specific socially valuable effect. It was also chosen intentionally. There are many different kinds of multiplayer game. Some elements that affect the style of play are:<br />
<br />
<ul>
<li>Are the players physically in the same space, as I recommend for <i>Monaco</i>, or in different locations connected by the internet?</li>
<li>Cooperative vs. teams vs. everyone-for-themselves competitive</li>
<li>Are players sharing a screen? Some mobile and "LAN party" games are intended for players on different computers who are still in the same physical location. This allows private information for each player.</li>
<li>If the players share a screen, do they also share a view, or are there multiple small viewports on the screen (e.g., as in <i>Halo</i>)?</li>
<li>Do the players have distinctive roles?</li>
<li>Are the abilities of opposing players/teams symmetric or asymmetric?</li>
<li>How many players are in a game? <i>Halo </i>co-op supports two, <i>Monaco</i> supports four, <i>Rocket League</i> supports eight, <i>Overwatch</i> supports twelve, <i>Battlefield 1</i> supports 64..., <i>EVE Online</i> supports tens of thousands.</li>
<li>Is play real-time or turn based? If turn based, is it synchronous or asynchronous?</li>
<li>Can artificial intelligence ("bot") players be substituted for humans?</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/NtpLP4_losA/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/NtpLP4_losA?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
Cooperative play in <i>Monaco</i></div>
<br />
<h2>
Fiction</h2>
We know from "PAC-MAN DX" that the game medium relies primarily on mechanics to create the experience, with visuals, audio, story, and characters in supporting roles. These supporting elements are broadly called "content" or "assets" by game developers during production.<br />
<br />
For analysis purposes, the content is often referred to as the "fiction," "frame tale," or "theme" (in the sense of "theme park", not literary theme) of the game.<br />
<br />
<i>Monaco</i> has an overarching narrative motivating each game level, which is primarily explained by loading screen text. The writing and music are superb. This fiction serves its traditional game roles:<br />
<br />
<ul>
<li>Make game mechanics concrete and intuitive (we pick up "gold," use "weapons" to attack, are slowed in traversal by "doors," etc. which need no explicit explanation compared to abstract "points," "powerups," and "zones")</li>
<li>Provide a MacGuffin (artificial and irrelevant motivation) for in-game goals</li>
<li>Draw together</li>
<li>Enhance engagement by stimulating more senses and modes of thinking</li>
</ul>
<br />
This is our first game with human characters. Each has a distinctive personality appropriate for their ability that is brought out on the loading screens. The storyline and characters are banal. That is intentional, and not a flaw.<br />
<br />
For a game with complex mechanics and emergent gameplay like <i>Monaco</i>, the players' attention needs to be on the mechanics and strategy. (This will be taken to an extreme by <i>XCOM</i> later in our series.)<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-wxxGzKneQ74/V4WjAHVhc2I/AAAAAAAAE3k/EJbgOkHTkiIRq-xWsSZQHd1l43yPK_CgACK4B/s1600/3334_2_large.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://1.bp.blogspot.com/-wxxGzKneQ74/V4WjAHVhc2I/AAAAAAAAE3k/EJbgOkHTkiIRq-xWsSZQHd1l43yPK_CgACK4B/s320/3334_2_large.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Ocean's Eleven </i>(1960)</td></tr>
</tbody></table>
The cliched story and characters allow players to instantly understand the motivation, key game elements, and setting so that the game can get underway. If the game instead dropped players into a complex and novel narrative, they would not have enough information to make choices without significant exploration of the game world...it would become a game about discovery, and not a game about strategy and rapid tactical maneuvers.<br />
<div>
<br /></div>
Even ensemble movies, TV episodes, and plays have a protagonist whose storyline and viewpoint frame the experience. One interesting aspect of <i>Monaco</i>'s couch-multiplayer, coop, shared-view approach is that there really is no protagonist. The viewpoint and story are shared. The story elements introduce the Locksmith as the protagonist, but this isn't mirrored in the mechanics and gameplay.<br />
<br />
<h2>
Portrayal</h2>
The characters are all white Europeans, and only two of eight are female. One of the female characters has a sexual theme and the other a passive, "den mother" role (the Lookout is the most useful character for the team and the least fun to play). There appears to be some age range, from teenage hacker to the late 50's Gentleman.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-pq2IBYY8jOg/V4WhMED_QDI/AAAAAAAAE3I/ASsc4488txowmBM2tEAzIBhl1n6QZb4igCK4B/s1600/monacoprintset_all_1024x1024.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="305" src="https://3.bp.blogspot.com/-pq2IBYY8jOg/V4WhMED_QDI/AAAAAAAAE3I/ASsc4488txowmBM2tEAzIBhl1n6QZb4igCK4B/s320/monacoprintset_all_1024x1024.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Penny Arcade's interpretation of the <i>Monaco</i><br />
characters. The actual in-game silhouettes from the<br />
storyline are at the bottom with their colors.</td></tr>
</tbody></table>
<i></i>
<i>Monaco </i>clearly inherited these sterotypes from classic heist films such as <i>Ocean's Eleven</i>, <i>Italian Job, The Great Train Robbery, </i>and<i> Heat</i>, with a dash of James Bond thrown in. The game isn't about the characters and they are represented as a handful of colored rectangles in actual gameplay. So in this case, I think this lack of diversity is a disappointing statistic and missed opportunity more than something worth analyzing further.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-Zi8QhC-iRFY/V4WhukR-wvI/AAAAAAAAE3U/mRsW89WXQPwMhiK3LHgMXLNAJSrr_O5pACK4B/s1600/steamworkshop_webupload_previewfile_315734800_preview.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="112" src="https://4.bp.blogspot.com/-Zi8QhC-iRFY/V4WhukR-wvI/AAAAAAAAE3U/mRsW89WXQPwMhiK3LHgMXLNAJSrr_O5pACK4B/s200/steamworkshop_webupload_previewfile_315734800_preview.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The playable characters in <i>Left 4 Dead 2</i></td></tr>
</tbody></table>
<br />
For reference, the <i>Left 4 Dead </i>series that I mentioned earlier provided a more ethnically diverse cast of playable characters that might be easier for more players to identify with. Although there are still only 2/8 female characters, they are not restricted by their gender.<br />
<br />
<h2>
After Game Exercises</h2>
<div>
<i>You may want to look at the PAC-MAN DX responses below before moving on to this week's exercises.</i></div>
<div>
<i><br /></i></div>
<div>
<ol>
<li>As with any game, analyze the objective state and rules of the game. List these explicitly. Focus on the state of the player characters: health, inventory, position (in 3D, due to catwalks!), and then move on to the map.</li>
<li>Draw the mechanical connections between "PAC-MAN" and <i>Monaco</i>. Can you think of other rich modern games that draw heavily on more abstract 1980's games?</li>
<li>An elegant mechanic in both board and video games is to use time as a resource. <i>Monaco</i> does this in several ways. Name and discuss them. Why is this "elegant" compared to an explicit resource such as ammunition?</li>
<li>Explore the mechanics of a single character. Speculate on why the design has the abilities and restrictions that are present for that character to balance its utility (there is no "best" character) and enjoyment. For example, for example, some walls are unbreakable by the Mole.</li>
<li>Consider the medium-specificity of works. I contend that <i>Monaco</i> is the loose equivalent of <i>The Usual Suspects</i> or <i>Ocean's Eleven</i> as a game. If the designers had pressed a script directly into the gameplay, how would a literal transcription of a heist film into a game succeed or fail in a the new medium?</li>
<li>Stories are essential for human communication, including entertainment. The key for emergent games is to note that the real stories are emergent, regardless of the framing narrative. For example, players don't talk about "the twist right after the Hacker was revealed" in <i>Monaco</i>. They talk about "when I was knocked out right under the laser trap and you walked unnoticed right behind the guard to rescue me, timing it with the trap's phases..." How do the mechanics of <i>Monaco</i> create unique and powerful emergent stories?</li>
<li>Review the different ways that multiple players can engage the same game from the multiplayer style list above. Discuss how <i>Monaco</i> would be affected by changing the style of multiplayer. For example, it could have been asymmetric multiplayer with one team controlling the guards. Why is this mode not offered? (N.B. The game can be played single player and multiplayer using separate computers across the internet. I find these vastly inferior.)</li>
</ol>
</div>
<br />
<h2>
Recommended Reading</h2>
<a href="http://4.bp.blogspot.com/-NyjHjoNgkGs/V4Wg6BmcOJI/AAAAAAAAE3A/urTpSiRB710i5Z1cbZzIYBLAsq08d6MFQCK4B/s1600/41Hw0ZKFcsL._SX364_BO1%252C204%252C203%252C200_.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://4.bp.blogspot.com/-NyjHjoNgkGs/V4Wg6BmcOJI/AAAAAAAAE3A/urTpSiRB710i5Z1cbZzIYBLAsq08d6MFQCK4B/s320/41Hw0ZKFcsL._SX364_BO1%252C204%252C203%252C200_.jpg" width="234" /></a><i>Monaco</i> does a nice job of minimizing the controls and user interface required for a relatively large number of actions and per-character state. Swink, <i><a href="http://amzn.to/29HwJGJ">Game Feel: A Game Designer's Guide to Virtual Sensations</a></i>, Morgan Kaufman, 2008 is the canonical text on control design and how it affects the player experience. The introduction alone is worth the read, even if you don't get much farther.<br />
<br />
A core idea that most game designers (and probably many theorists) ascribe to is that the actual game exists in the player's mind, not on the screen. The abstract art style of <i>Monaco</i> combined with the evocative fiction allow players to imagine the world of the game more vividly than could be depicted with current graphics. Shell, <a href="http://amzn.to/29G2d0S"><i>The Art of Game Design:</i> <i>A Book of Lenses</i></a>, CRC Press, 2008 explains this concept in the early chapters (see chapter 2 specifically) and then moves on to analyze game mechanics.<br />
<br />
<i>Monaco</i> contains graphic elements and sounds that are clearly "in the world" and observed by the characters (e.g., gold, walls), others which are clearly not visible to characters (e.g., health bars, timers), and some which denote the characters' knowledge but are represented differently to the players (e.g., the map blueprint). This happens in film as well, but less frequently. For example, characters are clearly not aware of voice over, on-screen location titles, and theme music. Juul, <i><a href="http://amzn.to/29vSve6">Half-Real: Video Games between Real Rules and Fictional Worlds</a></i>, MIT Press, 2011 presents tools for analyzing these different levels of representation and reality in games.<br />
<br />
<h2>
PAC-MAN DX Responses</h2>
Sample responses to the PAC-MAN DX discussion questions from last week are below.<br />
<br />
<br />
1. The state of PAC-MAN DX, organized hierarchically, is:<br />
<br />
<br />
<ul>
<li><b>pacman</b></li>
<ul>
<li>x, y position in pixels [not grid squares...pacman can appear at any pixel on the screen and isn't snapped to the power-pellet grid]</li>
<li>moving direction: up/down/left/right/still</li>
<li>speed in pixels/second (more likely, pixels/frame)</li>
<li>direction to turn at next intersection: up/down/left/right</li>
<li>list of previous positions, used for ghosts that are trailing</li>
<li>animation frame index</li>
</ul>
<li><b>maze</b> is a grid, storing at each square:</li>
<ul>
<li>obstructed by a wall: true or false [this is tricky. As in the original PAC-man, walls appear to be two "squares" thick, counting pellets. But the walls actually are drawn pushed forward and back slightly from the real grid]</li>
<li>contents: empty/pellet/power pellet/fruit</li>
</ul>
<li><b>ghosts</b>:</li>
<ul>
<li>x, y position in pixels</li>
<li>moving direction: up/down/left/right/still</li>
<li>eatable? [you can tell that this is per-ghost state instead of global because new ghosts that spawn after you eat a power pellet are not themselves eatable]</li>
<li>awake?</li>
<li>animating being sent to the center via bomb?</li>
<li>how far behind pacman on trail (0 = not trailing)</li>
<li>holding: nothing/power pellet/bomb</li>
<li>color</li>
<li>...and some animation and artificial intelligence information</li>
</ul>
<li><b>game</b></li>
<ul>
<li>number of bombs left</li>
<li>number of lives left</li>
<li>index of the current dot pattern on the left</li>
<li>index of the current dot pattern on the right</li>
<li>speed</li>
<li>time left</li>
<li>score</li>
<li>last ghost score (used for chaining bonuses for eating lines of ghosts)</li>
<li>...plus some animation and collision slow-down information</li>
</ul>
</ul>
<br />
<br />
2. The choices are interesting. The only literal choices proscribed by the rules for inputs that the player can provide (ignoring pausing and such) are when to push the four direction buttons and the bomb button during the game. If we step back, we see some higher-level choices that are more useful for analysis.<br />
<br />
First, the player can choose the graphics. These add some variety and some help a little with reading the map, but there's not a significant strategic value there.<br />
<br />
Second, the player can choose the starting speed. This is very significant. Because the game runs on a fixed timer (in the starting modes), a higher speed allows the player to earn more points in fixed time. It also reduces the time to plan and think.<br />
<br />
A player with sufficient knowledge of the map and reasonable experience with the controls should always choose the highest speed if their goal is to maximize points (it is reasonable to have a different goal--playing as a less-stressful pastime--and choose a different speed to better satisfy that.)<br />
<br />
Once inside the game, the player has a strategic choice in the map traversal. I suspect that there is an optimal path to collect all pellets and eat the most ghosts in the least time, and the patterns are predetermined so it is possible to learn this path. Falling short of optimality, there are broader strategic choices such as whether to trail a large number of ghosts or avoid them outright, whether to turn and eat those ghosts at the first opportunity or leave them there to build a larger bonus, etc. There are small tactical choices (which mostly arise when the player fails to execute the intended strategy perfectly) of how to respond to ghosts: bombs, allowing PAC MAN to lose a life, or attempting to dodge.<br />
<br />
Let's not forget the ultimate choice: whether to play at all. For many media, the only choices are whether to watch/read/play the work (possibly: again), the ambient conditions for experiencing it, and whether to finish. Many of the tools of analyzing games can be applied to these choices.<br />
<br />
<br />
3. The rules are something like:<br />
<br />
If the player presses a direction button:<br />
if the direction button is opposite the current moving direction or the current moving direction is still:<br />
Immediately set pac-man's moving direction and next turn direction to match the button<br />
otherwise:<br />
Set pacman's next turn direction to match the button<br />
<br />
If pacman is at the center of an intersection:<br />
change the moving direction to the next turn direction<br />
<br />
If the distance between pacman and a ghost is less than 1/2 the sum of their widths:<br />
if the ghost is eatable:<br />
destroy the ghost and increase pacman's score<br />
otherwise, if pacman has more than one life left:<br />
destroy all awake ghosts<br />
reset pacman<br />
decrement the number of lives <br />
otherwise:<br />
game over<br />
...
<br />
<br />
I'll omit responses to the more subjective critique questions.<br />
<br />
<br />
<i>Next in this series: <a href="http://casual-effects.blogspot.com/2016/07/inside-understanding-games-3.html">Understanding Games #3: Inside</a></i><br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
</div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-4709528315661980362016-07-08T09:05:00.002-07:002016-07-19T19:40:30.555-07:00PAC-MAN DX (Understanding Games #1)<i>This is the first in a series of articles describing my 2016 "<a href="http://casual-effects.blogspot.com/2016/05/game-camp-for-grownups.html">Game Camp for Grownups</a>" for introducing the medium of video games to colleagues in the humanities at <a href="http://www.williams.edu/">Williams College</a>.</i><br />
<i><br /></i>
<i><br /></i>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lh5.googleusercontent.com/ZEGFbUXWIO6V5wwhluKEMtMhfm81_QUXprp9KQE0w3v5Dp-ozzmCZmUPSVF6wgu0rA2oNOD_pvcvHLYAetWPNmslYYMU7r2Ks5KItLmTYgYwf_YYdsZuDK_weKYeei1DQbgzppy-" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="185" src="https://lh5.googleusercontent.com/ZEGFbUXWIO6V5wwhluKEMtMhfm81_QUXprp9KQE0w3v5Dp-ozzmCZmUPSVF6wgu0rA2oNOD_pvcvHLYAetWPNmslYYMU7r2Ks5KItLmTYgYwf_YYdsZuDK_weKYeei1DQbgzppy-" style="border: none; transform: rotate(0rad);" width="326" /></a></div>
<b>“PAC-MAN Championship Edition DX+” (2010)</b><br />
Directed by T. Iguchi, T. Iura, and R. Yabuchi<br />
Developed by Mine Loader Software<br />
Published by Namco Bandai for Xbox, Playstation, Windows, iOS, and Android<br />
<br />
Widely considered a perfectly-designed game, “PAC-MAN DX” reinvents the maze-traversal legacy of PAC-MAN titles with modern advances for a gentle learning curve that still rewards hardcore play. The occasional tedium and frustration of the original are gone, and the graphics and audio have been updated to modern standards while retaining the cheer and minimalism that defined classic arcade style.<br />
<br />
Play one of the versions of the game that uses a controller, not the iOS version with the touch screen controls. I presented the game on Windows using Xbox 360 controllers. (iOS with an external controller is fine if it supports one, but iOS controllers are rare.)<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/0bRTVk5ckYo/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/0bRTVk5ckYo?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<i>PAC-MAN Championship Edition DX+ Gameplay</i></div>
<br />
<h2>
Advances since PAC-MAN</h2>
The original PAC-MAN could be played at two levels of sophistication. Casual players enjoyed just moving around the maze eating dots, and rarely progressed beyond the opening stage. They were playing a “twitch” game. Hardcore players understood that it was fundamentally a strategy game about choosing paths and exploiting the ghost movement algorithms. That is, PAC-MAN is a traversal game at heart.<br />
<br />
The original game lacked a bridge between the casual and hardcore styles of play. Thus, the really interesting part of the game was inaccessible to most players. “PAC-MAN DX” uses a series of mechanics to correct this. After the first few runs, you’ll find yourself operating primarily on a strategic basis. There is still a long path of building expertise to enjoy, with the top players able to score about 2000x as high as an average experienced player. Consider which mechanics deemphasize twitch and make strategy accessible, even while preserving the sensation of speed and reaction.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/dScq4P5gn4A/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/dScq4P5gn4A?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
The original PAC-MAN</div>
<br />
<h2>
Gaming Literacy</h2>
PAC-MAN and the other games early in our series stand alone as great titles. However, we’re also using them to build literacy with gaming interfaces and terms. For example, “PAC-MAN DX” will teach you how to operate menus, steer a character using a controller, track your character on screen, and react quickly with these new controls. Those are essential skills before we before tackle the multiplayer game <i>Monaco</i>. In our other first few games, you'll learn or conventions including:<br />
<ul>
<li>Floating colored letters = button or key to press</li>
<li>RT = right trigger</li>
<li>The B button is almost always "cancel or go back" and the A button means "accept"</li>
<li>The play area is fenced with invisible walls</li>
<li>Right stick = turn, left stick = walk</li>
<li>Many games have multiple features that must be unlocked by completing challenges</li>
<li>The player is intended to pillage crates and vases, even in friendly character’s houses</li>
<li>The triggers for game events are often misrepresented by prompts. E.g., if prompted, "escape before the house burns down", the house's collapse will probably be triggered by running out the door, not by a timer. In many games, you can't actually hold of the attacking mob--they will be replenished infinitely and you are intended to run from them.</li>
</ul>
<br />
<h2>
Post-Game Exercises</h2>
<i>We played the game on a large TV by taking turns and I loosely guided discussion among the resting players to hit the following points. Were I teaching a regular course, I would run that discussion in class and assign some parts as homework.</i><br />
<h3>
Mechanics</h3>
Games are composed of state, rules, and choices embedded in the rules. These are more obvious in board games. <b>State</b> is everything you’d have to write down if you had to stop in the middle of play, put the game away, and then resume the following day. Note that not every part of what is on the table is actually relevant game state. For example, the facing direction of a chess knight is irrelevant.<br />
<b><br /></b>
<b>Rules</b> are the instructions for what <b>choices</b> players can make, and how the state is affected by those choices. In a board game, these are printed out. For a video game, these are embedded in the program's source code, and are extremely complex compared to board games.<br />
<br />
<b>Strategy </b>is a player's long-term plan for most or all choices in a game. <b>Tactics</b> are short sequences of choices, often in response to specific patterns of state. These are not an explicit part of the game. They emerge when players engage the game with goals in mind.<br />
<br />
Respond to the following questions and challenges. It may help to think of “PAC-MAN DX” as a board game with turns that are only 1/30-second long and run on a timer.<br />
<ol>
<li>Enumerate the game state in “PAC-MAN DX.” For example, the horizontal and vertical positions of PAC-MAN in pixels, the score, the position of each pellet...</li>
<li>What are the choices in “PAC-MAN DX”? “Do nothing” is certainly one choice.</li>
<li>Describe the rules for:</li>
<ol>
<li>Moving PAC-MAN. Tip: the player does not have direct control of the character!</li>
<li>Eating ghosts</li>
<li>Making dots appear</li>
<li>Making fruit appear</li>
<li>Ghost movement</li>
<li>Points and game speed</li>
</ol>
</ol>
<h3>
</h3>
<h3>
Critique</h3>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-2DoIiWGV7r0/V3_O3rx2KGI/AAAAAAAAE1E/IxfwRjNPeb4ishlAYS0T0ue3MH8fmhhDACK4B/s1600/pacmania.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://2.bp.blogspot.com/-2DoIiWGV7r0/V3_O3rx2KGI/AAAAAAAAE1E/IxfwRjNPeb4ishlAYS0T0ue3MH8fmhhDACK4B/s320/pacmania.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">One of many alternative graphics themes</td></tr>
</tbody></table>
An academic critique is not a review. The reader wants to understand the work and its relation to culture largely objectively, not primarily know your personal opinion or know if they should buy the game.</div>
<div>
<br /></div>
<div>
A critique always begins by concretely and quantitatively describing the work, then moving towards interpretation, and finally and closing with supported arguments around qualitative elements. For example, a film critique focused on cinematography might include statements such as:</div>
<blockquote class="tr_bq">
Quantitative: <i>the closing shot is a 16:9 shot of a sunset, with the red sun at the center framed by palm tree silhouettes on the outer thirds</i></blockquote>
<blockquote class="tr_bq">
Interpretation: <i>the camera is fixed while the sun falls straight down, creating a vertical movement that contrasts the horizontal waves and leaves</i></blockquote>
<blockquote class="tr_bq">
Qualitative argument: <i>this echoes the opening shot of a sunrise and tells us that the story is ending...it also indicates the off-screen death of the protagonist, whereas a sunrise might indicate a rescue</i></blockquote>
<div>
Each medium/genre/form (which I’ll collectively call “medium” for short) provides a set of conventions and techniques for communicating to the audience. Media are just that--sets of techniques, not rigid categories. I think of them as marks on a spectrum instead of boxes.</div>
<div>
<br /></div>
<div>
Any given work might leverage elements of multiple media. For example, <i>Firefly</i> was an episodic science fiction TV show. But it also leveraged the narrative structures of classic Western films, season-long arcs in the style of a miniseries, pop-culture characters and dialogue, and conventions of role playing games. It was <i>Stagecoach</i> meets <i>Star Trek: The Next Generation</i> meets <i>Buffy the Vampire Slayer</i> meets <i>Dungeons and Dragons</i>. Based on interviews with the director and writers, this was an intentional construction.</div>
<div>
<br /></div>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-ERlhDCjOE5Q/V3_PHxeBCeI/AAAAAAAAE1M/SFbuGvxUId0wcbRTSnmu3-JHZEUnkuxtACK4B/s1600/CEDX_Digdug_02.1370935421.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://2.bp.blogspot.com/-ERlhDCjOE5Q/V3_PHxeBCeI/AAAAAAAAE1M/SFbuGvxUId0wcbRTSnmu3-JHZEUnkuxtACK4B/s320/CEDX_Digdug_02.1370935421.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">PAC-MAN using <i>Dig-Dug </i>graphics</td></tr>
</tbody></table>
When evaluating a work, it is important to choose the appropriate tools for the medium in critique. You’d evaluate a novel based partly on plot and characters, but a painting based on composition and line. One advantage of starting with “PAC-MAN DX” is that it has essentially no characters or story. It thus foregrounds mechanics and helps us avoid the temptation to over-apply tools from film analysis to game critique. </div>
<div>
<br /></div>
<div>
<div>
Many elements are shared across multiple media, but they cary different weight in each case. A critique should correspondingly emphasize the most structurally-important elements for a medium. For example, one could broadly rank the significance of elements of video games vs. (live action feature-) film media as:</div>
</div>
<blockquote class="tr_bq">
<b>Games</b>: Mechanics > Set > Visuals > Characters > Music + SFX > Plot > Dialogue<br />
<b>Films</b>: Visuals > Music + SFX > Dialogue > Plot > Characters > Set</blockquote>
<div>
<div>
Respond to the following:</div>
<div>
<ol>
<li>Present and support your own ranking for the significance of film elements. I think visuals are objectively the most important, but there are many arguments for what should appear after that.</li>
<li>Enumerate and rank the elements of critique for these media: </li>
<ul>
<li>Novels</li>
<li>Poetry</li>
<li>Feature film animation</li>
<li>Documentary</li>
<li>Classic broadcast episodic television</li>
<li>Streaming “television” (e.g., Netflix and Amazon shows)</li>
<li>Architecture</li>
<li>Dance</li>
<li>Plays</li>
<li>Musicals</li>
<li>Opera</li>
</ul>
<li>Make some one-sentence moderately interesting observations about the game without further discussion. For example,</li>
<ol>
<li><i>the ghosts holding the power-pellets carry the only weapon that can defeat them</i> </li>
<li><i>slowing the game speed when PAC-MAN is about to be eaten removes much of the twitch and stress while emphasizing player heroism</i> </li>
<li><i>since the music and visuals can be switched to those of other games such as Dig-Dug, obviously it is the mechanics that fundamentally define PAC-MAN vs. another game</i></li>
<li><i>PAC-MAN DX borrows many mechanics from its predecessors and other series, but the original was one of the few truly original games, along with Pong, Tetris, and Space War [see the family tree in Koster]</i></li>
</ol>
<li>You’ve already begun a critique by objectively describing many of the mechanics of “PAC-MAN DX.” In about five minutes of oral presentation or two pages of writing, interpret the effect of some of those and then build a more subjective conclusion. For example:</li>
<ol>
<li><i>the sparks make the control scheme of moving the joystick before a turn clear, thus making fast play more accessible because the large time window for input is evident</i></li>
<li><i>the PAC-MAN series enjoys pop-culture standing as the icon of video games [Newswire 2011] and a mythological position as a game independent of a target-market, despite the narrow demographic of top players. PAC-MAN DX exploits this reputation to engage players and then actually delivers the promise for the first time in the history of the series through accessible play and player-selected graphics and audio</i>.</li>
</ol>
</ol>
<br />
<h2>
Recommended Reading</h2>
</div>
</div>
<div>
<a href="http://4.bp.blogspot.com/-8NZ_canXJRk/V3_LGtAMCEI/AAAAAAAAE04/1atWY25wRoUPUuUWJIPJXaLBcrvDLi4mwCK4B/s1600/61H6vxiNURL._SX403_BO1%252C204%252C203%252C200_.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://4.bp.blogspot.com/-8NZ_canXJRk/V3_LGtAMCEI/AAAAAAAAE04/1atWY25wRoUPUuUWJIPJXaLBcrvDLi4mwCK4B/s200/61H6vxiNURL._SX403_BO1%252C204%252C203%252C200_.jpg" width="161" /></a>Koster, <i><a href="http://amzn.to/29sAwaC">A Theory of Fun for Game Design</a></i>, O'Reilly, 2013</div>
<div>
See also the <a href="http://www.theoryoffun.com/theoryoffun.pdf">short presentation version PDF</a>, and <a href="http://www.raphkoster.com/gaming/gdco12/Koster_Raph_Theory_Fun_10.pdf">Koster's reflections PDF</a><br />
<br />
You can read this book in about 90 minutes---it is more a set of comics and zen koans than a traditional text. Koster is a well-respected game writer who designed many large industry games.<br />
<br />
As he notes in his reflections talk, he wrote this highly-acclaimed book in part because his game designs were <i>not</i> highly acclaimed. He wanted to get at what was going wrong with the large-scale titles and articulate the conventional wisdom of good designers which has largely been undocumented outside of the field.</div>
<div>
<br />
<br />
<i>Next in this series: <a href="http://casual-effects.blogspot.com/2016/07/monaco-understanding-games-2.html">Understanding Games #2: Monaco</a></i></div>
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and the <a href="http://amzn.to/1XXrNzl">Skylanders</a> series for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-81618997314574405132016-06-29T08:21:00.000-07:002016-06-30T07:09:28.239-07:00Annecy 2016<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-qFKG8hnMxTM/V3PUB4uJTYI/AAAAAAAAEsw/SDR9LFJ6xAkB-O03x_Gsq_rQC8Sy0W2RgCLcB/s1600/IMG_20160617_120736.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://3.bp.blogspot.com/-qFKG8hnMxTM/V3PUB4uJTYI/AAAAAAAAEsw/SDR9LFJ6xAkB-O03x_Gsq_rQC8Sy0W2RgCLcB/s200/IMG_20160617_120736.jpg" width="168" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Annecy is picture-perfect</td></tr>
</tbody></table>
The <a href="http://www.annecy.org/">Annecy International Animated Film Festival</a> is the oldest and largest regular animation festival. <br />
<br />
The program spans the gamut from blockbuster 3D films to avant garde indie experiments. This is where emerging animators and upcoming hot new films often first debut---it is a glimpse into both the near future of film and to many great ideas that never emerge commercially.<br />
<br />
<a name='more'></a><br />
Part of the charm of the festival is the way it mixes so many cultures and media in a beautiful old city in the French alps. Contrasts and synergy abound. Sitting in a screening, you'll hear ten different languages spoken in your row, and find that you're sitting between a purple-haired film student from Spain and Matt Groening.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-V_lkK5m--tg/V3PUB8p3-KI/AAAAAAAAEs0/g38f2U53ND8HkJ2lXqwr9pvoFCSWLncXwCKgB/s1600/PANO_20160617_114330.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="160" src="https://2.bp.blogspot.com/-V_lkK5m--tg/V3PUB8p3-KI/AAAAAAAAEs0/g38f2U53ND8HkJ2lXqwr9pvoFCSWLncXwCKgB/s400/PANO_20160617_114330.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Continual storms turned the park into a second lake but<br />
produced dramatic cloudscapes over the mountains.</td></tr>
</tbody></table>
I've been attending the Annecy festival for over a decade. You can see some of my previous summaries <a href="http://casual-effects.blogspot.com/2014/12/posts-by-topic.html">here</a>.<br />
<br />
In recent years I've been joined by friends and family in the industry, which has deepened the experience and my perspectives on the works. The trip is always a personal and professional highlight of my year (and exhausting! Screenings run very late and this town parties hard).<br />
<br />
<br />
<h2>
The Year of Living Safely</h2>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-7HlRggU50P4/V3PUBzRWPOI/AAAAAAAAEs4/GGb_0zV8OuIiWaZG_N7m7lqw7Qks6NjfgCLcB/s1600/IMG_20160617_113719.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="122" src="https://2.bp.blogspot.com/-7HlRggU50P4/V3PUBzRWPOI/AAAAAAAAEs4/GGb_0zV8OuIiWaZG_N7m7lqw7Qks6NjfgCLcB/s200/IMG_20160617_113719.jpg" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">One standard for judging a film: would I rather<br />
leave the screening and go eat a crepe?</td></tr>
</tbody></table>
This was the most conservative slate of films I've ever seen at the festival. The highs were sparse and concentrated in a few screenings. The lows were also sparse...everything was <i>reasonable</i>, just often not exciting.<br />
<br />
I'd rather the animators and the jury take more risks to give us lots of gems mixed among some truly awful films than play it safe all around. I left happy to have seen what I did and collected a lot of great films, but also wondering where the magic had gone from the programme as a whole.<br />
<br />
One more word about the disappointments before moving on to the highlights. Almost everything I saw had good technique. In particular, the 3D films were all gorgeous, which has not been the case before. I think we're finally getting the hang of CGI for animation and not just showing off the technology.<br />
<br />
However, much of that technique was wasted on weak scripts and self-indulgently long works. A character or art style that is charming in a two minute film needs a lot more to sustain it when the run time stretches to 30 minutes for a "short." Perhaps the falling cost of animation production has encouraged sloppy pacing. For features, production costs are still pretty high and nothing was self-indulgent. But it was disappointing to see great production teams execute well on scripts and characters that were simply generic. Fart joke. Skateboard. Squash and stretch an animal. Token female and token heavy-set or dark-skinned character. Video-game like quests. Really? When working in a medium that can depict <i>anything</i>, why keep re-making two old CGI films with a fresh coat of new paint and names? Can't we produce blockbusters that are also imaginative any more?<br />
<br />
I was delighted to see a VR programme for that nascent animation medium. This is clearly experimental and I hope that this continues. Most of the "VR" films in it were 360 videos, and interactive experiences that really leverage VR and create telepresence. That makes sense because the technology for hosting true VR screening to large audiences doesn't exist, but perhaps in a decade we'll be closer to jacking into The Matrix between ice creams and crepes at Annecy.<br />
<br />
<h2>
Highlights</h2>
Here are the strongest films my group saw at Annecy in 2016. We were able to cover all of the shorts in competition and almost all of the features, as well as many of the side programs. I look forward to using many of these in my courses next year.<br />
<br />
Usually our picks align closely with the jury's...since they didn't this year, I suspect that the conservatism in the program came from them and not the submission pool. Although we usually disagree a bit (why would you discuss films with people who always agree?), there was pretty clear consensus that these were the hot films and we just had different favorites among them.<br />
<br />
Especially interesting is that the best films landed on opposite ends of the spectrum of complexity. Some were great because they did so much with so little, focusing on the pace and characters to deliver without bells and whistles. I'm personally a fan of very short shorts that deliver a complete experience in under 5 minutes.<br />
<br />
Other films were great because the stories received the elaborate productions that they deserved. Like a magic or circus act, many great animations create dissonance between the fact that the audience is aware of the painstaking hours behind the work and the apparent effortlessness and grace of the performance.<br />
<br />
All of these embrace their medium, which is one of my criteria for a great work. They would have been undermined if the same script was filmed as live action and wouldn't have worked at all if directly translated to static images or prose.<br />
<br />
<b><br /></b>
<a href="http://2.bp.blogspot.com/-zISGPfP6S2k/V3PbZJ0QNpI/AAAAAAAAEtQ/sQL79JKaNKwhzZ_-2zvTrVS-_gQPzAlqQCK4B/s1600/20160926_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://2.bp.blogspot.com/-zISGPfP6S2k/V3PbZJ0QNpI/AAAAAAAAEtQ/sQL79JKaNKwhzZ_-2zvTrVS-_gQPzAlqQCK4B/s320/20160926_1.jpg" width="320" /></a><b>Ma vie de Courgtte </b>(My Life as a Courgette)<br />
Claude Barras<br />
France and Switzerland<br />
2016<br />
1h 5m<br />
<br />
Courgette deservedly won both the Audience Award and the Feature Film Cristal this year. This is a stop-motion feature about an orphan boy named Courgette ("Zucchini") that offsets its realist darkness with bright colors in a way that underscores instead of undercuts them. It is ultimately charming and upbeat, and would be appropriate for older children as well as adults.<br />
<br />
<br />
<a href="http://4.bp.blogspot.com/-WPtNCH2J6jo/V3PlTZctcfI/AAAAAAAAEvU/oDqVQe6jArccFaku96rBePzYQaH5ggNngCK4B/s1600/20161225_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://4.bp.blogspot.com/-WPtNCH2J6jo/V3PlTZctcfI/AAAAAAAAEvU/oDqVQe6jArccFaku96rBePzYQaH5ggNngCK4B/s320/20161225_1.jpg" width="320" /></a><b><a href="https://vimeo.com/ondemand/frankfurterstr99a">Frankfurter Str. 99a</a></b><br />
Evgenia Gostrer<br />
Germany<br />
2016<br />
5 min<br />
<br />
This student film was my favorite this year among all films for its visuals. Each frame is abstract back-lit oil paint on glass. When viewed as a film, they form snatches of representational images illustrating the garbage collector's voiceover. Each image is geometrically precise. Despite the inherent sloppiness of the chosen materials, their placement is impeccable and the result is controlled, beautiful, and minimalist. This graduation film is a vignette without a real dramatic arc and conclusion, but Gostrer is clearly a new animator to watch closely and I'm already a huge fan.<br />
<br />
<br />
<a href="http://2.bp.blogspot.com/-XyAgtYhVhmw/V3S5fOlXq3I/AAAAAAAAEvk/yA-t24lF1vcEbpkOoMeppIwWwQ9eFuZ7ACK4B/s1600/20160346_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://2.bp.blogspot.com/-XyAgtYhVhmw/V3S5fOlXq3I/AAAAAAAAEvk/yA-t24lF1vcEbpkOoMeppIwWwQ9eFuZ7ACK4B/s320/20160346_1.jpg" width="320" /></a><b><a href="https://www.youtube.com/watch?v=gfeKrG74_uQ">25 April</a></b><br />
Leanne Pooley<br />
New Zealand<br />
2015<br />
1 hour 25 min<br />
<br />
I missed this screening. The senior McGuire in digital media production, <a href="http://mccreativemedia.com/">Mick</a>, writes,<br />
<br />
"Taking the unique approach of animating the characters in a documentary film, director Leanne Pooley and team brought to life the tragic tale of New Zealand soldiers during the disastrous WWI Battle of Gallipoli, Turkey.<br />
<br />
Stories extracted from letters and diaries of the soldiers were told by the actual realistic animated characters during the time of the invasion. The crisp color images brought a sense of realism to the documentary that is often lacking in grainy, scratched, black and white stock footage.<br />
<br />
This poignant film stands alone as a documentary, as well as an animated feature film."<br />
<br />
<b><br /></b>
<a href="http://4.bp.blogspot.com/-G1DBSgp06A4/V3PdKzmvgjI/AAAAAAAAEtw/UE-1Ilm2EWQJYEz-EULE-wqkex4yJUWagCK4B/s1600/20161595_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://4.bp.blogspot.com/-G1DBSgp06A4/V3PdKzmvgjI/AAAAAAAAEtw/UE-1Ilm2EWQJYEz-EULE-wqkex4yJUWagCK4B/s320/20161595_1.jpg" width="320" /></a><b><a href="https://vimeo.com/169591226">Dancing Line</a></b><br />
Shelly Dodson<br />
USA<br />
2016<br />
2m 25s<br />
<br />
Dodson's economy is inspirational. A single (aliased!) line performs a burlesque act. Apparently good animator can make art with one bit per pixel. The integration of visuals and music is excellent and sells the piece.<br />
<div>
<br /></div>
<br />
<br />
<a href="http://3.bp.blogspot.com/-tTYM4k33ixk/V3PeIMPxTqI/AAAAAAAAEuA/tPk2S7YB0bMfsicr6wox9x4CQLMMhplNgCK4B/s1600/20160921_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://3.bp.blogspot.com/-tTYM4k33ixk/V3PeIMPxTqI/AAAAAAAAEuA/tPk2S7YB0bMfsicr6wox9x4CQLMMhplNgCK4B/s320/20160921_1.jpg" width="320" /></a><b>Le Bruit du gris</b><br />
Vincent Patar and Stephane Aubier<br />
Belgium and France<br />
2016<br />
3 min<br />
<br />
Using only a child's toy set, this film tells a fun story and develops several memorable characters in its short run time.<br />
<br />
<br />
<a href="http://2.bp.blogspot.com/-4ldgKoTZFrc/V3PcR0yRq4I/AAAAAAAAEtk/heGgFSfG0wcBKp1L7tMgCG8QavethPnMwCK4B/s1600/20160593_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://2.bp.blogspot.com/-4ldgKoTZFrc/V3PcR0yRq4I/AAAAAAAAEtk/heGgFSfG0wcBKp1L7tMgCG8QavethPnMwCK4B/s320/20160593_1.jpg" width="320" /></a><b><a href="http://fantoche.ch/en/film/piano">Piano</a></b><br />
Kaspar Jancis<br />
Estonia<br />
2015<br />
10 min<br />
<b><br /></b>
In the structure of a classic European animated short, Piano weaves several storylines--sex, violence, mystery, romance--together with impeccable animation. The conclusion isn't as resounding as I might have hoped, but at every moment up to it I was pleasantly kept on my toes and enjoyed the ride.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-CGRqIzpWD_M/V3PeAdZR62I/AAAAAAAAEt4/X1tj_AsWgXElcNmsOHXKZiRbVLq8OpMcACK4B/s1600/20161898_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://4.bp.blogspot.com/-CGRqIzpWD_M/V3PeAdZR62I/AAAAAAAAEt4/X1tj_AsWgXElcNmsOHXKZiRbVLq8OpMcACK4B/s320/20161898_1.jpg" width="320" /></a></div>
<b><a href="https://vimeo.com/161927331">Beast!</a></b><br />
Pieter Coudyzer<br />
Belgium<br />
2016<br />
20 min<br />
<br />
This is a longer short that earns its runtime. Social justice, politics, science fiction, and character study are all packed well into this piece. Every time that you think you know where it is going, it makes a justifiable yet surprising turn. The story is very reminiscent of early Heinlein or Clarke.<br />
<br />
<br />
<a href="http://3.bp.blogspot.com/-13MzM4so6PM/V3Pe4Z-Qg6I/AAAAAAAAEuU/5ijtS6dzQ1g3BPGhnAozanSkl-kD1cobACK4B/s1600/20161833_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://3.bp.blogspot.com/-13MzM4so6PM/V3Pe4Z-Qg6I/AAAAAAAAEuU/5ijtS6dzQ1g3BPGhnAozanSkl-kD1cobACK4B/s320/20161833_1.jpg" width="320" /></a><b><a href="https://vimeo.com/125180338">Caminho dos gigantes</a> </b>(Way of Giants)<br />
Alois Di Leo<br />
Brazil<br />
2016<br />
12 min<br />
<br />
A beautiful, slightly abstract story told through beautiful 2.5D animation. The setting of indigenous people in the forest was fresh and explored with love.<br />
<br />
<br />
<a href="http://1.bp.blogspot.com/-IU3WBReRzsk/V3PfTGV_KoI/AAAAAAAAEug/ibIHQ_1jBrEJ97NfXprkZ3C0lhMMx-O3gCK4B/s1600/20160348_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://1.bp.blogspot.com/-IU3WBReRzsk/V3PfTGV_KoI/AAAAAAAAEug/ibIHQ_1jBrEJ97NfXprkZ3C0lhMMx-O3gCK4B/s320/20160348_1.jpg" width="320" /></a><b><a href="https://vimeo.com/139342164">Celui qui a deux ames</a></b> (He Who Has To Souls)<br />
Fabrice Luang-Vija<br />
France<br />
2015<br />
17 min 30 s<br />
<br />
The official description is completely accurate but (at least in the English translation) undersells the film:<i>They called him "He Who Has Two souls". He was beautiful like a woman and handsome like a man. He hesitated.</i><br />
<i><br /></i>
Instead, this is straightfoward film about gender expression without affectation. The arctic is a frequent short film setting, but this is one of the first films that I've seen which chooses native characters and researches and then integrates a non-European culture carefully with the plot.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-v4CWe53EjfM/V3Pb5yUnftI/AAAAAAAAEtY/L5Xi7w67kM8z2U8DRaAhqBjkdIUDDNl8ACK4B/s1600/20161557_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://4.bp.blogspot.com/-v4CWe53EjfM/V3Pb5yUnftI/AAAAAAAAEtY/L5Xi7w67kM8z2U8DRaAhqBjkdIUDDNl8ACK4B/s320/20161557_1.jpg" width="320" /></a></div>
<b><a href="https://vimeo.com/144539127">Jailbreak</a> ("Ausbruch")</b><br />
USA<br />
2015<br />
1m 20s<br />
<br />
A tongue-in cheek stop motion animation (see the<a href="https://vimeo.com/156767442"> behind-the-scenes set shot</a>) that feels like a student film. It screened out of competition but could have held its own in competition...the length is perfect for the two-note story and it is a great example of how to develop a character, get in, deliver the twist, and then get out crisply.<br />
<br />
<br />
<a href="http://4.bp.blogspot.com/-kZGJD40WMj0/V3PhGb0tMuI/AAAAAAAAEus/niGC_Tg4FGIGbT9wiQzQJkEtGfpUZSX7ACK4B/s1600/20160659_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://4.bp.blogspot.com/-kZGJD40WMj0/V3PhGb0tMuI/AAAAAAAAEus/niGC_Tg4FGIGbT9wiQzQJkEtGfpUZSX7ACK4B/s320/20160659_1.jpg" width="320" /></a><b><a href="https://vimeo.com/149443957">Journal Anime</a></b><br />
Donato Sansone<br />
France<br />
2016<br />
4 min<br />
<br />
A great nonfiction film requires luck--the direction, style, world events, and funding have to all come together at the right time. Animating daydreams and criticism over the actual pages of leftist French newspaper <i>Libération</i> is a nice art project. When rising European tensions over immigration and the economy form a backdrop and then the Paris attacks explode on to the page, that project becomes essential.<br />
<br />
<br />
<span style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://3.bp.blogspot.com/-c-rD-Sq9STU/V3Ph_2sOkwI/AAAAAAAAEu0/5RVABDBfISIRJqNtNS-QY-FgyX2-vPqkwCK4B/s320/20162628_1.jpg" width="320" /></span><b><a href="https://vimeo.com/131547587">Stems</a></b><br />
Ainslie Henderson<br />
United Kingdom<br />
2015<br />
2 min 30 sec<br />
<br />
Henderson is a singer-songwriter who has also made several warmly received short films. This stop-motion film <i>about</i> stop motion is clever, poignant, and effective. It also boasts drippingly gorgeous cinematography that is honest and stops just short of <a href="https://vimeo.com/100096260">parody</a>.<br />
<br />
<br />
<a href="http://1.bp.blogspot.com/-xc7m7S_BJS4/V3Pivw9oGpI/AAAAAAAAEvA/CiG5Jhu0g3M1XtLxQZmP6lTYu9hzc5oagCK4B/s1600/20161586_1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://1.bp.blogspot.com/-xc7m7S_BJS4/V3Pivw9oGpI/AAAAAAAAEvA/CiG5Jhu0g3M1XtLxQZmP6lTYu9hzc5oagCK4B/s320/20161586_1.jpg" width="320" /></a><b><a href="https://vimeo.com/147450397">Trial & Error</a></b><br />
Antje Heyn<br />
Germany<br />
2016<br />
5 min 27 sec<br />
<br />
The film looks like ballpoint pen on graph paper (I'm almost certain it isn't). Heyn tells two stories: the foreground of a man trying to repair a missing button, and the background of his life and marriage. The latter is done entirely through his monologue on the former, through what is said, how it is said, and what is unsaid.<br />
<br />
There's no attempt at a heavy hit here. Instead, we're treated to a character study presented elegantly through good technique.<br />
<br />
<br />
<span style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="101" src="https://1.bp.blogspot.com/-vX_4pB3lGMU/V3PjNP2jnnI/AAAAAAAAEvI/xyTL3FieKPsed5mjaaGtXpHXdDKVRV1LgCK4B/s320/20160531_1.jpg" width="320" /></span><b><a href="https://vimeo.com/123721656">Corpus</a></b><br />
Marc Hericher<br />
France<br />
2015<br />
3 min 30 sec<br />
<br />
I admit that the description sounds grotesque: a Rube Goldberg machine made out of human body parts. It isn't grotesque...it is fascinating in a clinical sense, and the CGI is near-perfect. Each body part is used for its corresponding function, such as a lens for focusing light or a tendon for contracting.<br />
<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and the <a href="http://amzn.to/1XXrNzl">Skylanders</a> series for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-60050774695280844302016-06-25T18:29:00.000-07:002016-07-30T08:25:19.250-07:00McGuire House Rules for Coup<a href="http://4.bp.blogspot.com/-EQeMHb_VYq8/V28fxeoJLlI/AAAAAAAAEpA/wSZ-qi9Ue7g0HCb1boBAV-R6IWycKFi8gCK4B/s1600/original.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="227" src="https://4.bp.blogspot.com/-EQeMHb_VYq8/V28fxeoJLlI/AAAAAAAAEpA/wSZ-qi9Ue7g0HCb1boBAV-R6IWycKFi8gCK4B/s320/original.jpg" width="320" /></a><br />
<i><a href="http://amzn.to/28YKeSb">Coup</a> </i>is a new indie card game for 2-6 players. It enjoyed a successful Kickstarter and was the darling of PAX 2016.<br />
<br />
I describe it to hardcore board gamers as "<i><a href="http://amzn.to/28Togyg">Citadels</a></i> meets <a href="http://amzn.to/28XvjIO"><i>Love Letter</i> </a>and played in five minutes", to casual gamers as "this is what poker would be, if it was fun," and to poker players as "a bluffing board game you'll love."<br />
<br />
<a name='more'></a><br />
<i>Coup</i> plays in rounds of about ten minutes, fits in a large pocket, and costs only $10. The artwork is beautiful and depicts diverse characters. There's a throwaway dystopian cyberpunk theme.<br />
<br />
You can learn to play the game five minutes. After about half an hour will have the basic strategies down. It takes a few weeks to exhaust most play situations, and it plays a little differently with different numbers of players (six is best).<br />
<div style="font-style: italic;">
<i></i></div>
<i><br /></i>
I usually ease players into <i>Coup </i>by first playing <i>Love Letter</i>, often with <a href="http://casual-effects.blogspot.com/2016/06/mcguire-house-rules-for-love-letter.html">our house rules</a>.<br />
<div style="font-style: italic;">
<i><br /></i></div>
Our house rules make the game work well with as few as three players and introduce some new strategies without adding to the learning curve.<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-Is62_iB60SU/V28ksSQfWmI/AAAAAAAAEpU/co6kLbKjkKE-7W7B-nk1wchiwMZWGrjygCK4B/s1600/imgres.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://2.bp.blogspot.com/-Is62_iB60SU/V28ksSQfWmI/AAAAAAAAEpU/co6kLbKjkKE-7W7B-nk1wchiwMZWGrjygCK4B/s400/imgres.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Inquisitor from <i>Reformation</i>. I wish<br />
this art had been paired with better rules!</td></tr>
</tbody></table>
<br />
There are also two official expansions--<a href="http://amzn.to/28TnFwx" style="font-style: italic;">Reformation</a>, and the standalone <i><a href="http://amzn.to/28UHczF">Rebellion</a> </i>(which includes <i>Reformation</i> and the base game as well as new cards). We prefer our modification to the official expansions. We think the official changes add too much complexity while undoing some of the core mechanics that made the original so much fun.<br />
<i><br /></i>
<i>Reformation</i> also is plagued by card back printing that doesn't match the original game. So, if you think you'll want an expansion, then you should probably just buy <i>Rebellion</i> outright to avoid this mismatch problem.<br />
<br />
<i>Coup</i> is the second game by "Indie Boards and Cards," and is also set in their same "Dystopian" universe from their original game, <i>The Resistance. </i>The universe is irrelevant and <i>The Resistance</i> is interesting, but not as good as <i>Coup</i>.<br />
<h2>
</h2>
<h2>
Card Sleeves</h2>
<div>
<a href="http://4.bp.blogspot.com/-CyPwbgkvGxo/V28kiBLin4I/AAAAAAAAEpM/4_9Z_dJiKfoI8l9GuK7Sh1sXLM2JTF4jwCK4B/s1600/51YXPZCHRLL.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://4.bp.blogspot.com/-CyPwbgkvGxo/V28kiBLin4I/AAAAAAAAEpM/4_9Z_dJiKfoI8l9GuK7Sh1sXLM2JTF4jwCK4B/s200/51YXPZCHRLL.jpg" width="148" /></a>As with<i> Love Letter</i>, there is a small deck in <i>Coup </i>and the cards are handled a lot. You run the risk of your deck quickly becoming marked by fingerprints and dinged edges. For a game in which you hold the same two cards the entire time and there are only five types of cards, marking breaks gameplay badly. </div>
<div>
<br /></div>
<div>
Unfortunately, the 65mm x 100mm <i>Coup </i>cards are the wrong size for high-quality card sleeves made for <i>Magic: The Gathering.</i> They are the same size as <i>7 Wonders</i> cards, however. This means that you can use the <a href="http://amzn.to/28YLsg5">Mayday sleeves</a>, which are inexpensive. They don't feel great and don't have opaque backs (exacerbating the <i>Reformation </i>printing problems), but are better than risking marked cards. </div>
<div>
<br /></div>
<div>
We're working on a custom version of <i>Coup </i>laser-etched into thin plastic. If this comes out well then I'll post laser-cutter/engraver templates for them.<br />
<br />
<h2>
Base Rules</h2>
</div>
<div>
In the base rules, each player begins the game with a hand of two cards and two ISK (money). Each player takes one action on their turn:</div>
<blockquote class="tr_bq">
<i>"<b>Play</b>: Starting with the player to the left of the dealer and going clockwise, players take turns
performing one of the available actions:</i><br />
<ol>
<li><i>Income: Take one coin from the bank. This cannot be Challenged or Blocked. </i></li>
<li><i>Foreign Aid: Take two coins from the bank. This cannot be Challenged but it can be Blocked by
the Duke. </i></li>
<li><i>Coup: Costs seven coins. Cause a player to give up an Influence card. Cannot be Challenged or
Blocked. If you start your turn with 10+ coins, you must take this action.</i></li>
<li><i>Taxes (the Duke): Take three coins from the bank. Can be Challenged. </i></li>
<li><i>Assassinate (the Assassin): Costs three coins. Force one player to give up an Influence card of
their choice. Can be Challenged. Can be Blocked by the Contessa.</i></li>
<li><i>Steal (the Captain): Take two coins from another player. Can be Challenged. Can be Blocked by
another Captain or an Ambassador. </i></li>
<li><i>Swap Influence (the Ambassador): Draw two Influence cards from the deck, look at them and
mix them with your current Influence card(s). Place two cards back in the deck and shuffle the
deck. Can be Challenged. Cannot be Blocked. </i></li>
</ol>
<i><b>Blocking</b>: If another player takes an action that can be Blocked, any other player may Block it by
claiming to have the proper character on one of their Influence cards. The acting player cannot perform
the action and takes no other action this turn. </i><i><br /></i><i>The acting player MAY choose to Challenge the Blocking
player. If they win the Challenge, the action goes through as normal.</i></blockquote>
<blockquote class="tr_bq">
<i><b>Challenge</b>: When the acting player declares their action, any other player may Challenge their right to
take the action. They are saying “I don't believe you have the proper character to do that.” The acting
player now must prove they have the power to take the action or lose the Challenge. If they have the
right character, they reveal it and place the revealed card back in the deck. They then shuffle the deck
and draw a new card. </i><i>The Challenging player has lost the Challenge. If they do NOT have the proper
character, they lose the Challenge. </i> </blockquote>
<blockquote class="tr_bq">
<i><b>Losing a Challenge</b>: Any player who loses a Challenge must turn one of their Influence cards face up
for all to see. If that is their last Influence card, they are out of the game. </i> </blockquote>
<blockquote class="tr_bq">
<i><b>Losing Influence</b>: Any time a player loses an Influence card, THEY choose which of their cards to
reveal."</i></blockquote>
<div>
Official clarifications to the printed rules:<br />
<br />
<ul>
<li>If you claim to have an Assassin, are challenged, and lose the challenge (because you don't reveal an Assassin), then you do not have to pay 3 ISK.</li>
<li>If a challenge against you fails, then you complete the action <i>after </i>replacing your card (even though you likely will not have the card anymore).</li>
<li>If an Assassination is Challenged and there really was an Assassin, then the target may still claim to have a Contessa after the Challenge is resolved.</li>
</ul>
</div>
<div>
<br /></div>
<h3>
Strategic Advice</h3>
<div>
As in most bluffing games, don't bluff too often, and only bluff at critical plays if you are desperate. I almost always claim to have a Duke on the first round...and almost never bluff on my final attacks.</div>
<div>
<br /></div>
<div>
Time and information are the key commodities in <i>Coup</i>. It is often worth suffering an early setback or intentionally playing poorly to avoid revealing information about your hand. For example, you might start with a Captain but claim that it is an Ambassador to fool others into challenging you later.</div>
<div>
<br /></div>
<div>
Plan two attacks forward. You are extremely vulnerable after performing a Coup because you will have no ISK for your next attack (unless you loaded up to 10 and plan to follow with an Assassination...)</div>
<div>
<br /></div>
<div>
It often feels like you have a hand at the end game from which you cannot possibly win. For example, the other player has more ISK than you and you are holding only a Contessa. In these cases, it is true that you cannot win by playing your hand directly. However, the key is to recognize early in the game when this situation is going to arise, and start bluffing that you have the cards you would like to have in the end game. It is almost always your own fault if you are stuck in the end game, especially using our house rules.</div>
<div>
<br /></div>
<div>
The Ambassador doesn't just let you switch cards. It also allows you to look at the deck. After playing it a few times, you have a very good idea what cards are in the deck, and thus a large advantage for challenging and for bluffing. Remember: information is a commodity.</div>
<div>
<br /></div>
<h2>
House Rules</h2>
<h3>
Motivation</h3>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-jteIp2Rgm08/V28llaDnC3I/AAAAAAAAEpg/HQfikpbeKVwGIF0U9LMTVv59daOqsWRzQCK4B/s1600/pic1976881.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://2.bp.blogspot.com/-jteIp2Rgm08/V28llaDnC3I/AAAAAAAAEpg/HQfikpbeKVwGIF0U9LMTVv59daOqsWRzQCK4B/s320/pic1976881.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Brazil Edition. There are a lot of different artwork<br />
versions of <i>Coup </i>due to its Kickstarter launch. I prefer<br />
the sci-fi theme from the version linked above.</td></tr>
</tbody></table>
<i>Coup</i> is best with five or six players, played in several rounds. It is often hard to find six people, so our house rules are designed to help the bluffing and feints scale down to as few as three players.<br />
<br />
In a pinch, you can play with two players using our modifications, or the base game's special rules for two players.<br />
<br />
Our modifications are designed to prevent players from ganging up to take out one player early in the game. Ganging up is a fine strategy, but not very fun if it happens to <i>you</i> every round because the others think that you are the strongest and should be taken out first.<br />
<br />
These modifications also provide the extra information that is available in a game with more players. The changes accomplish this by delaying the first attacks, providing extra information in the early game, and reducing the deck size.<br />
<br />
Base <i>Coup</i> has a few degenerate situations. For example, if you don't defend against a Captain on his first Steal attack, you're going to be the victim of stealing on every subsequent round. Likewise, if you don't challenge a Contessa, that player will end up being Assasination-proof for most of the game. We encourage challenging as a strategy for eliminating a card that is creating a degenerate strategy by reducing the penalty for losing a challenge and adding a small reward for instigating a challenge. This is similar to the role of the Inquisitor in the expansion pack, however we feel that our version better maintains balance.<br />
<br />
The modifications also compensate for some hands that are hard to recover from in a small game when down to one card by granting extra powers to the cards that are weak in that situation. Even if you might not have the right power in a bad situation...but the point of <i>Coup </i>is that the other players won't know that you don't have the power, and often a threat is as good as the right hand in this game.<br />
<br />
<h3>
Modifications</h3>
1. An Ambassador can reduce the Captain's stealing to 1 ISK, but not block it entirely.<br />
<br />
2. The first player starts with 0 ISK. The others start with 1 ISK.<br />
<br />
3. On challenging, the challenger immediately receives 1 ISK before the challenge is resolved (regardless of whether the challenge succeeds.)<br />
<br />
4. Whomever loses the challenge may pay 5 ISK to the bank instead of losing a card. This player must have at least 5 ISK at the time to exercise this option. The payment occurs before the action, so a Captain may end up not being able to steal if the target loses a challenge and thus their money in the process.<br />
<br />
5. Modify the cards as follows to add <b>powers</b>. We slip a note into the face side of the card sleeve. You can also permanently mark the face of the card, since that doesn't affect your ability to still play with the base rules if you later change your mind about using these rules.<br />
<ul>
<li>One Ambassador: <b>Inheritance</b>. Gain 4 ISK when this card is Killed.</li>
<li>One Assassin: <b>Vengeance</b>. Automatically execute a free Assassination (against anyone) when killed by a Coup (which can cause a tie if it ends the game). That assassination can itself be blocked by a Contessa.</li>
<li>One Contessa: <b>Treaty</b>. Can override a Duke's block of Foreign Aid (against anyone). This can be challenged, as with any card. Note that you don't have declare that you're using the Treaty until a Duke tries to block you.</li>
</ul>
The other two copies of each of those cards are unmodified. In all of these rules, "<b>kill</b>" means in a coup or assassination. A card lost in a challenge is a "<b>death</b>" but not a "kill."<br />
<br />
6. A special mat is marked with five events. The first player is responsible for executing these rules:<br />
<ol>
<li><b>Flip before 1st turn</b>. A card is dealt face down on this at the start. The first player flips it before their first turn.</li>
<li><b>Collect before 2nd turn</b>. 1 ISK is placed on this at the start. The first player collects it before their second turn.</li>
<li><b>Flip before 3rd turn (</b><i>For four or fewer players</i><b>).</b> A card is dealt face down on this at the start. The first player flips it before their third turn.</li>
<li><b>Flip after first death </b>(<i>For four or fewer players</i>). A card is dealt face down on this at the start. The first player flips it after the first Death of any player's card.</li>
<li><b>Flip after second death (</b><i>For three or fewer players</i><b>)</b>. A card is dealt face down on this at the start. The first player flips it after the second Death of any player's card. </li>
</ol>
<div>
7. No self-challenges, self-assassinations, or self-coups are allowed.<br />
<br />
An updated rules summary sheet for our modifications is:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-rM2sgJKfrJo/V5vJLZpwJ5I/AAAAAAAAFGA/HhFOS9rI-2wyS12C_DQs9lEGsdLHx45MgCK4B/s1600/Screen%2BShot%2B2016-07-29%2Bat%2B5.21.51%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="230" src="https://3.bp.blogspot.com/-rM2sgJKfrJo/V5vJLZpwJ5I/AAAAAAAAFGA/HhFOS9rI-2wyS12C_DQs9lEGsdLHx45MgCK4B/s400/Screen%2BShot%2B2016-07-29%2Bat%2B5.21.51%2BPM.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Print that sheet at 45% of full-size in portrait orientation to exactly fit in the original <i>Coup</i> box.<br />
<br />
The player who won the previous game becomes the new first player. Reverse the order of play (or change seats) around the table between games.</div>
<div>
<br /></div>
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and the <a href="http://amzn.to/1XXrNzl">Skylanders</a> series for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-1158699621685335392016-06-04T22:24:00.001-07:002017-01-08T16:24:11.146-08:00McGuire House Rules for Love Letter<a href="http://2.bp.blogspot.com/-rJ0KNnoFu8c/V1Oyg7Gp6mI/AAAAAAAAEIk/9oOEYiKENFUPGZ1oX19O6KHmJzT5_FeuwCK4B/s1600/Screen%2BShot%2B2016-06-05%2Bat%2B1.02.51%2BAM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="293" src="https://2.bp.blogspot.com/-rJ0KNnoFu8c/V1Oyg7Gp6mI/AAAAAAAAEIk/9oOEYiKENFUPGZ1oX19O6KHmJzT5_FeuwCK4B/s320/Screen%2BShot%2B2016-06-05%2Bat%2B1.02.51%2BAM.png" width="320" /></a><span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><i><a href="http://amzn.to/1UBUU8N">Love Letter</a></i> is a simple card game for 2-4 players that takes about five minutes per round. I prefer it with at least three players. It is a great game to play with children as young as seven years, or with adults when waiting for something or between heavier games. You can even play it standing by simply holding the discards in one player's off hand and the draw pile in another's off hand.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">There are many versions of the game. We prefer the American standard "Princess" version because the nonviolent theme of courtly love and intrigue and fact that over half of the characters depicted are female makes it a refreshing change from the violent/male themes of many games. However, we introduce house rules based on other versions to improve the balance. We also use the version that comes in the velvet bag instead of a box.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"></span><br />
<a name='more'></a><span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">(Yes, even though it contains many female characters, everyone in the game is still clearly European. Ironically, the original featured all Japanese characters. If you're looking for more ethnic diversity, then this isn't the game for you. However, the standard version is still way ahead of the other <i>Love Letter </i>themes, such as <i>The Hobbit </i>and <i>Batman</i>, which lose the female characters.)</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">Although the game works by elimination of players, it is so fast and the theme so friendly that even younger children do not seem to be upset on losing. The strategy of the game is based on information. You play your cards to discover information about others or hide information about yourself. </span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">After two months of play I feel that I've largely exhausted encountering new strategic situations. However, going through those motions remains pleasurable in the same way as checkers or mahjong without all of the fuss. If you're looking for a more in-depth experience under similar mechanics, then <i><a href="http://amzn.to/1r7Tg4l">Coup</a></i> and <i><a href="http://amzn.to/1stbBua">Citadels</a></i> are great next games. I'll discuss our <i>Coup </i>modifications in an upcoming post.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<br />
<h1>
Base Rules</h1>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">The base rules for the American, Princess-themed (standard) version <a href="https://www.alderac.com/tempest/files/2012/09/Love_Letter_Rules_Final.pdf">are</a>:</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">"</span><span style="line-height: 22.4px;"><i>Love Letter</i> is played in a series </span><span style="line-height: 22.4px;">of rounds. Each round represents </span><span style="line-height: 22.4px;">one day. At the end of each round, </span><span style="line-height: 22.4px;">one player’s letter reaches Princess </span><span style="line-height: 22.4px;">Annette, and she reads it. </span><span style="line-height: 22.4px;">When she reads enough letters from </span><span style="line-height: 22.4px;">one suitor, she becomes enamored </span><span style="line-height: 22.4px;">and grants that suitor permission </span><span style="line-height: 22.4px;">to court her. That player wins the </span><span style="line-height: 22.4px;">princess’s heart and the game.</span><br />
<span style="line-height: 22.4px;"><br /></span>
<br />
<h3>
<span style="line-height: 22.4px;">Taking a Turn</span></h3>
<span style="line-height: 22.4px;">On your turn, draw the top card </span><span style="line-height: 22.4px;">from the deck and add it to your </span><span style="line-height: 22.4px;">hand. Then choose one of the two </span><span style="line-height: 22.4px;">cards in your hand and discard it </span><span style="line-height: 22.4px;">face up in front of you. Apply any </span><span style="line-height: 22.4px;">effect on the card you discarded. </span><span style="line-height: 22.4px;">You must apply its effect, even if it </span><span style="line-height: 22.4px;">is bad for you.</span><br />
<br />
<span style="line-height: 22.4px;">All discarded cards remain in front </span><span style="line-height: 22.4px;">of the player who discarded them. </span><span style="line-height: 22.4px;">Overlap the cards so that it’s clear </span><span style="line-height: 22.4px;">in which order they were discarded. </span><span style="line-height: 22.4px;">This helps players to figure out </span><span style="line-height: 22.4px;">which cards other players might be </span><span style="line-height: 22.4px;">holding.</span><br />
<span style="line-height: 22.4px;"><br /></span>
<span style="line-height: 22.4px;">Once you finish applying the card’s </span><span style="line-height: 22.4px;">effect, the turn passes to the player </span><span style="line-height: 22.4px;">on your left.</span><br />
<span style="line-height: 22.4px;"><br /></span>
<br />
<h3>
<span style="line-height: 22.4px;">Out of the Round</span></h3>
<span style="line-height: 22.4px;">If a player is knocked out of the </span><span style="line-height: 22.4px;">round, that player discards the card </span><span style="line-height: 22.4px;">in his or her hand face up (do not </span><span style="line-height: 22.4px;">apply the card’s effect) and takes </span><span style="line-height: 22.4px;">no more turns until next round.</span><br />
<span style="line-height: 22.4px;"><br /></span>
<br />
<h3>
<span style="line-height: 22.4px;">Honesty</span></h3>
<span style="line-height: 22.4px;">A player could cheat when chosen </span><span style="line-height: 22.4px;">with the Guard, or fail to discard </span><span style="line-height: 22.4px;">the Countess when that player has </span><span style="line-height: 22.4px;">the King or Prince in hand. We </span><span style="line-height: 22.4px;">suggest that you don’t play with </span><span style="line-height: 22.4px;">knaves who cheat at fun, light games. </span><br />
<span style="line-height: 22.4px;"><br /></span>
<br />
<h3>
<span style="line-height: 22.4px;">End of a Round</span></h3>
<span style="line-height: 22.4px;">A round ends if the deck is empty </span><span style="line-height: 22.4px;">at the end of a turn...</span><br />
<span style="line-height: 22.4px;"><br /></span>
<span style="line-height: 22.4px;">All players still in the round reveal </span><span style="line-height: 22.4px;">their hands. The player with the </span><span style="line-height: 22.4px;">highest ranked person wins the </span><span style="line-height: 22.4px;">round. In case of a tie, the player </span><span style="line-height: 22.4px;">who discarded the highest total </span><span style="line-height: 22.4px;">value of cards wins.</span><br />
<span style="line-height: 22.4px;"><br /></span>
<span style="line-height: 22.4px;">A round also ends if all players but </span><span style="line-height: 22.4px;">one are out of the round, in which </span><span style="line-height: 22.4px;">case the remaining player wins. </span><br />
<br />
<span style="line-height: 22.4px;">The winner receives a token of </span><span style="line-height: 22.4px;">affection. Shuffle all 16 cards </span><span style="line-height: 22.4px;">together, and play a new round </span><span style="line-height: 22.4px;">following all of the setup rules.</span><br />
<span style="line-height: 22.4px;"><br /></span>
<span style="line-height: 22.4px;">The winner of the previous round </span><span style="line-height: 22.4px;">goes first</span><span style="line-height: 22.4px;">."</span><br />
<span style="line-height: 22.4px;"><br /></span>
<br />
<h1>
House Rules</h1>
<a href="http://4.bp.blogspot.com/-MecRzvTaiNw/V1OzCbd1XcI/AAAAAAAAEIs/1twLspV-hHQK6RjI5SILZHS5pNPXCsllQCK4B/s1600/Screen%2BShot%2B2016-06-05%2Bat%2B1.04.46%2BAM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="186" src="https://4.bp.blogspot.com/-MecRzvTaiNw/V1OzCbd1XcI/AAAAAAAAEIs/1twLspV-hHQK6RjI5SILZHS5pNPXCsllQCK4B/s200/Screen%2BShot%2B2016-06-05%2Bat%2B1.04.46%2BAM.png" width="200" /></a><span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"></span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><i>W</i>e change the components quite heavily in our rules.</span></span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span></span>
<br />
<h3>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">Rule and Component Changes</span></span></h3>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">We replace the red cubes, which are ugly and prone to scratching the cards in the bag, with decorative <a href="http://amzn.to/1r7RFM2">flat glass marbles</a> used for flower vases. I wouldn't buy those <i>just</i> for <i>Love Letter</i>, but we have them around the house for use as counters in many games. So, we put a handful into the velvet travel bag.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; line-height: 22.4px;"><i>Love Letter</i> has a small deck that is constantly being handled. The cards are therefore more prone to wear than other card games. To protect them, we use <a href="http://amzn.to/1UBVGCT">matte card sleeves</a>. Fortunately, the cards are the same size as those for <i>Magic The Gathering</i>, so it is easy to find inexpensive sleeves.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">The sleeves also allow us to modify the cards by printing inserts to sit in front of certain cards. We use this technique to use the Princess-themed cards with the superior rules from the Hobbit-themed version, plus our own extensions.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">You can simply write the new rules on index cards and insert them into the sleeves. We went the extra step of trying to match the art style as well, which I'll describe below.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">The rule changes are:</span><br />
<ul>
<li><span style="line-height: 22.4px;">Remove the original two <b>Baron</b> cards.</span></li>
<li><span style="line-height: 22.4px;">Add one <b>High Baron</b>, who acts like the original Baron: the <i>higher</i> card wins (nothing happens on a tie).</span></li>
<li><span style="line-height: 22.4px;">Add one <b>Low Baron</b>, who compares like the Baron but has the <i>lower </i>card win (still nothing happens on a tie).</span></li>
<li><span style="line-height: 22.4px;">If you draw <i>both</i> the Low Baron and the Princess into your hand, discard both and draw a new card. That's your entire turn...the Baron comparison doesn't happen.</span></li>
<li><span style="line-height: 22.4px;">Add the <b>Envoy</b>. She carries the love letter from another realm. During the game she is in transit, so she is worth zero during comparisons. She arrives at the end of the game, and is suddenly worth seven.</span></li>
</ul>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-s_IAABu6s2o/V1O1j3RNjZI/AAAAAAAAEJA/GDulmqTAcGce1Nt9Hb2ZwzDSwSnPyY_JACK4B/s1600/IMG_20160604_193127.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="300" src="https://2.bp.blogspot.com/-s_IAABu6s2o/V1O1j3RNjZI/AAAAAAAAEJA/GDulmqTAcGce1Nt9Hb2ZwzDSwSnPyY_JACK4B/s400/IMG_20160604_193127.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Our modified card set, with the Envy in the center and the<br />
blue card backs of the sleeves clearly visible on the borders.</td></tr>
</tbody></table>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">When a Guard names a Baron, the guard must say <i>which </i>kind of Baron it is. That is, there are two distinct cards.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">Here's how we produced the custom cards.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">For the Barons, I scanned the original Baron, wrote the new text on it in Photoshop, and then printed it out in color and inserted that into the card sleeve. The result is indistinguishable from an official card.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">For the Envoy, I replaced the </span><span style="background-color: white; font-size: 16px; line-height: 22.4px;">artwork on the scanned Baron with an image from the </span><a href="http://heroes-of-camelot.wikia.com/wiki/Maiden_Exemplar" style="font-size: 16px; line-height: 22.4px;">Maiden Exemplar</a><span style="background-color: white; font-size: 16px; line-height: 22.4px;"> in </span><i style="font-size: 16px; line-height: 22.4px;">Heroes of Camelot</i><span style="background-color: white; font-size: 16px; line-height: 22.4px;"> and then wrote the new text and number. </span><span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">The number font is "Bucephalus" and the rule and title text are "</span><span style="background-color: white; font-size: 16px; line-height: 22.4px;">Black Chancery," both of which are available in free versions on the web. </span><span style="background-color: white; font-size: 16px; line-height: 22.4px;">When printing, the cards are </span><span style="background-color: white; font-size: 16px; line-height: 22.4px;">63mm x 88mm. I backed the Envoy with one of the rule cards, but you can also use any <i>Magic The Gathering </i>card because the matte opaque card sleeves cover the backs completely.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">Because these cards use copyrighted images, I unfortunately cannot distribute my high-resolution card templates. However, you can repeat the process that we followed or simply use hand-labelled index cards inside the sleeves. Of course, you can play <i>Love Letter</i> using a standard poker card deck and a key telling you what each card is for, but the artwork adds a lot of flavor and it is easier to learn the game with the rules right on the cards.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<br />
<h3>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">Two-Player Rules</span></h3>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">The normal <i>Love Letter</i> rules for two players are the same as for more players, but three cards are discarded face up at the start of the game. While two-player under these rules is still enjoyable as a pastime, the moves frequently become forced because there is no choice of whom to target.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">We modify the two-player game so that only one card is discarded at the start and that each player initially holds <i>two</i> cards in hand, and draws normally, to a total of three for each play. When one card is lost to a Guard or Baron that player is then down to a one-card hand instead of being immediately eliminated.</span><br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;"><br /></span>
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">The per-card rules are then modified on the principle that they generally only affect one opponent card at a time, and the target chooses which one. Specifically:</span><br />
<br />
<ul>
<li><b style="line-height: 22.4px;">Guard</b><span style="line-height: 22.4px;"> names a card. If the opponent has one of that card, then that card is lost...if the opponent has two of that card (which can only happen with Priest, Prince, and Handmaid), then the target choses which to lose and continues with the other.</span></li>
<li><span style="line-height: 22.4px;"><b>Priest</b> looks at one card chosen by the target player.</span></li>
<li><b style="line-height: 22.4px;">Barons</b><span style="line-height: 22.4px;"> </span><span style="line-height: 22.4px;">compare against one card chosen by the target player.</span></li>
<li><span style="line-height: 22.4px;"><b>Prince</b> forces the target to discard one card of the target player's choice and draw a new one.</span></li>
<li><b style="line-height: 22.4px;">King </b><span style="line-height: 22.4px;">makes players trade cards. Each player chooses one card and holds it out, face down. They then exchange simultaneously.</span></li>
<li><span style="line-height: 22.4px;"><b>Countess</b> must be played if she is in a hand with any of the prohibited cards.</span></li>
</ul>
If one player has zero cards that player immediately loses. Otherwise, the player with the highest value card wins the round at the end of the turn when the draw deck expires.<br />
<br />
<span style="background-color: white; font-family: , "lucida grande" , "lucida sans unicode" , "trebuchet ms" , sans-serif; font-size: 16px; line-height: 22.4px;">This introduces more choice into the two-player game and roughly emulates the amount of information and number moves that one would make in a four-player version.</span><br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and the <a href="http://amzn.to/1XXrNzl">Skylanders</a> series for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-33774323567012893912016-06-03T18:06:00.002-07:002016-08-30T14:55:28.412-07:00An Hour of Code in 3rd Grade<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-UHZWSxSz1ok/V1BH4rhTw_I/AAAAAAAAEAs/HAcsfzTMnB0SNGkFfC4a3U09VgJB_JQhgCK4B/s1600/icon.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://4.bp.blogspot.com/-UHZWSxSz1ok/V1BH4rhTw_I/AAAAAAAAEAs/HAcsfzTMnB0SNGkFfC4a3U09VgJB_JQhgCK4B/s200/icon.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://casual-effects.com/gamejam/1gad/safarimatch/play.html" style="font-style: italic;">Safari Match</a> open source game<br />
using codeheart.js</td></tr>
</tbody></table>
I introduced twenty 3rd graders to programming in a special 75-minute session, using computer art and video games as motivation.<br />
<br />
We began with physical activities. We then moved to a pen and paper exercise and then to programming in <a href="https://codeheart.williams.edu/turtle/index.html">TurtleScript</a>. Finally, we talked about some of the big ideas in computer science and saw some <a href="https://codeheart.williams.edu/showcase.html">examples</a> of games in <a href="https://codeheart.williams.edu/">codeheart.js</a> that my college students wrote in their first semester of programming.<br />
<br />
<a name='more'></a><br />
<br />
Normally, I record video of my public talks and guest lectures to share online. Because this session was with small children, that would not have been appropriate. Instead, I'm sharing my classroom notes for the content through this article. The actual computer didn't come out until 45 minutes into the session.<br />
<br />
<h2>
Introduction</h2>
<div>
Does anybody know what kind of toys these are?</div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-Emta2XIXe9I/V1CY9zsRh0I/AAAAAAAAED8/s14HHwipNDE_erFpUTEERbGJHVKHCTr1ACK4B/s1600/online-games-mobile-character-header.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="161" src="https://3.bp.blogspot.com/-Emta2XIXe9I/V1CY9zsRh0I/AAAAAAAAED8/s14HHwipNDE_erFpUTEERbGJHVKHCTr1ACK4B/s400/online-games-mobile-character-header.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Skylanders</i> is a trademark of Activision. Artwork<br />
copyright 2016 Activision.</td></tr>
</tbody></table>
Yes, they are Skylanders! Do you know the names of these specific ones? I brought Stormblade and Crusher, who are two of my favorites.</div>
<div>
<br /></div>
<div>
When I'm not playing with toys, I teach computer science at Williams College. I also make special effects for video games and movies. The most recent two games I worked on were <i><a href="http://rocketgolfing.com/">Project Rocket Golfing</a></i> for iPhone...and the <i><a href="https://www.skylanders.com/">Skylanders</a></i> series (by Activision). Which is why I collect Skylanders, even though I'm a grownup.</div>
<div>
<br /></div>
<h2>
Computers</h2>
A computer is a machine made out of wires that runs on electricity. But you can't see the wires because they are really small. Well, and they are inside of the box.<br />
<br />
Most machines do one thing well. A backhoe digs holes. A refrigerator keeps food cool. A pencil sharpener...sharpens pencils.<br />
<br />
Computers are strange machines because they don't actually do <i>anything</i>. Left on its own, a computer just sits there. It needs an app to tell it what to do.<br />
<br />
Computers are also strange because they <i>can</i> do everything. By running different apps, they can become different kinds of machines. This makes them very special. Imagine if you had a shape-changing vehicle that could be a truck or a race car or a boat. That's what computers do when you change apps.<br />
<br />
You're thinking, "a computer can't do <i>everything.</i>" It can't drive like a car, for example. But actually, there are computers inside of your car, your microwave, your phone, and pretty much every other complicated machine today. So, they really can do everything. They just need the right box, and sometimes that box is shaped like a car or an airplane.<br />
<br />
<h2>
Programming</h2>
<a href="http://1.bp.blogspot.com/-7Ot2risCWAU/V1CbbkXYhVI/AAAAAAAAEEQ/yxaaL8maiEAdYfqrkM8EM0gzDV4BVomFgCK4B/s1600/source-code-583537_960_720.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="180" src="https://1.bp.blogspot.com/-7Ot2risCWAU/V1CbbkXYhVI/AAAAAAAAEEQ/yxaaL8maiEAdYfqrkM8EM0gzDV4BVomFgCK4B/s320/source-code-583537_960_720.jpg" width="320" /></a>You can build apps by programming (also called coding, app development, and software development). It is easy to get started with. We're going to do it today, starting in about two minutes.<br />
<br />
Programming is a new math that uses everything you already know from math: addition, subtraction, multiplication, division, and more. The neat thing is that you don’t have to <i>do</i> the arithmetic yourself. You just figure out the way to set up the problem and then the computer solves it for you.<br />
<br />
Programming is also a kind of writing. In a regular story, you write words to make your imaginary characters do things. If you write in a story, "The princess went to the top of the castle," then you made an instruction for the reader to know that the princess is moving. When programming, you write words to make the computer do things. These can be drawing on the screen, making sounds, sending messages across the internet, and...you guessed it, a lot of the things you ask the computer to do are also math.<br />
<br />
Math, writing, and programming have something else in common. They work best when you make a rough draft. Don't expect to get any of these perfect on the first try. Get your ideas out and then try to make them better later.<br />
<br />
<h2>
Teacher-Bot</h2>
A program is like a recipe. It is a series of precise instructions. If you follow the instructions exactly, then at the end, you'll get the cake or whatever you were supposed to be making.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-DyoOmWxkCJ8/V1CbCfw4tqI/AAAAAAAAEEE/5UV9Cj6WELU_f1NUOL6JP4ZrRafVTYpvgCLcB/s1600/Nao1.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://4.bp.blogspot.com/-DyoOmWxkCJ8/V1CbCfw4tqI/AAAAAAAAEEE/5UV9Cj6WELU_f1NUOL6JP4ZrRafVTYpvgCLcB/s320/Nao1.jpg" width="212" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">An actual robot. Due to budget cuts,<br />
we only have me pretending to be a robot.</td></tr>
</tbody></table>
The instructions have to be really specific because computers and apps actually aren’t “smart” in the way that people are. They are robots that do exactly what you tell them.<br />
<br />
I want to put my Skylanders away in my backpack over there. Now, if you're talking to a regular person, you can just say "put your toys away." But when you're programming, you have to spell out every step. Move forward. Turn right 90 degrees. Pick up the toy...and so on.<br />
<br />
I'm going into robot mode now. When I'm in robot mode, I only understand the following commands:<br />
<ul>
<li><b>FORWARD 100 </b>- I take a normal step</li>
<li><b>RIGHT 90 </b>- I turn to my right</li>
<li><b>LEFT 90 </b>- I turn to my left</li>
<li><b>PICK UP</b> - I pick up one toy in front of me</li>
<li><b>DROP</b> - I drop my one toy</li>
</ul>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
You can shout these instructions at me and I'll follow them. You need to get me to move these toys into the backpack. If everybody shouted at once, I'd probably go crazy and short out. So, let's take turns by going around the room, starting with...you. Each person can say one command, and then it is the next person's turn. Let's go!</div>
<div>
<br /></div>
<h2>
Dinosaur Drawing</h2>
I'm back in regular teacher mode now. You did a good job of programming me. Even for a simple task, it was challenging, but you figured it out. I was a little worried when you had me spinning in circles and when you drove me into the wall, but nobody said that life was easy for robots!<br />
<br />
Now we're going to do something more complicated. For a more complicated shape, it is easier if you can look down on me from above. Well, not me, because then you'd be on the ceiling. So we'll program toy dinosaurs instead.<br />
<br />
Everybody take a sheet of paper and a dinosaur. There are some insects and other animals in there if you like those better than dinosaurs. You'll need a pencil, too.<br />
<br />
The dinosaur-bots are like teacher-bots, but they have different instructions. They also tow the pencil around. Dino-bot can draw shapes by making movements and dragging the pencil.<br />
<br />
You write the dino-bot instructions like this:<br />
<ul>
<li>fd(100) - Move one dinosaur-length <b>forward</b></li>
<li>bk(100) - Move one donosaur-length <b>back</b></li>
<li>rt(90) - Turn to the dinosaur's <b>right</b></li>
<li>lt(90) - Turn to the dinosaur's <b>left</b></li>
<li>pu() - "Pencil <b>up</b>" ... stop drawing</li>
<li>pd() - "Pencil <b>down</b>" ... start drawing again</li>
</ul>
<a href="http://2.bp.blogspot.com/-BWQ_dHqNvpM/V1CiHLh7EBI/AAAAAAAAEEw/HzH-A0wDePoyb8gCYwvwW_q6gpLvozRJQCK4B/s1600/IMG_20160602_171309.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="180" src="https://2.bp.blogspot.com/-BWQ_dHqNvpM/V1CiHLh7EBI/AAAAAAAAEEw/HzH-A0wDePoyb8gCYwvwW_q6gpLvozRJQCK4B/s200/IMG_20160602_171309.jpg" width="200" /></a><br />
I know that I'm spelling "forward 100" in a funny way, but that is one of the fun parts of writing code. It is, well, <i>code</i>. As in, a secret code language.<br />
<br />
You write symbols and numbers in a way that people who don't know programming can't understand. (For the TurtleScript code scheme, you use the first and last letter of each instruction word...except for the pencil commands, where you use the first letter of each of two words.)<br />
<br />
Start with the dinosaur in the center of your paper, facing towards the top of the page. Hold your pencil right at its behind. The pencil is "down" for drawing at the start.<br />
<br />
I'm going to read off some commands. You have to make the dinosaur follow the commands to draw a picture on your paper. Here we go:<br />
<pre>fd(100)
rt(90)
pu()
fd(100)
pd()
rt(90)
fd(100)
rt(90)
fd(100)
</pre>
What letter did you draw? It should be a capital "U", done in kind of a boxy way.<br />
<br />
Ok, now flip your paper over. Each table is going to be a team that works together.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-UUm5zYTnop4/V1CnjaHGJdI/AAAAAAAAEFI/v2v8-z9_FeEz4P484aUjdE1k2pIcqlHYACLcB/s1600/CODEHOUR3.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="212" src="https://3.bp.blogspot.com/-UUm5zYTnop4/V1CnjaHGJdI/AAAAAAAAEFI/v2v8-z9_FeEz4P484aUjdE1k2pIcqlHYACLcB/s320/CODEHOUR3.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">An Hour of Code at <a href="http://www.newsobserver.com/news/local/community/eastern-wake-news/article49275640.html">another school.</a></td></tr>
</tbody></table>
Pick one person to be the computer. You're going to draw on that person's paper. Pick another person to be the app. You're going to write down the instructions on their paper. The third person is the programmer, who will figure out the instructions. Everyone has to help with all jobs.<br />
<br />
Here's your first challenge. I want you to make commands for drawing a capital "L".<br />
<br />
...<br />
<br />
One of the neat things about your solutions is that there is creativity. Everybody solved the puzzle in a different way. Here was one solution:<br />
<br />
<pre>lt(90)
fd(100)
rt(90)
fd(100)
fd(100)
</pre>
<br />
Raise your hand if this was your solution, too. See, I checked them all, and everyone got it right...but nobody else did it exactly this way.<br />
<br />
Now, switch roles. Pick a new person to be the computer and a new person to be the app. Here's a harder program to write: draw a capital "E".<br />
<br />
...<br />
<br />
My name starts with "M". You can't draw "M" without diagonals. But when we turn, we always make a right angle. You probably guessed that the "90" in "rt(90)" was the number of degrees. If you turn "rt(<i>45</i>)", then you can make a smaller angle. And you can take a smaller step by saying "fd(50)" instead of "fd(100)".<br />
<br />
This is going to get annoying to draw on paper if we have to measure the angles and keep track of the distances. I wish we had a machine that could do drawing for us if we gave it really good instructions...<br />
<br />
<h2>
Computer Drawing</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-gWYMJY8boY8/V1CodBH3hSI/AAAAAAAAEFU/IvpGgOKp_rgDGHBPAxx-_wCiqM90Oil1ACLcB/s1600/Screen%2BShot%2B2016-06-02%2Bat%2B5.42.59%2BPM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="214" src="https://4.bp.blogspot.com/-gWYMJY8boY8/V1CodBH3hSI/AAAAAAAAEFU/IvpGgOKp_rgDGHBPAxx-_wCiqM90Oil1ACLcB/s320/Screen%2BShot%2B2016-06-02%2Bat%2B5.42.59%2BPM.png" width="320" /></a></div>
Oh, we do have a machine that can draw. It is the computer. We just have to write an app for it.<br />
<br />
Well, let's type in an app. Before we tackle "M", Can someone remind me how to draw an "L"?<br />
<br />
<div class="p2">
</div>
<pre>fd(200)
bk(200)
rt(90)
fd(100)
</pre>
<br />
Let's run it on the computer...hey, that looks good. Notice that the animal on the computer isn't a dinosaur, it is a turtle.<br />
<br />
Do you see the blue and red text at the top and bottom of my program? That's other special code that we haven't talked about. It tells the computer that we're going to be drawing. That line of code is always the same, so I didn't mention it earlier. I just copied it off the web page.<br />
<br />
Ok, let me show you the code for one way of drawing an "E", which I already typed in:<br />
<div class="p1">
</div>
<br />
<pre>fd(200)
rt(90)
fd(100)
bk(100)
lt(90)
bk(100)
rt(90)
fd(100)
bk(100)
lt(90)
bk(100)
rt(90)
fd(100)
</pre>
<br />
That was really fast. I can slow the turtle down to make it easier to see what it is doing by putting setSpeed(0.1) in front of my program.<br />
<br />
And now, I'm going to show you how to make an "M":<br />
<br />
<pre>fd(200)
rt(135)
fd(100)
lt(90)
fd(100)
rt(135)
fd(200)
</pre>
<br />
I told the turtle to turn 135 degrees. That's because 135 is 90 plus 45. So, I'm making the turtle turn one and a half times as far as a right angle in order to go down into the valley of the "M".<br />
<br />
<h2>
Star</h2>
Now let's really go crazy. We're going to draw a five-pointed star. That has a lot of angles. We're also going to make it a color.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-tGOKmvN_tec/V1IdAZn_7-I/AAAAAAAAEGs/Wr-szwX1Gf4lEB6mkcdh5TmyPjPDz1yAwCK4B/s1600/imgres.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://1.bp.blogspot.com/-tGOKmvN_tec/V1IdAZn_7-I/AAAAAAAAEGs/Wr-szwX1Gf4lEB6mkcdh5TmyPjPDz1yAwCK4B/s400/imgres.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://www.youtube.com/watch?v=ksS-FJ3B8Og">Mixing colored lights in a science experiment</a></td></tr>
</tbody></table>
First, somebody pick a background color for me. Here are the colors built in to TurtleScript...you can also mix up your own color using red, green, and blue <i>light</i>. You're used to mixing paint to cover white paper. On a computer, we mix lights to make the screen glow. It is basically the same thing except that when you use more light the screen gets brighter. You're used to more paint making the paper darker.<br />
<br />
For example, if you want to make the star yellow, then you mix a lot of red and a lot of green. With paint, that would make dark brown. Brown is the same color as yellow, it is just darker. So, both paint and light are giving us the same place on the rainbow. But with paint you get the dark version and with light you get the dark version. If we wanted brown on a computer then we'd still use red and green, just a lot less. Then the natural black of the screen will make the yellow turn dark...into brown.<br />
<br />
That's the background. We'll just draw the star in black outlines first, and then color it later.<br />
<br />
To draw the star, we need to know the sides and the angles. Let's make the sides 350 long, because that will about fill the page. That was easy.<br />
<br />
To figure out the angles, we need to think about geometry...and turning.<br />
<br />
When I turned 90 degrees, I went from forwards to sideways. That's like the corner of a square. How far do I turn to go all of the way around and come back where I started?<br />
<br />
Right, if you turn 360 degrees, then you're back where you've started.<br />
<br />
A square has four corners. If we walk around a square and come back to where we started, then all of the <i>turns</i> we made added up to 360 degrees. This works for any shape. In a square, there are four turns. 90 times 4 equals 360, so each corner of the square must be 90 degrees.<br />
<br />
There are five points on the star. To go around <i>five</i> sides, you have to <b>turn</b> 360 degrees / 5 = 72 degrees each time. Let's write a program that does fd(350) rt(72) five times.<br />
<br />
Hmm, that's actually a pentagon, not a star. This is a good start, though. The center of a star is a pentagon. Let's think about what makes the points work.<br />
<br />
Each point of the star is a triangle with two sides that have the same length and then a shorter base.<br />
Does anyone know the name for a triangle with two sides of the same length?<br />
<br />
Correct! It is an isosceles triangle.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-EXxm-D_aHEk/V1IpeQiO-8I/AAAAAAAAEHM/VAK1DpFnbrUhhVWi-zGAVUvxdQBBi3TmACK4B/s1600/star.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://4.bp.blogspot.com/-EXxm-D_aHEk/V1IpeQiO-8I/AAAAAAAAEHM/VAK1DpFnbrUhhVWi-zGAVUvxdQBBi3TmACK4B/s400/star.png" width="400" /></a></div>
An isosceles triangle doesn't just have two sides with the same length. It also has two angles that are the same. For our star-point triangles, the <b>interior</b> <b>angles</b> at the base are each 72 degrees, so that they line up with the turn angles of the (invisible) pentagon in the center of a star.<br />
<br />
The <i>interior </i>angles of a triangle sum to 180 degrees. So, that last <b>turn</b> at the sharp corners of the star is 180 degrees - 72 degrees - 72 degrees = 36 degrees.<br />
<br />
One more step. We now know that the triangle's interior angles are 72, 72, and 36 degrees. But the turtle only makes <i>turns</i> when it is moving. It doesn't directly spin around interior or exterior angles. A turn is 180 degrees minus the angle you want the lines at. So, the turn that the angle makes at the point of a star is actually 180 degrees - 36 degrees = 144 degrees.<br />
<br />
Now, putting that all together, we can draw the star:<br />
<br />
<pre>clear(VIOLET)
fd(350)
rt(144)
fd(350)
lt(72) // End of the first point
//... and just repeat that five times.
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-8GhV3aUTLxw/V1IWZs69bVI/AAAAAAAAEF4/CUEtP9zCGjcuS6HZPylkb4pjm7G5ErajgCK4B/s1600/Screen%2BShot%2B2016-06-03%2Bat%2B7.44.22%2BPM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="291" src="https://4.bp.blogspot.com/-8GhV3aUTLxw/V1IWZs69bVI/AAAAAAAAEF4/CUEtP9zCGjcuS6HZPylkb4pjm7G5ErajgCK4B/s320/Screen%2BShot%2B2016-06-03%2Bat%2B7.44.22%2BPM.png" width="320" /></a></div>
Somebody pick a color to fill the star for me. Ok, to fill in the star, we just put <span style="font-family: "courier new" , "courier" , monospace;">startFill(YELLOW)</span> before this code and then <span style="font-family: "courier new" , "courier" , monospace;">endFill()</span> at the end of the code.<br />
<br />
Oh, the star is rotated a little bit relative to the page. Let's start rotated by half a turn to fix that: <span style="font-family: "courier new" , "courier" , monospace;">rt(36 / 2)</span>.<br />
<br />
Somebody noticed that I put little notes in the program. That's so that I don't get confused by my own coded instructions. When I want to write a note, I just type two slashes and then write whatever I want. The computer knows that is a note to myself and not an instruction. It just ignores that. We call these notes "comments."<br />
<br />
<h2>
Loops</h2>
I'll show you one last trick. Instead of repeating the same code five times, we can just make the app automatically repeat. We make a variable to keep track of how many times we've repeated, and then tell the app to keep drawing star points until the variable has counted up to five.<br />
<br />
To make a variable, I write: <span style="font-family: "courier new" , "courier" , monospace;">var count</span><br />
<br />
Then, I set the count to zero: <span style="font-family: "courier new" , "courier" , monospace;">count = 0</span><br />
<br />
The code that I want to repeat gets stuck inside of curly braces, and I write the condition at the top. I also have to remember to change the counter every time that it processes these instructions:<br />
<br />
<pre>while (count < 5) {
fd(350)
rt(144)
fd(350)
lt(72)
count = count + 1
}
</pre>
<br />
That last line of code is really strange if you're used to regular non-computer math. How can count be equal to itself plus one? Well, that isn't an equal sign in programming. It is an <i>assignment </i>instruction<i>.</i> That instruction tells the computer to cross out whatever value it thought that "count" had and replace it with a new value that is one bigger. Then, we test to see if it is five yet...if not, we keep going.<br />
<br />
<a href="http://3.bp.blogspot.com/-mWzZqTuZ9O8/V1IfWCuCQzI/AAAAAAAAEG8/PRZBB5bEfPE_M65bVCi7LzoSsWmSRQB8QCK4B/s1600/Screen%2BShot%2B2016-06-03%2Bat%2B8.22.30%2BPM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="133" src="https://3.bp.blogspot.com/-mWzZqTuZ9O8/V1IfWCuCQzI/AAAAAAAAEG8/PRZBB5bEfPE_M65bVCi7LzoSsWmSRQB8QCK4B/s200/Screen%2BShot%2B2016-06-03%2Bat%2B8.22.30%2BPM.png" width="200" /></a>This is pretty advanced. I don't expect anyone to follow it, I just wanted you to know that there are some tricky moves you can make to avoid having to cut and paste your code too much.<br />
<br />
Here's the really cool part: there are lots of other secret tricks, but you don't need me to tell you about them. You can look at any TurtleScript program and see the code for it. So, you can read my example programs on the website. You can also share programs with your friends by email and they can read the code to see how you did it.<br />
<br />
In the Chrome web browser, just push the View menu at the top, and then Developer, and then View Source to see a TurtleScript program. There are <a href="http://www.computerhope.com/issues/ch000746.htm">related buttons in other web browsers</a>.<br />
<br />
<h2>
More Examples</h2>
<a href="http://2.bp.blogspot.com/-4OtBgfkp5UA/V1Icvf045hI/AAAAAAAAEGg/v81qb08AFSYZdRGT2y5EFe69bzE9DsOggCK4B/s1600/Screen%2BShot%2B2016-06-03%2Bat%2B8.11.32%2BPM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="132" src="https://2.bp.blogspot.com/-4OtBgfkp5UA/V1Icvf045hI/AAAAAAAAEGg/v81qb08AFSYZdRGT2y5EFe69bzE9DsOggCK4B/s200/Screen%2BShot%2B2016-06-03%2Bat%2B8.11.32%2BPM.png" width="200" /></a>Here are some examples from the TurtleScript web site.<br />
<br />
Hey, you know how to make a star, so you could make the <a href="https://codeheart.williams.edu/turtle/examples/stars.html">stars example</a> already yourself. It just has a lot of stars. Did you notice that they're in a different place every time that I load the web page? That's because you can use a <i>random</i> number in a command. Instead of "forward 100", I used "forward random" for that. It is like rolling dice to figure out how far to move.<br />
<br />
<a href="http://2.bp.blogspot.com/-7mTVu0ipDd0/V1IcpwI-aYI/AAAAAAAAEGY/MC4Ernl7WK4s8rabBvOg2Qs-U4M5LOnVgCK4B/s1600/Screen%2BShot%2B2016-06-03%2Bat%2B8.11.10%2BPM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="129" src="https://2.bp.blogspot.com/-7mTVu0ipDd0/V1IcpwI-aYI/AAAAAAAAEGY/MC4Ernl7WK4s8rabBvOg2Qs-U4M5LOnVgCK4B/s200/Screen%2BShot%2B2016-06-03%2Bat%2B8.11.10%2BPM.png" width="200" /></a>I used the same trick to draw the mountains in front of the <a href="https://codeheart.williams.edu/turtle/examples/sunset.html">sunset</a>. I turned the turtle by a random amount to make different jagged mountains each time.<br />
<br />
Do you remember how I slowed down the turtle to make it easier to watch as it was drawing? You can also make it faster. For the <a href="https://codeheart.williams.edu/turtle/examples/spaceship.html">spaceship example</a>, I made the turtle <i>infinitely fast</i>. It draws the whole screen instantly. Then, I make it wait. I then have the turtle draw a slightly different picture. It does this 30 times every second. Like a flip book, when all of these images come on screen quickly, you see it as an animation.<br />
<br />
<a href="http://1.bp.blogspot.com/-th4qTLIHM7E/V1IcYNWcjaI/AAAAAAAAEGI/wuCz7bSC-IQgSF97KzQ60IFp3NYtAJoEACK4B/s1600/icon.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://1.bp.blogspot.com/-th4qTLIHM7E/V1IcYNWcjaI/AAAAAAAAEGI/wuCz7bSC-IQgSF97KzQ60IFp3NYtAJoEACK4B/s200/icon.png" width="200" /></a>This is pretty much how we make video games like <i>Rocket Golfing</i> and <i>Skylanders</i>. There are artists who draw the shapes. Programmers take the shapes as a bunch of triangles and figure out how to draw them with code. We make a lot of pictures every second, and then write more core to make the objects move. So, if you spent the summer working on TurtleScript, you could be ready to make video games pretty soon.<br />
<br />
Here are some <a href="https://codeheart.williams.edu/showcase.html">examples of games</a> that my students and I have been making using Javascript, which is just like TurtleScript but with extra instructions. Here <a href="https://codeheart.williams.edu/examples.xml">are some more </a>that are specifically designed for learning to program games. In fact, <i>Project Rocket Golfing</i> is written using Javascript. So, you could go from making letters all of the way to video games for your phone using the same tools we just learned. But we'll save that for another day!<br />
<br />
<br />
<a href="http://4.bp.blogspot.com/-kGgvbE8MBhA/V1Icf3t0eWI/AAAAAAAAEGQ/1_6jTWPDo8owpIs_IcedH328RRllZGhbQCK4B/s1600/icon.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://4.bp.blogspot.com/-kGgvbE8MBhA/V1Icf3t0eWI/AAAAAAAAEGQ/1_6jTWPDo8owpIs_IcedH328RRllZGhbQCK4B/s200/icon.png" width="200" /></a>You can take this handout home and have your parents help you get set up writing your own programs at home this summer if you want. Just send me email if you need help. Two good projects to start with are making more letters, so that you can spell your name, and making flags for different countries.<br />
<br />
You've been a terrific class, thank you for inviting me here and working so hard today. I'm impressed with how much you learned and with the programs that you've written. Give yourselves a hand!<br />
<br />
<h2>
Followup Handout: Learn to Code this Summer</h2>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;">I teach computer science at Williams College and develop special effects for video games and movies. Today I visited class to talk about computer programming and share some of the programming activities our family enjoys at home. These are the modern versions of how I first learned about programming by making art and video games in the 1980s.</span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;">In class we used TurtleScript (<a class="url" href="https://codeheart.williams.edu/turtle" style="color: #3388aa; text-decoration: none;">https://codeheart.williams.edu/turtle</a>). This is a free tool that I made for learning programming through art. It introduces the popular Javascript language in an accessible and motivating way. The website provides some more information about how you can use it at home on any Mac, PC, or Chromebook.</span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;">TurtleScript is a special version of the codeheart.js (<a class="url" href="https://codeheart.williams.edu/" style="color: #3388aa; text-decoration: none;">https://codeheart.williams.edu)</a> tool that my Williams students use to create video games. After a summer of experimentation in TurtleScript, codeheart.js is a great next step.</span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;">TurtleScript is for self-guided exploration. Below are a list of some other great resources if you're ready for a more structured approach to learning programming.</span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="line-height: 22.4px;"><span style="font-family: inherit;">—Morgan McGuire</span></span></div>
<div style="color: #222222; font-family: Palatino, Georgia, "Times New Roman", serif; line-height: 22.4px; text-align: justify;">
<span style="line-height: 22.4px;"><br /></span></div>
<h3 style="color: #222222; font-family: Palatino, Georgia, "Times New Roman", serif; line-height: 22.4px; text-align: justify;">
<span style="line-height: 22.4px;">Online Elementary School Courses</span></h3>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><strong class="asterisk">Code.org</strong> is a nonprofit that supports free programming education. It was created by large companies like Facebook, Google, and Disney and has drawn support from diverse celebrities including Angela Bassett, President Obama, JR Hildebrand, Bill Gates, and Nas.</span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><strong class="asterisk">Hour of Code</strong> (<a class="url" href="https://code.org/learn" style="color: #3388aa; text-decoration: none;">https://code.org/learn</a> is their online tutorial for helping students get comfortable with computer programming. It uses friendly and familiar content such as Disney's Frozen, Minecraft, and Star Wars.</span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;">If you like that, you then can go through their three 20 hour courses online during the summer at <a class="url" href="https://studio.code.org/" style="color: #3388aa; text-decoration: none;">https://studio.code.org/.</a> Start with Course 2, and try to work in sessions of about an hour each day. There is also an accelerated version for students with very strong math and reading skills.</span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;">This is my #1 recommendation for elementary school students building programming literacy at home.</span></div>
<div style="color: #222222; font-family: Palatino, Georgia, "Times New Roman", serif; line-height: 22.4px; text-align: justify;">
<br /></div>
<h3 style="color: #222222; font-family: Palatino, Georgia, "Times New Roman", serif; line-height: 22.4px; text-align: justify;">
Other Online Courses</h3>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;">Khan Academy's <em class="asterisk">Intro to JS: Drawing & Animation</em> free online course (<a class="url" href="https://www.khanacademy.org/computing/computer-programming/programming" style="color: #3388aa; text-decoration: none;">https://www.khanacademy.org/computing/computer-programming/programming</a>) uses ideas similar to TurtleScript. Compared to the Code.org course, it has more formal structure and moves faster, but it is not tailored to elementary-school students.</span></div>
<div style="color: #222222; font-family: Palatino, Georgia, "Times New Roman", serif; line-height: 22.4px; text-align: justify;">
<a href="https://www.blogger.com/null" name="books"></a><a href="https://www.blogger.com/null" name="toc3"></a></div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: #222222; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.4px; orphans: auto; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<span style="font-family: inherit;">Udacity's <em class="asterisk">Programming Foundations with Python</em> free online course (<a class="url" href="https://www.udacity.com/course/programming-foundations-with-python%E2%80%93ud036" style="color: #3388aa; text-decoration: none;">https://www.udacity.com/course/programming-foundations-with-python–ud036)</a> is structured more like an advanced high school or college course on programming. It would be appropriate for an older sibling or parent.</span></div>
<div style="-webkit-text-stroke-width: 0px; color: #222222; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.4px; orphans: auto; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<span style="font-family: inherit;"><br /></span></div>
<h3 style="color: #222222; font-family: Palatino, Georgia, "Times New Roman", serif; line-height: 22.4px; text-align: justify;">
Books</h3>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;">If you prefer to learn from a book instead of an online course, here are some that I recommend. These are ideal for a middle school or high school student, but a highly-motivated elementary school student might enjoy them as well.</span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><em class="asterisk">A Byte of Python</em> (<a class="url" href="http://python.swaroopch.com/" style="color: #3388aa; text-decoration: none;">http://python.swaroopch.com/</a> is free online. It is a friendly introduction to programming that eliminates some of the big ideas from a traditional computer science book to get you moving more quickly.</span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="color: #222222; line-height: 22.4px; text-align: justify;">
<span style="font-family: inherit;"><em class="asterisk">Introduction to Computer Science Using Python</em> (<a class="url" href="http://amzn.to/1TZUmLa" style="color: #3388aa; text-decoration: none;">http://amzn.to/1TZUmLa</a> costs about $30 used. It covers everything that we teach in the first year of computer science courses at Williams College with a really great structure.</span></div>
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and the <a href="http://amzn.to/1XXrNzl">Skylanders</a> series for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-86828524013167790892016-05-20T22:30:00.003-07:002016-08-06T21:10:18.300-07:00Game Camp for Grownups<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-AOGPOUEiuRE/Vz8RXkoOMFI/AAAAAAAAD9Q/7UInUXahO8s2srAWzYXBYzPiluOMNcseACKgB/s1600/1923446-667607_20120416_003.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="181" src="https://1.bp.blogspot.com/-AOGPOUEiuRE/Vz8RXkoOMFI/AAAAAAAAD9Q/7UInUXahO8s2srAWzYXBYzPiluOMNcseACKgB/s320/1923446-667607_20120416_003.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Axiom Verge</i></td></tr>
</tbody></table>
A group of academic colleagues charged me with creating a series of video gaming sessions. Their goal is to understand the merit of games as cultural artifacts, and of game design and analysis as academic fields.<br />
<br />
I'm treating this project as you might if someone asked for a master class about any area of study or hobby, such as "what's the deal with 19th century novels?" or "why are you so into cooking?"<br />
<br />
My role is a mixture of evangelist, educator, ... and someone trying to justify my discipline to friends working with more traditional media.<br />
<br />
<a name='more'></a><br />
The average age of this group is 50 years, and most members have not played a game in decades (or in some cases, at all). The group is only available for a few sessions. So, we're starting from zero. I can't survey <i>all</i> genres, mechanics, or even what I'd consider the video game canon. I also can't rely excessively on themes and skills carrying over between sessions because not everyone can attend each.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-gwmtqy96GmY/Vz8TprraH_I/AAAAAAAAD9w/FNT5zokNUoI-ymQnkz__i3tSrjPvUI5CwCLcB/s1600/New-pacman-championship-edition-dx-screenshots-header.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://1.bp.blogspot.com/-gwmtqy96GmY/Vz8TprraH_I/AAAAAAAAD9w/FNT5zokNUoI-ymQnkz__i3tSrjPvUI5CwCLcB/s320/New-pacman-championship-edition-dx-screenshots-header.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Pac Man Championship Edition DX+</i></td></tr>
</tbody></table>
This group is local to Williams College. However, I'm writing this article on our process for several reasons.<br />
<br />
My recent courses and books have benefited from reader feedback to early drafts on this blog. I look forward to the conversations this will project initiate.<br />
<br />
I also offer the game camp as a framework for others who might want to refine and repeat the experience for their own groups. The more that teachers share their planning materials, the easier and better it is for all of us and our students.<br />
<br />
Finally, this is an experiment of sorts. Scientists should document their experiments, and to keep us objective, ideally set out the methodology and hypotheses before they are are tweaked during iteration due to intermediate results.<br />
<br />
<h2>
Ground Rules</h2>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-pgui-tA3YyE/Vz8SB9gFk1I/AAAAAAAAD9U/xVFPplZbhM8WMazNtQcA9WZtvdxdGsmtgCLcB/s1600/10a4abf57421da1ad8ce22fe64f83ccc.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="181" src="https://1.bp.blogspot.com/-pgui-tA3YyE/Vz8SB9gFk1I/AAAAAAAAD9U/xVFPplZbhM8WMazNtQcA9WZtvdxdGsmtgCLcB/s320/10a4abf57421da1ad8ce22fe64f83ccc.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>The Last of Us: Remastered</i></td></tr>
</tbody></table>
These are the same rules applied to assigned games for students in my courses. There are really just two guidelines to ensure that everyone gets as much as possible from the experience: <b>respect games</b> as you should assigned novels or films, and <b>respect other players</b> as you should other students.<br />
<br />
The specific rules implementing those are:<br />
<br />
<ul>
<li>You must play each game for <b>at least two hours. </b><i>Most games spend the first half-hour just teaching you the mechanics and introducing the world of the game. For players new to video games, that "half hour" can stretch a lot longer. You need to push through that so that you've gotten to the game proper and not just done the equivalent of reading the dust cover. </i></li>
<ul>
<li>For some VR experiences, or in the case of physical illness from the stimulus, you should obviously stop before the two hour point.</li>
<li>For single-player games, you may also take turns with partners for a two-hour session as long as you are in control for at least 45 minutes across your turns. Those turns should not be consecutive.</li>
</ul>
<li>You <b>must try hard to succeed</b>. <i>Games are supposed to be challenging and you are expected to fail a lot at first, and then learn and begin to succeed. It is natural to feel embarrassed or frustrated in the beginning. Don't make a joke about your performance and then give up. Channel those feelings into trying harder.<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/--FjppUOpzyA/Vz8UgQJjUYI/AAAAAAAAD-E/UMV2sVvXdCw2sbIAwmD5EYkKKGBdihigwCLcB/s1600/39946-Mario_Kart_64_%2528Europe%2529-2.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="224" src="https://2.bp.blogspot.com/--FjppUOpzyA/Vz8UgQJjUYI/AAAAAAAAD-E/UMV2sVvXdCw2sbIAwmD5EYkKKGBdihigwCLcB/s320/39946-Mario_Kart_64_%2528Europe%2529-2.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Mario Kart 64</i></td></tr>
</tbody></table>
</i></li>
<li>You must <b>read the assigned articles or videos</b>, which I specifically chose to be short, and then <b>discuss the game</b> with another person who has played it. <i>It is easy to miss to point of why a game is interesting when focused solely on trying to play it in a short session.</i></li>
<li>Support and cheer on other players in a way that strictly enhances their accomplishment and challenge. Specifically: don't tell others what to do very often, and <b>don't ever take the controller out of their hands</b>. <i>I've been observing groups of new players for a decade as a scientist. In about eight out of ten groups of all ages and cultures, males attempt to socially dominate females when playing games, often unconsciously or with noble intentions of helping. It isn't entirely their fault--the males often do that to each other as well, but the females are often too polite to tell them to back off. Bottom line: if you're male and playing with females, I recommend that you sit on your hands and limit your comments to strictly compliments...that's what I do.</i></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-l4inAXgvfmU/Vz8T7JEavLI/AAAAAAAAD90/UGECRvuaP7w1qhMQase8jDAwhEE8fkY2ACLcB/s1600/Firewatch-Dialogue-700x399.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="182" src="https://4.bp.blogspot.com/-l4inAXgvfmU/Vz8T7JEavLI/AAAAAAAAD90/UGECRvuaP7w1qhMQase8jDAwhEE8fkY2ACLcB/s320/Firewatch-Dialogue-700x399.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Firewatch</i></td></tr>
</tbody></table>
I require students to re-play games that they're already familiar with, but for this group it is reasonable to skip a session if you're experienced with a game in the interest of time so that you can play more new games. Note that <i>Pac Man</i> is not equivalent to <i>Pac Man Championship Edition </i>for this purpose.<br />
<br />
<h2>
The Games</h2>
My goals in choosing these games are:<br />
<ol>
<li>survey the <b>breadth</b> of video game experiences</li>
<li>provide one or two <b>deep experiences</b>, which also requires first building certain playing skills</li>
<li>ensure that at least one game actually appeals to each person, so that the players see how it feels to become attached and <b>enjoy the experience</b> as well as gaining academic familiarity</li>
</ol>
I'm <i>not</i> trying to demonstrate the greatest games, advance a particular theory of games, or favor games that resonate with academics. The games I chose are critically lauded, but they are also all successful commercial products.<br />
<br />
The games below are listed in the order that they'll be offered. I include some backups for each that accomplish more-or-less the same thing. I discuss the significance of the games marked with asterisks below.<br />
<b style="background-color: #fff2cc;"><i style="background-color: white;"><br /></i></b>
<b style="background-color: #fff2cc;"><i style="background-color: white;">Tetris*</i></b><br />
<blockquote class="tr_bq">
<span style="background-color: white;">Accessible, robust, and minimalist gaming. Anyone can pick this up instantly and everyone finds it compelling. It teaches basic gaming literacy in a no-frills fashion, and the design has proved remarkably ageless.</span></blockquote>
<b><i>Super Mario Bros.</i></b><br />
<div>
<blockquote class="tr_bq">
A carefully-designed learning curve, tight controls, and instant action. The ideal introduction to platforming conventions while still rewarding skill and persistence. The only game on this list that is here for historical reasons as well as contemporary play, <i>SMB</i> arguably was the first modern video game, with large levels, graded mechanic introduction, boss battles, and even nonlinear maps.</blockquote>
<b><i>Inside</i>*</b><br />
<blockquote class="tr_bq">
Playdead's new masterpiece of combining platforming and narrative for an experience that fully embraces interaction as a storytelling medium. This takes what <i>SMB </i>introduced to its logical conclusion, leveraging linear gameplay. The puzzle difficulty and twitch levels are tuned just right to engage both casual and more experienced players. </blockquote>
<b><i>Pac-Man Championship Edition DX+</i></b></div>
<div>
<blockquote class="tr_bq">
Classic arcade feel with modern conventions and indie sensibility. Even more than <i>Tetris</i>, this rewards quick reflexes and strategic planning and presents short sessions that demand "let's play one more round."</blockquote>
<ul>
</ul>
<b><span style="background-color: #fff2cc;"><i style="background-color: white;">MarioKart 64*</i></span> [</b>multiplayer], any other <i>Mario Kart</i>, <i>Blur</i><br />
<div>
<blockquote class="tr_bq">
The ideal introduction to competitive play. On a racetrack, you can't get lost and miss the action. The controls are simple and the gameplay is heavily stabilized to work for mixed skill levels, but there are still plenty of map secrets and control techniques for advanced players.</blockquote>
<ul>
</ul>
<b><i>Axiom Verge </i>[</b>PC<b>]</b>, <i>Metroid Zero Mission</i>, <i>Castlevania: Aria of Sorrow</i>, <i>Legend of Zelda</i><br />
<div>
<blockquote class="tr_bq">
"Metroidvania" games embrace traversal and make RPG elements accessible. Their sense of atmosphere and loneliness is powerful and matched with the thrill of discovery. These games are also relatively hard, but in a fair way.</blockquote>
<b><i>Firewatch</i></b>, <i>Her Story</i>, <i>Gone Home</i>, <i>ADR1FT</i><br />
<blockquote class="tr_bq">
Blurring the line between "game" and linear narratives forms, taking on adult themes, and foregrounding character...even though there actually are no characters explicitly depicted.</blockquote>
<b style="background-color: #fff2cc;"><i style="background-color: white;">Monaco*</i></b> [4-player couch multiplayer]<br />
<blockquote class="tr_bq">
Introduction to cooperative play. A brilliant reintepretation of <i>Pac Man </i>with light RPG elements. It shows the power of visual abstraction. <i>Monaco </i>is a perfect example of how to translate genre entertainment (here, heist movies) to a new medium. It captures all of the progressive (i.e., linear narrative) elements in an elegant way by allowing them to emerge naturally from the mechanics and level designs.</blockquote>
<b><i>Aperture Robot Repair </i></b>[Vive], <i>Core Calibration Slingshot</i><br />
<blockquote class="tr_bq">
Compelling VR presence, irony and contextual humor. "<a href="https://en.wikipedia.org/wiki/Immersion_(virtual_reality)#Presence">Presence</a>" is a technical term for the mind and senses reacting to virtual stimuli in a physical way.</blockquote>
<i><b>The Night Jar</b>, Papa Sangre II</i><br />
<blockquote class="tr_bq">
No graphics can ever be as good as the imagination, and shockingly, no element of video game technology is truly required.</blockquote>
<b><i>Audio Shield</i> </b>[Vive], <i>Guitar Hero 2</i>, <i>Rock Band 5</i><br />
<blockquote class="tr_bq">
Modern rhythm games with physical identity. <i>GH2</i> achieves a funny kind of presence even in 2D; putting a rhythm game in VR merges flow and presence (I can't wait for <i>RB5 VR</i>!)</blockquote>
<b style="font-style: italic;">The Last of Us Remastered</b><span style="font-style: normal; font-weight: normal;"> [single player], </span><i>Uncharted 4</i>, <i>Uncharted 2</i></div>
<div>
<blockquote class="tr_bq">
Naughty Dog consistently delivers emotionally powerful experiences through completely generic characters, plots, and settings. They demonstrate that classic character and story theory works for games, but that games are about living the story and so innovation must be on the feel side, not plot cleverness. These are also the most cinematic games available, with interesting aggressive camera work, lighting, costume changes, and set pieces. <i>TLUR</i> is also like being punched in the gut (emotionally, at least as a parent) for hours. Although it telegraphs every twist and emotional moment, that dread and anticipation actually heightens the experience.</blockquote>
<b><span style="background-color: white;"><span style="background-color: #fff2cc;"><i>Portal 2*</i></span> </span>[</b>single player, PC], <i>Portal</i></div>
<div>
<blockquote class="tr_bq">
A masterpiece. Technically excellent, sharp design, great writing, great characters, the best example of environmental storytelling...and excellently paced. <i>Portal 2</i> improved the learning curve for novice players and deepened the story from <i>Portal</i>, so it narrowly edges out its predecessor. </blockquote>
<b><i>XCOM</i> </b>[XCOM2 preferred, but any version, single player], <i>Age of Empires III</i>, <i>Rymdkapsel</i></div>
<div>
<blockquote class="tr_bq">
These are the most accessible RTS games, yet they all retain tight design and depth. <i>XCOM</i> clearly stands out from the pack for its sheer darkness, storyline, and mixture of mechanics. This is as close as accessible games get to the layered complexity of a novel. This also shows how progressive and emergent elements can coexist without one dominating; <i>XCOM</i> is like <i>Groundhog Day</i> after the first playthrough. It is also the rare truly hardcore game that is open to novice and casual players. <i>XCOM 2</i> takes everything great about the original and doubles down on it.</blockquote>
<ul>
</ul>
<b style="font-style: italic;">The Stanley Parable*</b><span style="font-style: italic;">, <i>The Magic Circle</i></span><br />
<blockquote class="tr_bq">
<span style="background-color: white;">Post-modern gaming at its finest and most accessible. The game stands on its own, but with some background in other games it creates a metacritical space and mixes scathing and loving references in equal measure, like <i>The Player</i> and <i>Total Recall </i>do for Hollywood. </span></blockquote>
<br />
<div>
I strongly recommend playing <i>Portal 2 </i>and <i>XCOM 2</i> by yourself instead of with partners. Identifying with the world of the game and solving problems solely by yourself is part of the experience for those games. </div>
<div>
<br /></div>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-K4vSlI3HUms/Vz8SfaSRQEI/AAAAAAAAD9c/g0HOhQr3MZ8mjcwX-5Aw6dNysuzAJd0PgCLcB/s1600/audioshield-vr-htc-vive.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="179" src="https://4.bp.blogspot.com/-K4vSlI3HUms/Vz8SfaSRQEI/AAAAAAAAD9c/g0HOhQr3MZ8mjcwX-5Aw6dNysuzAJd0PgCLcB/s320/audioshield-vr-htc-vive.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Audioshield</i></td></tr>
</tbody></table>
For the other single-player games, I recommend playing with a partner and taking turns having control on ~15 minute intervals (there are usually natural swapping points). Playing with someone else usually enhances the experience. It also makes it a little easier to get through some tougher parts...clears up some confusion for people who don't have a lot of gaming background. </div>
<div>
<br /></div>
<div>
For most of these games, I recommend using a controller. This is especially true for <i>XCOM</i>, which at first appears to favor using a mouse. For <i>Portal 2</i>, use the mouse and keyboard. It doesn't matter what input you use for <i>The Stanley Parable</i>, but I found mouse and keyboard easier.</div>
<div>
<br /></div>
<div>
There are thirteen games on the list, which is way too much time to ask of the group. I probably need to get the list down to five sessions. It already pains me to have cut <i>Wing Commander III,</i> <i>GTA: Chinatown Wars</i>, <i>LIMBO</i>, <i>Papa & Yo</i>, <i>Skyrim</i>, <i>Minecraft</i>, <i>Shadow of the Colossus</i>, <i>Harvest Moon</i>, <i>Half-Life 1 </i>[single player], <i>Jet Grind Radio</i>, <i>Spelunky</i>, <i>Left 4 Dead 2 </i>[multiplayer], and many, many more games to better capture the breadth of the medium.</div>
<div>
<br /></div>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-HPKVWGfLvdE/Vz8S1B5lGcI/AAAAAAAAD9g/ihswKmkO2pAnneEUadyUZ2Mmq8VGPDqzACLcB/s1600/portal2-screenshots-7.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://1.bp.blogspot.com/-HPKVWGfLvdE/Vz8S1B5lGcI/AAAAAAAAD9g/ihswKmkO2pAnneEUadyUZ2Mmq8VGPDqzACLcB/s320/portal2-screenshots-7.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Portal 2</i></td></tr>
</tbody></table>
The games marked with asterisks are the ones that I recommend to those player who can make only five sessions. Maybe those will be the only five that I offer, if nobody is available for more.<br />
<br />
The problem in cutting to just them is that all of these games stand on their own, but stand much better together. Imagine if <i>Moby Dick</i> was the only book that you'd ever read...it would still be great, but you'd be unable to appreciate its literary context and lack the experience to tease out why it is so great.</div>
<div>
<br /></div>
<div>
For example, I'm prepared to argue for <i>Portal 2</i> as the greatest video game of all time (I'm prepared to make that argument for other games, though too!) It would be a shame to hit it as your first game using first-person controls or first puzzle game, however. I've seen smart players lost for an hour in the 5-minute introductory sequence of <i>Portal 2</i> because they didn't understand the basic conventions of the game due to lack of gaming experience.</div>
<div>
<br /></div>
<h2>
Why [These] Games?</h2>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-v5CsEVhaJrU/Vz8TW6U10gI/AAAAAAAAD9o/lq2zEgs0pM0ZCb1WSKsSI7im5kJbPaJdgCLcB/s1600/SMB8-3.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://4.bp.blogspot.com/-v5CsEVhaJrU/Vz8TW6U10gI/AAAAAAAAD9o/lq2zEgs0pM0ZCb1WSKsSI7im5kJbPaJdgCLcB/s1600/SMB8-3.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Super Mario Bros.</i></td></tr>
</tbody></table>
Video games are a popular, commercial art (there are fine art games; but I'm not teaching them to this group). They are also a folk art via modding, game jams, and the less polished side of indie development, but we aren't going in that direction with this group.<br />
<br />
I chose games that proved themselves under the brutal constraints of the market. Like serialized novels, Shakespearian plays, and feature films, an audience voted with their wallets that these are undeniably engaging works.<br />
<br />
Games need not be "fun" any more than <i>Hamlet</i> has to be fun, but they must <b>engage</b> the player's mind and emotions. They also must be <b>entertaining</b>, again, sometimes in the way that a tragedy or drama is entertaining. They can, of course, be entertaining and engaging in the manner of a summer blockbuster as well.<br />
<br />
There are different kinds of value in different games. We admire <i>Super Mario Bros. </i>for its mechanics, controls, and level design; <i>The Stanley Parable</i> for its sardonic humor and reflective insights; <i>The Last of Us </i>for its set pieces and heart-strings; <i>Portal 2</i> for its puzzles and learning curve, but also its environmental storytelling; <i>Aperture Robot Repair</i> for its technical excellence, and so on.</div>
<div>
<br /></div>
<div>
Games are about relationships and choices, not narratives. They prefer generic settings and narratives to immediately establish a familiar context within which to explore dynamics and choices. That said, what makes some games interesting is that they reach for the narrative ring anyway. <i>Firewatch</i> and <i>Uncharted</i> are about being <i>inside</i> the story, not the genius of the story. Part of <i>Portal 2</i>'s greatness is that it contains excellent performances and narrative even though the mechanics are traversal puzzles. Make no mistake, however: while narrative and characters can elevate a game, all of these games work as games first. Overemphasizing their narratives would be like evaluating a novel based on its illustrations or a play based on its scenery. Those just aren't the strength or the point of those media.<br />
<br />
Games particularly excel at creating <b><a href="https://en.wikipedia.org/wiki/Flow_(psychology)">flow</a></b> and inspiring <b><a href="https://blog.richmond.edu/playing-at-leadership/2012/05/12/fiero/">fiero</a></b>. Flow is that sense of being in the moment, where you're in tune with the environment and lose track of time, interacting at an intelligent but almost subconscious level. Most people enter flow when reading fiction or watching television. Anyone expert in a complex field enters flow when working, whether a professional athlete, novelist, or mathematician.<br />
<br />
Fiero is the sense of accomplishment when you've achieved something challenging through practice and skill. When you punch your fist in the air and shout "yes!" (even if it is vicarious success, as at a sporting event...which is really a game!), that's fiero. While over-the-top action movies sometimes accomplish a light sense of fiero, no other media can inspire this emotion as intensely as games.</div>
<div>
<br /></div>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-QLwiMwynZyI/Vz8UI3McRmI/AAAAAAAAD98/kDDBAF_BcKUIVPmpdvwSqm20evzeDeQxwCLcB/s1600/The-Stanley-Parable-endings-guide-definitive-ending-tree.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://3.bp.blogspot.com/-QLwiMwynZyI/Vz8UI3McRmI/AAAAAAAAD98/kDDBAF_BcKUIVPmpdvwSqm20evzeDeQxwCLcB/s320/The-Stanley-Parable-endings-guide-definitive-ending-tree.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>The Stanley Parable</i></td></tr>
</tbody></table>
<b>Games respond to each other </b>and build on mechanics and themes. You need a certain amount of coverage to appreciate this.<br />
<br />
For the games above, <i>Pac-Man Championship Edition</i> revisits the design of <i>Pac-Man</i> as if it had been invented today. <i>Monaco</i> then answers the question, "what would multiplayer <i>Pac-Man</i> be?" (In late 2016, Bandai will try its own <a href="https://www.bandainamcoent.eu/news/2016/05/23/pac-man-256-coming-to-consoles-pc/5598">multiplayer <i>Pac-Man</i></a>; I'm happy with <i>Monaco</i>)<br />
<i><br /></i>
<i>Axiom Verge</i> is a direct and reverential response to <i>Metroid</i>, but also to platformers back to <i>Super Mario Bros.</i><br />
<i><br /></i>
<i>The</i> <i>Stanley Parable</i> primarily criticizes games that are not on my list...but it also questions the lack of free will and corresponding value of success of a game like <i>Portal 2</i> even as it adopts its framework<i>.</i></div>
<div>
<br /></div>
<div>
</div>
<div>
I believe the above selection of games support these points, and that the ground rules will lead the players to be able to debate subtler issues in games.<br />
<br />
I look forward to this experiment and appreciate my colleagues' collective interest!</div>
<div>
<br /></div>
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
</div>
</div>
</div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-25272582784622904072016-03-31T19:57:00.002-07:002017-01-05T02:16:25.255-08:00Pixel Art Tech Tips<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-j3IBZl8-EqQ/Vv3f6BTVMgI/AAAAAAAADN8/k2KZ2sJUBsYBuYjjjQGHX9Tn24AwRLibA/s1600/pixels.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="173" src="https://1.bp.blogspot.com/-j3IBZl8-EqQ/Vv3f6BTVMgI/AAAAAAAADN8/k2KZ2sJUBsYBuYjjjQGHX9Tn24AwRLibA/s200/pixels.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px; text-align: center;">[Programmer!] pixel art from my recent<br />
game jam projects. The portrait is derived<br />
from licensed art by <a href="http://oryxdesignlab.com/">Oryx</a></td></tr>
</tbody></table>
This article describes art tools and programming techniques I use for creating indie games with pixel art for game jams.<br />
<br />
Pixel art, also sometimes known as "8-bit" and "16-bit" art, is digital art drawn at a scale where individual pixels are visible. It combines classical art techniques from mosaics and textiles with digital conventions and golden-age gaming aesthetics.<br />
<a name='more'></a><br />
Pixel art is popular among indie game developers. In addition the currency of retro style and its implicit reference to a gameplay-first mindset, the cost of producing pixel art is typically lower than for higher-resolution or 3D assets. While great artists can create masterpieces under the limiting constraints of pixel art, those constraints also make it accessible to novices. Anyone can easily modify or create small sprites with limited colors compared to the difficulty of 3D modeling, texturing, and animation.<br />
<br />
Some great examples of games embracing an extremely low-resolution and limited-color palette can be found in the <a href="http://www.lexaloffle.com/pico-8.php">PICO-8</a> fantasy console and <a href="https://itch.io/jam/lowrezjam2016">LOW REZ JAM</a>. <a href="http://opengameart.org/">Opengameart.org</a> is a large repository of creative commons and public domain pixel art (of mixed quality) that is available for games.<br />
<br />
For fantastic art studio advice on drawing pixel art, see <a href="https://www.patreon.com/saint11">Pedro Medieros' tutorials</a>.<br />
<h2>
</h2>
<h2>
Pixel Art Examples</h2>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-jL8R0QKEpnI/Vv3WYxAexcI/AAAAAAAADNQ/sPQTp_871_4aFuI0dzOZ8eD6NeHExiQvw/s1600/Screen%2BShot%2B2016-03-31%2Bat%2B10.00.39%2BPM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="168" src="https://1.bp.blogspot.com/-jL8R0QKEpnI/Vv3WYxAexcI/AAAAAAAADNQ/sPQTp_871_4aFuI0dzOZ8eD6NeHExiQvw/s320/Screen%2BShot%2B2016-03-31%2Bat%2B10.00.39%2BPM.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Painting by <a href="http://www.pixelshuh.com/">Octavi Navarro</a></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-SPJ0rEjyyGc/Vv3VdWFO0qI/AAAAAAAADNE/QWbNApxOpYMoRbadD6a_eg2qWKssC7PXw/s1600/Canabalt_Missile-Bomb-thing.jpeg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://3.bp.blogspot.com/-SPJ0rEjyyGc/Vv3VdWFO0qI/AAAAAAAADNE/QWbNApxOpYMoRbadD6a_eg2qWKssC7PXw/s400/Canabalt_Missile-Bomb-thing.jpeg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">"Canabalt" game by <a href="http://adamatomic.com/">Adam "Atomic" Saltsman</a></td></tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-9PiaVn0GeaI/Vv3UsopiVXI/AAAAAAAADM4/YmL0EKveehIwicGkC35aT5S5t-zcgjfZQ/s1600/EGqgVXZ.gif" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="297" src="https://4.bp.blogspot.com/-9PiaVn0GeaI/Vv3UsopiVXI/AAAAAAAADM4/YmL0EKveehIwicGkC35aT5S5t-zcgjfZQ/s320/EGqgVXZ.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px; text-align: center;">"Night Pearl" game by <a href="https://twitter.com/castpixel">Christina Antoinette Neofotistou</a><br />
<div>
<br /></div>
</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-d_pQEvXrhqc/Vv3XQhEkwCI/AAAAAAAADNg/OkLD_5JSZys4si7-NuKfC3JniMQTVqRWA/s1600/Screen%2BShot%2B2016-03-31%2Bat%2B10.04.30%2BPM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="111" src="https://2.bp.blogspot.com/-d_pQEvXrhqc/Vv3XQhEkwCI/AAAAAAAADNg/OkLD_5JSZys4si7-NuKfC3JniMQTVqRWA/s400/Screen%2BShot%2B2016-03-31%2Bat%2B10.04.30%2BPM.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sprite sheet from the <i>Street Fighter</i> game</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-hBX8yomECx0/Vv3X0REN4lI/AAAAAAAADNw/yuz5HgyJR3YH2bUFMCm6rJIP942GPNWBw/s1600/mountaingateafternoon.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://2.bp.blogspot.com/-hBX8yomECx0/Vv3X0REN4lI/AAAAAAAADNw/yuz5HgyJR3YH2bUFMCm6rJIP942GPNWBw/s320/mountaingateafternoon.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://markferrari.com/">Mark Ferrari</a>'s Mountain Gate from the <i>Battle Mage</i> game.<br />
This image also animates and changes weather and time<br />
of day using palette animation!</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-3Yf6xkTqvZw/Vv3k7aeV6sI/AAAAAAAADOM/W7syNwZ0n4E9hVh1bXsf_XMiMxLqpxPIQ/s1600/article-1293143550004-0c9225ba000005dc-670672_636x350.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="176" src="https://2.bp.blogspot.com/-3Yf6xkTqvZw/Vv3k7aeV6sI/AAAAAAAADOM/W7syNwZ0n4E9hVh1bXsf_XMiMxLqpxPIQ/s320/article-1293143550004-0c9225ba000005dc-670672_636x350.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot from <i>Castlevania</i></td></tr>
</tbody></table>
<h2>
Photoshop</h2>
I draw most of my pixel art directly in Photoshop, using the <b>Pencil</b> and <b>Eraser</b> tools at 1px size with 100% opacity and 100% hardness. Some other essential configuration changes for Photoshop pixel art are below.<br />
<div>
<br /></div>
<div>
Change the Units for Rulers and Type in <b>Preferences</b><b>→</b><b>Units & Rulers</b> to "<b>Pixels</b>."<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-iCHA4n-oUQI/Vv3PvScZdvI/AAAAAAAADMA/4k0AmGxaWJYC51jKPJ-0EPHMSKxZv4MXw/s1600/Screen%2BShot%2B2016-03-31%2Bat%2B8.43.07%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="82" src="https://2.bp.blogspot.com/-iCHA4n-oUQI/Vv3PvScZdvI/AAAAAAAADMA/4k0AmGxaWJYC51jKPJ-0EPHMSKxZv4MXw/s200/Screen%2BShot%2B2016-03-31%2Bat%2B8.43.07%2BPM.png" width="200" /></a></div>
<br /></div>
<div>
Set <b>Preferences→General</b><b>→</b><b>Image Interpolation</b> to "<b>Nearest Neighbor</b>."</div>
<div>
<br /></div>
To get a pixel-accurate cursor, disable <b>View</b><b>→</b><b>Snap</b><br />
<br />
Because you'll be zoomed in most of the time, you may will likely want to toggle <b>View</b><b>→</b><b>Show</b><b>→</b><b>Pixel Grid</b> frequently.<br />
<div>
<br /></div>
To see sprite grids, enable <b>View</b><b>→</b><b>Extras</b> and then under <b>Preferences</b><b>→</b><b>Guides</b><b>→</b><b>Grid & Slices</b>, set <b>Gridline Every</b> to your sprite size in pixels.<br />
<br />
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-dss-xDRohsI/Vv3P73eIa0I/AAAAAAAADMQ/EFahjI5JRm4S03hfaD8LoNdd1P7oufVcQ/s1600/Screen%2BShot%2B2016-03-31%2Bat%2B8.42.49%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="96" src="https://3.bp.blogspot.com/-dss-xDRohsI/Vv3P73eIa0I/AAAAAAAADMQ/EFahjI5JRm4S03hfaD8LoNdd1P7oufVcQ/s200/Screen%2BShot%2B2016-03-31%2Bat%2B8.42.49%2BPM.png" width="200" /></a></div>
<br /></div>
<div>
Set font antialiasing to "<b>None</b>" for very small (say, 8 pixel) or "<b>Crisp</b>" for larger title-screen text.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-1rB1dhPVvxE/Vv3P2GEFVRI/AAAAAAAADMI/j905Kvl19JIbLLdYtv2z2H8R0viGlanhg/s1600/Screen%2BShot%2B2016-03-31%2Bat%2B8.41.48%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://1.bp.blogspot.com/-1rB1dhPVvxE/Vv3P2GEFVRI/AAAAAAAADMI/j905Kvl19JIbLLdYtv2z2H8R0viGlanhg/s200/Screen%2BShot%2B2016-03-31%2Bat%2B8.41.48%2BPM.png" width="200" /></a></div>
<br />
Save your pixel art in a <b>lossless</b> format, such as BMP, TGA, TIFF, GIF, or PNG. PNG is usually preferred today because it works well with many modern tools and browsers.<br />
<br />
Photoshop outputs rather large PNG files. You can reduce their size with no loss of quality using a tool such as <a href="https://imageoptim.com/" style="font-weight: bold;">ImageOptim</a>, which uses the <a href="http://pmt.sourceforge.net/pngcrush/">PNGcrush</a>, <a href="http://optipng.sourceforge.net/">OptiPNG</a>, <a href="http://advsys.net/ken/utils.htm">PNGOUT</a>, <a href="http://www.advancemame.it/doc-advpng.html">AdvPNG</a>, and <a href="https://github.com/google/zopfli">Zopfli</a> libraries and tools to do its work. There is an <a href="http://pngcrush.com/">online </a>tool for this as well.<br />
<br />
I occasionally use <a href="http://www.pixenapp.com/">Pixen</a> and <a href="http://pixlr.com/editor/">Pixlr</a> editors for pixel art, but usually find that the full power of Photoshop gives a better workflow.<br />
<h2>
</h2>
<h2>
Resizing with HQx</h2>
<div>
Sometimes you'll want to enlarge pixel art and make it appear more like vector art. This is useful when creating icons and cover art from pixel resources. It is also sometimes desirable for rendering assets or whole games mastered as pixel art in a more contemporary style.<br />
<br />
Maxim Stepin developed the family of "<a href="https://en.wikipedia.org/wiki/Hqx"><b>HQx</b></a>" algorithms for heuristically rescaling pixel art by 2x, 3x, and 4x. They work best on high-contrast, palette images. Implementations are provided by:<br />
<br />
<br />
<ul>
<li><a href="https://github.com/grom358/hqx">C HQx</a> maintained by Cameron Zemek</li>
<li><a href="https://github.com/phoboslab/js-hqx">Javascript</a> HQx maintained by Dominic Szablewski</li>
<li><a href="https://github.com/ubitux/hqx">Python HQx</a> maintained by Clément Bœsch</li>
<li><a href="https://github.com/pdjonov/hqnx">XNA HQx</a> maintained by Phill Djonov</li>
<li><a href="https://github.com/Arcnor/hqx-java">Java HQx</a> maintained by Edu Garcia</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-jp8VVt21S_I/Vv3RDNKweGI/AAAAAAAADMo/YTk-P2D-iHAKqu8DpvOZ8W1LjZ6wQDTBw/s1600/Test_hq3x.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://4.bp.blogspot.com/-jp8VVt21S_I/Vv3RDNKweGI/AAAAAAAADMo/YTk-P2D-iHAKqu8DpvOZ8W1LjZ6wQDTBw/s400/Test_hq3x.png" width="400" /></a></div>
<br />
Nick Darnell provides an online tool called "<b><a href="http://nickdarnell.github.io/depixelizer/">Depixelizer</a>" </b>for performing HQx resizing, which also supports an alpha channel.<br />
<br />
During the art process, I often resize objects using either nearest-neighbor interpolation or the HQX algorithms, and then paint over them in Photoshop to restore the pixel look at the new scale.</div>
<div>
<br /></div>
<h2>
OpenGL & GLSL</h2>
Set the texture or sampler <b>GL_TEXTURE_MAG_FILTER</b> filter to <b>GL_NEAREST</b>.<br />
<br />
Set the <b>GL_TEXTURE_MIN_FILTER</b> to either <b>GL_NEAREST_MIPMAP_NEAREST</b> (for sharp but flickering shrunk textures) or <b>GL_LINEAR_MIPMAP_LINEAR</b> (for slightly blurry shrunk textures without flickering).<br />
<br />
By default, OpenGL runs the fragment shader at the <b>centers</b> of pixels covered by rasterized primitives. That is, in GLSL <b>gl_FragCoord.xy</b> will be an integer plus (0.5, 0.5).<br />
<br />
Use <b>texelFetch</b> to read from textures at integer pixel coordinates.<br />
<br />
<h2>
Javascript Canvas</h2>
<div class="p1">
<span class="s1">To make a <b>Canvas</b> object display enlarged (so that "pixels" are visible on a high-resolution display), increase its width and height by an integer multiple and then set nearest-neighbor interpolation for the Canvas itself by:</span><br />
<span class="s1"><br /></span></div>
<pre class="brush: javascript">canvas.style.msInterpolationMode = 'nearest-neighbor';
canvas.style.imageRendering = '-o-crisp-edges';
canvas.style.imageRendering = '-moz-crisp-edges';
canvas.style.imageRendering = '-webkit-optimize-contrast';
canvas.style.imageRendering = 'optimize-contrast';
canvas.style.imageRendering = 'crisp-edges';
canvas.style.imageRendering = 'pixelated';
</pre>
<div class="p1">
<span class="s1"><br /></span>
<span class="s1">When drawing <b>Image</b>s or other <b>Canvas</b>es <i>onto</i> the canvas, enforce nearest-neighbor interpolation for them by:</span></div>
<div class="p1">
<span class="s1"><br /></span></div>
<pre class="brush: javascript">var ctx = canvas.getContext("2d");
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
</pre>
<div class="p1">
<span class="s1"><br /></span>
<span class="s1">Most browsers treat integer coordinates as the centers of pixels, which causes lines and rendered sprites at integer coordinates to be blurred. To avoid this, use:</span><br />
<span class="s1"><br /></span></div>
<pre class="brush: javascript">ctx.translate(-0.5, -0.5);
</pre>
<div class="p1">
<span class="s1"><br /></span>
</div>
<div class="p1">
</div>
Unfortunately, there is no standard way to disable font antialising using <b>fillText</b>. On some browsers on some platforms, the following will work (for example, currently most OS X browsers will obey these):<br />
<br />
<pre class="brush: javascript">canvas.style.mozOsxFontSmoothing = 'unset';
canvas.style.webkitFontSmoothing = 'none';
canvas.style.fontSmooth = 'never';
canvas.style.fontSmoothing = 'never';
</pre>
<br />
The only reliable solution for pixel font rendering from arbitrary fonts is to pre-render your fonts to an <b>Image</b> and the use drawImage to copy individual characters or strings of text as a bitmap font. It may be possible to create a bitmap web font that prevents antialiasing, although I have not found an example of one yet.<br />
<br />
<h2>
HTML & CSS</h2>
When embedding pixel art images into web pages, use the CSS styles from above, but applied in CSS:
<br />
<pre class="brush: css">img, canvas {
ms-interpolation-mode: nearest-neighbor;
image-rendering: -o-crispedges;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
</pre>
<br />
<h2>
Social Media</h2>
<div>
Social media tools such as Twitter tend to shrink and re-compress images. This destroys the quality of pixel art. A trick for sharing your artwork in a way that will preserve the details is to resize the image in Photoshop by an integer factor (say, 8x) using <b>Nearest</b> interpolation. This makes the pixels visible.</div>
<div>
<br /></div>
<div>
Then, leave one transparent pixel in the corner of the image to prevent the social media site from converting the image to a JPG, which has lossy compression that will blur the pixels. Save the result as a GIF or <b>PNG</b> image and upload it to your favorite site. Beware that <i>animated</i> GIFs will likely be converted to MP4 video files, which will become blurry as well.<br />
<br /></div>
<h2>
Some Pixel Art Links</h2>
<ul>
<li><a href="https://graphicsgale.com/us/">GraphicsGale</a> pixel art tool</li>
<li><a href="http://www.piskelapp.com/">Piskel</a> online sprite editing tool</li>
<li><a href="http://www.2deegameart.com/">Sprite DLight tool</a> for dynamic lighting on pixel art</li>
<li><a href="http://www.pixelshuh.com/">Octavi Navarro</a>'s fine-art pixel art paintings, with timelapses</li>
<li><a href="http://makegames.tumblr.com/post/42648699708/pixel-art-tutorial">Derek Yu</a>'s pixel art tutorial</li>
<li><a href="http://www.drububu.com/tutorial/">Arjan Westerdiep</a>'s pixel art tutorials</li>
<li><a href="https://web.archive.org/web/20130202144301/http://kiwinuptuo.deviantart.com/">Kiwinuptuo</a>'s pixel art tutorials</li>
<li><a href="http://daid.eu/~daid/tigsource_pics/">Pixel art examples</a> automatically culled from Tigsource</li>
<li>Mark Ferrari's masterful pixel art (<a href="http://markferrari.com/">1</a>)(<a href="http://markferrari.com/art/8bit-game-art-volume-2/">2</a>)</li>
<li><a href="http://fool.deviantart.com/">Foolstown</a> pixel art examples</li>
<li><a href="http://artcity.bitfellas.org/index.php?a=showcase">Artcity</a> demoscene pixel art</li>
<li><a href="http://oryxdesignlab.com/">Oryx Design Lab'</a>s sprites for sale</li>
<li><a href="http://www.spriters-resource.com/">The Spriters Resource</a> of game sprites from obsolete games (technically violating copyright)</li>
<li><a href="http://www.pixelartshop.com/collectors-corner.html">Perler-bead mosaics</a> from pixel art on commission</li>
<li><a href="http://hem.bredband.net/ricfha/pic/db32_v1_analyze.png">Dawnbringer</a>'s palette</li>
</ul>
<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-85942467595584486572016-03-20T19:18:00.005-07:002021-01-15T07:36:15.196-08:00Computational Graphics Pronunciation Guide<a href="http://4.bp.blogspot.com/-de8XCY33d5w/Vu9Y82nzGgI/AAAAAAAADLY/Tc5Su9nuHcUzQ_70Cdx17ysbR9PG0I9Uw/s1600/Leonhard_Euler.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://4.bp.blogspot.com/-de8XCY33d5w/Vu9Y82nzGgI/AAAAAAAADLY/Tc5Su9nuHcUzQ_70Cdx17ysbR9PG0I9Uw/s200/Leonhard_Euler.jpg" width="152" /></a>It is hard to know the accepted English pronunciation of technical terms that you've only read, or are either unfamiliar with the language from which they come or are not a native English speaker. (And I have a lot of sympathy--I've been working with minimal success for years on my own pronunciation and accent in languages that are new to me.)<br />
<br />
I'm a native American English speaker and had the benefit of several mentors with impeccable academic grammar and pronunciation. I'm passing on what I've learned in this guide to terms with challenging pronunciations that appear in graphics publications or are frequently spoken in academic talks.<br />
<br />
<a name='more'></a>These are the words I hear colleagues and students mispronouncing often, plus many suggestions I've received by e-mail and Twitter since this article was first posted--please send suggestions if you've encountered others, and corrections where you spot errors. I don't care how you pronounce these words...but if you asked my advice because you were concerned about miscommunication or embarrassing yourself, this is what I would tell you. Language evolves, so the right answer changes over time, and my interest isn't in "correcting" anyone or arguing about who is right.<br />
<br />
Here's the most accepted pronunciation of certain terms when speaking in [American] English to a technical audience:<br />
<br />
<ul>
<li>albedo ("al-<b>bee</b>-doe")</li>
<li>albeit ("al-<b>bee</b>-it")</li>
<li>aliasing ("<b>ail</b>-ee-ass-ing")</li>
<li>anisotropic ("ann-eye-so-<b>tra</b>-pick"), although pronouncing the "tra" as "troe" is a common regional accent and doesn't sound incorrect</li>
<li>antipodes ("ann-<b>tip</b>-oh-dees") even though the singular, "antipode" is pronounced "<b>anti</b>-pode"</li>
<li>Bezier ("bez-ee-<b>yay</b>")</li>
<li>bokeh ("<b>boe</b>-keh") according to the <a href="https://luminous-landscape.com/bokeh-in-pictures/">inventor of the English spelling</a></li>
<li>cache ("cash") the final "e" is silent. The word pronounced "cash-<b>ay</b>" is "cachet," which means something completely different. Also consider whether you really mean "cache" or "memoize" while you're thinking about the pronunciation.</li>
<li>de Casteljau ("dee cast-el-<b>joh</b>")</li>
<li>Cartesian ("car-<b>tea</b>-zhen")</li>
<li>Cauchy ("co-<b>she</b>")</li>
<li><a href="https://en.wikipedia.org/wiki/Boris_Delaunay">Delone</a>, a.k.a. Delaunay ("de-<b>lawn</b>-ayh") was Russian, not French (although of French descent). This is how it his name is pronounced by American academics, but "de-lawn-<b>eh</b>" is more accurate to the actual "<span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22.4px;">Делоне́"</span></li>
<li>Euler ("<b>oy</b>-lur")</li>
<li>Eulerian ("oy-<b>lair</b>-ian")</li>
<li>Euclidean ("you-<b>klid</b>-ee-an")</li>
<li>experiment ("ex-<b>pear</b>-ih-ment")</li>
<li>Fourier ("four-ee-<b>yay</b>")</li>
<li>Fresnel ("fren-<b>el</b>")</li>
<li>finite ("<b>fine</b>-ite")</li>
<li>frustum ("<b>frus</b>-tum") note that there is only one "r", near the beginning</li>
<li>GIF ("jif") like the peanut butter, <a href="http://bits.blogs.nytimes.com/2013/05/23/battle-over-gif-pronunciation-erupts/?_r=0">according to the inventor</a>, although the hard-G alternative is also commonly heard</li>
<li>Gouraud ("goo-<b>roh</b>")</li>
<li>Hermite ("air-<b>meet</b>")</li>
<li>homogeneous ("home-oh-<b>gene</b>-ee-yus") the "oh" is "ah" in some regional accents</li>
<li>iterative ("<b>it</b>-ur-uh-tiv") the last syllable rhymes with "give"</li>
<li>iterate ("<b>it</b>-ur-ate") the last syllable is the number 8</li>
<li>infinite ("<b>in</b>-fin-it") the middle syllable is what a fish swims with. This is annoyingly different from the way that "finite" is pronounced</li>
<li>Jacobian ("jack-<b>oh</b>-bee-an") pronounced this way in English, although Jacobi was German, so this word based on his name theoretically should be pronounced "yak-oh-bee-an"</li>
<li>[Steve] Jobs ("jahhbs") - as in, having more than one occupation, <i>not</i> like Job from the bible</li>
<li>JPEG ("<b>jay</b>-peg")</li>
<li>Kajiya ("kah-<b>gee</b>-uh")</li>
<li>Lagrange ("lah-<b>grahn</b>-zhuh") does not rhyme with "range"</li>
<li>Lanczos ("<b>lawn</b>-sosh") the "cz" sound is the same one from "tsar/czar", which is between "s" and "z" in English</li>
<li>Lebesgue ("luh-<b>bayge</b>"; watch out for the mispelling "<del>Lebes<b>q</b>ue</del>")</li>
<li>moot ("<b>moo</b>-t"), like a cow</li>
<li>Mersenne ("mehr-<b>senn</b>") rhymes with "pen", not with "sane"</li>
<li>Moir<span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22.4px;">é</span> ("mwah-<b>ray</b>")</li>
<li>niche ("neesh") although "nitch" is often considered acceptable today. Saying it like "Nietzsche" with two syllables is probably not acceptable anywhere, though</li>
<li>Poisson ("pwah-<b>sawn</b>")</li>
<li>queue ("cue", like the letter "Q")</li>
<li>Runge-Kutta ("<b>roon</b>-geh <b>coot</b>-tuh")</li>
<li>sans serif ("<b>sahn</b> <b>sair</b>-if")</li>
<li>schema ("<b>skee</b>-mah")</li>
<li>Seidel ("<b>zay</b>-del")</li>
<li>scalar ("<b>scale</b>-are")</li>
<li>spatial ("<b>spay</b>-shull")</li>
<li>SPIR-V ("<b>spear</b>-vee") according to <a href="https://twitter.com/sheredom">Neil Henning</a></li>
<li>SIGGRAPH ("<b>sih</b>-graf" rhymes with "pig laugh")</li>
<li>subsequent ("<b>sub</b>-seck-went")</li>
<li>Silicon ("<b>sill</b>-ih-cahn") the element used in circuits, distinct from rubbery "silicone"</li>
<li>temporal ("tem-pore-ull") the stress moves between the first and second syllable depending on regional accent</li>
<li><a href="http://www.mtv.com/news/2455972/how-to-pronounce-ubisoft-the-official-explanation/">Ubisoft </a>("<b>you</b>-bee-soft")</li>
<li>Verlet ("verr-<b>lay</b>") the first syllable is like "purr" from a cat</li>
<li>Voronoi ("<b>vor</b>-ron-noy") note that Georgy Voronoy was Russian, not French</li>
<li>vignette ("vin-<b>yet</b>" rhymes with "pin bet")</li>
<li>Vive ("vie-v") Rhymes with "dive" </li>
<li>Wang [Tiles] ("wong")</li>
<li>Weta ("<b>whet</b>-ah") As in, not dry</li>
</ul>
<div>
Americans tend to move the accents for the French names to the first syllable, although I'm assured by native French speakers that is incorrect.<br />
<br />
By popular requests on Twitter I'm adding my own name and those of some of my colleagues:</div>
<div>
<ul>
<li>Morgan McGuire ("<b>more</b>-gun mick-<b>wire</b>")</li>
<li>Derek Nowrouzezahrai (traditional: "neh-<b>roo</b>-zez-haari" [waiting for confirmation!]; he's also adopted "neh-<b>roo</b>-zee" as an acceptable short alternative)</li>
<li>Cem Yuksel ("gem yook-<b>sell</b>")</li>
<li>Cyril Crassin ("seer-<b>rill </b>krass-<b>awn</b>")</li>
<li>Lazlo Szirmay-Kalos ("<b>la</b>-slow <b>seer</b>-my ka-lowsh ")</li>
</ul>
</div>
<h3>
</h3>
<h2>
</h2>
<h2>
Letters and Numbers</h2>
The preferred pronunciation of Greek letters depends on the country in which you are speaking. The common pronunciation used in American English actually differs significantly from how the letters would be pronounced in modern Greece itself. Here are some of the letters that commonly appear in computational graphics equations:<br />
<br />
American English:<br />
<ul>
<li>Alpha ("al-fah")</li>
<li>Beta ("bait-ah")</li>
<li>Gamma ("gam-mah")</li>
<li>Delta ("del-tah")</li>
<li>Theta ("they-tah")</li>
<li>Eta ("ay-tah")</li>
<li>Lambda ("lamb-dah")</li>
<li>Mu ("mew")</li>
<li>Pi ("pie")</li>
<li>Phi ("fee" or "fie", the second rhymes with "die")</li>
<li>Omega ("oh-may-gah" or "oh-me-gah")</li>
</ul>
Greece:<br />
<ul>
<li>Alpha ("al-fah")</li>
<li>Beta ("vee-ta")</li>
<li>Gamma ("wram-mah")</li>
<li>Delta ("thel-tah")</li>
<li>Theta ("thee-tah")</li>
<li>Eta ("ee-tah")</li>
<li>Lambda ("lamb-thah")</li>
<li>Mu ("me")</li>
<li>Pi ("pee")</li>
<li>Phi ("fee")</li>
<li>Omega ("oh-may-hah")</li>
</ul>
<br />
Letters in the Roman alphabet are pronounced mostly the same in English in different countries. The one exception is "z" in American English and UK English.<br />
<br />
American English:<br />
<ul>
<li>z ("zee")</li>
<li>number 0 ("zero")</li>
<li>number 1 ("won")</li>
</ul>
UK English:<br />
<ul>
<li>z ("zed")</li>
<li>number 0 ("zero" rhymes with "hero", although "nought" is sometimes used)</li>
<li>number 1 ("won" or "unity")</li>
</ul>
<div>
Beware that although the terms have been standardized today as billion = 10<sup>9</sup> and trillion = 10<sup>12</sup>, British and American English used to differ and you could conceivably encounter ambiguity in reading an old text. "Billion" in British English used to mean 10<sup>12</sup> and "trillion" used to mean 10<sup>18</sup>.<br />
<h3>
</h3>
<h3>
</h3>
<h2>
</h2>
<h2>
Painters</h2>
<a href="http://4.bp.blogspot.com/-C-gYLWzU6F8/Vu9Y1fjpQTI/AAAAAAAADLQ/8UG4HYU-hj8Lf0KWw44vuV1MPrXID-d7Q/s1600/inspired_bei_mondrian_by_manshonyagger-d35kfou.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://4.bp.blogspot.com/-C-gYLWzU6F8/Vu9Y1fjpQTI/AAAAAAAADLQ/8UG4HYU-hj8Lf0KWw44vuV1MPrXID-d7Q/s320/inspired_bei_mondrian_by_manshonyagger-d35kfou.jpg" width="320" /></a>Certain painters occasionally are mentioned in graphics, particularly expressive rendering.<br />
<br />
The surname of Vincent van Gogh pronounced correctly in Dutch sounds something like "van-<b>cock</b>" to the ears of English speakers. However, British English speakers usually say "van-<b>goff</b>" and American English speakers usually say "van-<b>goh</b>." The BBC recommends "van-<b>gock</b>."</div>
<br />
Old master Tiziano Vecelli is referred to as "Titian" in English, which is pronounced "<b>tish</b>-en."<br />
<br />
Dutch nonrepresentational painter Piet Mondrian's surname is usually pronounced "mon-<b>dree</b>-ahn" in English by art historians.<br />
<br />
French impressionist Auguste Renoir's surname is pronounced "ren-wah" with the accent on either syllable, relatively close to the original French pronunciation...or "ren-<b>wahr</b>" which is fairly far from it.<br />
<br />
<h3>
</h3>
<h2>
Bonus Advice</h2>
"Vertices" is the plural of "vertex." There is no word "vertice" in English (or Latin, as far as I know). It is considered acceptable usage today to use "vertexes" as the plural. The same rules apply to "index"/"indices" and "matrix"/"matrices".<br />
<br />
The word "data" is the plural of "datum." So, you almost always want to say "the data <b>are</b>" instead of "the data <b>is</b>." Try replacing "data" with "datums" in your head to see if your sentence sounds correct. "Data" is well on its way to becoming singular in common usage due to language drift, but beware that you'll sound ignorant to more senior or linguistically conservative scientists and engineers if you use it that way.<br />
<br />
In everyday usage, art, and anthropology, "artifact" just means "sign," "evidence," or "thing." In experimental sciences, it means data that arose because of the measurement or preparation process. Graphics is between art and science in jargon, but either way, "artifact" doesn't strictly mean "error." So, qualify the word when that is what you mean: "<i>undesirable</i> visual artifact," or simply say, "error." Note that it is correct to say something like, "strobing reported by the subject was an artifact of the low frame rate on the display," or "there are some artifacts from the texture compression" (if you are using texture compression in the process, but not if your experiments are on compression itself) but not "there are some shadow artifacts."<br />
<div>
<br /></div>
Compound nouns are hyphenated in English when using them as adjectives. This is why we write "this is a 64<b>-</b>bit register" using a hyphen, but put no hyphen in "the register holds 64 bits."<br />
<br />
After adding an extra "r" to frustum (to make the incorrect "frust<del>r</del>um"), the most common spelling mistake in graphics might be forgetting that "tessellation" <a href="http://www.realtimerendering.com/blog/do-you-spell-these-two-words-correctly/">has two Ls</a>.<br />
<br />
For more general English grammar and spelling advice in technical documents, I recommend Michael Littman's <a href="http://cs.brown.edu/~mlittman/etc/style.html">style guide</a>.<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-11462481732135200352016-03-07T07:36:00.001-08:002016-03-12T06:43:40.933-08:00OpenGL Sample Code (including VR samples)<a href="https://2.bp.blogspot.com/-ND02Xq2Ffpg/Vt2e-W5yG_I/AAAAAAAADKE/rBBO68UiZlc/s1600/Untitled-1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="187" src="https://2.bp.blogspot.com/-ND02Xq2Ffpg/Vt2e-W5yG_I/AAAAAAAADKE/rBBO68UiZlc/s320/Untitled-1.jpg" width="320" /></a>This article describes my minimal reference code for modern GPU-enabled real-time 3D graphics, which is both a sample program and a self-contained tutorial.<br />
<br />
This code is useful for programmers working with a new device (such as a virtual reality head mounted display: VR HMD) for the first time, or for programmers working with hardware graphics at all for the first time. I also use it as a testbed for eliminating large libraries when creating minimal reproducible cases for bug reports.<br />
<br />
<a href="https://3.bp.blogspot.com/-c3Urr8qties/Vt2gdAV__CI/AAAAAAAADKQ/2owWc2u-vkk/s1600/VR_Web_Product_HMD.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="120" src="https://3.bp.blogspot.com/-c3Urr8qties/Vt2gdAV__CI/AAAAAAAADKQ/2owWc2u-vkk/s200/VR_Web_Product_HMD.png" width="200" /></a>The program runs under Windows, Linux, and OS X. I include a Visual Studio 2015 project file. If you enable VR rendering, it supports Oculus Rift, DK2, HTC Vive (Valve's HMD, in developer kit, "Pre", and consumer editions).<br />
<br />
<a name='more'></a><h3>
Reference Code</h3>
My OpenGL + OpenVR reference code is available through subversion:<br />
<br />
svn://g3d.cs.williams.edu/g3d/G3D10/samples/minimalOpenGL<br />
<br />
and can also be <b><a href="http://g3d.cs.williams.edu/websvn/listing.php?repname=g3d&path=%2FG3D10%2Fsamples%2FminimalOpenGL%2F&#a01bb737cbf6775bc98991444574f7af2">directly viewed in a web browser</a></b>. This code kept continuously up to date as underlying APIs change. The sample code covers examples of the major 3D graphics features in about 400 lines:<br />
<br />
<ul>
<li>Window, OpenGL, HMD, and OpenGL extension <b>initialization</b></li>
<li><b>Triangle mesh </b>rendering (OpenGL Vertex Array Buffers)</li>
<li><b>Shader </b>loading, compilation, and argument passing (OpenGL Program, Shader, and Uniform Buffer Objects)</li>
<li><b>Offscreen rendering</b> (OpenGL Framebuffer Objects)</li>
<li><b>Materials</b> <b>and</b> <b>image </b>file loading (OpenGL Texture and Sampler Objects)</li>
<li><b>Ray tracing</b> (including ray setup compatible with rasterization)</li>
<li><b>Procedural texturing</b></li>
<li>A tiny <b>vector math</b> library</li>
<li>Basic<b> keyboard and mouse</b> handling for a free-flying camera</li>
<li><b>Virtual reality</b> tracking and rendering (OpenVR)</li>
</ul>
<br />
This example is in the <b>C++ </b>(11) language, which is the preferred language of real-time graphics due to its high performance, low overhead, and low-level access to memory. If you prefer C#, the code is mostly identical. There are Javascript + WebGL and Java + JOGL equivalents that are slightly more awkward because of the absence of raw pointers.<br />
<br />
I use <b>no libraries</b> for the main object setup and rendering, except of course for OpenGL itself. This avoids dependencies and exposes the core OpenGL calls.<br />
<br />
There are a lot of other OpenGL sample programs on the web, but most either have heavy library dependencies or are written for previous versions of OpenGL and are now obsolete. Likewise, OpenVR's own "hellovr" program includes a large demo infrastructure that obscures the key calls. I intend this minimal example to be something that is easy to plug into your preferred rendering engine.<br />
<br />
<h3>
OS Communication</h3>
OpenGL only handles rendering. Window creation, copying images to the window, and event handling must be done in a platform-specific manner. I use three standard, slim, and multiplatform libraries to abstract that piece and put the code interacting with them into two headers (minimalOpenGL.h and minimalOpenVR.h):<br />
<br />
<ul>
<li><a href="http://www.glfw.org/"><b>GLFW</b> </a>for window creation and events</li>
<li><a href="http://glew.sourceforge.net/"><b>GLEW</b></a> for OpenGL extension loading</li>
<li><a href="https://github.com/ValveSoftware/openvr"><b>OpenVR </b></a>for HMD initialization and tracking events, plus SteamVR's runtime</li>
</ul>
<br />
If you're working with <a href="http://g3d.cs.williams.edu/">G3D</a>, those are already installed on your system. If not, then you need to download the headers and binaries or source. No "installation" of these libraries is needed, except for running SteamVR under <a href="http://store.steampowered.com/">Steam</a> if you wish to render in VR.<br />
<br />
<h3>
Matrix Math</h3>
I provide a very small matrix and vector header file, matrix.h. I specifically wrote the minimalOpenGL.h and minimalOpenVR.h files so as to not depend on this header, since you'll probably want to use some more full-featured library.<br />
<br />
I therefore pass all matrices and vectors as raw float pointers, using row-major conventions for matrices.<br />
<br />
<h3>
Other APIs</h3>
The sample code is OpenGL 4.1 because that is the latest version that runs across Windows, Linux, OS X, and SteamOS. (The latest OpenGL is 4.5, but Apple does not support it on their platforms). WebGL and OpenGL ES are similar APIs that lag OpenGL's feature set by a year or two and run natively for web browsers and mobile.<br />
<br />
Some alternative hardware graphics APIs are DirectX12 (Microsoft's platforms only), Vulkan (very low level, no Apple platforms), and Metal (Apple's platforms only). Sony and Nintendo gaming platforms have their own proprietary APIs that are similar to OpenGL/DirectX.<br />
<br />
<h3>
Other Minimal Contexts</h3>
The procedural sky in my example is based on fractal code by <a href="http://www.iquilezles.org/">Inigo Quilez</a>. The <a href="https://www.shadertoy.com/">shadertoy</a> website is full of great procedural ray tracing examples by him and others that can easily be inserted into the context of my sample code to run as a native binary.<br />
<br />
Sean Barrett maintains a set of <a href="https://github.com/nothings/stb">single-header libraries</a> for common graphics tasks, such as loading multiple image file formats and voxel rendering.<br />
<br />
The <a href="https://github.com/mlabbe/nativefiledialog">native file dialog library</a> is essentially a single file for each platform.<br />
<br />
The <a href="https://www.libsdl.org/">SDL</a> library is an alternative to GLEW + GLFW. It is slightly more heavyweight because it supports audio, Android, and DirectX as well.<br />
<h3>
Working with an Engine</h3>
Once you're comfortable with OpenGL, you'll probably never want to write code that directly uses it again. Most programmers use an abstraction layer so that they can work at a higher level, for example, working with "meshes" and "materials" instead of "vertex array buffer objects" and "texture and sampler objects"...and with tools for profiling, debugging, and error checking.<br />
<br />
The <a href="http://g3d.cs.williams.edu/">G3D Innovation Engine</a> is my open source abstraction intended for research, prototyping, and education on Windows, Linux, and OS X. Its strength is ease of experimentation. The <a href="https://www.unrealengine.com/what-is-unreal-engine-4">Unreal Engine</a>, <a href="https://unity3d.com/">Unity Engine</a>, and <a href="https://aws.amazon.com/lumberyard/">Lumberyard</a> are commercial game engines that have no cost for basic use. Their strengths are tools, content, and mobile and console platform support.<br />
<br />
<br />
<i>Thanks to <b>NVIDIA</b>, <b>Oculus</b>, and <b>Valve</b> for supporting my real-time graphics work at Williams College through funding and hardware gifts!</i><br />
<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-22804452264131045452016-02-05T01:54:00.001-08:002016-06-26T03:31:41.894-07:00The Joy of Animation: An Undergraduate 2D Computer Animation Syllabus<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-yRd-Y-sKF_8/VrMlL94nKLI/AAAAAAAADDo/CuhFwEe7aMY/s1600/68747470733a2f2f7365637572652d622e76696d656f63646e2e636f6d2f74732f3237322f3630362f3237323630363539325f3634302e6a7067.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://3.bp.blogspot.com/-yRd-Y-sKF_8/VrMlL94nKLI/AAAAAAAADDo/CuhFwEe7aMY/s320/68747470733a2f2f7365637572652d622e76696d656f63646e2e636f6d2f74732f3237322f3630362f3237323630363539325f3634302e6a7067.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">From <a href="https://github.com/genekogan/FlockingBoids">https://github.com/genekogan/FlockingBoids</a></td></tr>
</tbody></table>
I'm exploring the idea of teaching a new, mid-level course on <b>animation</b> in the <a href="http://cs.williams.edu/">Williams College Computer Science</a> department. I was pleasantly surprised by just how excited my students were about animation topics in other computational graphics courses, and think it could stand alone.<br />
<br />
<a name='more'></a><br /><br />
There's an opportunity to introduce the field of animation earlier in the curriculum and with more depth than permitted by a few weeks in a high-level course. This class would require only multivariable calculus plus two semesters of programming courses. It would thus be available to sophomores and non-CS majors. That allows a close encounter with simulation algorithms for, say, a future chemist, biologist, economist, or social scientist. It also would allow a potential CS major to experience elective material before committing to the program.<br />
<br />
In some contexts, "animation" means 2D cel movies, Pixar-style CGI movies, animated GIF, or sprite frames. In this course, I'm instead referring to "<b>computational dynamics</b>" or "classical physics simulation": numerical simulation of the classical mechanics methods of Newton, Boyle, Hooke, Venturi, Pascal, Stokes, etc. that are employed in scientific simulations, movies, and video games.<br />
<br />
At a high level, this course combines the "Motion" chapter of <i><a href="http://www.amazon.com/gp/product/0321399528/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0321399528&linkCode=as2&tag=casueffe06-20">Computer Graphics: Principles and Practice</a> 3rd Edition</i> with the <a href="http://graphics.cs.williams.edu/courses/cs372/f15/#animation">Optimal Animation</a>, <a href="http://graphics.cs.williams.edu/courses/cs372/f15/#evolution">Synthetic Creatures</a>, and <a href="http://graphics.cs.williams.edu/courses/cs372/f15/#anim2">Unconventional Animation</a> units from<i> <a href="http://graphics.cs.williams.edu/courses/cs372">CS372: Visual Media Revolution</a></i>...in 2D. This is all material that has worked well in previous courses for me when covered quickly, and now would have an opportunity to expand to its natural scope.<br />
<br />
<br />
<h2>
2D</h2>
Why 2D? It seems anachronistic when the high-impact animation work in research and industry is 3D. However, the computational demands of 3D are high and the mathematics of 3D rotation are fairly complex. By simplifying to 2D these can be avoided, focusing on the concepts unique to simulation instead of optimization or 3D math. Fortunately, most of the key numerical concepts are the same from 2D to 3D dynamics, but with fewer cases to handle. This includes collision detection and integrators.<br />
<br />
The rendering and user interface are also much simpler in 2D, and I want this course to benefit from that simplicity...we have plenty of other courses on those topics.<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/1n-HMSCDYtM/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/1n-HMSCDYtM?feature=player_embedded" style="float: right;" width="320"></iframe></div>
<br />
Finally, many people find 3D rotation dynamics <a href="https://youtu.be/GgVpOorcKqc?t=39">counter-intuitive</a>. This makes debugging really hard. Now, there's beautiful and important math behind that--for an upper-level course. Mid-level students excited about arcade games and web animations aren't ready for quaternions and inertia tensors, and I want to use their excitement to increase their skills to the point where they'll be ready for 3D in another course.<br />
<br />
Even physics majors can graduate without ever learning how to compute 3D rotation dynamics for classical mechanics, so I don't see that as a requirement for sophomores in a non-major CS course!<br />
<br />
<h2>
<i>Y</i> = Up</h2>
As any graphics programmer knows, there's one seemingly trivial choice in 2D that comes back to cause problems throughout development. Does the <i>y-</i>axis (vertical) increase <i>downward</i>, as in windowing systems, image editing programs, and text coordinates, or <i>upward</i> as is conventional in graphs and 3D systems?<br />
<br />
For 2D game programming I've usually chosen downward to reduce opportunities for bugs when working with mouse and touch events and so that pixel coordinates picked out in Photoshop match what the renderer is outputting. This also makes the axes textures (image sprites) being read match the output being written. However, this creates opportunities for error in direction of rotation, trigonometry (cos, sin) and vector cross products.<br />
<br />
I think that for simulation it is more important to avoid the latter confusion, so <i>y</i> = up is my choice for this course and I'll have to adapt the underlying 2D platform's coordinate system.<br />
<br />
<h2>
Mathematics</h2>
Computational dynamics applies mathematics in a way that builds intuition for abstract concepts, such as vector bases and differential equations. It also introduces fundamental numerical algorithms that underly all applications in scientific and economic simulation. A simulation course is a good way to solidify and expand existing mathematics knowledge and tie it to discrete computation.<br />
<br />
What is the right level of math to require for incoming students? It would be possible to learn/teach dynamics without calculus. However, the equations would be more complicated and obscure their fundamental structure...and you'd end up reinventing calculus along the way, regardless.<br />
<br />
It would be really easy to teach dynamics to students who have already mastered of linear algebra, differential equations, and Newtonian mechanics. However, the only undergraduates with such knowledge are junior and senior mathematics majors.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-3I-RM9mxn58/VsRthRNLiqI/AAAAAAAADGQ/EX8bYdkG_mI/s1600/math.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="150" src="https://1.bp.blogspot.com/-3I-RM9mxn58/VsRthRNLiqI/AAAAAAAADGQ/EX8bYdkG_mI/s400/math.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Typical equations encountered in dynamics algorithms. While the compact notation may be intimidating at first, the key mathematical tools are just integrals and derivatives in 2D spaces.</td></tr>
</tbody></table>
<br />
Multivariable calculus seems like the right prerequisite for an animation course. 60% of all students at Williams College take multivariable (Math 150/151), and almost all science majors. Limiting the math prerequisite keeps the course accessible to many students while ensuring that everyone who enrolls is already comfortable with 2D spaces and time varying quantities. The linear algebra required for 2D animation (essentially, vector operations and working with matrices up to rank 4, for splines) can be learned piecemeal as the course progresses, and differential equations can be alluded to without explicit discussion. I assume that many students exited their calculus courses without perfect recall and understanding, so I'd review (or introduce) some topics early in the course at their first application:<br />
<ul>
<li>Taylor polynomials</li>
<li>Derivation of the derivative</li>
<li>Derivation of the Riemann integral</li>
<li>Definite vs. indefinite integrals</li>
<li>Independent and dependent variables; the chain rule</li>
<li>First fundamental theorem of calculus</li>
<li>Area vs. line integrals</li>
<li>Partial derivatives</li>
<li>L'Hopital's rule</li>
<li>Gradient and divergence</li>
</ul>
<br />
<h2>
Development Platform</h2>
I want assignments to produce attractive, real-time, interactive results that can be easily shared. This makes them enjoyable and intuitive to develop and makes the course self-advocating to future students.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-RYLT8YQzchg/VrNChfYA52I/AAAAAAAADEA/V_gmFPTojJ0/s1600/box2d.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="161" src="https://4.bp.blogspot.com/-RYLT8YQzchg/VrNChfYA52I/AAAAAAAADEA/V_gmFPTojJ0/s320/box2d.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Box2D <a href="http://codeheartjs.com/examples/box2d3/play.html">Example</a> in codeheart.js</td></tr>
</tbody></table>
For programming lightweight animation assignments, I lean towards Javascript, with a rendering and user input framework based on either <a href="http://threejs.org/">three.js</a> or <a href="http://codeheartjs.com/">codeheart.js</a>. The ideal framework might be a WebGL back end for codeheart.js to combine performance and an easy-to-use 2D API.<br />
<br />
Javascript is a good graphics prototyping tool. It is accessible, since every student computing platform has a JS and WebGL-enabled browser, from Windows/Mac desktop to mobile to Linux. So, everyone can access it and can easily show results on like.<br />
<br />
Javascript is interpreted, avoiding the development overhead of compilation and linking. Browsers provide an inspection console, debuggers, and profilers. It has a fairly sparse syntax and lots of useful libraries, including a nice <a href="https://github.com/flyover/box2d.js">Box2D</a> implementation. Javascript's weaknesses on data (no file system, no easy way to embed files) and systems programming (no operator overloading, static typing, or language-level import) are less limiting for small, procedural animations than for other assignments.<br />
<br />
Most of our students are currently facile in Java and can learn Python quickly. Unfortunately, Java's an awkward language for lightweight animation because it is buried in boilerplate syntax, binds awkwardly to graphics APIs, and is increasingly unsupported on the web.<br />
<br />
Python has a relatively beautiful syntax and even offers operator overloading. Unfortunately, its graphics and physics API libraries are even more limited than Java's, and the web is largely unavailable to it. In the long run, I hope to see a stable and well-supported <a href="https://www.google.com/search?&ie=UTF-8&q=python%20to%20asm.js&oq=python%20to%20asm.js">Python to asm.js</a> compilation path emerge, and nice WebGL and Box2D bindings for it. For those interested in using Python for an animation course, I suspect that using the <a href="http://pygame.org/hifi.html">PyGame</a> framework for handling graphics and UI. Some simple physics <a href="http://pygame.org/tags/physics">examples are available</a> using it.<br />
<br />
C++ and OpenGL or Vulkan is probably not a viable combination for a 200-level course at my institution, given the students' lack of experience working at such a low level or with such powerful (and thus "dangerous") tools.<br />
<br />
I could imagine using <a href="https://processing.org/">Processing</a>. However, my hunches are that the cross-language compilation step would confuse students when writing more complex simulations (it has in the past when I used it for game programming) and that I'm going to want direct access to GPU pixel shaders for fluid simulation.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-gsDlrtW1Ttk/VrNBxgNJMQI/AAAAAAAADD8/LEXDjIjD04Q/s1600/shader-rally.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="178" src="https://1.bp.blogspot.com/-gsDlrtW1Ttk/VrNBxgNJMQI/AAAAAAAADD8/LEXDjIjD04Q/s320/shader-rally.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">P_malin's <a href="https://www.shadertoy.com/view/XdcGWS">Shader Rally</a></td></tr>
</tbody></table>
It is worth noting that for experienced hackers, it is possible to prototype many animation algorithms in <a href="http://shadertoy.com/">Shadertoy</a>. For example, <a href="https://www.shadertoy.com/view/Xdd3Df">shallow water simulation</a>, <a href="https://www.shadertoy.com/view/ldd3WS">Navier-Stokes fluid</a>, <a href="https://www.shadertoy.com/view/XdGGWD">SPH fluid</a>, <a href="https://www.shadertoy.com/view/MljSz1">2D rigid bodies</a>, and <a href="https://www.shadertoy.com/view/XdcGWS">3D rigid bodies</a>. Although I'm a big fan and these are great motivating examples, Shadertoy isn't a natural or friendly programming environment for new programmers (let alone those who don't understand real-time ray tracing), so I haven't seriously considered it as a course platform.<br />
<br />
<br />
<h2>
Topics</h2>
<div>
Below I list some topics in a cumulative order, where the later ones build on ideas developed earlier. The list contains about twice as much content as I'd be able to cover with projects in a 12-week semester. So, I'd likely describe articulated sprite topics in lecture or readings but avoid assigning a programming project on them. At a school with a longer semester or for a slightly higher-level course those would be great topics to invite students to explore through implementation.</div>
<br />
<h3>
Sprite Animation</h3>
<ol>
<a href="https://1.bp.blogspot.com/-UDMbuzkep_M/VrNI1ZZ-xEI/AAAAAAAADEY/iL3GSa7laVs/s1600/Screen%2BShot%2B2016-02-04%2Bat%2B7.47.43%2BAM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="224" src="https://1.bp.blogspot.com/-UDMbuzkep_M/VrNI1ZZ-xEI/AAAAAAAADEY/iL3GSa7laVs/s320/Screen%2BShot%2B2016-02-04%2Bat%2B7.47.43%2BAM.png" width="320" /></a>
<li>The Phi phenomenon</li>
<li>Flip-book animation</li>
<li>Discretizing space and time: pixels and frames</li>
<li>Animation vs. simulation vs. display rates</li>
<li>The coordinate system</li>
<li>Immediate mode vs. retained mode graphics APIs</li>
<li>Polling vs. event-driven user input</li>
<li>Spritesheets</li>
<li>Thinking with vectors</li>
<li>Distance between points</li>
<li>Point in polygon intersection detection</li>
<li>Rectangle-rectangle intersection (collision) detection</li>
</ol>
<br />
Sample project and resources:<br />
<ul>
<li>Make a simple animated, moving character</li>
<li>codeheart.js <a href="http://codeheartjs.com/examples/knight/play.html">Knight demo</a></li>
<li><a href="http://gamedevelopment.tutsplus.com/tutorials/an-introduction-to-spritesheet-animation--gamedev-13099">Nice Javascript sprite tutorial</a></li>
</ul>
<br />
<h3>
<b>Ballistic Motion
</b></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-jFlX6mYP6Vs/VrRv4osGqEI/AAAAAAAADE8/-U3y9VCD8t8/s1600/Pi-explosion.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="229" src="https://2.bp.blogspot.com/-jFlX6mYP6Vs/VrRv4osGqEI/AAAAAAAADE8/-U3y9VCD8t8/s320/Pi-explosion.jpg" width="320" /></a></div>
<ol>
<li>Newton's laws of motion</li>
<li>State space</li>
<li>Derivatives and integrals review</li>
<li>[Simulation as an ordinary differential equation]</li>
<li>Numerical integration</li>
<ol>
<li>Taylor expansion review</li>
<li>Order of error</li>
<li>Euler (Forward, backward)</li>
<li>Runga-Kutta (2nd + 4th order)</li>
<li>Verlet</li>
</ol>
<li>Point-disk intersection</li>
<li>Disk-disk intersection</li>
<li>Penalty forces</li>
<li>Impulses</li>
<li>Particles</li>
<li>Structure of arrays vs. array of structures</li>
<li>SIMD vs. Arrays</li>
</ol>
<br />
Sample projects and resources:<br />
<ul>
<a href="http://3.bp.blogspot.com/-IY5ZGMRN3qE/VrRv7hfu_5I/AAAAAAAADFE/tum7VUDzzvQ/s1600/fluidsample1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://3.bp.blogspot.com/-IY5ZGMRN3qE/VrRv7hfu_5I/AAAAAAAADFE/tum7VUDzzvQ/s400/fluidsample1.jpg" /></a>
<li>Make a character that moves in the presence of gravity (platformer)</li>
<li>Make a particle system</li>
<li><a href="http://cgpp.net/">CG:PP chapter 35</a>, first half</li>
<li>codeheart.js <a href="http://codeheartjs.com/examples/physics/play.html">"Physics" demo</a></li>
<li>codeheart.js <a href="http://codeheartjs.com/examples/platformer/play.html">Warrior Princess demo</a></li>
<li>Reeve's <a href="http://zach.in.tu-clausthal.de/teaching/vr_literatur/Reeves%20-%20Particle%20Systems.pdf">Particle Systems paper</a></li>
<li><a href="https://graphics.stanford.edu/courses/cs448b-00-winter/papers/phys_model.pdf">Witkin & Baraff's SIGGRAPH course notes</a>, sections A-C [<a href="https://www.cs.cmu.edu/~baraff/sigcourse/">HTML version</a>]</li>
<li><a href="https://software.intel.com/en-us/html5/hub/blogs/build-a-javascript-particle-system-in-200-lines">Jarrod Overson's article</a></li>
<li><a href="http://mtdevans.com/2013/05/fourth-order-runge-kutta-algorithm-in-javascript-with-demo/">Javascript RK4</a></li>
<li>Derivation of <a href="http://www.fisica.uniud.it/~ercolessi/md/md/node21.html">Verlet</a> integrator</li>
<li><a href="http://young.physics.ucsc.edu/115/leapfrog.pdf">Leapfrog integration</a></li>
<li>[Verlet, L. "Computer experiments on classical fluids. I. Thermodynamical properties of Lennard-Jones molecules", Phys. Rev., 159, 98-103 (1967).]</li>
</ul>
<br />
<h3>
Intelligent and Emergent Behavior
</h3>
<ul>
<li>Interpolation and extrapolation</li>
<li>Splines</li>
<li>Flocking, herding, and schooling</li>
<li>Constraint systems</li>
<li>Mass-spring systems</li>
<li>Hooke's law</li>
<li>Damping and oscillation</li>
<li>Spring "motors" and prismatic joints</li>
<li>Meshes</li>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-GluNNWjiKKw/VrRu-MF1uGI/AAAAAAAADEs/q2osVg7d0PI/s1600/sodaplay.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://2.bp.blogspot.com/-GluNNWjiKKw/VrRu-MF1uGI/AAAAAAAADEs/q2osVg7d0PI/s320/sodaplay.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The now-defunct Sodaplay app</td></tr>
</tbody></table>
<li>Cloth simulation</li>
</ul>
<br />
Sample projects and resources:<br />
<ul>
<li>Build a top-down animal simulation with predators and prey</li>
<li>Build a modern version of Decarlo's <a href="https://www.cs.rutgers.edu/~decarlo/software.html">xspringies</a> and <a href="http://www.sodaplay.com/">Sodaplay</a></li>
<li>Craig Reynold's <a href="http://www.red3d.com/cwr/papers/1987/boids.html">"Boids" SIGGRAPH paper</a></li>
<li><a href="http://subprotocol.com/system/cloth.html">Verlet cloth</a></li>
<li>Karl Sims' <a href="http://www.karlsims.com/papers/siggraph94.pdf">Evolving virtual creatures</a></li>
<li><a href="http://www.essentialmath.com/GDC2012/GDC12_Eiserloh_Squirrel_Interpolation-and-Splines.ppt">Interpolation and splines GDC notes</a></li>
<li><a href="http://users.bart.nl/users/starcat/dynamo/publications/aynif.pdf">All you need is force: a constraint-based approach for rigid body dynamics in computer animation</a>, Kees van Overveld and Bart Barenbrug, Computer Animation and Simulation 1995</li>
<li><a href="https://www.cs.drexel.edu/~david/Classes/Papers/MeshlessDeformations_SIG05.pdf">Meshless Deformations Based on Shape Matching</a>, Matthias Muller, Bruno Heidelberger, Matthias Teschner, and Markus Gross, SIGGRAPH 2005</li>
<li><a href="http://www.computer.org/csdl/trans/tg/preprint/06905844.pdf">Smooth Rotation Enhanced As-Rigid-As-Possible Mesh Animation</a>, Zohar Levi and Craig Gotsman, IEEE TVCG 2003</li>
</ul>
<br />
<h3>
Rigid Bodies
</h3>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-7mDFCCTx7Ks/VrRvXisnpcI/AAAAAAAADEw/WYnxmfTwIc0/s1600/unnamed.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="213" src="https://2.bp.blogspot.com/-7mDFCCTx7Ks/VrRvXisnpcI/AAAAAAAADEw/WYnxmfTwIc0/s320/unnamed.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Angry Birds</i> built a game brand empire from rigid body simulation</td></tr>
</tbody></table>
<ol>
<li>Conservation of momentum</li>
<li>Disk-rectangle collisions</li>
<li>Polygon-polygon collisions</li>
<li>Minkowski sums</li>
<li>Torque</li>
<li>Moment of inertia</li>
<li>Friction</li>
<li>Elasticity</li>
<li>Working with rigid body APIs</li>
<li>Revolute and "world" joints</li>
</ol>
Sample projects and resources:</div>
<div>
<ul>
<li>codeheart.js <a href="http://codeheartjs.com/examples/box2d3/play.html">Box2D demo</a></li>
<li><a href="http://cgpp.net/">CG:PP chapter 35</a></li>
<li><a href="http://ocw.mit.edu/courses/mechanical-engineering/2-003j-dynamics-and-control-i-spring-2007/lecture-notes/lec11.pdf">MIT moments of inertia</a></li>
<li><a href="https://graphics.stanford.edu/papers/rigid_bodies-sig03/">Nonconvex Rigid Bodies with Stacking</a>, Eran Guendelman, Robert Bridson, Ronald Fedkiw, SIGGRAPH 2003</li>
</ul>
<br /></div>
<h3>
<a href="http://3.bp.blogspot.com/-XBMD4hOlKTk/VrRxKayndDI/AAAAAAAADFY/hcjtwYpi_Dg/s1600/spriter376.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="201" src="https://3.bp.blogspot.com/-XBMD4hOlKTk/VrRxKayndDI/AAAAAAAADFY/hcjtwYpi_Dg/s320/spriter376.jpg" width="320" /></a></h3>
<h3>
Articulated Sprite Animation</h3>
<ol>
<li>Articulated rigid body, relative reference frames</li>
<li>Joint forces and constraints</li>
<li>"Ragdoll"</li>
<li>Splines</li>
<li>Bones</li>
<li>Inverse kinematics</li>
</ol>
Sample projects and resources:<br />
<ul>
<li><a href="http://www.brashmonkey.com/spriter.htm">Spriter</a></li>
<li><a href="http://freespace.virgin.net/hugo.elias/models/m_ik.htm">Inverse kinematics</a></li>
<li><a href="http://chrishecker.com/Real-time_motion_retargeting_to_highly_varied_user-created_morphologies">Real-time motion retargeting to highly varied user-created morphologies</a> ("the Spore paper"), Hecker et al., SIGGRAPH 2008</li>
</ul>
<br />
<h3>
</h3>
<h3>
Cellular Automata ("Voxels") </h3>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-l1L5sRCXE1M/VrRwvipmVDI/AAAAAAAADFQ/TUy_cKexAjo/s1600/samp3.gif" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="216" src="https://2.bp.blogspot.com/-l1L5sRCXE1M/VrRwvipmVDI/AAAAAAAADFQ/TUy_cKexAjo/s320/samp3.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://chir.ag/stuff/sand/">A falling sand game</a></td></tr>
</tbody></table>
<ol>
<li>Conway's Game of Life</li>
<li>Falling sand</li>
<li>Minecraft</li>
</ol>
<br />
Sample projects and resources:<br />
<ul>
<li>Implement a <a href="http://muchos-juegos.appspot.com/arena/">falling sand game</a></li>
<li><a href="https://q3k.org/gentoomen/Game%20Development/Programming/Game%20Programming%20Gems%203.pdf">Cellular Automata for Physical Modelling</a>, Tom Forsyth, Game Programming Gems 3, 2001 (page 200)</li>
<li>Jos Stam's stable fluids</li>
<li><a href="http://www.gamasutra.com/view/feature/3549/interview_the_making_of_dwarf_.php?page=9">The Making Of Dwarf Fortress</a> (page 9), John Harris, Gamasutra, 2008 (focus on the hard case of volume-preserving water; check out recent results in <a href="http://www.voxelquest.com/">Voxel Quest</a> and speculate about how that system might work)</li>
</ul>
<br />
<br />
<h2>
Fluid Dynamics</h2>
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/X0lG9bpHSLw/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/X0lG9bpHSLw?feature=player_embedded" style="float: right;" width="320"></iframe>
<br />
<ol>
<li>Drag forces</li>
<li>Cellular automata fluids</li>
<li>Smoke</li>
<li>Compressibility</li>
<li>Pressure</li>
<li>Pressure systems for cellular automata</li>
<li>Viscosity</li>
<li>Adhesion</li>
<li>Wave dynamics</li>
<li>Particle system fluids</li>
<li>Smoothed particle hydrodynamics</li>
</ol>
<br />
Sample projects and resources:<br />
<ul>
<li>Make a shallow-water top-down simulation, with boats and islands</li>
<li>Make a cellular automata side-view simulation with incompressible fluids</li>
<li>Jos Stam's <a href="http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/ns.pdf">Stable Fluids</a></li>
<li><a href="https://universe-review.ca/R13-10-NSeqs.htm">Navier-stokes</a></li>
<li><a href="https://29a.ch/sandbox/2012/fluidwebgl/">Navier-stokes demo</a></li>
<li><a href="https://software.intel.com/en-us/articles/fluid-simulation-for-video-games-part-15">SPH for games</a></li>
<li><a href="http://graphics.cs.kuleuven.be/publications/MPBF/">Multiresolution particle-based fluids</a>, Richard Keiser, Bart Adams, Philip Dutre, and Leonidas Guibas, Technical Report, ETH Zurich, 2007</li>
<li><a href="http://research.cs.tamu.edu/keyser/Papers/AdaptiveParticleFluid-CGI08.pdf">Adaptive particles</a></li>
<li><a href="http://dl.acm.org/citation.cfm?id=1964977">Real-time Eulerian water simulation using a restricted tall cell grid</a>, Nuttapong Chentanez and Matthias Muller, SIGGRAPH 2011</li>
<li><a href="http://pub.ist.ac.at/group_wojtan/projects/2013_Ando_HALSoTM/">Highly Adaptive Liquid Simulations on Tetrahedral Meshes</a>, Ryoichi Ando, Nils Thurey, Chris Wojtan, SIGGRAPH 2013</li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-35916920432298257202016-01-16T16:52:00.002-08:002016-06-26T03:32:51.439-07:00McGuire House Rules for Carcassonne South Seas<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-CVFSTOb6JsE/VpraizoWzeI/AAAAAAAADBw/yK7EhEon7V0/s1600/pic2008499_md.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="169" src="https://2.bp.blogspot.com/-CVFSTOb6JsE/VpraizoWzeI/AAAAAAAADBw/yK7EhEon7V0/s320/pic2008499_md.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Carcassonne: South Seas</i></td></tr>
</tbody></table>
<i><a href="http://amzn.to/1lj7Zqg">Carcassonne: South Seas</a></i> by ZMan games is a tile-placement game for 2-5 players. I find that it takes 20-60 minutes depending on the number of players when using our house rules below for faster play and setup/cleanup, and works well for ages five and up.<br />
<i></i><br />
<a name='more'></a><i><br /></i>
<i>South Seas</i> is based on the core mechanic of the <i><a href="http://casual-effects.blogspot.com/2014/07/mcguire-house-rules-for-carcassonne.html">Carcassonne</a></i> series but is a standalone game incompatible with previous games and expansions. It is a little more accessible than the previous games. This is due to tile designs that force collaboration, eliminating end-of-game scoring, and fewer meeples (pawns) to work with.<br />
<br />
<br />
I don't find these changes to be a net improvement. The advantages over <i>Carcassonne</i> are slight, and a lot is lost in exchange for them. <i>South Seas</i> has a shorter playing time when using our house rules, offers some variation in theme, reduces some mental arithmetic, and adds fun resource tokens. It lacks depth and increases variance. The tile designs force players to help each other more often, but because many possible tiles don't exist there are often frustrating gaps in the board (i.e., uncompletable features) and features are often small. A group of regular adult board game players will probably not enjoy <i>South Seas</i> as much as <i>Carcassonne</i>, but casual players and children may prefer it.<br />
<br />
The game rules are confusing as printed, so I'll give a complete, streamlined description below. There were also some poor design choices in the pieces. So, I recommend that you permanently modify your set before your first game:<br />
<br />
<ol>
<li><b>Mark the front face of the starting tile</b> to make it easier to find. When you put away the other tiles at the end of the game, store the starting tile separately, with the resource tokens for faster setup next time. It already has a different <i>back</i> face, however that isn't helpful during cleanup when you only see the front faces.</li>
<li><b>Store the tiles in a bag </b>instead of in face-down piles. This saves the setup time of making the piles and allows you to sweep them off the table into the bag for faster cleanup.</li>
<li><b>Mark the larger (3x) resource tokens</b> with a dot, since the size difference alone is too subtle for quick counting and the size is ambiguous when you're only holding a single token.</li>
<li><b>Make extra 5x resource tokens</b>, such as coins or other counters. For three players there are barely enough resources and you must constantly trade with the bank to keep the resource supply liquid. With five players, you'll quickly exhaust the supply. Changing the value of the provided resource tiles doesn't help--you need both enough to stockpile and to make "change" on purchases.</li>
</ol>
<h2>
Components and Concepts</h2>
<div>
<b>Tiles:</b> cardboard squares with pictures of fish, boats, wooden walkways (with shells), islands (with bananas), and open sea. These are played each term like dominoes to build the world.<br />
<br />
<b>Features</b>: market islands (small islands drawn on a single tile), seas (blue areas that may cover multiple tiles, unbroken by other graphics), banana islands (which may cover multiple tiles), and walkways (wood "roads" that terminate at rocks and islands and are decorated with shells). Market islands are <b>complete</b> when they are surrounded by eight other tiles, forming a 3x3 grid. All other features are <b>complete</b> when there is no way to expand them with another tile (whether or not such a tile actually exists or is available).<br />
<br />
<b>Ships:</b> cardboard cutouts showing a mixture of resources, a point value, and a background picture of a ship. These are worth points and collecting them is the goal of the game. The icons drawn on the ship's sail indicate the cost of purchasing the ship. "A" and "B" icons are for two, three, etc. of a kind. For example, "A A A B" means three of one kind of resource and one of another kind. The pie-chart icon is a wildcard meaning any resource.<br />
<br />
<b>Resource</b> <b>tokens: </b>painted wooden icons of fish, shells (scallops), and bananas. These are the currency of the game, used to purchase ships (points). At the end of the game, every three are also worth one point. The larger tokens marked with the dots count as three resources.<br />
<br />
<b>Meeples:</b> colored human figures that are placed on the board to indicate ownership of areas.<br />
<br />
<b>Fishing boats</b>: tiny cardboard rectangles, each with a picture of a single boat. These are placed on fish on the tiles during play to mark them as consumed.<br />
<br />
The game requires a medium-sized flat play space, about 1m<sup>2</sup> in area. Each player requires a small area in front of themselves* to store points, meeples, resources, and their current tile. The contents of these individual storage areas are public information and should thus be in full view of the other players at all times.<br />
<br />
<span style="font-size: x-small;">* I use "them" as gender-neutral singular in my game writing, an increasingly popular practice in academia and journalism.</span><br />
<span style="font-size: x-small;"><br /></span></div>
<h2>
<a href="http://3.bp.blogspot.com/-jqw8bkjY13I/VprldI7-FmI/AAAAAAAADCA/26AqN-UKrN8/s1600/pic1917224.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://3.bp.blogspot.com/-jqw8bkjY13I/VprldI7-FmI/AAAAAAAADCA/26AqN-UKrN8/s320/pic1917224.jpg" width="223" /></a>Setup</h2>
<div>
<ol>
<li>Each player takes four meeples of the same color</li>
<li>Weaker players take a mixture of 1-8 starting resources</li>
<li>Place the starting tile in the center of the play space</li>
<li>Place four blindly-chosen ships face up beside the play space</li>
<li>Remove some number of tiles and set them aside. For three players, I recommend removing about half of the supply. For five players, you may wish to remove only four. Ideally the number of tiles remaining will be an integer multiple of the number of players, but it is tedious to arrange that and a single extra turn is seldom significant in this game. <i>The removed tiles are not in play, and players should not see which tiles have been removed. Removing tiles shortens the game and prevents tile counting by players who know the exact distribution in the full set.</i></li>
<li>Each player blindly draws one tile from the tile bag</li>
</ol>
<div>
<i>Handicaps, removing tiles, the bag, and players holding a tile at all times are house rules.</i></div>
<h2>
Play</h2>
</div>
The game ends when the last tile has been placed and the player who placed it ends their turn. The goal of the game is to have the most points. Ships are worth their face value. Every three resources are worth one point (there are no fractional points). Tiles on the board are worth no points. The basic strategy is thus to place tiles so as to gain resources and then use those resources to purchase ships.<br />
<br />
Play proceeds around the table in <b>turns</b>, where the current player is the one holding the bag of tiles. On your turn:<br />
<br />
<ol>
<li><b>Place the tile that you are currently holding</b>. Placed tiles must touch at least one edge of one existing tile. The edges of the new tile must match all previous tiles that they touch.</li>
<li><b>Optionally do <u>one</u> of the following:</b></li>
<ol>
<li><b>Remove one of your own meeples from the board</b>, returning it to your "hand"</li>
<li><b>Pace one of your own meeples <u>on the tile that you just placed</u></b>, following the placement rules below.</li>
</ol>
<li><b>If the newly-placed tile contains a fishing boat,</b> <b>award fish resource tokens: </b><i>These rules for resolving fishing are house rules. The printed rules are ambiguous on several points here.</i></li>
<ol>
<li>Identify the sea feature that contains the fishing boat. It will typically cover several tiles. Walkways and islands separate seas.</li>
<li>If any meeples are in that sea feature, the players with the most meeples in the sea feature own it and <u>each</u> receive a number of fish resources equal to the fish in the sea feature. Place a <b>fishing boat</b> over the largest number of fish in the feature after awarding resources.</li>
<li>If the sea feature is complete, remove all meeples from it.</li>
</ol>
<li><b>Award resources for all newly-completed features</b> <b>and then remove all meeples from them:</b></li>
<ol>
<li>The <b>owners</b> of a feature are the players with the most meeples on it. Ownership can be shared when there is a tie. When there are multiple owners, each owner is awarded the full value of the feature.</li>
<li>Walkways award the number of shells shown on them</li>
<li>Banana islands award the number of bananas shown on them</li>
<li>Seas award the number of fish shown in them</li>
<li>When a market is completed (surrounded), it awards the current highest-point value ship. Immediately replace that ship with a new one chosen blindly from the supply</li>
</ol>
<li><b>Optionally purchase at most one ship</b> and immediately replace it with one chosen blindly from the supply.</li>
<li><b>Draw a new tile from the bag and pass the bag to the next player</b>. <i>This is a house rule. Drawing up at the end of the turn allows players to think ahead and then immediately place at the start of their turns, which speeds the game. It also allows other players to see the upcoming pieces, which slightly increases strategic play, especially at the end of the game.</i></li>
</ol>
<h2>
Placement rules</h2>
Meeples may only be placed on the tile just played. You can only place a meeple from your hand. Placement <i>within</i> the tile matters--you are placing on a <b>feature </b>within the tile, not just on the tile.<br />
<br />
Meeples can only be placed on features that are currently <b>unowned</b> (recall that the features may span multiple tiles). This includes the rule that you cannot place on a feature that you already own. However, it is common to place a meeple on an unowned feature that is near, but not yet connected to, another feature, and then join them together on a future turn. Doing is often an effective strategy.<br />
<br />
When placing on a <b>sea feature</b> (fishing), lay the meeple down flat. While I have no wish to imply that fishing is a lazy activity, this helps distinguish fishers visually and if the board is accidentally bumped.<br />
<br />
<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-66115110986226395312015-08-26T12:21:00.002-07:002016-06-26T03:34:43.810-07:00How to Create a Graphics Research PaperThis article shares some strategy for creating computational graphics research publications, such as those found at SIGGRAPH, I3D, HPG, EG, and EGSR. It is inspired by the coming <a href="http://i3dsymposium.github.io/">I3D</a>'16 submission season as I reflect on process and offer advice to my junior collaborators.<br />
<br />
I focus on process over specific writing tips, because there are already a lot of good resources for strong technical writing, such as:<br />
<ul>
<li><a href="http://www.siggraph.org/sites/default/files/kajiya.pdf">Kajiya's How to Get Your SIGGRAPH Paper Rejected</a></li>
<li><a href="https://www.computer.org/csdl/mags/cg/1987/12/mcg1987120062.pdf">Blinn's How to Write a Paper for SIGGRAPH</a></li>
<li><a href="http://web.mit.edu/me-ugoffice/communication/technical-writing.pdf">Sentence Structure of Technical Writing</a></li>
<li><a href="http://www.cs.columbia.edu/~hgs/etc/writing-style.html">Writing Technical Articles</a></li>
</ul>
Those primarily apply at the prose phase and don't in themselves help you to <i>reach</i> the prose phase, which is what I'm seeking to explain. The following advice also holds for class final projects, independent studies, and theses at varying time scales.<br />
<br />
<a name='more'></a><h2>
Publishing is a Skill</h2>
Implementing computer science methods is one skill, inventing new methods is another skill, and publishing new methods is yet another skill. When you're fortunate enough to give a public talk on your work--yes, that's a fourth skill.<br />
<br />
Unfortunately, your experience with one of these skills won't necessarily translate to the others. You have to explicitly train for each. For junior researchers in academia or industry, learning to publish and present work is critical. Inventing new ideas in research is useless unless the knowledge is shared. (In contrast, developers can benefit from deploying their inventions internally.)<br />
<br />
The authors you see producing multiple papers per year and winning paper awards are not doing so only on the strength of their innovation. They are also extremely skilled at explaining their work in writing, and have developed efficient processes for minimizing risk and driving towards an acceptable paper.<br />
<br />
In most cases, prolific researchers are constantly greenlighting and killing projects. They're also pipelining multiple projects. It is common for a research lab to have many projects targeting a publication deadline and then cut about half of them two months before submision. This allows doubling down on resources for the strongest work by bringing in new coauthors during the crunch period.<br />
<br />
It is also common to decide to slip a paper to the next conference deadline, and to resubmit previously rejected work to a new conference. Due to the noise on the peer review process, even the best papers might be rejected two or three times before eventual acceptance. Since there is some graphics deadline roughly every other month and each paper might take a year for completion, a big lab must have many projects in flight at any time.<br />
<br />
<h2>
The Paper is the Contribution</h2>
We're trying to advance the state of the art in our field. The ideas that you invent and code that you write have no value towards this in themselves. Many of your coauthors won't even see or run your code, nor will your readers. Code exists primarily to implement the experiments that you will report on in the paper.<br />
<br />
So, regardless of the state of your code, your project is highly at risk until the paper is drafted. Polishing the code adds little value. It should only be done to ensure correctness, accelerate experimentation, or as support for a code release after publication.<br />
<br />
Note that this means telling your coauthors (e.g., advisor) that you've written 500 lines of code this week is unlikely to impress them. In contrast, showing them a complete set of result figure drafts will earn you deserved praised.<br />
<br />
<h2>
Minimize Risk and Revision</h2>
Complete <i>drafts</i> of your work in bottom-up order, according to this pyramid:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-hcxZwllxZEU/Vd4JfKK2Y0I/AAAAAAAAC2E/vwbIrIdygPw/s1600/Screen%2BShot%2B2015-08-26%2Bat%2B2.41.19%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="https://3.bp.blogspot.com/-hcxZwllxZEU/Vd4JfKK2Y0I/AAAAAAAAC2E/vwbIrIdygPw/s400/Screen%2BShot%2B2015-08-26%2Bat%2B2.41.19%2BPM.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
This is a pyramid because each step builds on the lower ones. "Write talk" is in parentheses because often we don't actually write the presentation before the paper is accepted for publication. That's unfortunate, though. Usually, after creating a presentation I know how I <i>should</i> have written the paper in the first place. When time permits (e.g., on a thesis project), I recommend drafting the talk during the writing process.<br />
<br />
The above order is designed to meet two goals. First, it ensures that if a project-killing problem will arise that it is encountered as soon as possible--if you fail, fail fast! Second, it drives you to work out the objective and core elements of your paper early so that you don't have to revise notation and the pitch multiple times. The later parts of the pyramid contain elements that are more subjective and are easier to scale to the remaining time budget.<br />
<br />
Some "fail fast" examples: You should be familiar with the previous work on the topic before you begin your own. The literature contains the hard won experience of others who have looked at the same problem. You want to get that information the easy way by reading it, rather than rediscovering it. Plus, if there's an obscure paper that invented the same algorithm as yours a decade ago, you'd rather find that out at the <i>beginning</i> of the project while researching the bibliography than at the end when it will invalidate all of your work.<br />
<br />
Some dependency examples: Lucid diagrams and equations take a long time to create. You need to find a minimal but clear notation and a way of structuring the steps that guides the reader intuitively. The best design for these usually illuminates the best way of re-structuring your code and typically drives the exposition prose, which exists to explain the compressed notation. In a good paper, one of the contributions is a new way of looking at the problem, which then leads to a new solution. Writing the explanation of the algorithm often can lead you to this insight, so, the introduction to the problem rests on the explanation of the solution. The abstract of the whole work can't possibly be written until you have drafted that work, and the title is a single-phrase abstract of everything, so must necessarily be last.<br />
<br />
<h2>
Drive to Minimum Viable Product </h2>
I was careful to say that the preceding section gave the order in which to <i>draft</i> content. You should not <i>complete</i> each section before moving on to the next one, however.<br />
<br />
Industry developers speak about "minimum viable product" and "vertical integration." These concepts are relevant to any project, including creating a research paper.<br />
<br />
Once every section has been drafted, make multiple vertical passes over every step to iteratively drive towards completion. Use the system on the left of sweeping over the entire process, and not the one on the right of working strictly from the bottom up:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-hNcgYPTAaNI/Vd4JfBTVIpI/AAAAAAAAC2A/2WG2LURoXr0/s1600/Screen%2BShot%2B2015-08-26%2Bat%2B2.42.43%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://3.bp.blogspot.com/-hNcgYPTAaNI/Vd4JfBTVIpI/AAAAAAAAC2A/2WG2LURoXr0/s400/Screen%2BShot%2B2015-08-26%2Bat%2B2.42.43%2BPM.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
This is important for several reasons:</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ol>
<li>Allows coauthors to work in parallel once the draft structure is complete</li>
<li>Minimizes the time to a complete first draft--and the project is tremendously at risk until a draft exists!</li>
<li>Allows submission at any point after the first draft, thus scaling to fit shrinking time resources</li>
<li>Gives everyone a shared vision of the work and allows for high-level course corrections</li>
</ol>
It is important to recognize that each pass over the whole project is just that--a revision of a draft. Acknowledging this removes the pressure to get it right the first time, which creates a kind of writer's block.<br />
<div>
<br /></div>
<div>
With the knowledge that you're going to revise everything, you should observe that it is not worth polishing anything until you've worked up the pyramid and received feedback from collaborators or colleagues. I usually draw the first version of my diagrams on a whiteboard and then photograph them. My first text drafts are bulleted outlines. Below is an example from the <a href="http://graphics.cs.williams.edu/papers/TransparencyI3D16/">Phenomenological Transparency</a> paper of the evolution of some key figures (there were <i>many</i> more iterations that are not shown here), from our first draft on the left to the final published results on the right:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-HzlHHZhkoRs/Vwgm0mxgwvI/AAAAAAAADO8/JyHFW9ldtqMHjlsWUVATuHP0QmIar_LdQ/s1600/figures.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="341" src="https://1.bp.blogspot.com/-HzlHHZhkoRs/Vwgm0mxgwvI/AAAAAAAADO8/JyHFW9ldtqMHjlsWUVATuHP0QmIar_LdQ/s400/figures.png" width="400" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
Poorly investing time by prematurely polishing also runs into a danger: you'll be reluctant to improve those parts because they're "done." But, they aren't done: they are over-polished early drafts that probably have to be completely reworked.<br />
<br />
Since you'll be revising your results several times, I recommend automating the process of creating them. For complex figures and diagrams, we usually make scripts that re-run all of our experiments without manual intervention and directly output Latex or CSV data that we can paste into the paper. Of course, it is important to not <a href="http://xkcd.com/1319/">go overboard with automation</a>. If your results are a only handful of figures from completely different programs, then maybe it is worthwhile recreating them by hand when you make a minor change.<br />
<br />
Save the "source" versions of figures: Excel, PPT, PSD, iMovie, etc. files. Check them in to your revision control system, too. You'll often need to go back to a complex multi-image figure and adjust one layer in Photoshop to insert updated results, and should not waste time re-creating the unmodified rest of it by hand.<br />
<br />
<h2>
What Results to Show</h2>
Anything that you draw on a whiteboard while explaining your work to a colleague or visualize in a program for debugging is a wonderful result to include in a paper. For example, if you think about your work through oct-tree diagrams, quiver plots, or program traces, then the final readers (not to mention the peer reviewers) will benefit from those visualizations as well.<br />
<br />
Include results that show your algorithm failing as well as succeeding. This is good science, because it fully discloses the limitations so that others can later address those. But it is also essential for understanding that the algorithm is correct. If you showed 20 perfect pictures of ray traced reflections, then how does the reader know that they aren't photographs, or that you didn't accidentally leak the ground truth data into your experiments? Showing the cases where it exhibits exactly the kinds of errors predicted when assumptions are violated confirms a correct implementation and gives insight.<br />
<br />
Likewise, think about your paper from the perspective of a skeptic. If someone claimed to have reproduced your work, what results would you ask them to show you to prove that it worked? These are exactly what readers (and before them, the reviewers) will need to see to trust your implementation and algorithms.<br />
<ol>
</ol>
<h2>
After Publication</h2>
<span style="font-family: inherit; font-size: 16px;">Here are some nice resources for how to create a good graphics presentation once your work is accepted:</span><br />
<h4>
<ul>
<li><a href="http://www.cs.cmu.edu/~kayvonf/misc/cleartalktips.pdf">Kayvon Fatahalian's Computer Graphics Presentation Tips</a></li>
</ul>
<ul>
<li><a href="http://dept.cs.williams.edu/~morgan/presentation-advice.pdf">Morgan McGuire's Presentation Advice</a></li>
</ul>
<ul>
<li><a href="http://cs.brown.edu/~mlittman/etc/style.html">Michael Littman's Style Comments</a></li>
</ul>
<ul>
<li><a href="http://wardlopes.com/ResearchEducation/Metatalk.pdf">Ward Lopes' Metatalk</a></li>
</ul>
</h4>
<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
</div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-75926226111776918702015-06-28T18:26:00.001-07:002015-06-28T18:26:56.183-07:00Annecy Animation Festival 2015<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-I7hJf9pqFI8/VY6SkqUiPXI/AAAAAAAACps/DoZ8RYMZ4Gw/s1600/Pixar%2BPost%2B-%2BInside%2BOut%2Bcharacters%2Bcloseup.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="188" src="http://2.bp.blogspot.com/-I7hJf9pqFI8/VY6SkqUiPXI/AAAAAAAACps/DoZ8RYMZ4Gw/s320/Pixar%2BPost%2B-%2BInside%2BOut%2Bcharacters%2Bcloseup.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Pixar's <i>Inside Out</i>, screened at the Cannes and Annecy festivals<br />
before US release, is a return to the quality of the studio's<br />
greatest hits <span style="font-size: 12.8000001907349px;">such as </span><i style="font-size: 12.8000001907349px;">Up</i><span style="font-size: 12.8000001907349px;"> and </span><i style="font-size: 12.8000001907349px;">Toy Story 3.</i></td></tr>
</tbody></table>
For 55 years, the the <a href="http://annecy.org/">Festival International du Film d'Animation d'Annecy</a> (Annecy Animation Festival, <a href="https://twitter.com/annecyfestival">@annecyfestival</a>) has been the premiere international venue for animated films, with emphasis on short films. A majority of the work is intended for adult audiences, although children's and general audience films are represented.<br />
<br />
I've attended the festival for over a decade and find it essential to my work on computer graphics for video games and film. The shorts in particular are packed with innovative techniques, visuals, and storytelling that continue to inspire my research and product development.<br />
<br />
I usually teach from several films seen each year at Annecy (and from those seen in the SIGGRAPH <a href="http://s2015.siggraph.org/submitters/computer-animation-festival">Computer Animation Festival</a>, which is the best venue for CG films). This article describes some of my favorite films from Annecy 2015. You can also read about my favorite shorts from <a href="http://casual-effects.blogspot.com/2013/06/favorite-films-from-annecy-2013.html">Annecy 2013</a> and <a href="http://casual-effects.blogspot.com/2014/07/favorite-short-films-from-annecy-2014.html">Annecy 2014</a>.<br />
<a name='more'></a><br />
This year Annecy presented a strong field, exemplified by the <a href="http://www.annecy.org/programme/fiche:rdv-200000301806">Shorts in Competition 4 session</a> in which every film was worth watching. Here are my favorite short films from the festival in decreasing order, followed by some notes about long films:<br />
<br />
<hr />
<h3 style="text-align: center;">
<a href="http://www.swissfilms.ch/en/film_search/filmdetails/-/id_film/2146991511/search/7">The Five Minute Museum</a></h3>
<div style="text-align: center;">
by Paul Bush, United Kingdom and Switzerland (6m, 2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ETpzFPhhV_g/VY0yUcPom9I/AAAAAAAACoU/N1HopJsNe9U/s1600/20151873.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="http://2.bp.blogspot.com/-ETpzFPhhV_g/VY0yUcPom9I/AAAAAAAACoU/N1HopJsNe9U/s400/20151873.jpg" width="400" /></a></div>
<br />
Paul Bush is an accomplished stop-motion filmmaker who works predominantly on existing objects, actors, and props. His latest short summarizes human history by showing hundreds of objects for a single frame each, matching between them to create continuity. This film is great for many reasons. It is a fresh concept in animation, and the sequence of an animated battle created by cutting between different Greek pottery is the climax of this concept. The film confidently focuses on the breadth of human culture and its similarities across time and region by revealing how similar chairs, weapons, coins, and other artifacts are, while also allowing the differences between them to flicker and flash. Although an abstract film, it has a clear story arc and scenes of humor, violence, awe, and artistry. The effort to create the film is obvious, and contrasted with how smoothly it plays--everything is clearly in place and cleanly animated.<br />
<div>
<br /></div>
<hr />
<h3 style="text-align: center;">
<a href="http://blog.autourdeminuit.com/production/the-race/">The Race</a></h3>
<div style="text-align: center;">
by Michaël Le Meur, France (15m, 2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-AS-XqUpwyoQ/VY0yITd7NOI/AAAAAAAACoM/vO3QQFMtTPQ/s1600/The-Race-3-Lg-600x337.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="http://2.bp.blogspot.com/-AS-XqUpwyoQ/VY0yITd7NOI/AAAAAAAACoM/vO3QQFMtTPQ/s400/The-Race-3-Lg-600x337.jpg" width="400" /></a></div>
<br />
<i>The Race</i> opens with the visual language and music of a slick Fortune-500 commercial. It then gradually dawns on the viewer that this fifteen-minute film is a tour de force of computer animation and cinematography. Following the same theme as Bush's short, Le Meur's work surveys the history of the human race through match cuts. Every shot is (I believe) 100% CGI, with a circular composition that perfectly aligns throughout the entire film.<br />
<br />
When a film opens with an ape-man and later cuts to a space station, it has just thrown down the gauntlet of aspiring to the company of <i>2001</i>'s iconic opening sequence and I find that this film earns the right to explore that theme.<br />
<br />
I can't understand how so many complex CGI shots were executed by only six animators. Unless nearly everything was a stock 3D model, Le Meur either had a huge budget or super-human modelers (although the character animation and skin rendering are underwhelming, the buildings, machines, and physical simulation are nearly perfect).<br />
<br />
<hr />
<h3 style="text-align: center;">
<a href="https://vimeo.com/114381015">Mi Ne Mozhem Zhit Bez Kosmosa</a></h3>
<div style="text-align: center;">
Bronzit, Russia (15m, 2014)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-KwRSxHXB-RQ/VY0vSeCOikI/AAAAAAAACnU/DjvOSGFvh04/s1600/20150668.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="http://1.bp.blogspot.com/-KwRSxHXB-RQ/VY0vSeCOikI/AAAAAAAACnU/DjvOSGFvh04/s400/20150668.jpg" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
<i>Mi Ne Mozhem Zhit Bez Kosmosa</i> ("We Can't Live Without Cosmos") won the Annecy Cristal for best short film and the Junior Jury award this year. I agree that it was the best narrative film (by a hair over <i>World of Tomorrow</i>), and place it third only because I weigh technique and novelty a bit more.<br />
<br />
The film tells a magical realist story of two best friends in the Russian space program. The animation is excellent and feels entirely hand drawn, although after examining stills and considering certain scenes, I suspect there was a lot of 3D modeling.<br />
<br />
The arc from serious to humorous to mysterious to sublime is beautiful and satisfying. The form is well used--it would be much harder to hit this tone with live action, and this works as an almost purely visual film (there is no dialogue and very little text).<br />
<br />
<hr />
<h3 style="text-align: center;">
<a href="https://vimeo.com/ondemand/worldoftomorrow">World of Tomorrow</a></h3>
<div style="text-align: center;">
Don Hertzfeldt, United States (17m, 2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-0vrW_u5w7vQ/VY0vy5O4ZzI/AAAAAAAACn0/u-3D3eseL2s/s1600/20150243.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="http://3.bp.blogspot.com/-0vrW_u5w7vQ/VY0vy5O4ZzI/AAAAAAAACn0/u-3D3eseL2s/s400/20150243.jpg" width="400" /></a></div>
<br />
<i>World of Tomorrow </i>won the Jury Distinction and Audience awards this year. I think it could easily have won the Cristal. This humorous, dystopian science fiction short is executed perfectly and enjoyable throughout.<br />
<br />
I think that this film is at a disadvantage on the awards circuit. It lies so squarely within <a href="http://www.bitterfilms.com/">Don Hertzfeldt</a>'s oeuvre and leverages relatively traditional techniques, so it feels comfortable and professional rather than fresh. I don't know whether <a href="http://xkcd.org/">Randal Munroe</a> and Hertzfeldt are aware of each other, but although Munroe had no involvement, this film felt like the ideal collaboration between them.<br />
<br />
<hr />
<h3 style="text-align: center;">
<a href="https://vimeo.com/ameliaduarte">Amélia & Duarte</a></h3>
<div style="text-align: center;">
Alice Guimarães and Mónica Santos, Germany and Portugal (8m, 2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-l-hjECFeb5U/VY0zEal6pbI/AAAAAAAACog/5U0pHH4bt4M/s1600/Screen%2BShot%2B2015-06-26%2Bat%2B7.09.39%2BAM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="http://3.bp.blogspot.com/-l-hjECFeb5U/VY0zEal6pbI/AAAAAAAACog/5U0pHH4bt4M/s400/Screen%2BShot%2B2015-06-26%2Bat%2B7.09.39%2BAM.png" width="400" /></a></div>
<br />
This is a mostly live-action stop motion film about the end of a love story. The camp of exaggerated gestures, colors, and costumes is at first irritating and cloying, but quickly becomes endearing as the mature narrative unfolds. I thought I'd hate this film and instead it became one of my favorites.<br />
<br />
<hr />
<h3 style="text-align: center;">
Guida</h3>
<div style="text-align: center;">
Rosana Urbes, Brazil (12m, 2014)</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-2Bp9pxF8gvI/VY0vZdTajOI/AAAAAAAACnc/bg7P4VQYReY/s1600/20150482.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="http://2.bp.blogspot.com/-2Bp9pxF8gvI/VY0vZdTajOI/AAAAAAAACnc/bg7P4VQYReY/s400/20150482.jpg" width="400" /></a></div>
<br />
<i>Guida</i> is a refreshing, beautiful film that explores a character and a moment. It asks how a middle-aged woman came to be a life model and (beyond presumably, the income) what enjoyment she receives from it. Animation naturally tends to caricature, but <i>Guida </i>subverts that by leading us to view a natural and aging female body as beautiful and confident.<br />
<br />
In an environment where many ambitious shorts are undone by targeting too vast of a scope, this instead choses to deeply explore at an appropriately modest and human scale. It deservedly won the Jean-Luc Xiberras award for best first film and the Fipresci Special Distinction awards this year.<br />
<br />
An explicit theme of the festival this year was Women in Animation. I note that <i>Amelia & Duarte</i> and <i>Guida</i> are each from female directors, and that both succeed because of their subtlety, sophistication, and narrative maturity.<br />
<br />
<hr />
<h3 style="text-align: center;">
<a href="https://www.nfb.ca/film/autos_portraits">Autos Portraits</a></h3>
<div style="text-align: center;">
Claude Cloutier, Canada (5m, 2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-22zx2Tg16tU/VY7HwrkBX4I/AAAAAAAACqE/02G_4y2kzc8/s1600/28_cc749_autosportraits04.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="http://3.bp.blogspot.com/-22zx2Tg16tU/VY7HwrkBX4I/AAAAAAAACqE/02G_4y2kzc8/s400/28_cc749_autosportraits04.jpg" width="400" /></a></div>
<br />
The <a href="https://www.youtube.com/watch?v=gto4QwxI2oA">hand-drawn</a> animation in this musical short is breathtaking--I originally thought it was a paintover of CGI because of the complex 3D motions of the cars. The music is well done and imagery is strong. I wish that it was cut a bit shorter. I could watch the film for hours, but the global warming/peak oil message is obvious and making it so explicit at the end is predictable melodramatic, and the imagery deserves better.<br />
<br />
<hr />
<h3 style="text-align: center;">
<a href="http://www.framebox.com/dissonance/index.htm">Dissonance</a></h3>
<div style="text-align: center;">
Till Nowak, Germany (17m, 2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-PmoAfSi1Gpk/VY0t7nDwuII/AAAAAAAACnI/8LjukCGvqWo/s1600/Screen%2BShot%2B2015-06-26%2Bat%2B6.47.48%2BAM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="http://1.bp.blogspot.com/-PmoAfSi1Gpk/VY0t7nDwuII/AAAAAAAACnI/8LjukCGvqWo/s400/Screen%2BShot%2B2015-06-26%2Bat%2B6.47.48%2BAM.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Nowak has made several successful films that, like <i>Dissonance</i>, blend live action and CGI in a seamless fashion. This is his most aggressive yet, with a highly-stylized look and emotionally-challenging story. The terrific score won the Best Original Music award this year.<br />
<br />
This film tackles the relationship between a mentally ill musician and his daughter and ex-wife, largely from the perspective of his delusions. I appreciate that it presents this, as with many real-life stories, as one in which there is no clean or satisfying solution.<br />
<br />
I do not entirely appreciate the symbolism of the human character ending or understand the disconcertingly humorous closing scene with the stuffed animal.<br />
<br />
<hr />
<h3 style="text-align: center;">
<a href="http://aristotelismaragkos.com/index.php?/film/a-portrait/">A Portrait</a></h3>
<div style="text-align: center;">
Maragkos, Greece (2m, 2014)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-sHz1wlGzM4c/VY8Z1eGElvI/AAAAAAAACrg/990V0D1p6wg/s1600/Aristotelis-Maragkos-A-portrait.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="http://1.bp.blogspot.com/-sHz1wlGzM4c/VY8Z1eGElvI/AAAAAAAACrg/990V0D1p6wg/s400/Aristotelis-Maragkos-A-portrait.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
A great exercise: animate a complete life story using a single, continuous line for each frame. Each image is a wonderful still.</div>
<br />
<hr />
<h3 style="text-align: center;">
<a href="http://www.annecy.org/programme/fiche:film-20150081">Dimitria à Ubuyu</a></h3>
<div style="text-align: center;">
Agnès Lecreux, France (26m, 2014)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ffIC8c4i7ZY/VZCWOvqzPoI/AAAAAAAACsE/nUZjEKjWlmk/s1600/3315_DimitriUbuyu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="http://1.bp.blogspot.com/-ffIC8c4i7ZY/VZCWOvqzPoI/AAAAAAAACsE/nUZjEKjWlmk/s400/3315_DimitriUbuyu.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<span class="itemprop" itemprop="name" style="background-color: white; color: #70579d; font-family: Verdana, Arial, sans-serif; font-size: inherit; text-align: start; text-decoration: none;">A Pixar-like story of a lost child who conquers his insecurity through strange adventures. I preferred this to <i>Finding Nemo</i> and other international releases on the same theme. The necessary heart-breaking setbacks are well done, as is avoiding a single-note characterization for the baboon, who becomes the antagonist.</span><br />
<hr />
<h3 style="text-align: center;">
<a href="https://www.youtube.com/watch?v=BaYwAY9yhFQ">Love in the Time of March Madness</a></h3>
<div style="text-align: center;">
Zambrano and Johnson, Australia and United States (9m, 2014)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-hLBqMjN6_rI/VY8T66KbiII/AAAAAAAACqw/Zuh_U-F7Dgw/s1600/love-in-the-time-of-march-madness.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="http://2.bp.blogspot.com/-hLBqMjN6_rI/VY8T66KbiII/AAAAAAAACqw/Zuh_U-F7Dgw/s400/love-in-the-time-of-march-madness.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
A strong film about a female athlete from female directors. The varied animation styles meshed well in a film ultimately driven by a good vocal performance in the narration. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The opening scenes are a red herring that a short film can't afford--they present a theme of sexual awakening and experience that is not at all the focus of the remainder of the film. I also suspect that this relied too much on American sports, jargon, and cultural baggage to screen well in Europe.</div>
<br />
<hr />
<h3 style="text-align: center;">
<a href="https://vimeo.com/101079994">Aubade</a></h3>
<div style="text-align: center;">
Mauro Carraro, Switzerland (6m, 2014)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-QjxzzXL75Mw/VY8ZLso7E2I/AAAAAAAACrA/y2XvhohxLII/s1600/Aubade4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="136" src="http://4.bp.blogspot.com/-QjxzzXL75Mw/VY8ZLso7E2I/AAAAAAAACrA/y2XvhohxLII/s320/Aubade4.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
A pretty meditation on morning at the seaside.</div>
<br />
<hr />
<h3 style="text-align: center;">
Rhizome</h3>
<div style="text-align: center;">
Boris Labbe, France (12m, 2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-EMdLooVjNo8/VY0vuCFwu5I/AAAAAAAACns/VWYDnEaSaA4/s1600/20152373.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="http://3.bp.blogspot.com/-EMdLooVjNo8/VY0vuCFwu5I/AAAAAAAACns/VWYDnEaSaA4/s400/20152373.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
A looping, abstract film that combines 2D and 3D elements that won the Andre Martin Award for French short film this year. The soundtrack was grating, but the animation was worth watching closely--the hand-drawn figures interact in complex ways for which you'll appreciate the repetition while you to try and untangle them.<br />
<div>
<br /></div>
<hr />
<h3 style="text-align: center;">
<a href="https://www.youtube.com/watch?v=VRpghiLliOo">Pandemonio</a></h3>
<div style="text-align: center;">
Valerio Spinelli, Italy (3m, 2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-VHhrZI0a9Lk/VY8aFX04NGI/AAAAAAAACro/Y9-octOgKkQ/s1600/pandemonio_no_blur_01031-640x360.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="http://1.bp.blogspot.com/-VHhrZI0a9Lk/VY8aFX04NGI/AAAAAAAACro/Y9-octOgKkQ/s400/pandemonio_no_blur_01031-640x360.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I loved the breadth of shapes constructed solely from stitched disks in this upbeat, short-and-sweet film. The score rocked perhaps a little <i>too</i> hard for the content.</div>
<br />
<hr />
<h3 style="text-align: center;">
<a href="http://films2014.dok-leipzig.de/en/film.aspx?ID=7470">Suleima</a></h3>
<div style="text-align: center;">
Maghout, Syria (15m, 2014)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-t1-Q4o4SR_U/VY8ZfEwNk-I/AAAAAAAACrI/FqMvOTj3lu4/s1600/20150127.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="http://3.bp.blogspot.com/-t1-Q4o4SR_U/VY8ZfEwNk-I/AAAAAAAACrI/FqMvOTj3lu4/s400/20150127.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We know that Syria is currently a terrible place due to civil war, and especially so for women and the resistance. This film wisely focuses on one woman's story and relation with her family rather than rehashing government oppression--the latter remains horrible, but is hard to present in a fresh way in film. It emphasizes the craziness that life continues even during war and strife, which I know is true but find impossible to comprehend.</div>
<br />
<hr />
<h3 style="text-align: center;">
<a href="http://www.adamelliot.com.au/">Ernie Biscuit</a></h3>
<div style="text-align: center;">
Adam Elliot, Australia (20m, 2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-hmKAmyjNR_Y/VY8ZopnNEtI/AAAAAAAACrY/PBKggTwAWnw/s1600/ernie-biscuit-post.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="http://1.bp.blogspot.com/-hmKAmyjNR_Y/VY8ZopnNEtI/AAAAAAAACrY/PBKggTwAWnw/s400/ernie-biscuit-post.jpg" width="400" /></a></div>
<br />
The title sequence from <i>Ernie Biscuit</i> is a great short film in its own right, and that only opens the door. This film demonstrates that using barely any on-screen motion, no color, and minimal dialogue (the voiceover is good, but mostly unnecessary) one can still present a story with significant action.<br />
<br />
The middle section runs a bit long and thus starts to telegraph the ending. I enjoyed the whiplash twists and gags as well as the excellent claymation characters and strong composition and lighting.<br />
<br />
<hr />
<h3 style="text-align: center;">
<a href="http://yuletleserpent.blogspot.com/">Yul et le Serpent</a></h3>
<div style="text-align: center;">
Gabriel Harel, France (2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-kFcICWHx9jY/VY0vqoGT8lI/AAAAAAAACnk/5klMDbfyM7A/s1600/20152266.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="http://2.bp.blogspot.com/-kFcICWHx9jY/VY0vqoGT8lI/AAAAAAAACnk/5klMDbfyM7A/s400/20152266.jpg" width="400" /></a></div>
<br />
A story of two brothers on the wrong side of the tracks. Won the Andre Martin Distinction Award for French short film this year. The art style, pacing, and subject matter somehow feel like a short from the previous decade of single-punch narrative focus and fewer visual flourishes.<br />
<br />
<hr />
In addition to the widely-known great new release of <i><a href="http://movies.disney.com/inside-out/">Inside Out</a></i>, I recommend these three animated feature films:<br />
<br />
<h3 style="text-align: center;">
<a href="https://www.youtube.com/watch?v=vbkA4a5N-Hc">Dragon Nest: Warrior's Dawn</a></h3>
<div style="text-align: center;">
Yuefeng Song, China (2014)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-sriEdim26Qs/VY7Kpxqg8WI/AAAAAAAACqQ/nfSiQFuqJt0/s1600/20140730161336a0dunglkbo6b0bjv.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="http://3.bp.blogspot.com/-sriEdim26Qs/VY7Kpxqg8WI/AAAAAAAACqQ/nfSiQFuqJt0/s400/20140730161336a0dunglkbo6b0bjv.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Over-sexualized preteen elves, a gruff avuncular warrior, homoerotic anime men caressing each other, lion-dragons, a goofball hero, obligatory skateboarding on shields, bickering mages in oversized leather turtlenecks--<i>Dragon Nest</i> embraces every Asian animation genre cliche without irony or awareness of offense, and then cranks them up to 11 without apology. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The first five minutes of video-game prologue are excruciating. If you survive them, I suspect you'll find yourself enjoying the rest of the film. In my screening, the audience was cheering and laughing from the point where the two David Bowie-like androgynous male warriors stroked each other's long straight hair and shoulder pads straight through the massive set piece battles at the end.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<hr />
<h3 style="text-align: center;">
<a href="https://www.youtube.com/watch?v=NBw5YScs8iQ">The Book of Life</a></h3>
<div style="text-align: center;">
Jorge Gutierrez, USA (2014)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-cnpPgCxPl-8/VY7K7v-p-AI/AAAAAAAACqY/iqq4ARNcRdo/s1600/The-Book-Of-Life-Luna.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="http://3.bp.blogspot.com/-cnpPgCxPl-8/VY7K7v-p-AI/AAAAAAAACqY/iqq4ARNcRdo/s400/The-Book-Of-Life-Luna.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This children's adventure set in Mexico combines a claymation look with unusually rich textures and colors for an animated film. The compositions are excellent and inspiring and the story is fun.</div>
<br />
<hr />
<h3 style="text-align: center;">
Avril et le Monde Truqué</h3>
<div style="text-align: center;">
Franck Ekinci and Christian Desmares, France (2015)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Y8fW22qfdbo/VY7LTOYfilI/AAAAAAAACqg/MFMz5PMCO7U/s1600/1220967_ari.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="http://2.bp.blogspot.com/-Y8fW22qfdbo/VY7LTOYfilI/AAAAAAAACqg/MFMz5PMCO7U/s400/1220967_ari.jpg" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
<i>Avril et le Monde Truqué </i>("<i>April and the Extraordinary World"</i>) is a steampunk adventure. I haven't seen the full film yet, but what I heard from others and the clips that I saw were exciting.<br />
<br />
<br />
I'd like to thank my companions from the US this year for their insights and discussion of these films: <a href="http://helios.hampshire.edu/perry/index.html">Chris Perry</a> (Bit Films and Hampshire College), <a href="https://www.hampshire.edu/faculty/viveca-greene">Viveca Greene</a> (Hampshire College), <a href="http://english.williams.edu/profile/srosenhe/">Shawn Rosenheim</a> (Williams College), Mick McGuire (<a href="http://mccreativemedia.com/">MC Creative Media</a>), and Mary McGuire (<a href="http://www.marymcguiredesign.com/index.html">Mary McGuire Design</a>).<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="http://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-4373030270539464982015-06-05T05:13:00.003-07:002015-06-05T05:13:54.362-07:00McGuire House Rules for Cartegena<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-nqko6IYuaa0/VXGL9-00MQI/AAAAAAAAClY/SYH6UPJgqoY/s1600/DSC010881.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/-nqko6IYuaa0/VXGL9-00MQI/AAAAAAAAClY/SYH6UPJgqoY/s320/DSC010881.jpg" width="320" /></a></div>
<i><a href="http://www.amazon.com/gp/product/B00HSC3JR4/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=B00HSC3JR4&linkCode=as2&tag=casueffe06-20&linkId=4KK4XJDS426FBOOD">Cartagena </a></i>is a board game for 2-5 players. With the simple McGuire house rules modifications described below, it works well as a strategic family game for players as young as five.<br />
<br />
The game features teams of pirate markers racing through a random board depicting a tunnel. The pirate theme continues through the main commodities in the game: rum, guns, swords, hats, and flags.<br />
<br />
The strategic decisions made by players are largely timing. The two main moves are pushing forward by playing cards, and dropping back to accumulate cards and establish tactical positions. There's no direct player vs. player conflict.<br />
<br />
<a name='more'></a><br />
<br />
(There is a 2nd edition called <i><a href="http://www.amazon.com/gp/product/B001BLZ99E/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=B001BLZ99E&linkCode=as2&tag=casueffe06-20&linkId=UMETLC33NSBWDORI">Cartagena II</a> </i>that can be played with the same pieces if you're willing to mark the face of a few cards. It differs primarily in the end-game rule and that "dropping back" is now "advancing an opponent". I think that it is a little better balanced but also a little less kid-friendly because of the complexity. You can <a href="http://riograndegames.com/getFile.php?id=709">download the new rules</a> from the Rio Grande site and play with the original set.)<br />
<br />
The game suggests two variants in the rules. Even with all adults, I never play the "strategic" variant in which the draw deck is visible. That variant allows (i.e., forces) players to consider too many options and slows the game too much.<br />
<br />
<b>McGuire House Rules</b><br />
Some simple changes make <i>Cartagena </i>a fast and fun game to play with young children without sacrificing its core strategic value.<br />
<br />
1. <b>Remove a few tunnel pieces during setup</b> to reduce game length. The base game takes about 20 minutes with handicapped players. It can easily be reduced to about 10 minutes plus setup time by removing <b>two tiles</b>. That means that you can play two games in half an hour, including setup and cleanup.<br />
<br />
2. <b>Give weaker players extra cards during setup</b> to give them a lead. Don't change the number of pirates or advance the pirates--because of the leapfrogging mechanic, moving pirates affects the game in complex ways. I currently grant my elementary school children <b>six cards each</b> at the start of the game.<br />
<br />
3. For players having a very hard time with strategy, a simple rule change can reduce the worst case that players can get themselves into with poor play. The minor version is to add the retreat rule:<br />
<blockquote class="tr_bq">
<b>Retreat:</b> A pirate may drop back out of the tunnel to the start and draw one card as an action. A player with no pirates currently in the tunnel may draw <i>two</i> cards as an action.</blockquote>
A more dramatic version also adds the cave-in rule to increase the bonus for retreating:<br />
<blockquote class="tr_bq">
<b>Cave-In:</b> When a tile at the start end of the tunnel has no pirates on it, it is removed from the game. Any pirates who aren't yet in the tunnel or the boat move up to being just before the end of this tunnel.</blockquote>
I found that using a physical boat instead of the boat card/tile greatly increases the enjoyment of children when moving their pirates off the board. We use a Lego boat hull, but any toy about 8 cm or longer will suffice.<br />
<br />
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="http://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Project Rocket Golfing</a> for iOS and Skylanders: Superchargers for consoles. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-52211752019227214592015-03-27T13:52:00.002-07:002018-02-06T07:45:27.215-08:00Fast Colored TransparencyThis article extends my previous article on <a href="http://casual-effects.blogspot.com/2015/03/implemented-weighted-blended-order.html">Implementing Weighted, Blended Order-Independent Transparency</a>. I previously showed how to implement a fast and robust solution for both partial coverage and <i>monochrome</i> transmission. The speed of the method came from three sources: 1. being able to merge multiple transparent surfaces into a single draw call, 2. avoiding the overhead of pixel interlocks, and 3. minimizing bandwidth during blending. The robustness came from order independence, at a cost of some flattening of perceived depth between transmissive surfaces in the distance.<br />
<br />
<i>Update Feb 2016: Mike Mara and I published <a href="http://casual-effects.com/research/McGuire2016Transparency/index.html">a paper at I3D'16</a> that fully-realizes the ideas originally sketched out in this blog post.</i><br />
<br />
<a name='more'></a><br />
<br />
The method from the previous article could render surfaces that have varying <i>reflectivity </i>with respect to frequency of light ("color") and those that have partial coverage, such as the squares and transparent engine shown below. However, it could not handle <i>transmission </i>varying with frequency of light.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-kRdQlv4Ow8w/VRRvzB6bJII/AAAAAAAACcQ/V21OvT8nZks/s1600/2015-03-26_000_scratch-morgan_r5768_g3d_r5767.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://1.bp.blogspot.com/-kRdQlv4Ow8w/VRRvzB6bJII/AAAAAAAACcQ/V21OvT8nZks/s1600/2015-03-26_000_scratch-morgan_r5768_g3d_r5767.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-cGXRm63kFhs/VRRoWQ-cy4I/AAAAAAAACbU/8LwTv-izxWg/s1600/2015-03-26_002_scratch-morgan_r5767_g3d_r5767.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://2.bp.blogspot.com/-cGXRm63kFhs/VRRoWQ-cy4I/AAAAAAAACbU/8LwTv-izxWg/s1600/2015-03-26_002_scratch-morgan_r5767_g3d_r5767.png" width="320" /></a></div>
<br />
This new article describes a prototype of a simple extension to handle non-refractive colored transmission. For example, this can approximate the transmission through a green wine bottle, red blood, or a purple stained glass window.<br />
<br />
The colored method still requires only one 3D pass over the transparent surfaces and one 2D compositing pass. It also has the same memory requirements: an RGB16F texture for accumulated color and an R8 texture for "revealage" (you can pack them into a single RGBA16F texture as well.)<br />
<br />
The difference from the previous method is that the new one binds the final framebuffer's color texture as a third render target. It then modulates that color during the 3D transparent pass, since modulation is inherently independent of order. Doing so slightly increases the bandwidth cost of the transparent pass, but allows colored transmission.<br />
<br />
This slight increase is undesirable if you know that your scene contains only monochrome transmission/coverage. Objects such as (colored) clouds, (colored) smoke, alpha-matted (colored) foliage, and colorless glass are cases that <i>don't</i> need the new method. I believe that the additional cost is easily acceptable for the quality increase if you need to render colored glass or fluids.<br />
<br />
The new method is something that I just prototyped today, so I don't yet know its full strengths and failure cases. There's one theoretical concern: the implicit color normalization process by the average of averages is mathematically questionable. However, performing it would tint the highlights undesirably. When I've used the technique on diverse scenes and worked with it for a while, I'll write it up for formal publication.<br />
<br />
<h2>
3D Transparent Surface Pass</h2>
The render target setup for the transparent pass is as follows. The values written from the shader are based on the <b>R</b>eflected light, the coverage (a) and the <b>T</b>ransmitted light. In practice, I use premultiplied-alpha for R, so I don't actually perform the explicit R.r * a, etc. computations.
<br />
<br />
<table border="1" style="font-size: 10px;">
</table>
<table border="1" style="font-size: 10px;">
<tbody>
<tr><td>Render Target</td><td>Format</td><td>Clear</td><td>Src Blend</td><td>Dst Blend</td><td>Write ("Src")</td></tr>
<tr><td>accum</td><td>RGBA16F</td><td>(0,0,0,0)</td><td>ONE</td><td>ONE</td><td><code>(R.r*a, R.g*a, R.b*a, a) * w</code></td></tr>
<tr><td>revealage</td><td>R8</td><td>(1,0,0,0)</td><td>ZERO</td><td>ONE_MINUS_SRC_COLOR</td><td><code>a</code></td></tr>
<tr><td>color</td><td>RGB</td><td>-</td><td>ZERO</td><td>ONE_MINUS_SRC_COLOR</td><td><code>a * (1 - T.rgb)</code></td></tr>
</tbody></table>
<br />
The "color" buffer is the final framebuffer's color buffer, containing the already-rendered opaque parts of the scene. It is not cleared before the transparent pass and can have any RGB format.<br />
<div>
<br />
<div>
The 3D color shader differs by only the two lines (which handle the color buffer) from the monochrome algorithm:<br />
<div>
<br />
<pre class="brush: c">#version330
layout(location = 0) out float4 _accum;
layout(location = 1) out float _revealage;
layout(location = 2) out float3 _modulate; /* NEW */
void writePixel(vec4 premultipliedReflect, vec3 transmit, float csZ) {
/* NEW: Perform this operation before modifying the coverage to account for transmission. */
_modulate = premultipliedReflect.a * (vec3(1.0) - transmit);
/* Modulate the net coverage for composition by the transmission. This does not affect the color channels of the
transparent surface because the caller's BSDF model should have already taken into account if transmission modulates
reflection. See
McGuire and Enderton, Colored Stochastic Shadow Maps, ACM I3D, February 2011
http://graphics.cs.williams.edu/papers/CSSM/
for a full explanation and derivation.*/
premultipliedReflect.a *= 1.0 - (transmit.r + transmit.g + transmit.b) * (1.0 / 3.0);
// Intermediate terms to be cubed
float tmp = (premultipliedReflect.a * 8.0 + 0.01) *
(-gl_FragCoord.z * 0.95 + 1.0);
/* If a lot of the scene is close to the far plane, then gl_FragCoord.z does not
provide enough discrimination. Add this term to compensate:
tmp /= sqrt(abs(csZ)); */
float w = clamp(tmp * tmp * tmp * 1e3, 1e-2, 3e2);
_accum = premultipliedReflect * w;
_revealage = premultipliedReflect.a;
}
</pre>
<br />
<br />
The idea is to modulate the background image while accumulating the foreground color and coverage, and the apply averaged reflectance to the foreground.</div>
<div>
<br /></div>
<div>
<h2>
2D Compositing Pass</h2>
Because the 3D pass already modulated the background, the compositing pass now needs only to add the weighted average of reflected color on top. The compositing shader run on the final framebuffer is run with the blending mode src = ONE_MINUS_SRC_ALPHA, dst = ONE:</div>
<br />
<pre class="brush: c">#version330
/* sum(rgb * a, a) */
uniform sampler2D accumTexture;
/* prod(1 - a) */
uniform sampler2D revealageTexture;
out float4 result;
void main() {
int2 C = int2(gl_FragCoord.xy);
float revealage = texelFetch(revealageTexture, C, 0).r;
if (revealage == 1.0) {
// Save the blending and color texture fetch cost
discard;
}
float4 accum = texelFetch(accumTexture, C, 0);
// Suppress overflow
if (isinf(maxComponent(abs(accum)))) {
accum.rgb = float3(accum.a);
}
// dst' = (accum.rgb / accum.a) * (1 - revealage) + dst
// [dst has already been modulated by the transmission colors and coverage and the blend mode
// inverts revealage for us]
result = float4(accum.rgb / max(accum.a, 0.00001), revealage);
}
</pre>
<br />
<br />
<h2>
Example</h2>
<div>
Here's a simple example comparing the results of this new colored method to sorted transparency. Sorted transparency is significantly slower because it requires two draw calls per sorted primitive, one to modulate the background and one to add the reflected light.<br />
<br />
Both images show two glass cages on a cobblestone ground (in the Uffizi Gallery, because this is computer graphics research). The red glass cage is closer to the viewer than the yellow one. The top image is the new fast, colored, and order-independent method. You can see the two buffers inset that it uses. The bottom image is a sorted transparency reference image. The order-independent method clearly captures most of the phenomena, including the intended tinting of the background where seen through the foreground. The primary difference is that the glossy highlights are dimmer (because they're averaged) in the new method. I don't show the old OIT method here...it would have both cages appear to be made from clear instead of colored glass.</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-l_j0nbKQdN4/VRXC75sIgxI/AAAAAAAACcg/rX11EV5OGtU/s1600/2015-03-27_000_scratch-morgan_r5771_g3d_r5771.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://3.bp.blogspot.com/-l_j0nbKQdN4/VRXC75sIgxI/AAAAAAAACcg/rX11EV5OGtU/s1600/2015-03-27_000_scratch-morgan_r5771_g3d_r5771.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">New fast colored, order-independent transparency</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-UElS9B92WQI/VRXC7yNKQ1I/AAAAAAAACck/vaR6_vOZgjg/s1600/2015-03-27_001_scratch-morgan_r5771_g3d_r5771.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://3.bp.blogspot.com/-UElS9B92WQI/VRXC7yNKQ1I/AAAAAAAACck/vaR6_vOZgjg/s1600/2015-03-27_001_scratch-morgan_r5771_g3d_r5771.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Slow, sorted transparency reference image</td></tr>
</tbody></table>
<div>
</div>
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="https://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor of Computer Science at <a href="http://cs.williams.edu/">Williams College</a>, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Rocket Golfing</a> and work on the Skylanders series. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
</div>
</div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.comtag:blogger.com,1999:blog-5160427648497943080.post-45657078227657048472015-03-26T13:21:00.002-07:002015-06-12T04:53:07.595-07:00Implementing Weighted, Blended Order-Independent Transparency<h2>
Why Transparency?</h2>
<div style="text-align: right;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-MJcdC_9XobA/VRRqHjauCXI/AAAAAAAACbc/oqR1gZks_h4/s1600/2015-03-25_000_starter_r5750_g3d_r5750.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="180" src="http://4.bp.blogspot.com/-MJcdC_9XobA/VRRqHjauCXI/AAAAAAAACbc/oqR1gZks_h4/s1600/2015-03-25_000_starter_r5750_g3d_r5750.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><div style="font-size: 12.8000001907349px;">
Result from the Weighted, Blended OIT method described</div>
<div style="font-size: 12.8000001907349px;">
in this article. Everything gray in the top inset image has some</div>
<div style="font-size: 12.8000001907349px;">
level of transmission or partial coverage transparency.</div>
</td></tr>
</tbody></table>
<i><a href="http://casual-effects.blogspot.com/2015/03/colored-blended-order-independent.html">See also the new colored transmission method in my next article!</a></i><br />
<i><br /></i>
Partially transparent surfaces are important for computer graphics. Realistic materials such as fog, glass, and water as well as imaginary ones such as force-fields and magical spells appear frequently in video games and modeling programs. These all transmit light through their surfaces because of their chemical properties.<br />
<br />
Even opaque materials can produce partially transparent surfaces within a computer graphics system. For example, when a fence is viewed from a great distance, an individual pixel may contain both fence posts and the holes between them. In that case, the "surface" of the opaque fence with holes is equivalent to a homogeneous, partly-transparent surface within the pixel. A similar situation arises at the edge of any opaque surface, where the silhouette cuts partly across a pixel. This is the classic <i>partial coverage</i> situation first described for graphics by Porter and Duff in 1986 and modeled with "alpha".<br />
<br />
There are some interesting physics and technical details that I'm simplifying in this overview. To dig deeper, I recommend the discussion of the sources and relation between coverage and transmission for non-refractive transparency in the <a href="http://graphics.cs.williams.edu/papers/CSSM/">Colored Stochastic Shadow Maps</a> paper that Eric Enderton and I wrote. I extended that discussion in the transparency section of <i><a href="http://www.amazon.com/gp/product/0321399528/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0321399528&linkCode=as2&tag=casueffe06-20">Computer Graphics: Principles and Practice</a></i>.<br />
<br />
<a name='more'></a><br />
<br />
<h2>
The Challenge</h2>
Generating real-time images of scenes with partial transparency is challenging. That's because pixels containing partly transparent surfaces have multiple surfaces contributing to the final value, and the order in which they are composited over each other affects the result. This is one reason why hair, smoke, and glass often look unrealistic in video games, especially where they come close to opaque surfaces.
<br />
<br />
One reason that transparency is challenging is that ordering surfaces is hard. There are many algorithms for ordering elements in a data structure, but they all have a cost in both time and space that is unacceptable for real-time rendering on current computer graphics hardware. If every pixel can store ten partially transparent surfaces, then a rendering system would require ten times as much memory to encode and sort those values. (I'm sure that 100 GB GPUs will exist in a few years, but they don't today, and when they do, we might not want to use all of the memory just for transparency.)
It is also not possible to order the surfaces themselves because there is not necessarily any order in which multiple surfaces overlap correctly. For example, as few as three triangles can thwart the sorting approach.
<br />
<br />
Recently, a number of efficient algorithms for <b>order-independent</b> transparency (OIT) were introduced. These approximate the result of compositing multiple layers without the ordering constraint or unbounded intermediate storage. This can yield two benefits. The first is that the worst cases of incorrectly composited transparency can be avoided. No more bright edges on a tree in shadow or characters standing out from the fog they were hiding in. The second benefit is that multiple transparent primitives can be combined in a single draw call. That gives a significant increase in performance for scenes with lots of foliage or special effects.
<br />
<br />
All OIT methods make approximations that affect quality. A common assumption is that all partially-transparent surfaces have no refraction and do not color the objects behind them. For example, in this model "green" glass will make everything behind it look green by darkening the distant surfaces and adding green over the top. A distant red object will appear brown (dark red + green), not black as it would in the real world.
<br />
<br />
<a href="http://jcgt.org/published/0002/02/09/">Weighted, Blended Order-Independent Transparency</a> is a computer graphics algorithm that I developed with Louis Bavoil at <a href="http://nvidia.com/">NVIDIA </a>and the support of the rendering team at <a href="http://www.vvisions.com/">Vicarious Visions</a>. Compared to other OIT methods, it has the advantages that it uses very little memory, is very fast, and works on all major consoles and PCs released in the past few years. The primary drawbacks are that it produces less distinction between layers close together in depth and must be tuned once for the desired depth range and precision of the applications. Our I3D <a href="http://jcgt.org/published/0002/02/09/presentation.pptx">presentation slides </a>explain these tradeoffs in more detail.<br />
<br />
<center>
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/3uO-RGeI_uc?rel=0" width="560"></iframe><br />
<i>A glass chess set rendered with our technique.</i>
</center>
<br />
Since publishing and presenting the research paper, I've worked with several companies to integrate our transparency method into their games and content-creation application. This article shares my current best explanation of how to implement it, as informed by that process. I'll give the description in a PC-centric way. See the <a href="http://jcgt.org/published/0002/02/09/paper.pdf">original paper</a> for notes on platforms that do not support the precisions or blending modes assumed in this guide.<br />
<br />
<h2>
Algorithm Overview</h2>
<div>
All OIT methods make the following render passes:</div>
<div>
<ol>
<li>3D opaque surfaces to a primary framebuffer</li>
<li>3D transparency accumulation to an off-screen framebuffer</li>
<li>2D compositing transparency over the primary framebuffer</li>
</ol>
During the transparency pass the original depth buffer is maintained for testing but not written to. The compositing pass is a simple 2D image processing operation.<br />
<br /></div>
<h2>
3D Transparency Pass</h2>
This is a 3D pass that submits transparent surfaces in any order. Bind the following two render targets in addition to the depth buffer. Test against the depth buffer, but do not write to it or clear it. The transparent pass shaders should be almost identical to the opaque pass ones. Instead of writing a final color of (r, g, b, 1), they write to each of the render targets (using the default ADD blend equation):<br />
<br />
<table border="1" style="font-size: 10px;">
<tbody>
<tr><td>Render Target</td><td>Format</td><td>Clear</td><td>Src Blend</td><td>Dst Blend</td><td>Write ("Src")</td></tr>
<tr><td>accum</td><td>RGBA16F</td><td>(0,0,0,0)</td><td>ONE</td><td>ONE</td><td><code>(r*a, g*a, b*a, a) * w</code></td></tr>
<tr><td>revealage</td><td>R8</td><td>(1,0,0,0)</td><td>ZERO</td><td>ONE_MINUS_SRC_COLOR</td><td><code>a</code></td></tr>
</tbody></table>
<br />
The w value is a weight computed from depth. The paper and presentation describe several alternatives that are best for different kinds of content. The general-purpose one used for the images in this article is:<br />
<br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">w = clamp(pow(min(1.0, premultipliedReflect.a * 10.0) + 0.01, 3.0) * 1e8 * pow(1.0 - gl_FragCoord.z * 0.9, 3.0), 1e-2, 3e3);</span><br />
<br />
where <span style="font-family: 'Courier New', Courier, monospace;">gl_FragCoord.z</span> is OpenGL's depth buffer value which ranges from 0 = near plane to 1 = far plane. This function downweights the color contribution of very-low coverage surfaces (e.g., that are about to fade out) and distant surfaces.<br />
<br />
Note that the compositing uses pre-multipled color. This allows expressing emissive (glowing) values by writing the <i>net</i> color along each channel instead of explicitly solving the product r*a, etc. For example, a blue lightning bolt can be written to accum as (0, 10, 15, 0.1) rather than creating an artificial unmultiplied r value that must be very large to compensate for the very low coverage.<br />
<br />
Using R16F for the revealage render target will give slightly better precision and make it easier to tune the algorithm, but a 2x savings on bandwidth and memory footprint for that texture may make it worth compressing into R8 format.<br />
<br />
Sample GLSL shader code is below:<br />
<pre class="brush: c">#version 330
out float4 _accum;
out float _revealage;
void writePixel(vec4 premultipliedReflect, vec3 transmit, float csZ) {
/* Modulate the net coverage for composition by the transmission. This does not affect the color channels of the
transparent surface because the caller's BSDF model should have already taken into account if transmission modulates
reflection. This model doesn't handled colored transmission, so it averages the color channels. See
McGuire and Enderton, Colored Stochastic Shadow Maps, ACM I3D, February 2011
http://graphics.cs.williams.edu/papers/CSSM/
for a full explanation and derivation.*/
premultipliedReflect.a *= 1.0 - clamp((transmit.r + transmit.g + transmit.b) * (1.0 / 3.0), 0, 1);
/* You may need to adjust the w function if you have a very large or very small view volume; see the paper and
presentation slides at http://jcgt.org/published/0002/02/09/ */
// Intermediate terms to be cubed
float a = min(1.0, premultipliedReflect.a) * 8.0 + 0.01;
float b = -gl_FragCoord.z * 0.95 + 1.0;
/* If your scene has a lot of content very close to the far plane,
then include this line (one rsqrt instruction):
b /= sqrt(1e4 * abs(csZ)); */
float w = clamp(a * a * a * 1e8 * b * b * b, 1e-2, 3e2);
_accum = premultipliedReflect * w;
_revealage = premultipliedReflect.a;
}
void main() {
vec4 color;
float csZ;
...
writePixel(color, csZ);
}
</pre>
<br />
<h2>
2D Compositing Pass</h2>
<div>
The compositing pass can blend the result over the opaque surface frame buffer (as described here), or explicitly read both buffers and write the result to a third.</div>
<table border="1" style="font-size: 10px;">
<tbody>
<tr><td>Render Target</td><td>Src Blend</td><td>Dst Blend</td><td>Write ("Src")</td></tr>
<tr><td>screen</td><td>SRC_ALPHA</td><td>ONE_MINUS_SRC_ALPHA</td><td><code>(accum.rgb / max(accum.a, epsilon), 1 - revealage)</code></td></tr>
</tbody></table>
<br />
I use epsilon = 0.00001 to avoid overflow in the division. It is easy to notice if you're overflowing or underflowing the total 16-bit precision. You'll see either fully-saturated "8-bit" ANSI-style colors (red, green, blue, yellow, cyan, magenta, white), or black dots from floating point specials (Infinity, NaN). If the computation produces floating point specials, they will typically also expand into large black squares under any postprocessed bloom or depth of field filters.<br />
<br />
Sample GLSL shader code is below:<br />
<pre class="brush: c">#version 330
/* sum(rgb * a, a) */
uniform sampler2D accumTexture;
/* prod(1 - a) */
uniform sampler2D revealageTexture;
void main() {
int2 C = int2(gl_FragCoord.xy);
float revealage = texelFetch(revealageTexture, C, 0).r;
if (revealage == 1.0) {
// Save the blending and color texture fetch cost
discard;
}
float4 accum = texelFetch(accumTexture, C, 0);
// Suppress overflow
if (isinf(maxComponent(abs(accum)))) {
accum.rgb = float3(accum.a);
}</pre>
<pre class="brush: c"> float3 averageColor = accum.rgb / max(accum.a, 0.00001);
// dst' = (accum.rgb / accum.a) * (1 - revealage) + dst * revealage
gl_FragColor = float4(averageColor, 1.0 - revealage);
}
</pre>
<br />
<br />
<h2>
Examples</h2>
I integrated the implementation described in this article into the full open source <a href="http://g3d.sf.net/">G3D Innovation Engine</a> renderer (version 10.1). The specific files modified to implement the technique are:<br />
<br />
<ul>
<li><a href="https://sourceforge.net/p/g3d/code/5769/tree/G3D10/GLG3D.lib/source/DefaultRenderer.cpp">DefaultRenderer.cpp</a> (see DefaultRenderer::renderOrderIndependentBlendedSamples)</li>
<li><a href="https://sourceforge.net/p/g3d/code/5769/tree/G3D10/data-files/shader/DefaultRenderer/DefaultRenderer_compositeWeightedBlendedOIT.pix">DefaultRenderer_compositeWeightedBlendedOIT.pix</a></li>
</ul>
<br class="Apple-interchange-newline" />
[Nicolas Rougier also contributed a Python-OpenGL implementation with nice commenting and reference images as well. I'm hosting it at <a href="http://dept.cs.williams.edu/~morgan/code/python/python-oit.zip">http://dept.cs.williams.edu/~morgan/code/python/python-oit.zip</a>.]<br />
<div>
<br /></div>
All of the following images of the <a href="http://graphics.cs.williams.edu/data/meshes.xml#15">San Miguel</a> scene by Guillermo M. Leal Llaguno were rendered using G3D's implementation. To show how it integrates, these include a full screen-space and post-processing pipeline: <a href="http://graphics.cs.williams.edu/papers/SAOHPG12/">ambient occlusion</a>, <a href="http://graphics.cs.williams.edu/papers/MotionBlur13/">motion blur</a>, <a href="http://graphics.cs.williams.edu/papers/DepthOfFieldGPUPro2013/">depth of field</a>, FXAA, color grading, and bloom.
<br />
<br />
The inset images visualize the accum and revealage buffers. Note the combination of glass and partial coverage surfaces.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-TgJH7Nst7OI/VRRqOCHvDLI/AAAAAAAACbk/2r3-VznTzk4/s1600/2015-03-25_001_starter_r5750_g3d_r5750.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://1.bp.blogspot.com/-TgJH7Nst7OI/VRRqOCHvDLI/AAAAAAAACbk/2r3-VznTzk4/s1600/2015-03-25_001_starter_r5750_g3d_r5750.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-LHk23Ugfg9w/VRRqOGG178I/AAAAAAAACbo/HB23CNH78pk/s1600/2015-03-25_002_starter_r5750_g3d_r5750.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://3.bp.blogspot.com/-LHk23Ugfg9w/VRRqOGG178I/AAAAAAAACbo/HB23CNH78pk/s1600/2015-03-25_002_starter_r5750_g3d_r5750.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-xnrZ_FazYhI/VRRqON2ucPI/AAAAAAAACbs/ZlCTNaPx5yY/s1600/2015-03-25_003_starter_r5750_g3d_r5750.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://4.bp.blogspot.com/-xnrZ_FazYhI/VRRqON2ucPI/AAAAAAAACbs/ZlCTNaPx5yY/s1600/2015-03-25_003_starter_r5750_g3d_r5750.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-fywY3UF1nrM/VRRqOjoVe8I/AAAAAAAACb0/wv62j6ysB7E/s1600/2015-03-25_004_starter_r5750_g3d_r5750.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://3.bp.blogspot.com/-fywY3UF1nrM/VRRqOjoVe8I/AAAAAAAACb0/wv62j6ysB7E/s1600/2015-03-25_004_starter_r5750_g3d_r5750.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Here are examples on other kinds of content:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-cGXRm63kFhs/VRRoWQ-cy4I/AAAAAAAACbQ/lYwvlk8hcyo/s1600/2015-03-26_002_scratch-morgan_r5767_g3d_r5767.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://1.bp.blogspot.com/-cGXRm63kFhs/VRRoWQ-cy4I/AAAAAAAACbQ/lYwvlk8hcyo/s1600/2015-03-26_002_scratch-morgan_r5767_g3d_r5767.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-U1-9Xkht_xc/VRRNYqnK0XI/AAAAAAAACa8/DC2HrCR4LeU/s1600/2015-03-26_000_scratch-morgan_r5759_g3d_r5759.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://3.bp.blogspot.com/-U1-9Xkht_xc/VRRNYqnK0XI/AAAAAAAACa8/DC2HrCR4LeU/s1600/2015-03-26_000_scratch-morgan_r5759_g3d_r5759.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-LURUuK4qoBQ/VRRNYvRZ8ZI/AAAAAAAACa4/dYfcY-kf6Sg/s1600/2015-03-26_001_scratch-morgan_r5759_g3d_r5759.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://1.bp.blogspot.com/-LURUuK4qoBQ/VRRNYvRZ8ZI/AAAAAAAACa4/dYfcY-kf6Sg/s1600/2015-03-26_001_scratch-morgan_r5759_g3d_r5759.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-p1oHuj0YwaA/VXGHOL5DSFI/AAAAAAAAClI/GAD8RlW68Ig/s1600/2015-03-26_000_scratch-morgan_r5768_g3d_r5767.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="180" src="http://2.bp.blogspot.com/-p1oHuj0YwaA/VXGHOL5DSFI/AAAAAAAAClI/GAD8RlW68Ig/s320/2015-03-26_000_scratch-morgan_r5768_g3d_r5767.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Note that this reference image fixes a typo from the one in the I3D presentation:<br />
the alpha values are 0.75 (not 0.25 as originally reported!) and are given before computing the premultiplied values. So, the blue square is (0, 0, 0.75, 0.75) in pre-multiplied alpha and (0, 0, 1, 0.75) with unmultiplied color.<br />
I'm using a different weighting function from the I3D result as well.</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<hr />
<div>
<span style="font-size: small; font-weight: normal;"><img align="left" border="0" height="80" src="http://4.bp.blogspot.com/-LMn4nCC2GaY/UCFXCaAQ9mI/AAAAAAAAAcI/HaqwJDEq1xE/s200/mcguire.jpg" style="margin-right: 15px;" width="80" />
<i>Morgan McGuire (<a href="https://twitter.com/morgan3d">@morgan3d</a>) is a professor of Computer Science at <a href="http://cs.williams.edu/">Williams College</a>, a researcher at NVIDIA, and a professional game developer. His most recent games are <a href="http://rocketgolfing.com/">Rocket Golfing</a> and work on the Skylanders series. He is the author of the <a href="http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8">Graphics Codex</a>, an essential reference for computer graphics now available in iOS and Web Editions</i>.</span></div>
Morganhttp://www.blogger.com/profile/10895207997945851010noreply@blogger.com