Author Topic: Background Images for collections  (Read 4825 times)

StoningtonQB

  • Jr. Member
  • **
  • Posts: 65
  • Karma: +0/-0
    • View Profile
Background Images for collections
« on: April 05, 2017, 05:54:58 PM »
How would I incorporate a background image when browsing a collection and/or hovering over one in the main menu? I  am not seeing it in the manual. File name (is this background.png?) / folder?

Pieter Hulshoff

  • Administrator
  • Hero Member
  • *****
  • Posts: 1534
  • Karma: +46/-14
    • View Profile
    • Towel 42
Re: Background Images for collections
« Reply #1 on: April 05, 2017, 06:04:53 PM »
The XML tag is reloadableImage, and the type is used as the filename. Do you want to use the same image for all games in a collection or a different one for each game?
As an example, the default Aeon Nox theme uses fanart as a type, and thus as a file name as well.

As an example: for Arcade in the Main menu, it will look for the following files:
- collections/Main/medium_artwork/fanart/Arcade.png
- collections/Arcade/system_artwork/fanart.png
- collections/Main/medium_artwork/fanart/default.png

For 1942 in the Arcade menu, it will simply look for:
- collection/Arcade/medium_artwork/fanart/1942.png
- collection/Arcade/medium_artwork/fanart/default.png
« Last Edit: April 05, 2017, 06:08:04 PM by Pieter Hulshoff »

StoningtonQB

  • Jr. Member
  • **
  • Posts: 65
  • Karma: +0/-0
    • View Profile
Re: Background Images for collections
« Reply #2 on: April 05, 2017, 06:07:08 PM »
all games in the collection. would want the same image in the main menu. one for every game is way too busy. just something that would stretch across the screen...

Pieter Hulshoff

  • Administrator
  • Hero Member
  • *****
  • Posts: 1534
  • Karma: +46/-14
    • View Profile
    • Towel 42
Re: Background Images for collections
« Reply #3 on: April 05, 2017, 06:10:21 PM »
all games in the collection. would want the same image in the main menu. one for every game is way too busy. just something that would stretch across the screen...

Ok, then simply pick a type, e.g. background:
- Put the image as background.png in the system_artwork directory of the collection.
- Put the same image as default.png in the medium_artwork/background directory of the collection.
That's the simplest way of doing it.

Just check the Fan Art Background section in Aeon Nox for an example.

StoningtonQB

  • Jr. Member
  • **
  • Posts: 65
  • Karma: +0/-0
    • View Profile
Re: Background Images for collections
« Reply #4 on: April 05, 2017, 06:17:51 PM »
Yes thank you this is perfect.

StoningtonQB

  • Jr. Member
  • **
  • Posts: 65
  • Karma: +0/-0
    • View Profile
Re: Background Images for collections
« Reply #5 on: April 06, 2017, 02:44:16 AM »
Just check the Fan Art Background section in Aeon Nox for an example.
This is not so obvious to me where I can find such an area. Link?

Pieter Hulshoff

  • Administrator
  • Hero Member
  • *****
  • Posts: 1534
  • Karma: +46/-14
    • View Profile
    • Towel 42
Re: Background Images for collections
« Reply #6 on: April 06, 2017, 06:53:52 AM »
Just check the Fan Art Background section in Aeon Nox for an example.
This is not so obvious to me where I can find such an area. Link?

Aeon Nox is the default theme coming with the full RetroFE releases.

The code I'm referring to is:
Code: [Select]
    <!----------------------------------------------------------------------------------------------------------------------------------->
    <!-- Fan art background -->
    <!----------------------------------------------------------------------------------------------------------------------------------->


    <!-- Fan Art Background -->
    <reloadableImage type="fanart" alpha="0" x="center" y="center" width="stretch" height="stretch" xOrigin="center" yOrigin="center" layer="0">
        <onEnter>
            <set duration=".25">
                <animate type="alpha" to="1" algorithm="easeinquadratic"/>
            </set>
        </onEnter>
        <onExit>
            <set duration=".25">
                <animate type="alpha" to="0" algorithm="easeinquadratic"/>
            </set>
        </onExit>
        <onMenuEnter>
            <set duration=".25">
                <animate type="alpha" to="1" algorithm="easeinquadratic"/>
            </set>
        </onMenuEnter>
        <onMenuExit>
            <set duration=".25">
                <animate type="alpha" to="0" algorithm="easeinquadratic"/>
            </set>
        </onMenuExit>
        <onHighlightEnter>
            <set duration=".25">
                <animate type="alpha" to="1" algorithm="easeinquadratic"/>
            </set>
        </onHighlightEnter>
        <onHighlightExit>
            <set duration=".25">
                <animate type="alpha" to="0" algorithm="easeinquadratic"/>
            </set>
        </onHighlightExit>
    </reloadableImage>

This defines a reloadableImage (reloaded every time a menu item changes) of type fanart (using either system_art/fanart.png or medium_art/fanart/<name>.png) which fades in and out at every change.