{"id":20649,"date":"2013-08-19T01:54:17","date_gmt":"2013-08-19T06:54:17","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=20649"},"modified":"2015-07-01T03:43:02","modified_gmt":"2015-07-01T08:43:02","slug":"project-good-robot-part-2-welcome-to-2d","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=20649","title":{"rendered":"Project Good Robot 2: Welcome to 2D"},"content":{"rendered":"<p>So now we&#8217;re working in 2 dimensions. The advantage is that 2D development is a lot easier than 3D. The disadvantage is that I don&#8217;t have the right tools for the job.<\/p>\n<p>If you&#8217;re making a game or some other kind of 3D-rendering type stuff, then you need some basic variables and tools. The first thing you&#8217;ll want is some sort of geometric vector. Like, if you&#8217;re going to be using x, y, and z values then you probably want some way to bundle them together. With a proper vector toolset we can have this bit of code:<\/p>\n<p><!--more--><\/p>\n<pre lang=\"c\">\r\n\/\/Get the distance between two points in 3D space\r\nfloat GetDistance (SomeVector start, SomeVector end)\r\n{\r\n  SomeVector difference;\r\n\r\n  difference = end - start;\r\n  return difference.Length ();\r\n}\r\n<\/pre>\n<p>Without a nice suite of vector tools, the same code might look like this:<\/p>\n<pre lang=\"c\">\r\n\/\/Get the distance between two points in 3D space\r\nfloat GetDistance (float start_x, float start_y, float start_z, \r\n                   float end_x, float end_y, float end_z)\r\n{\r\n  float   diff_x, diff_y, diff_z;\r\n  float   distance;\r\n\r\n  diff_x = end_x - start_x;\r\n  diff_y = end_y - start_y;\r\n  diff_z = end_z - start_z;\r\n  return sqrt (diff_x * diff_x + diff_y * diff_y + diff_z * diff_z);\r\n}\r\n<\/pre>\n<p>This is a simple example, but hopefully even a non-coder can see that the second example is just a bit more verbose and cluttered. This problem is exacerbated once you really get into the tricky stuff. A good set of vector tools will turn half a page of dense math into a couple of lines of descriptive code. Now, C and C++ don&#8217;t come with their own vector variables, so you have to make them yourself. (Well, okay, it does have <a href=\"http:\/\/www.cplusplus.com\/reference\/vector\/vector\/\">vectors<\/a>, but they&#8217;re nothing to do with geometry.) If you use a third-party game or graphics engine, they always come with their own vector variables. <\/p>\n<p>The thing is, my 3D dimensional vectors are really well developed. You can add &#8217;em, multiply &#8217;em, put &#8217;em in a stew. Get the dot product between two of them, find the length of another, and reflect them off each other. By contrast, my 2D tools barely exist. <\/p>\n<p>For the first hour or so I keep running into situations where I try to add a couple of vectors and have the compiler chide me because I didn&#8217;t write any code for adding 2D vectors. So I stop what I&#8217;m doing and put that in. Then five minutes later I run into the same thing for multiplying 2D vectors. Then again for multiplying a 2D vector by a single value. And so on. There are a lot of permutations in the number of ways you can combine vectors, so I get a lot of these little interruptions until I suck it up and just write all of them. <\/p>\n<p>Okay, done. Now I guess we can start making something.<\/p>\n<p>Usually in the programming projects I&#8217;m reluctant to talk about gameplay or influences. I don&#8217;t want to answer a bunch of questions about things I haven&#8217;t even designed yet. <em>Is there a limit to how many dots this Pac guy can eat? Can he shoot the ghosts? Does the player have to be yellow, or can we configure our color? Can I play as a girl? Will there be DLC hats? Will there be a power pellet that lets you bash through walls? Shouldn&#8217;t the ghosts stop chasing the player and try to steal the fruit? Will we get a sprint button for getting out of tight situations? <\/em> Eventually you end up with other people trying to design your game through the art of passive-aggressive suggestions. <\/p>\n<p>But I&#8217;m doing this project to work on gameplay, so we might as well talk about gameplay.  With that in mind, here are the influences I&#8217;m drawing from, from the minor to the major:<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/gr2_itsp.jpg' class='insetimage'   alt='Insanely Twisted Shadow Planet.' title='Insanely Twisted Shadow Planet.'\/><\/td><\/tr><\/table><\/p>\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=975Zw8BJ3Vg\">Insanely Twisted Shadow Planet<\/a>. (Which I think was a gift from <a href=\"http:\/\/bluescreenofawesome.com\/\">Jarenth<\/a>, in my case. Thanks Jarenth!) We could also say Limbo and maybe some level of World of Goo. The silhouette style rendering is something a talented artist can use to set a mood and create striking visuals. It&#8217;s <em>also<\/em> a tool that crap artists can use to mask their crappyness.  I know I&#8217;m a crap artist. As with <a href=\"http:\/\/www.youtube.com\/watch?v=-d2-PtK4F6Y\">Pixel City<\/a>, I&#8217;m hoping that covering the world in darkness will hide my artistic sins. <\/p>\n<p>If that doesn&#8217;t work, then I suppose I&#8217;m doomed, because I don&#8217;t have much of a plan B. But we&#8217;ll try the silhouette thing and see how it goes.<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/gr2_ultratron.jpg' class='insetimage'   alt='Ultratron.' title='Ultratron.'\/><\/td><\/tr><\/table><\/p>\n<p>Second influence is <a href=\"http:\/\/www.puppygames.net\/ultratron\/\">Ultratron from Puppygames<\/a>. I played a lot of this game a couple of weeks ago and I found it deeply satisfying. The player is very strong, but enemies threaten to overwhelm you with sheer numbers by attacking from every side. My only gripe with the game was that it was a little boring being stuck on the same screen the whole time.  Which brings me to my major influence:<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/gr2_descent.jpg' class='insetimage'   alt='Descent.' title='Descent.'\/><\/td><\/tr><\/table><\/p>\n<p>Descent. <em>Yes.<\/em> All these years later and I still appreciate this game on a really fundamental level. You fly through tunnels, blasting many different types of robots while an electronic soundtrack thumps along in the background. <\/p>\n<p>So that&#8217;s our core concept: 2D Descent, blasting robots in a weightless craft while flying through tunnels that are done mostly in silhouette. Whatever isn&#8217;t black should be glowing, bright, and colorful. <\/p>\n<p>The other major component to the game is the leveling, which I&#8217;ll talk about later because that needs a post of its own. <\/p>\n<p>But I&#8217;m getting ahead of myself. Before we can do any of that, we need something to look at.<\/p>\n<p>For scenery, I combine some simple <a href=\"?p=15777\">value noise<\/a> and use it to generate patterns of solid \/ open space. To fill it in, I use <a href=\"?p=15945\">marching squares<\/a>.  <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/gr2_map1.jpg' class='insetimage'   alt='gr2_map1.jpg' title='gr2_map1.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>None of this is part of my game design. I&#8217;m not going to have random lumpy rooms made out of blue glowstick. But I want to work on gameplay and so I need some kind of environment to fly around in.<\/p>\n<p>I want the game to encourage fast &#038; flowing gameplay. I want it to be fun to zip through tunnels and bank around corners. Having perfect control can feel kind of mechanical and boring. A big part of feeling connected to your character is feeling the &#8220;weight&#8221; of controlling them. It might be that little half-step Mario spends coasting to a stop, or the way the Decent craft drifts slightly when you let off the controls. It&#8217;s not much, but it&#8217;s there. Too little, and the craft will feel like a mouse pointer or a cursor. To much and it will feel like you&#8217;re piloting a barge.<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/gr2_map2.jpg' class='insetimage'   alt='gr2_map2.jpg' title='gr2_map2.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>And now I realize the problem with writing this series: You can&#8217;t see motion in these screenshots. And since this is a fast-moving 2D game, a lot of my work is going to be based on moving stuff around the screen. Maybe I&#8217;ll have to post videos at some point.  <\/p>\n<p>But not yet. I&#8217;m not going to upload YouTube videos of the project in this state.  It&#8217;s like posting pictures of the costume you&#8217;re making and including images from the 15 minutes you spent looking for the scissors. <\/p>\n<p>And now I come to the first question: What do we do with the camera? I know how to place chase cameras, over-the-shoulder cameras, overhead cameras, and first-person cameras. But I&#8217;ve never placed a camera in a scene like this. It&#8217;s one of those little problems that I didn&#8217;t even consider, but which turns out to be central to the experience.  <\/p>\n<p>The obvious thing to do is to just lock the camera to the player&#8217;s avatar. And that works. But there&#8217;s something about this that muffles the feeling of motion. I don&#8217;t know. <a href=\"http:\/\/minmax-games.com\/SpacePiratesAndZombies\/\">Space Pirates and Zombies<\/a> used a locked camera like this, where your ship was always perfectly centered on-screen. It&#8217;s not horrible, but it lacks weight.<\/p>\n<p>I much prefer a game where the camera chases after you. When you accelerate, you move away from the center of the screen and when you slow down the camera overtakes you. It lets you &#8220;feel&#8221; the weight of movement in a way you don&#8217;t get when you&#8217;re fixed in the middle of the screen and the walls scroll by. <\/p>\n<p>But how far away can the camera get? I know I&#8217;ve played games where moving really fast will put you near the edge of the screen.  That gives you the feeling of &#8220;Wow! I&#8217;m going so fast I don&#8217;t have time to react to things as they appear!&#8221; It also gives you the feeling that the game designer is punishing you for going fast. I don&#8217;t want that. <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/gr2_camera.jpg' class='insetimage'   alt='gr2_camera.jpg' title='gr2_camera.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>I fire up <a href=\"?p=20402\">Bleed<\/a> and fiddle around for a bit. The camera in this game feels about right for my purposes. When I run I feel like I&#8217;m going fast, but I don&#8217;t feel like the camera is trying to kill me. It seems like the middle 50% of the screen is the critical zone. The game can let the player appear anywhere inside this area of the screen, but as soon as they get more than halfway to the edge of the display, it begins to feel like the game is saying, &#8220;Slow down, or you&#8217;ll be sorry!&#8221;<\/p>\n<p>So I set the camera to chase you around, moving faster the further you get from it and locked so that you can&#8217;t ever get more than half the screen away. This feels just about right. I add the ability to bounce off the walls at reflection angles, and it really starts feeling like a game. You don&#8217;t bounce fast. You&#8217;re not a tennis ball or anything. But just a little bump-back when you accidentally clip the wall feels really good.  <\/p>\n<p>Well, it&#8217;s not much so far and you can&#8217;t tell what I&#8217;ve done from the screenshots, but at least we&#8217;re started and we have a goal. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>So now we&#8217;re working in 2 dimensions. The advantage is that 2D development is a lot easier than 3D. The disadvantage is that I don&#8217;t have the right tools for the job. If you&#8217;re making a game or some other kind of 3D-rendering type stuff, then you need some basic variables and tools. The first [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-20649","post","type-post","status-publish","format-standard","hentry","category-good-robot"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/20649","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=20649"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/20649\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=20649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=20649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}