{"id":33,"date":"2009-04-03T01:07:00","date_gmt":"2009-04-03T06:07:00","guid":{"rendered":"http:\/\/lukerymarz.com\/alearningexperience\/2009\/04\/simple-xna-progress-bar.html"},"modified":"2009-04-03T01:07:00","modified_gmt":"2009-04-03T06:07:00","slug":"simple-xna-progress-bar","status":"publish","type":"post","link":"http:\/\/lukerymarz.com\/alearningexperience\/2009\/04\/simple-xna-progress-bar.html","title":{"rendered":"Simple XNA Progress Bar"},"content":{"rendered":"<p>I recently needed a dead simple progress bar, where I could give it a display rectangle, min, max, and a value and show me something in game, but couldn&#8217;t find anything online. I ended up writing it myself, and thought I&#8217;d share what I came up with.<\/p>\n<p>My goal was to create a single file I could drop into a project to allow me to draw a progress bar. All the projects I found involved using a texture as a separate file. I knew from a previous project that you could create that texture in-memory using the Texture2D.SetData() function, and that&#8217;s what I did.<\/p>\n<p>I also wanted to provide a double border so I could put the progress bar on top of any background without having its border look invisible. If you&#8217;ve ever seen closed captioning disappear because of the background color, you know what I mean. But since not everyone needs a double border, I made sure you could turn it off.<\/p>\n<p>Anyways, here&#8217;s and example of what you can do with the progress bar. (download the project for this at the bottom).<\/p>\n<p><a href=\"http:\/\/www.lukerymarz.com\/blog\/images\/progressBar.jpg\"><img decoding=\"async\" style=\"TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; CURSOR: hand\" border=\"0\" alt=\"\" src=\"http:\/\/www.lukerymarz.com\/blog\/images\/progressBar.jpg\" \/><\/a><br \/>So the simple way to get a progress bar into your game is this:<\/p>\n<p>1. Get the source code.<\/p>\n<p>2. Add ProgressBar.cs to your XNA project. Note that I wrote this in 3.0, so make sure you&#8217;re on that version or higher.<\/p>\n<p>3. Create an instance of a progress bar in your game1 class;<\/p>\n<p><span style=\"font-family:courier new;\">UI.<span style=\"color:#00cccc;\">ProgressBar<\/span> progressBar;<\/span><\/p>\n<p>4. In your LoadContent() function, set it to a new progressBar, and provide the rectangle you want it to lie in. You can also set the minimum, maximum, and value member variables here. The defaults are 0, 100, and 0, respectively.<\/p>\n<p><span style=\"font-family:courier new;\">progressBar = <span style=\"color:#3333ff;\">new<\/span> UI.ProgressBar(<span style=\"color:#3333ff;\">this<\/span>, <span style=\"color:#3333ff;\">new<\/span> <span style=\"color:#00cccc;\">Rectangle<\/span>(10, 10, 300, 16));<br \/>progressBar.minimum = 0;<br \/>progressBar.maximum= 10000;<\/span><\/p>\n<p>5. In your Update() function, update the value of your progress bar if necessary, and then call the progress bar&#8217;s Update() function, providing the gameTime (gameTime is not currently used in the progress bar code, though).<\/p>\n<p><span style=\"font-family:courier new;\">progressBar.value = character.health;<br \/>progressBar.Update(gameTime);<\/span><\/p>\n<p>6. In your Draw() function, call progressBar.Draw(), specifying a spriteBatch. Make sure you&#8217;re already called SpriteBatch.Begin() before calling the progress bar Draw() function.<\/p>\n<p><span style=\"font-family:courier new;\">progressBar.Draw(spriteBatch);<\/span><\/p>\n<p>And that&#8217;s it!<\/p>\n<p>Now, I&#8217;ve put quite a few customizable pieces in there. They are all commented in the progress bar code, in the &#8220;public members&#8221; region.<\/p>\n<p>The one I&#8217;d like to talk about is the orientation. You can specify that the progress bar be vertical or horizontal, and in which direction it fill. This is specified at creation time in the ProgressBar constructor. See the orientation member variable for more info.<\/p>\n<p>Here&#8217;s a list of the public variables in there now:<\/p>\n<p><span style=\"font-family:courier new;\"><span style=\"color:#3333ff;\">float<\/span> minimum &#8211; Minimum value of the progress bar. Default is 0.0f.<br \/><span style=\"color:#3333ff;\">float<\/span> maximum &#8211; Maximum value of the progress bar. Default is 100.0f.<br \/><span style=\"color:#3333ff;\">float<\/span> value &#8211; Current progress value.<\/span><\/p>\n<p><span style=\"font-family:courier new;\"><span style=\"color:#00cccc;\">Int32<\/span> borderThicknessOuter &#8211; Outer border thickness. This is drawn within the bounds of the progress bar. Default is 3.<br \/><span style=\"color:#00cccc;\">Int32<\/span> borderThicknessInner &#8211; Inner border thickness. This is drawn within the bounds of the progress bar. Default is 2.<\/span><\/p>\n<p><span style=\"font-family:courier new;\"><span style=\"color:#00cccc;\">Color<\/span> borderColorOuter &#8211; Outer border color. Default is Gray.<br \/><span style=\"color:#00cccc;\">Color<\/span> borderColorInner &#8211; Inner border color. Default is Black<br \/><span style=\"color:#00cccc;\">Color<\/span> fillColor &#8211; Color of the progress section of the bar. Default is Dark Blue.<br \/><span style=\"color:#00cccc;\">Color<\/span> backgroundColor &#8211; Color of the background (unfilled) section of the progress bar. Default is White.<br \/><span style=\"color:#00cccc;\">Orientation<\/span> orientation &#8211; Gets the orientation of this progress bar. Set at creation time.<\/span><\/p>\n<p><span>Note that you should be careful with the border thickness values. I didn&#8217;t add any checking to make sure the border isn&#8217;t overcrowding the actual progress bar. You could theoretically have a progress bar that is all border if you set the thicknesses too big.<\/span><\/p>\n<p><span>Ok, so here&#8217;s a <\/span><a href=\"http:\/\/www.lukerymarz.com\/blog\/ProgressBarSample.zip\"><span>sample project<\/span><\/a><span>. Hold space bar if you want to pause.<\/span><\/p>\n<p><span>And here&#8217;s <\/span><a href=\"http:\/\/www.lukerymarz.com\/blog\/ProgressBarCS.zip\"><span>the bare ProgressBar.cs file<\/span><\/a><span> (zipped, of course).<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently needed a dead simple progress bar, where I could give it a display rectangle, min, max, and a value and show me something in game, but couldn&#8217;t find anything online. I ended up writing it myself, and thought I&#8217;d share what I came up with. My goal was to create a single file [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[6,3],"tags":[],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-graphics","category-xna"],"_links":{"self":[{"href":"http:\/\/lukerymarz.com\/alearningexperience\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/lukerymarz.com\/alearningexperience\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lukerymarz.com\/alearningexperience\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lukerymarz.com\/alearningexperience\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/lukerymarz.com\/alearningexperience\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":0,"href":"http:\/\/lukerymarz.com\/alearningexperience\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"wp:attachment":[{"href":"http:\/\/lukerymarz.com\/alearningexperience\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lukerymarz.com\/alearningexperience\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lukerymarz.com\/alearningexperience\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}