1"use strict";(self.webpackChunkgb_studio_docs=self.webpackChunkgb_studio_docs||[]).push([[3024],{6310:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var n=t(5893),i=t(1151),o=t(7966);const r={},a="UI Elements",c={id:"assets/ui-elements",title:"UI Elements",description:"Your project contains a number of files in assets/ui with fixed file names that define parts of your game's user interface. Editing these files allows you to change the default font, set the window frame and modify the selection cursor.",source:"@site/docs/assets/ui-elements.md",sourceDirName:"assets",slug:"/assets/ui-elements",permalink:"/docs/assets/ui-elements",draft:!1,unlisted:!1,editUrl:"https://github.com/chrismaltby/gb-studio-docs/tree/main/docs/assets/ui-elements.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Tilesets",permalink:"/docs/assets/tilesets"},next:{title:"Scripting Events",permalink:"/docs/scripting/"}},l={},d=[{value:"frame.png",id:"framepng",level:2},{value:"cursor.png",id:"cursorpng",level:2},{value:"Requirements",id:"requirements",level:2},{value:"Fonts",id:"fonts",level:2},{value:"Emotes",id:"emotes",level:2},{value:"Avatars",id:"avatars",level:2}];function h(e){const s={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",p:"p",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.h1,{id:"ui-elements",children:"UI Elements"}),"\n","\n","\n",(0,n.jsxs)(s.p,{children:["Your project contains a number of files in ",(0,n.jsx)(s.code,{children:"assets/ui"})," with fixed file names that define parts of your game's user interface. Editing these files allows you to change the default font, set the window frame and modify the selection cursor."]}),"\n",(0,n.jsx)(s.p,{children:"If you remove any of the files in the ui folder they will be replaced with the default assets the next time you build your game allowing you to revert any unwanted changes."}),"\n",(0,n.jsx)(s.h2,{id:"framepng",children:"frame.png"}),"\n",(0,n.jsxs)(s.p,{children:["The game engine uses ",(0,n.jsx)(s.a,{href:"https://en.wikipedia.org/wiki/9-slice_scaling",children:"9-slice scaling"})," of this image to create the frame around text boxes. Editing this image will allow you to change the frame design or set it to a solid color."]}),"\n",(0,n.jsx)("img",{src:"/img/ui/frame.png",class:"HelpSprite",style:{width:72,height:"auto"}}),"\n",(0,n.jsx)(s.h2,{id:"cursorpng",children:"cursor.png"}),"\n",(0,n.jsx)(s.p,{children:"This image is used as a selection cursor when showing multiple choice options in your game."}),"\n",(0,n.jsx)("img",{src:"/img/ui/cursor.png",class:"HelpSprite",style:{width:24,height:"auto"}}),"\n",(0,n.jsx)(s.h2,{id:"requirements",children:"Requirements"}),"\n",(0,n.jsx)(s.p,{children:"UI PNGs must only contain the following four colors:"}),"\n",(0,n.jsx)(o.m,{color:"#071821",description:"Darkest"}),"\n",(0,n.jsx)(o.m,{color:"#306850"}),"\n",(0,n.jsx)(o.m,{color:"#86c06c"}),"\n",(0,n.jsx)(o.m,{color:"#e0f8cf",description:"Lightest"}),"\n",(0,n.jsxs)(s.p,{children:["Download the GB Studio Palette Swatches for:",(0,n.jsx)(s.br,{}),"\n",(0,n.jsx)(s.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:t(3518).Z+"",children:"Adobe Photoshop"}),(0,n.jsx)(s.br,{}),"\n",(0,n.jsx)(s.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:t(8761).Z+"",children:"Aseprite"})]}),"\n",(0,n.jsx)(s.h2,{id:"fonts",children:"Fonts"}),"\n",(0,n.jsxs)(s.p,{children:["Fonts are stored in ",(0,n.jsx)(s.code,{children:"assets/fonts"}),", see ",(0,n.jsx)(s.a,{href:"/docs/settings#fonts",children:"Settings"})," for more information."]}),"\n",(0,n.jsx)(s.h2,{id:"emotes",children:"Emotes"}),"\n",(0,n.jsxs)(s.p,{children:["Emotes are stored in ",(0,n.jsx)(s.code,{children:"assets/emotes"})," and must be defined as ",(0,n.jsx)(s.code,{children:"16px x 16px"})," sized ",(0,n.jsx)(s.code,{children:".png"})," files following the same color requirements used for creating spritesheets. You can display an emote by using the ",(0,n.jsx)(s.code,{children:"Show Emote Bubble"})," event in a script."]}),"\n",(0,n.jsx)(s.h2,{id:"avatars",children:"Avatars"}),"\n",(0,n.jsxs)(s.p,{children:["Avatars are stored in ",(0,n.jsx)(s.code,{children:"assets/avatars"})," and must be defined as ",(0,n.jsx)(s.code,{children:"16px x 16px"})," sized ",(0,n.jsx)(s.code,{children:".png"})," files following the same color requirements used for creating backgrounds. You can display an avatar in a ",(0,n.jsx)(s.a,{href:"/docs/scripting/script-glossary/dialogue-menus#display-dialogue",children:"Display Dialogue"})," event by clicking ",(0,n.jsx)(s.code,{children:"Add Avatar"})," within the event."]})]})}function u(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},7966:(e,s,t)=>{t.d(s,{m:()=>o});t(7294);const n={wrapper:"wrapper_GYQe",swatch:"swatch_CMb3",color:"color_j63c",description:"description_SpSj"};var i=t(5893);const o=e=>{let{color:s,description:t}=e;return(0,i.jsxs)("div",{className:n.wrapper,children:[(0,i.jsxs)("div",{className:n.swatch,children:[(0,i.jsx)("div",{className:n.color,style:{backgroundColor:s}}),(0,i.jsx)("div",{className:n.label,children:s})]}),(0,i.jsx)("div",{className:n.description,children:t})]})}},8761:(e,s,t)=>{t.d(s,{Z:()=>n});const n=t.p+"assets/files/gb-studio-aseprite-ae3b971ce6a2770096c2aa7942ff6fa8.aseprite"},3518:(e,s,t)=>{t.d(s,{Z:()=>n});const n=t.p+"assets/files/gb-studio-photoshop-939ceb05f1ff6f4a0a438d22a95a0e82.aco"},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>r});var n=t(7294);const i={},o=n.createContext(i);function r(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),n.createElement(o.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.