A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 63KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>SimCities and SimCrises (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://molleindustria.org/GamesForCities/">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. SimCities and SimCrises (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://molleindustria.org/GamesForCities/">Source originale du contenu</a></h3>
  445. <div class="intro">
  446. <p>
  447. <em>
  448. This is the transcript of a keynote I gave at the first <a href="http://gamesforcities.com/challenges/conference/" target="_blank">International City Gaming Conference</a> in Rotterdam in 2017. The conference, mainly attended by city planners and architects, looked at how games can facilitate more effective and inclusive city-making. <br/>-Paolo
  449. </em>
  450. </p>
  451. </div>
  452. <article class="slide">
  453. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.002.png" />
  454. <div class="slide-annotations">
  455. <p>Today I want to start from SimCity because it’s the game that forced people to look into the issue of ideology and bias in games for the first time. It wasn’t a serious game but it was a game that begged to be taken seriously.</p>
  456. <p>The other reason is that there are many urban planners here and like it or not, SimCity is the most well known representation of your profession so you can’t quite ignore it. In fact many planners of this generation mention SimCity as their first introduction to the topic.</p>
  457. <p>The third reason is that I’m making a series of city games that are meant to be a counterpoint to SimCity.</p>
  458. </div>
  459. </article>
  460. <article class="slide">
  461. <video class="slide-image" src="http://molleindustria.org/GamesForCities/images/skylines.m4v" controls="controls" loop="" poster="images/poster-cities.png" muted autoplay></video>
  462. <div class="slide-annotations">
  463. <p>The paradigm of SimCity is still dominating most of city games.</p>
  464. <p>This is the popular Cities: Skylines, which is more sophisticated and moddable but it still retains many of the features and problems. Some features popularized by SimCity reappear in other games like god games, or management games as well.</p>
  465. </div>
  466. </article>
  467. <article class="slide">
  468. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.004.png" />
  469. <div class="slide-annotations">
  470. <p>Perhaps SimCity’s greatest impact is not to propose the city as a possible subject for a game but rather to establish the idea that complex social systems can be represented in a game or “simulated”. And by doing so it shifted the meaning of the word simulation</p>
  471. </div>
  472. </article>
  473. <article class="slide">
  474. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.005.png" />
  475. <div class="slide-annotations">
  476. <p>Now, SimCity is a series of games that has been going on for more than 25 years. There are some significant differences between the various editions but I’ll mostly talk about the common features, treating all the games as one body of work.</p>
  477. </div>
  478. </article>
  479. <article class="slide">
  480. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.006.png" />
  481. <div class="slide-annotations">
  482. <p>SimCity started as a level editor for a top down shooter. The designer, Will Wright, realized while making this game, that he enjoyed creating cities more than destroying them.</p>
  483. </div>
  484. </article>
  485. <article class="slide">
  486. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.007.png" />
  487. <div class="slide-annotations">
  488. <p>The original SimCity was released in 1989. And it was at the time very innovative: it was a sandbox, a software toy. There was no winning and losing condition. Because of that, it didn’t find a publisher for several years.</p>
  489. </div>
  490. </article>
  491. <article class="slide">
  492. <video class="slide-image" src="http://molleindustria.org/GamesForCities/images/simcity2000.m4v" controls="controls" loop="" poster="images/images.008.png" muted autoplay></video>
  493. <div class="slide-annotations">
  494. <p>This is the SimCity 2000 version from 1993 which introduced the isometric view. </p>
  495. <p>If you’ve never played SimCity, you have to know that the gameplay is not simply about placing buildings like in a lego set.</p>
  496. <p>You lay down infrastructures and facilities directly, but for everything else you can only designate certain areas to certain use. Zoning to residential, commercial, industrial and so on.</p>
  497. <p>After you zone the areas, the buildings may or may not develop, virtual citizens may or may not prosper.</p>
  498. <p>So it's a lot about observing and trying to understand the underlying dynamics. It's an emergent system in which a limited number of simple modules creates great complexity.</p>
  499. <p>Will Wright compared it to gardening because you have limited control over a living organism.However, it is not a game about gardening.</p>
  500. </div>
  501. </article>
  502. <article class="slide">
  503. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.009.png" />
  504. <div class="slide-annotations">
  505. <p>Over and over, the SimCity series invoked “realism” as a selling point. SimCity 2000’s box playfully warns: “If this game was any more realistic, it’d be illegal to turn it off!”</p>
  506. </div>
  507. </article>
  508. <article class="slide">
  509. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.010.png" />
  510. <div class="slide-annotations">
  511. <p>SimCity has been used and is being used as educational tool.</p>
  512. <p>Now, more than ever, is shaping the way a lot of people understand or misunderstand city planning.</p>
  513. <p>This is a recent initiative, a modified educational version.</p>
  514. </div>
  515. </article>
  516. <article class="slide">
  517. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.011.png" />
  518. <div class="slide-annotations">
  519. <p>The original SimCity is now open source and was included in the OLPC - One Laptop per Child (the cheap laptops created by the MIT for education in developing countries).</p>
  520. <p>We are literally shipping our ideas of cities to the third world.</p>
  521. <p>Because of this educational uses and because it claimed to be a simulation of a really existing system and not “just a game”, SimCity has been criticized from pretty much every angle.</p>
  522. </div>
  523. </article>
  524. <article class="slide">
  525. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.012.png" />
  526. <div class="slide-annotations">
  527. <p>For starters, SimCity games promise endless possibilities. “Build the city of your dreams”. But in reality you always end up with something that looks like Phoenix, Arizona.</p>
  528. <p>The only type of city you can create is the modernist, car centered, grid based, North American city (Although in some recent versions they tried to allow for non grid based plans).</p>
  529. <p>And it’s ideal modernist city. It’s car centered but there no need for parking. Parking is just not included in the models.</p>
  530. </div>
  531. </article>
  532. <article class="slide">
  533. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.013.png" />
  534. <div class="slide-annotations">
  535. <p>And it’s not just a matter of appearances. The underlying model is normative too.</p>
  536. <p>Once I tried to build the city of my dreams in SimCity 3000. It was based on the Situationist principles of Unitary Urbanism.</p>
  537. <p>The Situationist saw modern city planning as the organization of alienation. They criticized the dominance of cars and the separation of work spaces and leisure spaces.</p>
  538. <p>As you know, these are not even radical ideas anymore. Today concepts of livable and creative cities have been absorbed by the mainstream discourse around urbanism.</p>
  539. </div>
  540. </article>
  541. <article class="slide">
  542. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.014.png" />
  543. <div class="slide-annotations">
  544. <p>So in my virtual city I mixed work places and recreational places. I used a lot of one way streets to reduce traffic. I heavily invested in public transportation and green areas.</p>
  545. </div>
  546. </article>
  547. <article class="slide">
  548. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.015.png" />
  549. <div class="slide-annotations">
  550. <p>I used a lot of high density living and green spaces, and so forth.</p>
  551. <p>But my virtual citizens hated it. It was not a thriving city.</p>
  552. </div>
  553. </article>
  554. <article class="slide">
  555. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.016.png" />
  556. <div class="slide-annotations">
  557. <p>So I got annoyed and I created a dystopian city called Purgatoria. It was built on a hill like Dante’s Purgatory. And it was heavily stratified.</p>
  558. </div>
  559. </article>
  560. <article class="slide">
  561. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.017.png" />
  562. <div class="slide-annotations">
  563. <p>On the top you had rich people, services, and museums.</p>
  564. </div>
  565. </article>
  566. <article class="slide">
  567. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.018.png" />
  568. <div class="slide-annotations">
  569. <p>Going down you have upper middle class, and commercial zones</p>
  570. <p>the working class. And the slums at the very bottom, with all the heavy industries, landfills, and no services.</p>
  571. <p>The use of space wasn’t the most efficient, but I was surprised to see that the city worked better than the situationist one.</p>
  572. <p>The virtual citizens were not too dissatisfied.</p>
  573. </div>
  574. </article>
  575. <article class="slide">
  576. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.019.png" />
  577. <div class="slide-annotations">
  578. <p>This is a quote by the lead designer of the most recent SimCity which came out in 2013. He’s explaining the design choices they had to take when modeling crime.</p>
  579. <p>It is illuminating because he can see they are making statements about what causes crime, but he cannot conceive social mobility or redistribution of wealth.</p>
  580. <p>Class stratification is simply a constant beyond the player’s agency, as if cities did not have a role in the exacerbation or improvement of social inequality.</p>
  581. </div>
  582. </article>
  583. <article class="slide">
  584. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.020.png" />
  585. <div class="slide-annotations">
  586. <p>In SimCity race and class conflicts are sanitized.</p>
  587. <p>You’ll never see racial riots in SimCity. You will never see communities, o politics really, because it’s all about the built environment.</p>
  588. </div>
  589. </article>
  590. <article class="slide">
  591. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.021.png" />
  592. <div class="slide-annotations">
  593. <p>And for a game that focuses so much on North America that is a serious erasure. Because racial tensions were crucial for the development and the decline of North American cities. </p>
  594. <p>Racism and racially motivated riots resulting from a failed process of desegregation pushed white middle class families to leave inner cities and move to “safer” suburbs.</p>
  595. </div>
  596. </article>
  597. <article class="slide">
  598. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.022.png" />
  599. <div class="slide-annotations">
  600. <p>In the United States it’s referred as the White Flight.</p>
  601. <p>It created a vicious cycle of economy segregation: wealthy people and their tax money moved to the suburbs, while poverty and crime concentrated in the city centers.</p>
  602. <p>You will not see this crucial dynamic in a game of SimCity.</p>
  603. </div>
  604. </article>
  605. <article class="slide">
  606. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.023.png" />
  607. <div class="slide-annotations">
  608. <p>The relationship with the environment has always been another major point of contention in SimCity.</p>
  609. <p>This is the typical starting point for a new game. Nature is a blank slate ready to be taken over. Uninhabited and pre commodified.</p>
  610. <p>There’s no historical stratification, no indigenous civilization to take over.</p>
  611. </div>
  612. </article>
  613. <article class="slide">
  614. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.024.png" />
  615. <div class="slide-annotations">
  616. <p>It’s very common in games to have a territory that comes already partitioned in units of lands.</p>
  617. <p>This is Civilization, which also uses a grid system.</p>
  618. <p>Of course there are technical reasons to use grids in games. But still, they suggest a very rationalized commodified view of the natural environment.</p>
  619. </div>
  620. </article>
  621. <article class="slide">
  622. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.025.png" />
  623. <div class="slide-annotations">
  624. <p>And this brings me to the issue of growth.</p>
  625. <p>SimCity is considered a sandbox, it doesn’t have explicit goals. But it has all sorts of qualitative feedback that point to an implicit goal: expansion, which is usually linked to happiness and wealth.</p>
  626. <p>You can play in many different ways, you can destroy things by triggering disasters, you can try to fix existing scenarion. But the most rewarding way to play is to try to make a big, functional city starting from scratch.</p>
  627. <p>SimCity encourages endless growth without ever confronting the player with scarcity of resources.</p>
  628. </div>
  629. </article>
  630. <article class="slide">
  631. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.026.png" />
  632. <div class="slide-annotations">
  633. <p>In SimCity 2000 when the map is full you can build arcologies, which are futuristic cities within cities.</p>
  634. <p>And when you fill the map with them they simply take off to some other planet and you start over. </p>
  635. <p>It perpetually delays the question of the limits to growth.</p>
  636. </div>
  637. </article>
  638. <article class="slide">
  639. <video class="slide-image" src="http://molleindustria.org/GamesForCities/images/magnasanti.m4v" controls="controls" loop="" poster="images/images.027.png" muted autoplay></video>
  640. <div class="slide-annotations">
  641. <p>This is a documentation of Magnasanti, a city in SimCity created by Vincent Ocasla, an architecture student.</p>
  642. <p>Ocasla wanted to beat the game by creating the most populated city. He analyzed the game’s algorithm, optimized the distances between resources, transportation infrastructure, and the energy grid. Eventually he figured out a modular structure for maximum efficiency.</p>
  643. <p>He claimed it was a commentary on totalitarism. Magnasanti looks more like a dystopian city, built by robots. But to me it does something even more interesting.</p>
  644. <p>It surfaces the computational nature of the simulation. It presents SimCity for what it is, a complex cellular automaton.</p>
  645. <p>In doing so it reveals the most fundamental issue of the series, which they share with all videogames: in a mathematical simulation, everything is reduced to quantity, numbers, variables, equations.</p>
  646. </div>
  647. </article>
  648. <article class="slide">
  649. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.028.png" />
  650. <div class="slide-annotations">
  651. <p>Now, There is no videocamera for simulations. There is no machine that can mechanically captures behaviors in real life and outputs simulations.</p>
  652. <p>The process of modelization is intuitive, empirical and arbitrary. A simulation is a theory about the functioning of a certain thing.</p>
  653. <p>The thing can be a city, a human in love, or the collision of a rigid body.</p>
  654. </div>
  655. </article>
  656. <article class="slide">
  657. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.029.png" />
  658. <div class="slide-annotations">
  659. <p>In the case of scientific simulations, like the models we use to predict climate change, we are supposed to test them against actual data.</p>
  660. <p>But when we talk about simulation games we don’t really mean that. We should have a completely different word for simulation game, to avoid confusion.</p>
  661. <p>Maybe simulacra.</p>
  662. </div>
  663. </article>
  664. <article class="slide">
  665. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/systemdynamics.gif" />
  666. <div class="slide-annotations">
  667. <p>The “sim” in SimCity comes from the field of system dynamics</p>
  668. <p>Which is a major inspiration for Will Wright.</p>
  669. <p>System Dynamics was the Established by Jay Wright Forrester in the 50s.</p>
  670. <p>He postulated that we make decisions through mental models which are not accurate depictions of reality, but rather sets of assumptions based on our experience</p>
  671. <p>Computer simulations are mathematical, computational formalizations of these mental models. They are useful because we can run them to discover non-linear or counter-intuitive behaviors that may emerge when we compress time or scale up the computations.</p>
  672. </div>
  673. </article>
  674. <article class="slide">
  675. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.031.png" />
  676. <div class="slide-annotations">
  677. <p>Jay Forrester saw the design of simulations as an iterative process. Simulations are tools that you constantly test and tweak. Their results that can challenge your own assumptions </p>
  678. <p>But that’s not what happens when you play a simulation game. As a player you can change the inputs but not the internal relationships of the model (unless you have access to the source code, but even in that case it’s a challenge).</p>
  679. </div>
  680. </article>
  681. <article class="slide">
  682. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.032.png" />
  683. <div class="slide-annotations">
  684. <p>What you really do is trying to reverse engineer the model. Mostly by trial and error.</p>
  685. <p>You are trying to deduce the designers assumptions starting from your own assumptions.</p>
  686. <p>I think that’s the reason why the designers cannot afford to be too imaginative, or too counter intuitive. They rather try to align with the most common assumptions: if you add industries, you create jobs. If you add police stations you reduce crime.</p>
  687. <p>When players’ assumptions don’t match the designers’ assumptions the game may appear broken.</p>
  688. </div>
  689. </article>
  690. <article class="slide">
  691. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.033.png" />
  692. <div class="slide-annotations">
  693. <p>When the most recent SimCity came out many players were disturbed by homeless people hanging out in their cities.</p>
  694. <p>It was unclear how to solve that problem, and players thought it was a bug.</p>
  695. </div>
  696. </article>
  697. <article class="slide">
  698. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.034.png" />
  699. <div class="slide-annotations">
  700. <p>Matteo Bittanti, an artist and game critic, started to collect theories and conversations about homelessness in simCity happening in players’ forum online.</p>
  701. <p>He published them in a 600 pages book titled “How to get rid of homeless”. It’s a work of conceptual literature “about the unexpected convergence and collapse between reality and simulation.”</p>
  702. </div>
  703. </article>
  704. <article class="slide">
  705. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.035.png" />
  706. <div class="slide-annotations">
  707. <p>Not surprisingly these comments reveal racist and classist biases </p>
  708. <p>and turn into highly political debates. </p>
  709. <p>That’s exactly the kind of politicization that SimCity designers tried to avoid.</p>
  710. </div>
  711. </article>
  712. <article class="slide">
  713. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.036.png" />
  714. <div class="slide-annotations">
  715. <p>The other big inspiration for Will Wright was a short story by Polish Science Fiction writer Stanislaw Lem.</p>
  716. <p>That’s where the god-game component comes from.</p>
  717. <p>The short story is titled The Seventh Sally. It’s part of an epic called Cyberiad about the adventures of two supernatural engineers, godlike creators of worlds. </p>
  718. <p>One of them is called Trurl.</p>
  719. <p>That’s how the story goes:</p>
  720. <p>Trurl is traveling in space and finds a man living alone on an asteroid. The man is a king that has been overthrown and exiled by his own subjects. The despot asks Trurl to reinstate him as ruler but Trulrl finds a technological solution, a kind of hack. </p>
  721. <p>He creates a hyperrealistic simulation of a kingdom that fits in a box. So the fallen king can abuse these virtual citizens without hurting anyone.</p>
  722. </div>
  723. </article>
  724. <article class="slide">
  725. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.037.png" />
  726. <div class="slide-annotations">
  727. <p>It’s an interactive simulation that can be manipulated like a game.</p>
  728. <p>The story is a satire of totalitarianism. At the end we find out that the king has been overthrown and killed by his virtual citizens. The little civilization broke out of the box and colonized the entire asteroid.</p>
  729. <p>In SimCity you have this element of despotic control. You are all powerful and all seeing. We can say that SimCity is the first God Game.</p>
  730. </div>
  731. </article>
  732. <article class="slide">
  733. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.038.png" />
  734. <div class="slide-annotations">
  735. <p>Like the civilization in the box of the Seventh Sully, SimCity is not just about planning, you have to take policy decisions. For example how to tax your citizens.</p>
  736. <p>In all games of the series if your tax rate is around 12% or higher, citizens get upset. With 20% of taxes, wealthy citizens will simply leave regardless of the services you provide.</p>
  737. <p>Apparently some player manage to run cities with 0% taxes.</p>
  738. <p>This is a pretty clear libertarian bias. In many countries people tolerate high taxation if they feel like they get valuable services.</p>
  739. <p>However, some libertarian commentators saw this super powers as socialist propaganda. They feared that SimCity was teaching our children that cities need to be planned and managed by a central authority which is the player instead of letting the free market decide.</p>
  740. </div>
  741. </article>
  742. <article class="slide">
  743. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.039.png" />
  744. <div class="slide-annotations">
  745. <p>I personally don’t find the totalitarian aspect too problematic.</p>
  746. <p>To describe a city as a dynamic entity, as something you can and should be able to change, you need an exaggerated agency.</p>
  747. </div>
  748. </article>
  749. <article class="slide">
  750. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.040.png" />
  751. <div class="slide-annotations">
  752. <p>This is what a real city management software looks like.</p>
  753. <p>It’s basically a long spreadsheet of things to fix.</p>
  754. <p>A truly realistic city game would be a lot about maintenance. About up-keeping what’s already there. And it wouldn’t have very much to say about any city.</p>
  755. </div>
  756. </article>
  757. <article class="slide">
  758. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.041.png" />
  759. <div class="slide-annotations">
  760. <p>However the problem with these superpowers is that they take out of the equation other kind of powers that are shaping our urban environments.</p>
  761. <p>Cities are always a result of conflicts, conflicts between classes, groups, public and private interests. In particular, real estate developers and speculators have a major role in the evolutions of cities.</p>
  762. </div>
  763. </article>
  764. <article class="slide">
  765. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.042.png" />
  766. <div class="slide-annotations">
  767. <p>There are many architects here and there is a temptation to conceive urban planning as an extension of architecture.</p>
  768. <p>Thinking that designing a city is kinda like designing a big building, in a more or less participatory manner. It’s a modernist design lens and it's fine.</p>
  769. <p>But we can also see the built environment as a mere result of a long messy process we refer as Rotterdam or Paris. Cities are what remains of a living process.</p>
  770. </div>
  771. </article>
  772. <article class="slide">
  773. <video class="slide-image" src="http://molleindustria.org/GamesForCities/images/coral.m4v" controls="controls" loop="" poster="images/images.043.png" muted autoplay></video>
  774. <div class="slide-annotations">
  775. <p>Like coral. The Coral reef is not a structure or a mere collection of animals but a leftover, a sedimentation of generations of creatures.</p>
  776. <p>Creatures that are constantly engaging in a slow motion turf war. Displacing and eating each other (in the video these strings are digesting fluids attacking the neighbors).</p>
  777. <p>And if we want to do something with it, for example if we want to save the coral reef we have to understand it as ecosystem, and how it responds to the larger systems.</p>
  778. </div>
  779. </article>
  780. <article class="slide">
  781. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.044.png" />
  782. <div class="slide-annotations">
  783. <p>I believe what games bring to the table is not the cybernetic aspect of control and simulation but rather the preoccupation with conflict and with the transient, invisible flows that shape matter.</p>
  784. <p>From this standpoint, the built environment is more like the messy configuration of pieces you have at the end of a game of Settlers.</p>
  785. </div>
  786. </article>
  787. <article class="slide">
  788. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.045.png" />
  789. <div class="slide-annotations">
  790. <p>Luckily, these dialectical relationships within the city are being addressed by many educational and serious games.</p>
  791. <p>Like Block and Lots, that shows a conflict of interests between stakeholders, a puzzle that you can’t quite solve perfectly by making everybody happy.</p>
  792. <p>Or the conflicts are dramatized it via roleplay in multiplayer planning games.</p>
  793. </div>
  794. </article>
  795. <article class="slide">
  796. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.046.png" />
  797. <div class="slide-annotations">
  798. <p>And this is where I want to raise the issue of the opacity of rules. Because it’s crucial in the so called field of serious games.</p>
  799. <p>Back in ’97, influential game designer Chris Crawford evoked the specter of an Interactive Goebbels. </p>
  800. <p>Games don’t necessarily make things more clear. They may provide vivid representations of a system, they may provide a sense of agency of openness, but it’s just an aesthetic effect. </p>
  801. <p>The interactivity of a game should not be mistaken with the freedom to try things out and see what works. Games dealing with social issues always make some kind of argument, even if the designers don’t intend to persuade.</p>
  802. </div>
  803. </article>
  804. <article class="slide">
  805. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.047.png" />
  806. <div class="slide-annotations">
  807. <p>Serious games for city planning are often presented with a neutral technocratic language: “Let’s try to explain to common people the complexities of urban development. Let’s find out solutions to this problem”.</p>
  808. <p>But I swear, I can design you a game that subtly leads people to whatever “solution” you want.</p>
  809. </div>
  810. </article>
  811. <article class="slide">
  812. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.048.png" />
  813. <div class="slide-annotations">
  814. <p>You can easily falsify the data. You can easily create formal mathematical relationships that reinforce your your agenda.</p>
  815. <p>The more complex a simulation is, the more obfuscated is the data it is based on, the harder is to analyze it, fact check it, and criticize it.</p>
  816. </div>
  817. </article>
  818. <article class="slide">
  819. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.049.png" />
  820. <div class="slide-annotations">
  821. <p>So it becomes a matter of institutional trust. I may trust the city of Hamburg, or a university to make a sophisticate simulation about finding accommodation for refugees.</p>
  822. <p>But we can conceivably make a simulation that “demonstrates" that there is no room for refugees in Hamburg and use it to convince “non-expert stakeholder”.</p>
  823. </div>
  824. </article>
  825. <article class="slide">
  826. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.050.png" />
  827. <div class="slide-annotations">
  828. <p>And what happens when the exact same toolset is deployed in the neoliberal authoritarian dystopia of Singapore?</p>
  829. </div>
  830. </article>
  831. <article class="slide">
  832. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.051.png" />
  833. <div class="slide-annotations">
  834. <p>Or in the totalitarian dictatorship of Saudi Arabia?</p>
  835. <p>I do think city planning games can empower people. I believe they can be integrated in the democratic process.</p>
  836. <p>But we need to take precautions, we need to adopt strategies that address the problematic aspects of city games (and educational or serious games in general) I’ve been talking about.</p>
  837. <p>These are some of the principles and strategies I tend to use and encourage.</p>
  838. </div>
  839. </article>
  840. <article class="slide">
  841. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.052.png" />
  842. <div class="slide-annotations">
  843. <p>The overarching principle is to promote System and game literacy.</p>
  844. <p>If we don’t want people to be manipulated by interactive systems, by games and algorithms, we have to foster critical thinking about them.</p>
  845. <p>We have to encourage players to always question the designers’ systems and educate them to detect their biases and agendas, even our own.</p>
  846. </div>
  847. </article>
  848. <article class="slide">
  849. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.053.png" />
  850. <div class="slide-annotations">
  851. <p>We are already doing this with visual culture. We teach children at school how to unpack advertisements techniques.</p>
  852. <p>And after the recent US elections, mainstream journalists have been paying more attention at how social media algorithms shape news consumption for example.</p>
  853. </div>
  854. </article>
  855. <article class="slide">
  856. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.054.png" />
  857. <div class="slide-annotations">
  858. <p>But you don’t have to wait for schools and journalists. You can embed literacy in your games and processes as well.</p>
  859. <p>We can do so by borrowing and adapt strategies from counter-cinema and experimental theater.</p>
  860. <p>For instance, post-modern cinema, starting from Dziga Vertov and continuing with the French New Wave, sought to disrupt the immersion and emotional manipulation of Hollywood filmmaking.</p>
  861. <p>They challenged viewers by introducing elements that encouraged critical distance and revealed the machinery of cinema.</p>
  862. </div>
  863. </article>
  864. <article class="slide">
  865. <video class="slide-image" src="http://molleindustria.org/GamesForCities/images/mousetrap.m4v" controls="controls" loop="" poster="images/images.055.png" muted autoplay></video>
  866. <div class="slide-annotations">
  867. <p>This is to Build a Better Mousetrap. It’s not a particularly complex game but it tries to illustrate a complex issue, which is the tension between innovation and labor. And point to some contradictions and tipping points that may occur of contemporary capitalism.</p>
  868. <p>It’s a management game with breaking points and tensions you can’t solve harmonically.</p>
  869. <p>I also wanted it to be a transparent simulation: most of the variables are visible in a kind of synoptic way. And yet, there’s no tutorial or explanation. The player has to figure it out what the elements stand for, and not just work to optimize the supply chain.</p>
  870. </div>
  871. </article>
  872. <article class="slide">
  873. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.056.png" />
  874. <div class="slide-annotations">
  875. <p>Sometimes I use the term rhetorical scope to refer to the limits of a playable system. Everything is interconnected but you cannot put everything in a game.</p>
  876. <p>You define the rhetorical scope when in a simulation about public transportation you decide whether or not bike lanes or citizens’ income needs to be included.</p>
  877. </div>
  878. </article>
  879. <article class="slide">
  880. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.057.png" />
  881. <div class="slide-annotations">
  882. <p>Think about the World Game by Buckminster Fuller. It was a kind of a global logistics simulation about solving all the problems of the world. That’s a heck of a scope.</p>
  883. <p>I love the ambition and I like it as a thought experiment. This was during the cold war, with a world divided, when we were starting to frame ecological problems as global challenges.</p>
  884. </div>
  885. </article>
  886. <article class="slide">
  887. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.058.png" />
  888. <div class="slide-annotations">
  889. <p>It kind of embodies the very modernist idea that technology (computers, which barely existed at that point) and design science can help us transcend class, and ethnic struggles.</p>
  890. </div>
  891. </article>
  892. <article class="slide">
  893. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.059.png" />
  894. <div class="slide-annotations">
  895. <p>For a more interesting example of transparency a more modest rhetorical scope we can look back to the other most famous game about cities: Monopoly.</p>
  896. <p>Or better yet, the game that originated it. The inspiration for Monopoly was the Landlord’s game and it was one of the first “serious games”. It was an educational board game designed to make an argument *against* real estate monopolies.</p>
  897. <p>It was designed by an activist named Elizabeth Magie to promote a certain type of taxation.</p>
  898. </div>
  899. </article>
  900. <article class="slide">
  901. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.060.png" />
  902. <div class="slide-annotations">
  903. <p>You probably know the story. The Landlord’s game gets ripped off and simplified and turned into Monopoly, which is a game celebrating and normalizing greed, in which players have to identify with the landlord class.</p>
  904. <p>It’s a compelling story. But I think the most interesting part of the original version is that the game had two sets of rules: the monopolist (similar to the one we know) and the anti-monopolist one.</p>
  905. <p>In the early twentieth century, Elizabeth Magie had not only the intuition to use a game to foster system thinking but also understood the limits of a single ruleset to represent an alternative to the status quo.</p>
  906. <p>She obviously made the argument that one set of rule was more preferable than the other, but at the same time it relativized rules themselves, preventing players from thinking that that’s just the way real estate worked.</p>
  907. </div>
  908. </article>
  909. <article class="slide">
  910. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.061.png" />
  911. <div class="slide-annotations">
  912. <p>Another principle is abstraction. Don’t try to convince players that a game is a simulation of a particular city in the scientific sense. Even if it’s based on actual data. That’s not enough.</p>
  913. </div>
  914. </article>
  915. <article class="slide">
  916. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.062.png" />
  917. <div class="slide-annotations">
  918. <p>Extract general patterns and let players compare them with their mental models. Let the players apply them to their own experiences and contexts.</p>
  919. </div>
  920. </article>
  921. <article class="slide">
  922. <video class="slide-image" src="http://molleindustria.org/GamesForCities/images/novaalea.m4v" controls="controls" loop="" poster="images/images.063.png" muted autoplay></video>
  923. <div class="slide-annotations">
  924. <p>This is Nova Alea, it’s the first of a series of games I’m making</p>
  925. <p>that try to be an alternative to the simCity paradigm.</p>
  926. <p>It’s an Abstract game not only in the visual style but also in the narrative. It isolates very specific dynamics, speculation and gentrification. </p>
  927. <p>It shows the city from the eye of real estate speculator. It’s devoid of life, it’s a basically a diagram.</p>
  928. <p>Your goal is to make money by buying buildings when they are cheap and resell them when they accrued value. After a certain limit the bubble bursts and buildings lose value. You don’t want to sell before that happen.</p>
  929. <p>It’s a simple mechanic but that’s the basic the logic that is transforming many cities today.</p>
  930. </div>
  931. </article>
  932. <article class="slide">
  933. <video class="slide-image" src="http://molleindustria.org/GamesForCities/images/novaalea2.m4v" controls="controls" loop="" poster="images/images.064.png" muted autoplay></video>
  934. <div class="slide-annotations">
  935. <p>Cities result from conflicts, conflicts are not always “solvable”.</p>
  936. <p>In Nova Alea you face resistance from below. Citizens try to impose rent control measures, create public housing that can’t be bought or sold, introduce anti-speculation measures.</p>
  937. <p>The game can have different outcome based on who gets the upper hand in this asymmetrical conflict.</p>
  938. </div>
  939. </article>
  940. <article class="slide">
  941. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.065.png" />
  942. <div class="slide-annotations">
  943. <p>I came to the conclusion that there is a greater liberation potential in designing games rather than playing games.</p>
  944. <p>I argue that next step of games for impact doesn't lie </p>
  945. <p>in some technological advancement but in helping people to engage with the practice of game design.</p>
  946. <p>I’m not talking about learning to code. I’m talking about the conceptual tools of game design. </p>
  947. <p>The skills and the knowledge to make games is still confined in elite institutions, but this is what we scholars and practitioners can share.</p>
  948. </div>
  949. </article>
  950. <article class="slide">
  951. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.066.png" />
  952. <div class="slide-annotations">
  953. <p>By designing games you acquire the tools to demystify all games, to play critically.</p>
  954. <p>You can easily spot the manipulative mechanics that many social and free-to-play games are based upon.</p>
  955. </div>
  956. </article>
  957. <article class="slide">
  958. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.067.png" />
  959. <div class="slide-annotations">
  960. <p>Zack Gage once said: every child is a game designer. Now more than ever we are seeing tool that facilitate game creation. </p>
  961. <p>If there are no tools that work for you purpose, you can make your own.</p>
  962. </div>
  963. </article>
  964. <article class="slide">
  965. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.068.png" />
  966. <div class="slide-annotations">
  967. <p>This is a picture from a workshop I gave at an activist conference in Detroit a few years ago.</p>
  968. <p>I designed a simple city planning board game called Multiplicity that uses the Carcassonne-like tile system.</p>
  969. </div>
  970. </article>
  971. <article class="slide">
  972. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.069.png" />
  973. <div class="slide-annotations">
  974. <p>It’s asymmetrical and players have different roles representing different stakeholders with conflicting agendas.</p>
  975. </div>
  976. </article>
  977. <article class="slide">
  978. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.070.png" />
  979. <div class="slide-annotations">
  980. <p>The ruleset was simple enough that in a session players could discuss the limits of the system and create their own mods modifications like adding events and tiles.</p>
  981. <p>I was encouraging them to not only represent urban development dynamics they are familiar with but also add more futuristic and utopian elements.</p>
  982. </div>
  983. </article>
  984. <article class="slide">
  985. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.071.png" />
  986. <div class="slide-annotations">
  987. <p>This takes me to the next point. Which is community involvement.</p>
  988. <p>The idea of Games of the Oppressed was proposed in the early 2000 by game scholar Gonzalo Frasca.</p>
  989. </div>
  990. </article>
  991. <article class="slide">
  992. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.072.png" />
  993. <div class="slide-annotations">
  994. <p>It is based on the Pedagogy of the oppressed by Paulo Freire.</p>
  995. <p>I want to highlight this central tenet: the oppressed must be their own example in the struggle for their redemption.</p>
  996. <p>Of course almost everybody is oppressed in some way, but we have to recognize that not everybody is oppressed in the same way.</p>
  997. </div>
  998. </article>
  999. <article class="slide">
  1000. <video class="slide-image" src="http://molleindustria.org/GamesForCities/images/pittsburgh.m4v" controls="controls" loop="" poster="images/images.073.png" muted autoplay></video>
  1001. <div class="slide-annotations">
  1002. <p>Consider I’ve been living in the United States for 10 years, and there the violence of gentrification is very apparent.</p>
  1003. <p>This video shows a ceremony that happened years a few blocks from where I live. The then-mayor of Pittsburgh is using a giant slingshot to throw paint against a high rise block before the demolition.</p>
  1004. <p>That tower is where prominently black and low income people have been first concentrated (starting from a process known as redlining) and then evicted as soon as the area became attractive again for investors. </p>
  1005. <p>According to the residents the ceremony was traumatic and humiliating. Now that neighborhood is being taken over by oyster bars and luxury condos. The historical resident are forced to move in more peripheral, and less serviced areas.</p>
  1006. <p>Urban development along neoliberal lines is de facto a new segregation in America.</p>
  1007. </div>
  1008. </article>
  1009. <article class="slide">
  1010. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.074.png" />
  1011. <div class="slide-annotations">
  1012. <p>I think it is crucial to involve those who are at the receiving end of this violence, not only in the play part but also in the design of these games.</p>
  1013. <p>This one, The Bay Area Regional Planner, is an interesting example because it’s created within the community of San Francisco renters. </p>
  1014. <p>Regardless of the end result, designing games is a great way to think deeply and systematically about a problem.</p>
  1015. </div>
  1016. </article>
  1017. <article class="slide">
  1018. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.075.png" />
  1019. <div class="slide-annotations">
  1020. <p>Play happens in the space between freedom and constraints</p>
  1021. <p>agency and rules.</p>
  1022. <p>Because of this, it can be used to dramatize the dilemmas of a politician, a planner, a mayor, who all have some power but not unlimited power.</p>
  1023. <p>But this interplay doesn’t have to translate in systems that merely describe the existing reality.</p>
  1024. </div>
  1025. </article>
  1026. <article class="slide">
  1027. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.076.png" />
  1028. <div class="slide-annotations">
  1029. <p>So the question is how can we use games to activate radical imagination, to open up possibilities.</p>
  1030. <p>Utopias are useful because they point to a direction. We need to dream something before starting to develop it.</p>
  1031. <p>The problem with most utopian thinking is the idea of tabula rasa, the blank slate. In order to design a perfect society, you have to start from zero. That’s the also utopianism of SimCity.</p>
  1032. </div>
  1033. </article>
  1034. <article class="slide">
  1035. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.077.png" />
  1036. <div class="slide-annotations">
  1037. <p>Utopia is always presented as a withdrawal from the mess of history and society, like the city of Rapture in the game Bioshock. Rapture a libertarian paradise at the bottom of sea, inspired by Ayn Rand’s Atlas Shrugged. A story in which rich people just build a new society for themselves.</p>
  1038. </div>
  1039. </article>
  1040. <article class="slide">
  1041. <video class="slide-image" src="http://molleindustria.org/GamesForCities/images/songdo.m4v" controls="controls" loop="" poster="images/images.078.png" muted autoplay></video>
  1042. <div class="slide-annotations">
  1043. <p>And it’s not too different from certain capitalist utopias like the district of Songdo, in South Korea. </p>
  1044. <p>It’s the most popular example of smart city. A kind of real-life SimCity. Songdo is being built from scratch by and for the global elite.</p>
  1045. <p>The city is entirely private. In fact it’s the largest private development in history. A couple of companies own all the buildings and the facilities. They also own the data you produce and control the city's operating system.</p>
  1046. <p>And of course, the problem of property translates to a problem of access and justice. Who gets to benefit from this efficient, rational, livable settlement.</p>
  1047. <p>Utopia is already here, it’s just not evenly distributed.</p>
  1048. </div>
  1049. </article>
  1050. <article class="slide">
  1051. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.079.png" />
  1052. <div class="slide-annotations">
  1053. <p>But Utopias don’t have to be complete blueprints to be imposed top down. I think we can detach this idea of blank slate from the idea of utopia. </p>
  1054. <p>We can imagine Utopias that are procedural, open ended, participative. And maybe use fantasy and science fiction to transcend the limits of capitalist realism manifesting itself so clearly in games like SimCity.</p>
  1055. <p>The series of city games I’m making I’m taking a more magical realist approach (or Magical Marxist).</p>
  1056. </div>
  1057. </article>
  1058. <article class="slide">
  1059. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.080.png" />
  1060. <div class="slide-annotations">
  1061. <p>One of the main inspirations is Italo Calvino’s Invisible Cities. It’s a collection of short story describing imaginary, impossible cities. Cities as concepts, as states of mind. Like the city of Octavia:
  1062. </p>
  1063. <audio controls>
  1064. <source src="http://molleindustria.org/GamesForCities/images/octavia.m4a" type="audio/mpeg">
  1065. </audio>
  1066. </div>
  1067. </article>
  1068. <article class="slide">
  1069. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.081.png" />
  1070. <div class="slide-annotations">
  1071. <p>Some Invisible Cities are much more abstract. Like this one named Isidora:
  1072. <audio controls>
  1073. <source src="http://molleindustria.org/GamesForCities/images/isidora.m4a" type="audio/mpeg">
  1074. </audio>
  1075. </p>
  1076. </div>
  1077. </article>
  1078. <article class="slide">
  1079. <img class="slide-image" src="http://molleindustria.org/GamesForCities/images/images.082.png" />
  1080. <div class="slide-annotations">
  1081. <p>In conclusion, I’ve been trying for years to imagine an alternative SimCity.</p>
  1082. <p>And I realized that the biggest fallacy of a City simulator is to try to present itself as an all-encompassing system, supposedly capable of describing many possible cities.</p>
  1083. <p>I believe that in order to move away from the SimCity paradigm we need many different city simulations, each one limiting its scope to certain dynamics, certain contexts.</p>
  1084. <p>Each one declaring its intent, its embedded values.</p>
  1085. <p>Each one incorporating localized knowledge, wisdom coming from the street level.</p>
  1086. <p>What we should make are not games that explain how cities work. But rather games we can use to think about our cities, past, present and future.</p>
  1087. </div>
  1088. </article>
  1089. <p class="credits"><a href="http://www.molleindustria.org">Molleindustria</a> 2017. Page created with <a href="https://www.keynote-extractor.com">Keynote Extractor</a>.</p>
  1090. </article>
  1091. </section>
  1092. <nav id="jumpto">
  1093. <p>
  1094. <a href="/david/blog/">Accueil du blog</a> |
  1095. <a href="http://molleindustria.org/GamesForCities/">Source originale</a> |
  1096. <a href="/david/stream/2019/">Accueil du flux</a>
  1097. </p>
  1098. </nav>
  1099. <footer>
  1100. <div>
  1101. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  1102. <p>
  1103. Bonjour/Hi!
  1104. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  1105. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  1106. </p>
  1107. <p>
  1108. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  1109. </p>
  1110. <p>
  1111. Voici quelques articles choisis :
  1112. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  1113. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  1114. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  1115. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  1116. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  1117. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  1118. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  1119. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  1120. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  1121. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  1122. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  1123. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  1124. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  1125. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  1126. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  1127. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  1128. </p>
  1129. <p>
  1130. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  1131. </p>
  1132. <p>
  1133. Je ne traque pas ta navigation mais mon
  1134. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  1135. conserve des logs d’accès.
  1136. </p>
  1137. </div>
  1138. </footer>
  1139. <script type="text/javascript">
  1140. ;(_ => {
  1141. const jumper = document.getElementById('jumper')
  1142. jumper.addEventListener('click', e => {
  1143. e.preventDefault()
  1144. const anchor = e.target.getAttribute('href')
  1145. const targetEl = document.getElementById(anchor.substring(1))
  1146. targetEl.scrollIntoView({behavior: 'smooth'})
  1147. })
  1148. })()
  1149. </script>