{"id":3231,"date":"2009-05-04T08:00:52","date_gmt":"2009-05-04T12:00:52","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=3231"},"modified":"2010-10-24T08:05:56","modified_gmt":"2010-10-24T13:05:56","slug":"procedural-city-part-12-finishing-touches","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=3231","title":{"rendered":"Procedural City, Part 12: Finishing Touches"},"content":{"rendered":"

You’ve most likely witnessed the thing in action already<\/a>, but I thought I’d go over the final steps. <\/p>\n

Building Logos<\/span><\/p>\n

pixelcity_logos.jpg<\/td><\/tr><\/table>Building logos are fairly simple, although they make the project a little less portable. The program generates 16 random names and draws them into a single texture. Individual buildings then grab one of the sections of the texture to use as its logo, which is then colored semi-randomly. Each name is drawn in a random Windows-specific font. The selection and use of fonts will probably be one of those things which is annoying to port, assuming anyone does so.<\/p>\n\n\n\n
Prefix<\/th>\nBusiness<\/th>\nSuffix<\/th>\n<\/tr>\n
\n
i \r\nGreen \r\nMega\r\nSuper\r\nOmni\r\ne\r\nHyper\r\nGlobal \r\nVital \r\nNext \r\nPacific \r\nMetro\r\nUnity \r\nG-\r\nTrans\r\nInfinity  \r\nSuperior \r\nMonolith \r\nBest \r\nAtlantic \r\nFirst \r\nUnion \r\nNational \r\n<\/small><\/pre>\n<\/td>\n
\n
Biotic\r\nInfo\r\nData\r\nSolar\r\nAerospace\r\nMotors\r\nNano\r\nOnline\r\nCircuits\r\nEnergy\r\nMed\r\nRobotic\r\nExports\r\nSecurity\r\nSystems\r\nFinancial\r\nIndustrial\r\nMedia\r\nMaterials\r\nFoods\r\nNetworks\r\nShipping\r\nTools\r\nMedical\r\nPublishing\r\nEnterprises\r\nAudio\r\nHealth\r\nBank\r\nImports\r\nApparel\r\nPetroleum \r\nStudios<\/small><\/pre>\n<\/td>\n
\n
Corp\r\n Inc.\r\nCo\r\nWorld\r\n.Com\r\n USA\r\n Ltd.\r\nNet\r\n Tech\r\n Labs\r\n Mfg.\r\n UK\r\n Unlimited\r\n One\r\n<\/small><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n
The names themselves are generated by combining elements from the three lists to the right.  The first column is for descriptive self-aggrandizing that companies like to give themselves.  The second is generally the name of a good or service that a boring conventional company might use in its own name.  And the third column is for for the dry descriptive that generally follow the name of a business. Pixel City generates business names by taking a random entry from the center column and pairing it with either a prefix or<\/em> a suffix, but never both.  So you might end up with “Vital Imports” or “Imports Tech”, but never “Vital Imports Tech”.  Using all three works in some cases, but looks ungainly in  others.  It also gets hard to make sure it all fits on the texture.  A bad roll could bring the three longest entries together and make something verbose like, “Monolith Enterprises Unlimited”.  Which doesn’t sound nice and won’t fit on the texture.  (The system I’m using to draw characters is pretty primitive and doesn’t have the ability to predict how long something is going to be before it gets drawn.)<\/p>\n
Obviously not all names make perfect sense. (iPetroleum? Really? Are you drilling for oil on the internet?) But most names are plausible enough and have a respectable level of variety.  It can make 1,221 unique names right now, and every once in a while I think of another entry to make it even more diverse.  Note that some prefixes have spaces after them and some don’t, so you’ll end up with “iMedia” in one case but “Pacific Media” in another. <\/p>\n
Streetlights<\/span><\/p>\n
I’m still not happy with how the street-level lighting came out.  If this was a Game Developer Magazine Postmortem<\/a>, then we’d be explaining how this feature put us a year over budget.  I spent more than a few hours writing different systems, tweaking them for a few more hours, and then deleting them to try something else.  The problem here is that my initial idea of simple dots for lights didn’t look anywhere nearly as good as I’d hoped, and I lost a lot of time searching for another solution.  In the end I came back to my original idea and just decided to live with it.  Many people looked at the screenshots and suggested the lights be bigger \/ smaller \/ higher \/ lower\/ closer together \/ further apart, but these problems are just emergent results of the underlying problem that light simply doesn’t behave the way the program depicts, and the break in fidelity attracts the eye and draws attention to the weakest part of the scene.  Changing the lights by making them (say) higher would simply change the problem being reported by your eyes.  “Oh, now it’s too small…  Now it looks too bright… Now they look too far apart… Now they look too far off the ground… etc.<\/em>”  <\/p>\n
It will be interesting to see what other solutions people come up with once the source is released. Perhaps someone will find the silver bullet solution that eluded me. <\/p>\n
Roof lights and radio towers<\/span><\/p>\n
Image lightened in Paint Shop in order to make the towers more visible against the sky.<\/td><\/tr>
Image lightened in Paint Shop in order to make the towers more visible against the sky.<\/td><\/tr><\/table>I decided early on that making elaborate illuminated stonework caps for buildings was out of the question, but feedback was telling me the dark rooftops just weren’t cutting it.  I eventually settled on adding some non-illuminating light fixtures to the caps of tall buildings, which added variety without complexity and without needing fancy stonework.<\/p>\n
The radio towers are a simple 4-triangle spike with a lattice texture applied.  A blinky light is added to the tip.  I have a blinkentower on almost every tall building, and I still get complaints from people to the effect of  “you should have some towers on the tops of those buildings”.  I think they’re just too hard to make out in the low-res screenshots and YouTube video.  Spotting a few black lines against an almost-black background amidst a sea of compression artifacts is no easy task, but I think that when viewed full-screen they’ll look good enough.  <\/p>\n
Screensaver Behavior<\/span><\/p>\n
When invoked, the program generates a city (unlike in the demo video<\/a>, this is done behind a loading screen) and then the camera flies around it for a few minutes.  There are a few keys that change the program behavior.  There is a key to toggle wireframe, another to cycle through the special effects, from bloom to the “glass city” effect shown earlier. F1 shows the full list of keys.  Pressing any other key just exits the program, as screensavers do.  After a couple of minutes the scene fades out and another city is generated. Rinse, repeat. <\/p>\n
Tomorrow: The source and the Windows Screensaver will be released. <\/p>\n","protected":false},"excerpt":{"rendered":"
You’ve most likely witnessed the thing in action already, but I thought I’d go over the final steps. Building Logos Building logos are fairly simple, although they make the project a little less portable. The program generates 16 random names and draws them into a single texture. Individual buildings then grab one of the sections […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66,10],"tags":[],"class_list":["post-3231","post","type-post","status-publish","format-standard","hentry","category-programming","category-projects"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/3231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3231"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/3231\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}