{"id":868,"date":"2020-01-07T20:17:50","date_gmt":"2020-01-07T20:17:50","guid":{"rendered":"http:\/\/www.shmupcreator.com\/doc\/?docs=shmupcreator\/assets-and-art-creation\/sprites-creation-and-export"},"modified":"2025-10-20T07:37:32","modified_gmt":"2025-10-20T07:37:32","slug":"sprites-creation-and-export","status":"publish","type":"docs","link":"https:\/\/www.shmupcreator.com\/doc\/?docs=shmupcreator\/assets-and-art-creation\/sprites-creation-and-export","title":{"rendered":"Sprites creation and good practices"},"content":{"rendered":"\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"#spriteSize\">\nSprite sizes<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"#spriteZoom\">Sprite zoom<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"#spriteAnimation\">Animation<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"#spriteTransparency\">Transparency and blending<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-background has-bright-red-background-color has-bright-red-color is-style-default\"\/>\n\n\n<h5 id=\"spriteSize\"><strong>SPRITE SIZES<\/strong><\/h5>\n<p>For technical reasons, it&#8217;s better to create sprites with sizes following the <strong>Power of Two<\/strong> rule.<\/p>\n<p>The <strong>width<\/strong> and <strong>height<\/strong> of your sprite or texture should be: <strong>8,16,32,64, 128, 256, 512&#8230;<\/strong> etc. pixels. <br>But if the image is <strong>32<\/strong>x<strong>97<\/strong> that works <strong>but is a little less memory efficient<\/strong>.<\/p>\n\n\n<pre class=\"wp-block-preformatted\"><strong>Note:<\/strong> The image doesn't need to be square format. It could be 32x128 ; 256x16 ; 256x512...<\/pre>\n\n\n<p><span style=\"color: #ff6600;\"><strong>The maximum dimension<\/strong><\/span> should be <span style=\"color: #ff6600;\"><strong>8192&#215;8192<\/strong><\/span> pixels, but keep in mind that the bigger the size, the bigger the memory consumption.<\/p>\n\n\n<pre class=\"wp-block-preformatted\"><strong>Note:<\/strong> Some guidelines for sprites sizes.\nIn this case, the images are already pixelated in photoshop. But you could have saved smaller pictures (32 * 64 for the player for instance) and use the Sprite Zoom option to scale them in the game.\n\n. for the player or a small enemy: 64 * 128 pixels <img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"64\" class=\"wp-image-760\" style=\"width: 128px;\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2019\/11\/2dshmup_player.png\" alt=\"\">\n\n. or the same player, 32 * 64, zoomed in-game <img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"32\" class=\"wp-image-1243\" style=\"width: 64px;\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/05\/2dshmup_player_small.png\" alt=\"\">\n\n\n. for a bullet: 32*32 or 64*64 pixels <img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"32\" class=\"wp-image-761\" style=\"width: 64px;\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2019\/11\/2D_enemy_shot01.png\" alt=\"\">\n\n. an item: 64*64 pixels <img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" class=\"wp-image-766\" style=\"width: 64px;\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2019\/11\/2dshmup_item_smartBomb_one.png\" alt=\"\">\n\n. a small enemy: 64*64 pixels <img loading=\"lazy\" decoding=\"async\" width=\"64\" height=\"64\" class=\"wp-image-765\" style=\"width: 64px;\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2019\/11\/2D_enemy_ball_ome.png\" alt=\"\">\n. a medium enemy: 64*128 or 128*128 pixels <img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"128\" class=\"wp-image-759\" style=\"width: 128px;\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2019\/11\/2dshmup_enemy01.png\" alt=\"\">\n\n\n. for a background element: 128*128 pixels or more <img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"128\" class=\"wp-image-763\" style=\"width: 128px;\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2019\/11\/BG_block02.png\" alt=\"\">  <\/pre>\n\n\n<h5>KEEP APPEARANCE CONSISTENCY for SPRITES:<\/h5>\n<p>01. <strong>Don&#8217;t use the SCALE tool!<\/strong><br>02. Choose your highest screen resolution and use this resolution like a paper sheet. <br>Ex: take a screenshot or build an image in your favorite tool and make your sprites in it.<br>So sprites won&#8217;t be to huge and they won&#8217;t need to be down scaled.<br>So they won&#8217;t use to much computer memory for nothing.<\/p>\n\n\n<hr class=\"wp-block-separator has-text-color has-background has-bright-red-background-color has-bright-red-color is-style-default\"\/>\n\n\n<h5 id=\"spriteZoom\"><strong>SPRITE ZOOM<\/strong><\/h5>\n<p>If you wish to obtain a pixelated look, you can save smaller pictures and add a zoom factor to all sprites in your game.<br>The engine will use a special shader filter to keep the hard pixels and avoid flickering.<br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-440\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2019\/07\/spinner.jpg\" alt=\"\" width=\"60\" height=\"22\"> <strong>Sprite zoom:<\/strong> In Game editor \/ Settings \/Sprite zoom, zoom all the sprites with a special filter<\/p>\n<p class=\"aligncenter size-full wp-image-2066\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2801 aligncenter\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2023\/06\/pixelScale.jpg\" alt=\"\" width=\"1280\" height=\"380\" srcset=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2023\/06\/pixelScale.jpg 1280w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2023\/06\/pixelScale-300x89.jpg 300w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2023\/06\/pixelScale-1024x304.jpg 1024w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2023\/06\/pixelScale-768x228.jpg 768w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2023\/06\/pixelScale-1200x356.jpg 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p><\/p>\n\n\n<hr class=\"wp-block-separator has-text-color has-background has-bright-red-background-color has-bright-red-color is-style-default\"\/>\n\n\n<h5 id=\"spriteAnimation\"><strong>ANIMATION<\/strong><\/h5>\n<p>You can animate your sprites. For more information, read the <a href=\"https:\/\/www.shmupcreator.com\/doc\/?docs=shmupcreator\/assets-and-art-creation\/animating-sprites\">Animating sprites<\/a> section.<\/p>\n\n\n<hr class=\"wp-block-separator has-text-color has-background has-bright-red-background-color has-bright-red-color is-style-default\"\/>\n\n\n<h5 id=\"spriteTransparency\"><strong>TRANSPARENCY and BLENDING<br><\/strong><\/h5>\n<p>Sprites are 2D game objects.<br>Most of the time, the picture is opaque and around it you&#8217;ll have transparent pixels.<br>The best practice is to save those images in png or tga.<\/p>\n<p><strong>PNG files<\/strong><br><strong>png file<\/strong>: alpha channel is embedded into the&nbsp; pre-visualization and lets you see it.<br>Your sprite is nice but it keeps a king of ghost fringe<br><strong>super png file<\/strong>: same as png but the ghost fringe is less visible.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2990\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/PNG.jpg\" alt=\"\" width=\"900\" height=\"496\" srcset=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/PNG.jpg 900w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/PNG-300x165.jpg 300w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/PNG-768x423.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n\n\n<pre class=\"wp-block-preformatted\"><strong>Note:<\/strong> if you are using Photoshop, the free superPng plug-in will give you better transparency.\nIt's possible to download it here: <a href=\"https:\/\/fnord.com\/\">https:\/\/fnord.com\/<\/a><\/pre>\n\n\n<p><strong>TGA files<\/strong><br>At last, <strong>tga file<\/strong>: this is<strong> the best choice<\/strong> to have a great result but your visualization will not be the same as your sprite.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2991\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/TGA.jpg\" alt=\"\" width=\"900\" height=\"496\" srcset=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/TGA.jpg 900w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/TGA-300x165.jpg 300w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/TGA-768x423.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n\n\n<hr class=\"wp-block-separator has-text-color has-background has-bright-red-background-color has-bright-red-color\"\/>\n","protected":false},"featured_media":0,"parent":139,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-868","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=868"}],"version-history":[{"count":46,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/868\/revisions"}],"predecessor-version":[{"id":2995,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/868\/revisions\/2995"}],"up":[{"embeddable":true,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/139"}],"next":[{"title":"Animating sprites","link":"https:\/\/www.shmupcreator.com\/doc\/?docs=shmupcreator\/assets-and-art-creation\/animating-sprites","href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/146"}],"prev":[{"title":"Importing assets","link":"https:\/\/www.shmupcreator.com\/doc\/?docs=shmupcreator\/assets-and-art-creation\/importing-assets","href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/145"}],"wp:attachment":[{"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=868"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=%2Fwp%2Fv2%2Fdoc_tag&post=868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}