Layout Creation Help Request

[Doosh]

Hi

I am new to the RetroFE and I hope that someone is able to assist me in creating two very simple layouts for my use.

I have looked into some examples and the RetroFE web site documentation as a starting point, but found it to be confusing, hence for my request.

I seek help in creating the following two simple layouts below. The later layout is based on an old FE which is called ArcadeOS which I like to modernise to have video rather than screen shots.

1. Emulator Selection Layout:

For this Layout, I have downloaded some emulator wheel logos from the HyperSpin web site. ie. Mame, Daphne.

All that I wish for the layout to do is the following:

a) Have the emulator selection wheel logos centered on the screen so that it scrolls vertically. I may only have a handful of emulators logos to select from. I intend to start with one (Mame) and add others to it.
b) The background for the logos randomly plays in the background full screen video of the emulator selected.

2. Emulator Layout:

This layout I intend to use for each of the emulators selected from the Emulator Selection Layout.

The closest layout that I could find that has some of the features I seek is the "Antimatic" layout on the RetroFE layout download page.

I seek a very simple equivalent to the "Antimatic" layout that only does the following:

a) Have the game selection wheel logos left or right justified on the screen so that it scrolls vertically like a wheel.
b) For the background, have a full screen video of the game playing repeatedly.
c) The game selection wheel logo to be overlaid in front of the background.

If possible:

d) Adjust the transparency of the game selection wheel, but the chosen wheel logo has no transparency and is slightly enlarged.

Other Questions:

1. I understamd the "Emulator Layout" is to be placed in the following directory:

"...\RetroFE\layouts"

But with the "Emulator Selection Layout", were is the layout supposed to be placed?, and how is ReteoFE configured to launch the "Emulator Selection Layout"?


I look forward to your help with the above.

Thank you.
D.

[Pieter Hulshoff]

I think there's a few things you need to know here:
1. RetroFE does not make a difference between an emulator selection layout and an emulator layout. RetroFE will even allow collections that are a mix of these two, so the layout is not aware of the differences.
2. RetroFE uses a menuIndex to differentiate between the different menu layers, so if you wish to have a menu consisting of emulator selection -> emulator, then you get two menuIndices: 0 and 1. You can simply use the alpha (transparency) parameter to make items visible/invisible on a specific menuIndex.
3. The Animatic theme should have most of what you're looking for; you just need to adjust the x/y/... parameters of the menu.
4. You can define everything in RetroFE/layouts/<layout name>/layout.xml. Only if you need one of the emulators to use a different layout from the others you need to do something special.

I may be able to have a look at it myself this weekend, but it depends a bit on how things go. I'm rather busy these days.

[Doosh]

Hi Pieter

Thank you for your reply.

I am still trying to understand how RetroFE works, and I am slowly learning, but not at the pace that I would like to. Leaning / understanding software language is not a skill I have, and sorry for the questions that I raise below:

1 "RetroFE does not make a difference between an emulator selection layout and an emulator layout.":

I think I understand what you mean. And if I am right, you are saying that the same layout generally applies between the emulator selection layout and the emulator layout. I see the similarities of the layouts on the RetroFE default layout provided when first installing RetroFE, where the menuIndex is used to make items visible/invisable.

Without trying "Animatic" layout, does the video background rotate between different games on the emulator selection layout, and when the selected emulator is chosen (ie. Emulator layout screen), the video background is only shown for the selected game? If that is the case, on the emulator selection layout, how are the video background chosen by RetroFE? Is it randomly chosen from the emulators video directory and continue to be randomly chosen once the background video is finished playing. Also I gather the video background in the Emulator layout screen if the same game is selected, the video background will be played repeatedly.

2. You can define everything in RetroFE/layouts/<layout name>/layout.xml:

Do you mean that the two different menuIndexs. ie. 0 and 1 are created in the one layout.xml file? Looking at the RetroFE/layouts/Default 16x9/layout.xml files seem to suggest that.

Would this mean that under the "Emulator selection layout" ie. menuIndex 0, when scrolling through the emulator options (ie. Mame, Daphne, Model2 ...etc), the layouts would be the same for each emulator? Also I suppose this would apply to the "emulator layout" ie. menuIndex 1, when each emulator layout would be the same. ie. Mame layout, Daphne layout, Model2 layout would all be using the same layout.


If you are able to assist me, your help would be appreciated. I note that my request is for a simple layout, noting to complicated.

In the mean time, I will be raising other questions to understand how RetroFE works, and how I can best configure the FE to suit my requirements.

Thank you.
D

[Pieter Hulshoff]

Your understanding is correct. The Animaics screenshot is a bit unfair though, since it uses special full screen videos. Almost everything you see there is a single video except for the wheel. As such, it doesn't really show RetroFE features.

Sent from my SM-G950F using Tapatalk

[billyc666]

out of curiosity can you have from the main menu (0) goto a selected menu index ie: atari 2600 uses menu index (1) while arcade uses menu index (2).

i can help you create a theme if you want it sounds like a very basic theme which shouldn't take too long. ask away on this post and ill answer you all day as im not working today

[Pieter Hulshoff]

The menuIndex is directly related to the menu layer. You start at index 0, and it increases for every collection you enter, and decreases for every collection you exit. Index 2 could e.g. be reached as Main->Consoles->SNES if you setup your menu structure that way.

[Doosh]

Hi Billyc666

Thank you for your reply and offer to help.

If you are able to help create the layout that I seek that would be kindly appreciated. I not it may be simple but to me its complicated. I am however, slowly learning how RetroFE works.

Thanks
D

[billyc666]

no problem, i'll create what i think you want tomorrow, just a couple of  quick questions how many wheel logos do you want on the main screen and how many on the collection screen do you want the layout made at 1080p or lower

[Doosh]

Hi Billyc666

Thank you, I appreciate your assistance.

Hopefully what you create, other users can use if they are interested in it.

In response to you questions:

1. In regard to the wheel logos on the main screen, I would say 7 for now. I plan on configuring Mame, Daphne, Model 2, SuperModel (Model 3), Tatio X, Demul and TriForce. The emulators are just for arcade games.

2. On the emulator selection screen (collection screen), the game selection will be based on the the games list which I am still to work out.

3. The resolution at this stage for the main screen and emulator select screen would be: 1680 x 1050. I will be use RetroFE on a test / setup PC for the moment until get things working which might take me a while.

Thank you again for your generosity.

D.

[billyc666]

try this in a layout file, let me know how it looks and whats wrong with it, and i'll see if i can fix it, im no expert i've only done this a couple of times

Code: [Select]

<layout width="1680" height="1050" font="fonts/OpenSans.ttf" loadFontSize="72" fontColor="dedede">


    <!----------------------------------------------------------------------------------------------------------------------------------->
    <!-- Sounds -->
    <!----------------------------------------------------------------------------------------------------------------------------------->


    <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" />


 <!-- <image src="images/mainbg.jpg" alpha="1" width="1920" height="1080" layer="1"> </image> -->



    <!----------------------------------------------------------------------------------------------------------------------------------->
    <!-- menuIndex 0 -->
    <!----------------------------------------------------------------------------------------------------------------------------------->



   
    <menu type="custom" imageType="logo" orientation="vertical" scrollTime=".2" scrollAcceleration=".02" >
      <itemDefaults x="center" y="center" xOffset="-210" fontSize="56" width="400"  layer="12"/>
        <item yOffset="0" alpha="0" />


      <item yOffset="-560" alpha="1">
            <onMenuEnter menuIndex="0">
                <set duration=".15">
                      <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>

            <onMenuExit menuIndex="0">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="-420" alpha="1">
            <onMenuEnter menuIndex="0">
                <set duration=".15">
                    <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>

            <onMenuExit menuIndex="0">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
      </item>
      <item  yOffset="-280" alpha="1">
            <onMenuEnter menuIndex="0">
                <set duration=".15">
                     <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
 
            <onMenuExit menuIndex="0">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item yOffset="-140" alpha="1" layer="12">
            <onMenuEnter menuIndex="0">
                <set duration=".15">
                    <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>

            <onMenuExit menuIndex="0">
                <set duration=".15">
                     <animate type="alpha" to="0"/>
                </set>
            </onMenuExit>
        </item>
      <item  xOffset="-220" yOffset="0" width="420" layer="18" alpha="1" selected="true">
            <onMenuEnter menuIndex="0">
                <set duration=".15">
                     <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
            <onMenuExit menuIndex="0">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="140" layer="12">
            <onMenuEnter menuIndex="0">
                <set duration=".15">
                    <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
   
            <onMenuExit menuIndex="0">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="280" >
            <onMenuEnter menuIndex="0">
                <set duration=".15">
                     <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
   
            <onMenuExit menuIndex="0">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="420" >
            <onMenuEnter menuIndex="0">
                <set duration=".15">
                     <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>

            <onMenuExit menuIndex="0">
                <set duration=".15">
                     <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="560" >
            <onMenuEnter menuIndex="0">
                <set duration=".15">
                   <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
   
            <onMenuExit menuIndex="0">
                <set duration=".15">
                     <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
        <item yOffset="600" alpha="0" />
   </menu>
   
 <!-- wheels collection menu-->
     
    <menu type="custom" imageType="logo" orientation="vertical" scrollTime=".2" scrollAcceleration=".02" >
      <itemDefaults x="20" y="center" xOffset="20" fontSize="56" width="400"  layer="12"/>
        <item yOffset="0" alpha="0" />


      <item yOffset="-560" alpha="1">
            <onMenuEnter menuIndex="1">
                <set duration=".15">
                      <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>

            <onMenuExit menuIndex="1">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="-420" alpha="1">
            <onMenuEnter menuIndex="i">
                <set duration=".15">
                    <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>

            <onMenuExit menuIndex="1">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
      </item>
      <item  yOffset="-280" alpha="1">
            <onMenuEnter menuIndex="i">
                <set duration=".15">
                     <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
 
            <onMenuExit menuIndex="1">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item yOffset="-140" alpha="1" layer="12">
            <onMenuEnter menuIndex="1">
                <set duration=".15">
                    <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>

            <onMenuExit menuIndex="1">
                <set duration=".15">
                     <animate type="alpha" to="0"/>
                </set>
            </onMenuExit>
        </item>
      <item  xOffset="20" yOffset="0" width="420" layer="18" alpha="1" selected="true">
            <onMenuEnter menuIndex="1">
                <set duration=".15">
                     <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
            <onMenuExit menuIndex="1">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="140" layer="12">
            <onMenuEnter menuIndex="1">
                <set duration=".15">
                    <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
   
            <onMenuExit menuIndex="1">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="280" >
            <onMenuEnter menuIndex="1">
                <set duration=".15">
                     <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
   
            <onMenuExit menuIndex="1">
                <set duration=".15">
                      <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="420" >
            <onMenuEnter menuIndex="1">
                <set duration=".15">
                     <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>

            <onMenuExit menuIndex="1">
                <set duration=".15">
                     <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
      <item  yOffset="560" >
            <onMenuEnter menuIndex="1">
                <set duration=".15">
                   <animate type="alpha" from="0" to="1" />
                </set>
            </onMenuEnter>
   
            <onMenuExit menuIndex="1">
                <set duration=".15">
                     <animate type="alpha" to="0" />
                </set>
            </onMenuExit>
        </item>
        <item yOffset="600" alpha="0" />
   </menu>
<!-- video for both menus-->

      <reloadableVideo imageType="screenshot" x="0" y="0" alpha="1" width="stretch" height="stretch" layer="2">
    <onMenuEnter menuIndex="0">
      <set duration="0">
        <animate type="alpha" to="1" />
      </set>
    </onMenuEnter>
<onMenuExit menuIndex="0">
      <set duration="0">
        <animate type="alpha" to="0"/>
      </set>
    </onMenuExit>
  </reloadableVideo>

</layout>