1"use strict";(self.webpackChunkgb_studio_docs=self.webpackChunkgb_studio_docs||[]).push([[8336],{3744:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>d,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>l});var o=n(5893),t=n(1151),r=n(7966);const i={},c="Backgrounds",a={id:"assets/backgrounds",title:"Backgrounds",description:"Each of your scenes requires a background image that defines how that scene should look. You can add backgrounds to your game by including PNG files in your project's assets/backgrounds folder.",source:"@site/i18n/de/docusaurus-plugin-content-docs/current/assets/backgrounds.md",sourceDirName:"assets",slug:"/assets/backgrounds",permalink:"/de/docs/assets/backgrounds",draft:!1,unlisted:!1,editUrl:"https://github.com/chrismaltby/gb-studio-docs/tree/main/docs/assets/backgrounds.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Sprites",permalink:"/de/docs/assets/sprites"},next:{title:"Music",permalink:"/de/docs/assets/music/"}},d={},l=[{value:"Color Requirements",id:"color-requirements",level:2},{value:"Size Requirements",id:"size-requirements",level:2},{value:"Tile Requirements",id:"tile-requirements",level:2}];function h(e){const s={a:"a",br:"br",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,t.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.h1,{id:"backgrounds",children:"Backgroun
1ds"}),"\n","\n","\n",(0,o.jsxs)(s.p,{children:["Each of your scenes requires a background image that defines how that scene should look. You can add backgrounds to your game by including PNG files in your project's ",(0,o.jsx)(s.code,{children:"assets/backgrounds"})," folder."]}),"\n",(0,o.jsx)(s.h2,{id:"color-requirements",children:"Color Requirements"}),"\n",(0,o.jsx)(s.p,{children:"Background PNGs must only contain the following four colors:"}),"\n",(0,o.jsx)(r.m,{color:"#071821"}),"\n",(0,o.jsx)(r.m,{color:"#306850"}),"\n",(0,o.jsx)(r.m,{color:"#86c06c"}),"\n",(0,o.jsx)(r.m,{color:"#e0f8cf"}),"\n",(0,o.jsxs)(s.p,{children:["Download the GB Studio Palette Swatches for:",(0,o.jsx)(s.br,{}),"\n",(0,o.jsx)(s.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:n(3518).Z+"",children:"Adobe Photoshop"}),(0,o.jsx)(s.br,{}),"\n",(0,o.jsx)(s.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:n(8761).Z+"",children:"Aseprite"})]}),"\n",(0,o.jsxs)(s.p,{children:["Colors that are not one of the above hex codes will be matched to the nearest color. Unlike sprites, the color ",(0,o.jsx)(s.code,{children:"#65ff00"})," can not be used in backgrounds."]}),"\n",(0,o.jsx)(s.h2,{id:"size-requirements",children:"Size Requirements"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["Backgrounds are divided into ",(0,o.jsx)(s.code,{children:"8px"}),"x ",(0,o.jsx)(s.code,{children:"8px"})," tilesets so the total image size must be a multiple of ",(0,o.jsx)(s.code,{children:"8px"})," in both width and height."]}),"\n",(0,o.jsxs)(s.li,{children:["A background has a minimum size of ",(0,o.jsx)(s.code,{children:"160px"})," x ",(0,o.jsx)(s.code,{children:"144px"})," (the GB screen size)"]}),"\n",(0,o.jsxs)(s.li,{children:["Both the width and height of a background must be less than or equal to ",(0,o.jsx)(s.code,{children:"2040px"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:["The width of the image multiplied by the height must be less than or equal to ",(0,o.jsx)(s.code,{children:"1,048,320"}),". For example an image with the width ",(0,o.jsx)(s.code,{children:"2016px"})," will have a max height of ",(0,o.jsx)(s.code,{children:"520px"})," (because ",(0,o.jsx)(s.code,{children:"2016 * 520 = 1048320"}),")"]}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"tile-requirements",children:"Tile Requirements"}),"\n",(0,o.jsxs)(s.p,{children:["In most scene types a background image can contain no more than ",(0,o.jsx)(s.strong,{children:"192"})," unique ",(0,o.jsx)(s.code,{children:"8px"})," x ",(0,o.jsx)(s.code,{children:"8px"})," tiles at once due to memory limits. This means that even using the smallest background size possible you must repeat about half of your tiles. Where possible repeat tiles between images as they will be grouped together saving on total game size. It is recommended to use a tile map editor such as ",(0,o.jsx)(s.a,{href:"https://www.mapeditor.org/",children:"Tiled"})," to ensure your backgrounds conform to the pixel grid."]}),"\n",(0,o.jsxs)(s.p,{children:["The exception to this is scenes with their ",(0,o.jsx)(s.em,{children:"Scene Type"})," set as ",(0,o.jsx)(s.em,{children:"Logo"}),", these scenes can use a ",(0,o.jsx)(s.code,{children:"160px"})," x ",(0,o.jsx)(s.code,{children:"144px"})," sized image with no limits on unique tiles but note that in ",(0,o.jsx)(s.em,{children:"Logo"})," scenes you are unable to use ",(0,o.jsx)(s.em,{children:"Actors"})," or display a ",(0,o.jsx)(s.em,{children:"Player"}),"."]})]})}function u(e={}){const{wrapper:s}={...(0,t.a)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},7966:(e,s,n)=>{n.d(s,{m:()=>r});n(7294);const o={wrapper:"wrapper_GYQe",swatch:"swatch_CMb3",color:"color_j63c",description:"description_SpSj"};var t=n(5893);const r=e=>{let{color:s,description:n}=e;return(0,t.jsxs)("div",{className:o.wrapper,children:[(0,t.jsxs)("div",{className:o.swatch,children:[(0,t.jsx)("div",{className:o.color,style:{backgroundColor:s}}),(0,t.jsx)("div",{className:o.label,children:s})]}),(0,t.jsx)("div",{className:o.description,children:n})]})}},8761:(e,s,n)=>{n.d(s,{Z:()=>o});const o=n.p+"assets/files/gb-studio-aseprite-ae3b971ce6a2770096c2aa7942ff6fa8.aseprite"},3518:(e,s,n)=>{n.d(s,{Z:()=>o});const o=n.p+"assets/files/gb-studio-photoshop-939ceb05f1ff6f4a0a438d22a95a0e82.aco"},1151:(e,s,n)=>{n.d(s,{Z:()=>c,a:()=>i});var o=n(7294);const t={},r=o.createContext(t);function i(e){const s=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),o.createElement(r.Provider,{value:s},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.