Possible Layout/theme

[dougan78]

I want the following in my setup

Main menu reloadable Images per system on menu:
Character.png - character for system
background.png - background image for system
border.png - border for video
console.png - image of console
video.mp4 - intro video for system

Collection static images per rom:
Character.png - character for system
background.png - background image
border.png - border for video
console.png - picture of console with controller

Collection reloadable images per rom:

Box based on rom name.png
cart based on rom name.png
video based on rom name.mp4

Looks doable based on your documentation.  is that possible?  Before I started sinking some time into this I figured I would ask.  Thanks.

[Pieter Hulshoff]

Yes, this is certainly doable, with for now the limitation that for all items within a menu the location and size parameters of the objects must be the same. For example, the system characters in the main menu can be different per system as you want, but they will be at the same x/y coordinates. I would suggest placing all theme graphics in the layout directory, so if your layout is called "dougan", place the graphics in layouts/dougan/collections/<system name>/system_artwork, and use the modes "layout" and "systemlayout".

Main menu reloadable images per system: Use mode "layout", and put the images in your layout directory.
Collection static images: Make a copy of the main menu object, and use mode "systemlayout", and it will use the same images as the main menu reloadable images.
Collection reloadable images per rom: Skip the mode attribute, and leave these images in your normal collections directory.

If you run into any trouble, just drop me the XML code, and I'll have a look.

[dougan78]

Thanks for the reply.  I will dig in more after Christmas.

[dougan78]

Ok I will require a bit more help than that.  Being a relative n00b to this.

Dougan/Layout.xml
Dougan/Images/Charatcter.png
Dougan/Images/Background.png

Ok so for a reloadable character image i would have what exactly?

<image src="images/Character.png" x="0" y="0" width="stretch" height="stretch" layer="5"></Image>

Puts my character on the screen if the image is 1920x1080.  So if I want to make that image reloadable  I would do:

<image src="/layouts/dougan/images/Character.png" x="0" y="0" width="stretch" height="stretch" layer="5" ><reloadableimage>

Again sorry for the n00b stuff.  Just wrapping my head around something new and I will get it I am sure, just a mater of time for me to link stuff together in my brain with all this new vocabulary system layout, main, reloadableimage, and getting a grasp of how the folder structure works.  Little by little with your help I am sure I can achieve what I want.  Thanks in advance for your help.
   </Image>

[dougan78]

Here is a copy of my XML, I am using retrospin as a base for what I am doing.

<!-- RetroSpin by JonahUK -->

<layout width="1920" height="1080" font="fonts/micross.ttf" loadFontSize="36" fontColor="FFD700">

   <!-- Sounds(Standard/Default RetroFE) -->
   <sound type="load" src="sounds/load.wav" />
   <sound type="unload" src="sounds/unload.wav" />
   <sound type="highlight" src="sounds/highlight.wav" />
   <sound type="select" src="sounds/select.wav" />

   <!-- System Screen
   <reloadableVideo imageType="screenshot" alpha="1" x="830" y="630" xOrigin="center" yOrigin="center" width="800" height="600" layer="9">
      <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 menuIndex="0">
         <set duration=".25">
            <animate type="alpha" to="1" algorithm="easeinquadratic"/>
         </set>
      </onMenuEnter>
      <onMenuExit menuIndex="0">
         <set duration=".25">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
         </set>
      </onMenuExit>
      <onHighlightEnter menuIndex="0">
         <set duration=".15">
            <animate type="alpha" to="1" algorithm="easeinquadratic"/>
         </set>
      </onHighlightEnter>
      <onHighlightExit menuIndex="0">
         <set duration=".15">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
         </set>
      </onHighlightExit>
   </reloadableVideo>
   -->
   
   <!-- Background Image  -->
   <image src="images/Background.png" x="0" y="0" width="stretch" height="stretch" layer="1">
   </Image>
      <!-- Pointer Image  -->
   <image src="images/Pointer.png" x="0" y="0" width="stretch" height="stretch" layer="2">
   </Image>
         <!-- Pointer Image  -->
   <image src="images/Logo.png" x="0" y="0" width="stretch" height="stretch" layer="6">
   </Image>
            <!-- character Image  -->
            
   <reloadableImage type="Character" mode="layout" x="0" y="0" height="stretch" maxWidth="stretch" layer="5"/>
   
<!--   
   <image src="Character.png" x="0" y="0" width="stretch" height="stretch" layer="5">
   </Image>  -->

   
            <!-- border Image  -->
   <image src="images/Border.png" x="0" y="0" width="stretch" height="stretch" layer="4">
   </Image>
   <!-- System Info -->
   <reloadableImage type="artwork_back" x="0" y="0" alpha="0" xOrigin="center" yOrigin="center" layer="8">   
      <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 menuIndex="0">
         <set duration=".25">
            <animate type="alpha" to="1" algorithm="easeinquadratic"/>
         </set>
      </onMenuEnter>
      <onMenuExit menuIndex="0">
         <set duration=".25" menuIndex="0">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
         </set>
      </onMenuExit>
      <onHighlightEnter menuIndex="0">
         <set duration=".25">
            <animate type="alpha" to="1" algorithm="easeinquadratic"/>
         </set>
      </onHighlightEnter>
      <onHighlightExit menuIndex="0">
         <set duration=".25">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
         </set>
      </onHighlightExit>
   </reloadableImage>

   <!-- Menu Wheel -->
   <menu type="custom" imageType="logo" orientation="vertical" width="400" height="175" scrollTime=".24" scrollAcceleration=".04">
      <itemDefaults spacing="2" y="center" x="950" yOrigin="center" xOrigin="center" fontSize="35" width="260" layer="9"/>
      <item xOffset="830" angle="39" yOffset="-684" alpha="0" >
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1430" to="830" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="830" to="1430" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="770" angle="32" yOffset="-576" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1370" to="770" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="770" to="1370" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="710" angle="27" yOffset="-466" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1310" to="710" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="710" to="1310" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="665" angle="20" yOffset="-354" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1265" to="665" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="665" to="1265" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="630" angle="14" yOffset="-238" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1230" to="630" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="630" to="1230" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="610" angle="8" yOffset="-120" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1210" to="610" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="610" to="1210" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="600" yOffset="0" layer="7" fontSize="50" width="400" alpha="1" selected="true">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1200" to="600" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="600" to="1200" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="610" angle="-8" yOffset="120" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1210" to="610" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="610" to="1210" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="630" angle="-14" yOffset="238" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1230" to="630" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="630" to="1230" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="665" angle="-20" yOffset="354" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1265" to="665" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="665" to="1265" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="710" angle="-27" yOffset="466" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1310" to="710" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="710" to="1310" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="770" angle="-32" yOffset="576" alpha="0.75">
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1370" to="770" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="770" to="1370" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
      <item xOffset="830" angle="-39" yOffset="684" alpha="0" >
            <onMenuEnter menuIndex="0">
                <set duration=".25">
                    <animate type="xOffset" from="1430" to="830" algorithm="easeincircular"/>
                </set>
            </onMenuEnter>
            <onMenuExit>
                <set duration=".25">
                    <animate type="xOffset" from="792" to="1430" algorithm="easeincircular"/>
                </set>
            </onMenuExit>
      </item>
   </menu>

</layout>

[dougan78]

So rather than doing a basic img src I did the reloadableImage like this:

  <reloadableImage type="Character" mode="layout" x="0" y="0" height="stretch" maxWidth="stretch" layer="5"/>

I then put the character image here:

retrofe\layouts\RetroSpin\collections\Microsoft MS-DOS\system_artwork\Character\Default.png

Which I know is not correct as it is not loading but I feel like I may be getting 1 step closer to understanding.

[Agent47]

I think what you need to do is have it here: retrofe\layouts\RetroSpin\collections\Microsoft MS-DOS\system_artwork\Character.png

[dougan78]

I was hopeful, but that didnt work either.  By the time I figure it out I will have a character.png in every folder.... lol!

[JonahUK]

If you are using my wip, use the AAE "standalone" example (https://mega.nz/#!0QhGTTxb!n8xCI2QL9LJVFws792bgsaIJhzN4LY7HGTmPRuMLX0c) and change what you need.
Extract this to somewhere OTHER than your existing installation (everything is included as a standalone!).

All png should be placed in the layout/images folder as per the wip.
They are Artwork1, Artwork2, Artwork3, Artwork4, Video, Blank and Background.
Look at the xml for placement of each asset.

Hope that helps.

[dougan78]

I figured it out I must have typed something wrong.  I reset everything and started again and works fine.  The image swaps between wheels as expected.

Thanks all!