{"id":174,"date":"2013-07-17T11:34:56","date_gmt":"2013-07-17T11:34:56","guid":{"rendered":"http:\/\/www.kamremake.com\/devblog\/?p=174"},"modified":"2013-07-17T11:34:56","modified_gmt":"2013-07-17T11:34:56","slug":"unit-picking","status":"publish","type":"post","link":"https:\/\/www.kamremake.com\/devblog\/unit-picking\/","title":{"rendered":"Unit picking"},"content":{"rendered":"<p>In this article I&#8217;ll try to explain how the object picking works in KaM Remake, why is it worse than in classic KaM and how it is going to get better in next release. Proceed inside if you are interested to learn how does the game knows where the mouse click has landed. Images and technical details included.<\/p>\n<p><!--more--><\/p>\n<h2>Tile-based picking (current approach)<\/h2>\n<p>Essentially games logic operates with a grid. The map is a 2D rectangular array that consists of square tiles.\u00c2\u00a0Much like in chess, each unit is taking exactly one tile (houses take several tiles, but for now we will not touch them). The height effect in KaM is mostly aesthetical, it affects tiles passability, but it does not affect units travel speed or how many units can stand on one tile. When a click happens the game would convert cursor position from screen space to maps 2D grid space and if the clicked tile has a unit it will be picked. In other words this means that if you wanted to pick a unit you had to click on a tile where that unit is standing right now:<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_1.png\"><img loading=\"lazy\" class=\"size-medium wp-image-175 aligncenter\" alt=\"unitpicking_1\" src=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_1-300x240.png\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_1-300x240.png 300w, https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_1.png 500w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>The blue quad shows the area you had to click in order to select pikeman that is standing on it. As you can see that area does not matches his body shape that well. If you clicked on his head the click would go to the empty tile above and nothing will get picked. The situation is even worse if you wanted to pick a walking unit. The place unit is located is rounded to a nearest tile. Notice how far archers flag carrier is from the place where you need to click to select him:<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_0.png\"><img loading=\"lazy\" class=\"size-medium wp-image-179 aligncenter\" alt=\"unitpicking_0\" src=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_0-267x300.png\" width=\"267\" height=\"300\" srcset=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_0-267x300.png 267w, https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_0.png 500w\" sizes=\"(max-width: 267px) 100vw, 267px\" \/><\/a><\/p>\n<p>Imagine players frustration clicking on a unit and getting nothing or another unit.\u00c2\u00a0Is there a way to solve this problem? Even in old KaM unit selection was pixel-perfect. We know it&#8217;s possible, but how?<\/p>\n<h2>Pixel-testing (vanilla KaM approach)<\/h2>\n<p>Old KaM could do pixel-perfect picking because all the games sprites were in system memory. CPU had direct access to pixel data. That means the game could hit-test sprites that are drawn under the cursor right in the drawing cycle. Here&#8217;s the pseudo-code how it may have looked like:<\/p>\n<pre>\/\/Render all visible sprites\r\nfor i := 0 to VisibleSpriteCount - 1 do\r\nbegin\r\n  \/\/Render the sprite\r\n  RenderSprite(Sprite[I]);\r\n\r\n  \/\/Fast test if cursor is within sprites rectangle\r\n  if InRect(Cursor, Sprite[I].Rect) then\r\n  begin\r\n    \/\/Get exact cursor position within sprites rectangle\r\n    PX := Cursor.X - Sprite[I].X;\r\n    PY := Cursor.Y - Sprite[I].Y;\r\n\r\n    \/\/Check if there's opaque pixel in that position\r\n    if Sprite[I].Pixels[PX,PY] &lt;&gt; 0 then\r\n      \/\/Remember picked sprite\r\n      Cursor.Object := Sprite[I].Object;\r\n\r\n    \/\/If there's any sprite above it will get picked instead\r\n  end;\r\nend;\r\n\r\n\/\/We don't have KaM source codes, so that's just an idea<\/pre>\n<p>However with KaM Remake that is not gonna work because we use OpenGL for render which operates with GPU and GPU memory. On games startup we load the sprites from the disk only to pass them to video memory, as soon as that&#8217;s done we flush them from system memory (that&#8217;s some 140mb saving). Afterwards sprite data is not directly accessible to the CPU. Of course we could try and read that back from video-memory, but this is quite slow operation since GPUs are made with directional data transfer in mind. Proper GPU approach is slightly different. Since drawing on GPU is practically free, we can employ so-called &#8220;color-picking&#8221; technique.<\/p>\n<h2>Color-picking (new approach)<\/h2>\n<p>Color-picking is named so because we ask GPU to draw different objects with different colors to a &#8220;selection buffer&#8221; which is invisible to a player. We are going to render a bunch of sprites that are already in GPUs memory (which is practically free operation). Then we read just one pixel that is under the cursor and knowing its color we can easily detect to which of the rendered objects it belongs.<\/p>\n<p>From talk to rendering &#8211; each active object has an unique ID in the game. We take that ID and encode it into RGB color. Here&#8217;s result:<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_21.png\"><img loading=\"lazy\" class=\"aligncenter\" alt=\"unitpicking_2\" src=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_21-300x215.png\" width=\"300\" height=\"215\" \/><\/a><\/p>\n<p>As you can see there are some issue: Trees (that are rendered in black, because they have no IDs) occlude the soldiers. Opaque trees almost prevent player from picking soldiers behind them. This is not good for the player, because he will not be able to pick soldiers in woods. Serfs arms are rendered separately without an ID, they should inherit serfs ID. On the other hand units shadows should not be pickable.\u00c2\u00a0Each issue is easy to deal with by different techniques.\u00c2\u00a0After fixing these minor issue we have the following picture in our &#8220;selection buffer&#8221;:<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_3.png\"><img loading=\"lazy\" class=\"size-medium wp-image-184 aligncenter\" alt=\"unitpicking_3\" src=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_3-300x215.png\" width=\"300\" height=\"215\" srcset=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_3-300x215.png 300w, https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_3.png 800w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>How is it looking from the implementation point of view?<\/p>\n<h2>\u00c2\u00a0Technical side<\/h2>\n<p>After normal frame is rendered as usually to the back buffer and swapped to display we fill everything with black (black means no ID) and render objects sprites once again, but this time we don&#8217;t show it to the player. Only the game has access to the render result and read the pixel color under the mouse cursor.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/ColorPicking-render.png\"><img loading=\"lazy\" class=\"size-medium wp-image-186 aligncenter\" alt=\"ColorPicking render\" src=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/ColorPicking-render-182x300.png\" width=\"182\" height=\"300\" \/><\/a><\/p>\n<p>First tricky part is to make OpenGL to render opaque texture pixels with a flat color we need. For that we use this clever bit of code found at StackOverflow:<\/p>\n<pre>\/\/Render textures without semi-transparency.\r\n\/\/Anything below 0.9 will be discarded (i.e. shadows)\r\nglEnable(GL_ALPHA_TEST);\r\nglAlphaFunc(GL_GREATER, 0.9);\r\n\r\n\/\/Texture will not be blended with background\r\nglBlendFunc(GL_ONE, GL_ZERO);\r\n\r\n\/\/Set up custom combining mode where texture color is ignored\r\nglTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);\r\nglTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_REPLACE);\r\nglTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB, GL_PREVIOUS);\r\nglTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_TEXTURE);\r\nglTexEnvi(GL_TEXTURE_ENV, GL_OPERAND0_RGB, GL_SRC_COLOR);\r\nglTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_RGB, GL_SRC_COLOR);<\/pre>\n<p>For each sprite we set up a color that will represent its ID. Typical OpenGL render offers 24 bits for RGB values. We can split the ID into bytes and code this like so:<\/p>\n<pre>\/\/SHR is bitwise shift to the right\r\nglColor3ub(ID and $FF,\u00c2\u00a0ID shr 8 and $FF,\u00c2\u00a0ID shr 16 and $FF);<\/pre>\n<p>We also discard any inactive objects (trees and flags mostly). Here&#8217;s what we get in the selection buffer in the end:<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_4.png\"><img loading=\"lazy\" class=\"aligncenter\" alt=\"unitpicking_4\" src=\"https:\/\/www.kamremake.com\/devblog\/wp-content\/uploads\/2013\/07\/unitpicking_4-300x235.png\" width=\"300\" height=\"235\" \/><\/a><\/p>\n<p>Now we can read the pixel under the cursor with a glReadPixels procedure and combine its RGB values back into an ID. That ID belongs to a unit that is standing there.<\/p>\n<p>That&#8217;s it. Now you know another improvement that will be in the next KaM Remake version. Thanks for reading! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article I&#8217;ll try to explain how the object picking works in KaM Remake, why is it worse than in classic KaM and how it is going to get better in next release. Proceed inside if you are interested &hellip; <a href=\"https:\/\/www.kamremake.com\/devblog\/unit-picking\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/posts\/174"}],"collection":[{"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":12,"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":197,"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/posts\/174\/revisions\/197"}],"wp:attachment":[{"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kamremake.com\/devblog\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}