ES Theming: Gamelist View - Jetup13/Emulationstation-OGA-Theme-Gallery GitHub Wiki

Work in Progress - Unfinished

Gamelist

  • Can be used with basic, video, and detailed views
  • Can use these tags with gamelist
  • <pos></pos> (x y position of gamelist)
  • <origin></origin>
  • <size></size> (Size of gamelist)
  • <selectorColor><selectorColor>(Hex color code of selector bar)
  • <selectorImagePath></selectorImagePath> (Advanced: Image use for selector bar)
  • <selectorImageTile></selectorImageTile> (Advanced: Tile the image of the selector bar. true or false)
  • <selectorHeight></selectorHeight> (Height of selector bar)
  • <selectorOffsetY></selectorOffsetY> (Fine tune selector bars)
  • <selectedColor></selectedColor> (Color of highlighted text)
  • <primaryColor></primaryColor> (Color of non-highlighted text)
  • <secondaryColor></secondaryColor>(Folder icon color)
  • <fontPath></fontPath> (Path to font file)
  • <fontSize></fontSize> (Font size)
  • <scrollSound></scrollSound> (Path to scroll sound. Can use .wav or .mp3)
  • <alignment></alignment> (Can use left, right, or center)
  • <horizontalMargin></horizontalMargin> (Offset the alignment of left or right by x)
  • <forceUppercase></forceUppercase> (True or false)
  • <lineSpacing></lineSpacing> (Space between games in the gamelist)
  • <zIndex></zIndex> (Layers)
  • <selectorColorEnd></selectorColorEnd> (End of gradient color)
  • <selectorGradientType></selectorGradientType> (Gradient Type: horizontal or vertical)
    <textlist name="gamelist">
         <selectorColor>00000000</selectorColor>
         <selectedColor>0F6585</selectedColor>
         <primaryColor>ffffff</primaryColor>
         <secondaryColor>ffffff</secondaryColor>
         <fontPath>./Lato-Bold.ttf</fontPath>
         <fontSize>0.032</fontSize>
         <pos>0.01 0.170</pos>
         <size>0.6 0.70</size>
         <alignment>left</alignment>
         <horizontalMargin>0.01</horizontalMargin>
         <origin>0 0</origin>
         <lineSpacing>2.1</lineSpacing>
         <selectorOffsetY>-0.01</selectorOffsetY>
         <selectorHeight>0.0675</selectorHeight>
    </textlist>

Basic View

  • Can use these elements in the basic view:
  • helpsystem name="help"
  • image name="background"
  • text name="logoText"
  • text name="logoText"
  • image name="logo"
  • textlist name="gamelist"
    <view name="basic">
    </view>

Detailed View

  • Can use these elements in the detailed view:
  • helpsystem name="help"
  • image name="background"
  • text name="logoText"
  • text name="logoText"
  • image name="logo"
  • textlist name="gamelist"
  • Metadata Labels and Values. (See here for what each metadata label and value item can use)
  • Metadata Videos, Images, Marqees, Ratings, and Release Dates (See each category)
  • text name="md_lbl_rating" (Ratings label)
  • text name="md_lbl_releasedate" (Release Date label)
  • text name="md_lbl_developer" (Developer label)
  • text name="md_lbl_publisher" (Publisher label)
  • text name="md_lbl_genre" (Genre label)
  • text name="md_lbl_players" (Players label)
  • text name="md_lbl_lastplayed" (Last Played label)
  • text name="md_lbl_playcount" (Play Count label)
  • rating name="md_rating" (Scraped Rating)
  • datetime name="md_releasedate" (Scraped Release Date)
  • text name="md_players" (Scraped Players)
  • text name="md_playcount" (Scraped Play Count)
  • text name="md_description" (Scraped Description)
  • text name="md_name" (Scraped Game name)
  • image name="md_image" (Scraped cover art)
  • video name="md_video" (Scraped video)
  • image name="md_marquee" (Scraped marquee)
    <view name="detailed">
    </view>

Video View

  • Can use these elements in the video view:
  • helpsystem name="help"
  • image name="background"
  • text name="logoText"
  • text name="logoText"
  • image name="logo"
  • textlist name="gamelist"
  • Metadata Labels and Values. (See here for what each metadata label and value item can use)
  • Metadata Videos, Images, Marqees, Ratings, and Release Dates (See each category)
  • text name="md_lbl_rating" (Ratings label)
  • text name="md_lbl_releasedate" (Release Date label)
  • text name="md_lbl_developer" (Developer label)
  • text name="md_lbl_publisher" (Publisher label)
  • text name="md_lbl_genre" (Genre label)
  • text name="md_lbl_players" (Players label)
  • text name="md_lbl_lastplayed" (Last Played label)
  • text name="md_lbl_playcount" (Play Count label)
  • rating name="md_rating" (Scraped Rating)
  • datetime name="md_releasedate" (Scraped Release Date)
  • text name="md_players" (Scraped Players)
  • text name="md_playcount" (Scraped Play Count)
  • text name="md_description" (Scraped Description)
  • text name="md_name" (Scraped Game name)
  • image name="md_image" (Scraped cover art)
  • video name="md_video" (Scraped video)
  • image name="md_marquee" (Scraped marquee)
    <view name="video">
    </view>

Grid View

  • Advanced view
  • Can use these elements in the grid view:
  • imagegrid name="gamegrid" (Number of tiles displayed)
  • gridtile name="default"
  • gridtile name="selected"
  • text name="gridtile"
  • `text name="gridtile_selected"
  • image name="gridtile.marquee"
  • helpsystem name="help"
  • image name="background"
  • text name="logoText"
  • text name="logoText"
  • image name="logo"
  • textlist name="gamelist"
  • Metadata Labels and Values. (See here for what each metadata label and value item can use)
  • Metadata Videos, Images, Marqees, Ratings, and Release Dates (See each category)
  • text name="md_lbl_rating" (Ratings label)
  • text name="md_lbl_releasedate" (Release Date label)
  • text name="md_lbl_developer" (Developer label)
  • text name="md_lbl_publisher" (Publisher label)
  • text name="md_lbl_genre" (Genre label)
  • text name="md_lbl_players" (Players label)
  • text name="md_lbl_lastplayed" (Last Played label)
  • text name="md_lbl_playcount" (Play Count label)
  • rating name="md_rating" (Scraped Rating)
  • datetime name="md_releasedate" (Scraped Release Date)
  • text name="md_players" (Scraped Players)
  • text name="md_playcount" (Scraped Play Count)
  • text name="md_description" (Scraped Description)
  • text name="md_name" (Scraped Game name)
  • image name="md_image" (Scraped cover art)
  • video name="md_video" (Scraped video)
  • image name="md_marquee" (Scraped marquee)
  • Since this is an advanced view I'll show a example
    <view name="grid">
      <imagegrid name="gamegrid">
      <pos>0 0</pos>
      <size>1 1</size>
      <margin>0.005 0.010</margin>
      <padding>0.1 0.0 0.1 0.0</padding>
      <autoLayout>3 1</autoLayout>
      <autoLayoutSelectedZoom>1.05</autoLayoutSelectedZoom>
      <animateSelection>false</animateSelection>
      <scrollDirection>horizontal</scrollDirection>
      <centerSelection>true</centerSelection>
      <scrollLoop>true</scrollLoop>
      <zIndex>6</zIndex>
    </imagegrid>
	
    <text name="gridtile">
      <color>00000000</color>
      <backgroundColor>00000000</backgroundColor>
      <fontPath>./../_art/AdobeBlank.ttf</fontPath>
      <fontSize>0.01</fontSize>
      <alignment>center</alignment>
      <visible>false</visible>
    </text>
	
    <ninepatch name="gridtile.background:selected">
      <animateColor>FFFFFF</animateColor>
      <animateColorTime>800</animateColorTime>
    </ninepatch>
		
    <text name="md_name">
        <pos>0.003 -0.03</pos>
	<fontPath>./../_art/Acre.otf</fontPath>
        <fontSize>0.04</fontSize>
        <size>1 0.10</size>
	<forceUppercase>1</forceUppercase>
        <alignment>left</alignment>
    </text>

    <gridtile name="default">
        <backgroundColor>FFFFFF00</backgroundColor>
        <backgroundCornerSize>9 9</backgroundCornerSize>
        <selectionMode>image</selectionMode>
        <padding>5 5</padding>
    </gridtile>
    </view>

Inherent View

  • Advanced: Can be used to create more views
  • It will use everything from the inherited view
  • Anything added will be the difference
    <customView name="New View Here inherits="detailed">
    </customView>

Help Icons

  • Can use the following for helpsystem
  • <pos></pos> (Position of helpsystem)
  • <origin></origin>
  • <textColor></textColor>
  • <iconColor></iconColor> (Color of help icons)
  • <fontPath></fontPath> (Path to font)
  • <fontSize></fontSize> (Font Size)
       <helpsystem name="help">
       <fontPath>./_inc/fonts/acre.ttf</fontPath>
       <fontSize>0.025</fontSize>
       </view>

Metadata Labels and Values

  • These are tags that each label and value can use
  • <pos></pos> (x y)
  • <size></size> (Amount of space text can be rendered)
  • <origin></origin> (x y)
  • <color></color> (Hex code color of text)
  • <backgroundColor></backgroundColor> (Hex code color used for the background of text)
  • <lineSpacing></lineSpacing> (Space between lines)
  • <fontPath></fontPath> (Font file used)
  • <fontSize></fontSize> (Size of font)
  • <rotation></rotation> (Advanced: Text rotation in angle of degrees)
  • <rotationOrigin></rotationOrigin> (Advanced: Point to where text starts to rotate)
  • <alignment></alignment> (Alignment of text. Can use left, right, center`)
  • <forceUppercase></forceUppercase> (true or false)
  • <visible></visible> (true or false)
  • <zIndex></zIndex> (Layer)
  • <glowColor></glowColor> (Hex code color glow around text)
  • <glowSize></glowSize>
  • <glowOffset></glowOffset> (Can be used to shadow text)
  • <reflexion></reflexion> (Two numbers. First is the top alpha while second is bottom alpha)
     <text name="md_lbl_releasedate, md_lbl_players, md_lbl_rating, md_rating, md_players, md_releasedate">
         <fontPath>./_inc/fonts/sans-black-cond-italic.ttf</fontPath>
         <fontSize>0.034</fontSize>
      </text>
      <text name="md_lbl_rating">
         <origin>0.5 0.5</origin>
         <pos>0.95 0.35</pos>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex>
      </text>   
      <rating name="md_rating">
         <origin>0.5 0.5</origin>       
         <pos>0.77 0.35</pos>
         <size>0.05 0.05</size>
         <zIndex>2</zIndex>
         <filledPath>./example/path/star_full.png</filledPath>
         <unfilledPath>./example/path/star_hollow.png</unfilledPath>
      </rating>
      <text name="md_lbl_players">
         <origin>0.5 0.5</origin>
         <pos>0.95 0.27</pos>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex> 
      </text>
      <text name="md_players">
         <origin>0.5 0.5</origin>
         <pos>1.072 0.27</pos>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex>
      </text>
      <text name="md_lbl_releasedate">
         <origin>0.5 0.5</origin>
         <pos>0.95 0.31</pos>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex>                  
      </text>
      <datetime name="md_releasedate">
         <origin>0.5 0.5</origin>
         <pos>1.072 0.31</pos>
		 <format>%Y</format>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex>         
      </datetime>

Metadata Videos

  • <pos></pos> (x y)
  • <size></size> (Amount of space text can be rendered)
  • <origin></origin> (x y)
  • <maxSize></maxSize> (Resizes video to fit the screen: x y)
  • <rotation></rotation> (Advanced: Rotation in angle of degrees)
  • <rotationOrigin></rotationOrigin> (Advanced)
  • <effect></effect> (Transition effect size, slideRight, bump, or none`.)
  • <default></default> (Default video used if game has no video)
  • <showSnapshotNoVideo></showSnapshotNoVideo> (true or false. If true highlighted game has no video it will show cover art instead)
  • <showSnapshotDelay></showSnapshotDelay> (Delay before video starts)
  • <snapshotSource></snapshotSource> (Which image is shown before delay: image, marquee, thumbnail)
  • <visible></visible> (true or false)
  • <zIndex></zIndex> (Layer)
    <video name="md_video">
         <origin>0.5 0.5</origin>
         <pos>0.776 0.388</pos>
         <maxSize>0.347 0.46</maxSize>
         <delay>0.7</delay>
         <showSnapshotNoVideo>true</showSnapshotNoVideo>
         <showSnapshotDelay>true</showSnapshotDelay>
         <snapshotSource>image</snapshotSource>
		 <effect>none</effect>
    </video>

Metadata Images

  • If md_image is not used then emulationstation will use md_video for both cover art and video
  • <pos></pos> (x y)
  • <size></size>
  • <origin></origin>
  • <maxSize></maxSize> (Image will resize to fit the screen and fit its aspect ration. Convenient when using different image sizes)
  • <minSize></minSize> (Advanced: Like maxSize but image can partly hidden)
  • <tile></tile>
  • <rotation></rotation>
  • <rotationOrigin></rotationOrigin>
  • <visible></visible>
  • <horizontalAlignment></horizontalAlignment> (If maxSize is used you can tell the image the alignment: left, right, and center)
  • <verticalAlignment></verticalAlignment> (If maxSize is used you can tell the image the alignment: top, bottom, and center)
  • <flipX></flipX> (Flip image horizontally: true or false)
  • <flipY></flipY> (Flip image vertically: true or false)
  • <zIndex></zIndex> (Layer)
      <image name="md_image">
         <origin>0.5 0.5</origin>
         <pos>0.75 0.66</pos>
         <maxSize>0.45 0.45</maxSize>
         <zIndex>2</zIndex>         
      </image>
⚠️ **GitHub.com Fallback** ⚠️