{"id":500,"date":"2015-07-07T15:31:18","date_gmt":"2015-07-07T10:31:18","guid":{"rendered":"http:\/\/www.stonemillkids.com\/?p=500"},"modified":"2020-12-31T03:37:06","modified_gmt":"2020-12-30T22:37:06","slug":"spritesheets-textures-and-texture-regions","status":"publish","type":"post","link":"http:\/\/www.stonemillkids.com\/index.php\/2015\/07\/07\/spritesheets-textures-and-texture-regions\/","title":{"rendered":"SpriteSheets &#8211; Textures &#8211; and Texture Regions"},"content":{"rendered":"<p>Sprite Sheets save fair amount of memory and CPU usage.&nbsp; In my future world, I can also use them later to create different monsters, levels, etc.&nbsp;using the same graphics with different color pallets.&nbsp; As I get closer to production code, I feel this is one of the last items I need to investigate.<\/p>\n<p>I found two good examples on exactly how to use TextureMaps.&nbsp; I suggest reviewing or viewing both websites, as I am not going to recreate the documentation wheel.<\/p>\n<h3>Games From Scratch Tutorials<\/h3>\n<p>Games from Scratch once again has an excellent post in both Video and&nbsp;html formats:<\/p>\n<h4><strong>Video:<\/strong><\/h4>\n<p>Pick the <a href=\"http:\/\/www.gamefromscratch.com\/page\/LibGDX-Video-Tutorial-Series.aspx\" target=\"_blank\" rel=\"noopener\">Creating and using Spritesheets with TextureAtlas.<\/a><\/p>\n<h4><strong>Code and Webpage:<\/strong><\/h4>\n<p>The textual version of the same demo is located <a href=\"http:\/\/www.gamefromscratch.com\/post\/2013\/10\/02\/LibGDX-Tutorial-3-Basic-graphics.aspx\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<h3>A Full&nbsp;Game Demo:<\/h3>\n<p>I found another tutorial that I thought were very helpful.&nbsp; It is a complete game, I just was interested in the TextureAtlas, but it also touches on Animations and other game development.&nbsp; The code is available on Github, and the game on GooglePlay.&nbsp;&nbsp; If you want to check it out, click <a href=\"http:\/\/williammora.com\/a-running-game-with-libgdx-part-5\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<h3>My Use Case<\/h3>\n<p>My first use case is very simple.&nbsp; I have a bubble game.&nbsp; Let&#8217;s vary the&nbsp;color of the bubbles.&nbsp; We will start with six (6) bubbles and put them into a single sprite sheet.&nbsp; To do this, I download <a href=\"https:\/\/www.codeandweb.com\/texturepacker\" target=\"_blank\" rel=\"noopener\"><u><span style=\"color: #0066cc;\">Texture Packer<\/span><\/u><\/a>.&nbsp;&nbsp;I&nbsp;was impressed with this because after the download, it asked the platform I used.&nbsp; Once I&nbsp;picked libGDX, it sent me to a series of tutorials,&nbsp;and that was a nice.<\/p>\n<p>The output was simple a png and a txt file that I simply uploaded to my assets directory in my JavaStudio project and used just like the demos showed.&nbsp; There were two items of note that neither demo covered<\/p>\n<p><strong>1)<\/strong> If you want to use the free version of Texture Packer, you need to set the &#8220;Trim Mode&#8221; to &#8220;None&#8221; so that it completes all of the rendering.&nbsp; Otherwise you will get&nbsp;red components in your final image.<\/p>\n<p><a href=\"http:\/\/52.24.147.87\/wp-content\/uploads\/2015\/07\/TexturePacker.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-765\" src=\"http:\/\/52.24.147.87\/wp-content\/uploads\/2015\/07\/TexturePacker-300x171.png\" alt=\"TexturePacker\" width=\"300\" height=\"171\" srcset=\"http:\/\/www.stonemillkids.com\/wp-content\/uploads\/2015\/07\/TexturePacker-300x171.png 300w, http:\/\/www.stonemillkids.com\/wp-content\/uploads\/2015\/07\/TexturePacker.png 883w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>If you forget, your image will look something like this:<\/p>\n<p><a href=\"http:\/\/52.24.147.87\/wp-content\/uploads\/2015\/07\/Bubbles_red_small.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-764\" src=\"http:\/\/52.24.147.87\/wp-content\/uploads\/2015\/07\/Bubbles_red_small-200x300.png\" alt=\"Bubbles_red_small\" width=\"200\" height=\"300\" srcset=\"http:\/\/www.stonemillkids.com\/wp-content\/uploads\/2015\/07\/Bubbles_red_small-200x300.png 200w, http:\/\/www.stonemillkids.com\/wp-content\/uploads\/2015\/07\/Bubbles_red_small.png 300w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<p><strong>2)<\/strong> If you want to move a sprite, consider using translate method in the Sprite class.&nbsp; According to the libGDX API it is more efficient.&nbsp; There are methods for translating x, y independently or together.&nbsp; The Sprite <a href=\"http:\/\/libgdx.badlogicgames.com\/nightlies\/docs\/api\/com\/badlogic\/gdx\/graphics\/g2d\/Sprite.html#translateX-float-\" target=\"_blank\" rel=\"noopener\">javadocs <\/a>has all the info.&nbsp; There may be more methods, but I used these three in my code:<\/p>\n<pre>sprite.translateX(-1f);\nsprite.translateY(-1f);\nsprite.translate(-1f, -1f);\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Sprite Sheets save fair amount of memory and CPU usage.&nbsp; In my future world, I can also use them later to create different monsters, levels, etc.&nbsp;using the same graphics with different color pallets.&nbsp; As I get closer to production code, I feel this is one of the last items I need to investigate. I found [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":421,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22,9,15,12],"tags":[37,36,41,35,47,48,49],"_links":{"self":[{"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/posts\/500"}],"collection":[{"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/comments?post=500"}],"version-history":[{"count":2,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/posts\/500\/revisions"}],"predecessor-version":[{"id":960,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/posts\/500\/revisions\/960"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/media\/421"}],"wp:attachment":[{"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/media?parent=500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/categories?post=500"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.stonemillkids.com\/index.php\/wp-json\/wp\/v2\/tags?post=500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}