{"id":593,"date":"2013-11-16T12:39:27","date_gmt":"2013-11-16T11:39:27","guid":{"rendered":"http:\/\/labalec.fr\/erwan\/?p=593"},"modified":"2013-11-23T17:11:27","modified_gmt":"2013-11-23T16:11:27","slug":"vb-net-and-xna-article-8-pixel-collision","status":"publish","type":"post","link":"https:\/\/labalec.fr\/erwan\/?p=593","title":{"rendered":"VB.Net and XNA : Article 8 (pixel collision)"},"content":{"rendered":"<p>Today, lets see how to detect two sprites (i.e moving textures) colliding.<br \/>\nPixel collision is the basic of any game.<\/p>\n<p>The principle is the following :<br \/>\nfirst we need to define the region the two image rectangles intersect,<br \/>\nthen we will iterate through each pixel in that region, and compare the alpha value of each image of each pixel.<br \/>\nIf neither has an alpha value of 0 (transparent), they are both considered colliding.<br \/>\nSee original discussion <a href=\"http:\/\/stackoverflow.com\/questions\/7292870\/per-pixel-collision-code-explanation\" target=\"_blank\">here<\/a>.<\/p>\n<p>A picture illustrating this priniciple :<br \/>\n<a href=\"https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/11\/xna_pixel_collision.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-594\" alt=\"xna_pixel_collision\" src=\"https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/11\/xna_pixel_collision-300x227.png\" width=\"300\" height=\"227\" srcset=\"https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/11\/xna_pixel_collision-300x227.png 300w, https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/11\/xna_pixel_collision.png 481w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>In the attached code, we will<br \/>\n-setup a background and 2 balls<br \/>\n-update the balls position and make a sound when we touch the screen boundaries<br \/>\n-detect if the balls are colliding and if yes, make a sound<\/p>\n<p>Note : this does not cover rotating shapes as this will be covered in a future article.<\/p>\n<p>Enjoy.<\/p>\n<p><a href=\"https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/11\/xna_demo_6.zip\">xna_demo_6<\/a><\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-593-1\" width=\"640\" height=\"480\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/11\/xna08.mp4?_=1\" \/><a href=\"https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/11\/xna08.mp4\">https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/11\/xna08.mp4<\/a><\/video><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today, lets see how to detect two sprites (i.e moving textures) colliding. Pixel collision is the basic of any game. The principle is the following : first we need to define the region the two image rectangles intersect, then we will iterate through each pixel in that region, and compare the alpha value of each <a href='https:\/\/labalec.fr\/erwan\/?p=593' class='excerpt-more'>[&#8230;]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,35],"tags":[],"class_list":["post-593","post","type-post","status-publish","format-standard","hentry","category-dotnet","category-xna","category-34-id","category-35-id","post-seq-1","post-parity-odd","meta-position-corners","fix"],"_links":{"self":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts\/593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=593"}],"version-history":[{"count":4,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts\/593\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts\/593\/revisions\/655"}],"wp:attachment":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}