scrolling list?

[tegleg]

hello
ive managed to get a mobile menu working big thanks to dev ninja source.
now im looking at expanding it and having some kind of scrolling list of menu buttons/images.

looking at the technical guide here http://udn.epicgames.com/Three/Mobil...ml#ListControl
it mentions creating custom controls and ends that section saying " (see the Custom List Control section). ", and there is no custom list control section to be found.

anyone any ideas how to make something like this?

thanks

[Xces]

im working on something simular today, but with kismet
I use the Hourences Kismet Interface, the "Touch Input" Event to handle swiping and much magic

in geneal it works but not good enoght to show it

[tegleg]

ok thanks
looking at that, in GUIComponent
// The component is being dragged
event Dragged(IntPoint NewPos)

so if i copy that logic and apply the (relative) position to all the menu objects i want to scroll....
hmmm

[Chihastonick]

Dev Ninja Source?

[tegleg]

Dev Ninja Source?

http://forums.epicgames.com/threads/...Fruit-Slicing)

[bwhit]

Hey teg, the DN_source has an example of a scrolling list in the HighScoreMenu. The MobileMenuList was a pain to get to work because the MobileMenuListItem's Canvas hook is commented out by default so it can't draw itself.

Check out the Dev_Ninja_HighScores. The list item draws itself with the RenderItem hook from its owner list.

/*
* This function is called when this object is added as a ListItem to the HighScoreMenu's MobileMenuList. Not when
* being saved/loaded.
* 1. Instead of having explicit objects to render, this iterates over the Score array and draws all of them.
* 2. Set the canvas draw color to white.
* 3. Set the canvas position to the top right of the owner list.(HighScoreMenu's MobileMenuList)
* 4. Draw the PlayerName of the current index, at the explicit scale.
* 5. Get the text size of the score at the current index, and out it to the local floats.
* 6. Set the canvas position to the top left of the owner list (HighScoreMenu's MobileMenuList) minus the score's 
* text width * explicit scale.
* 7. If the score at the current index isn't zero, draw it. Or else all of the empty high scores will be drawn.
*/
function RenderItem(MobileMenuList List, Canvas Canvas, float DeltaTime)
{
	/*
	* @ var i: Current index of iterator.
	* @ var sX/Y: X/Y scale of the score text.
	*/
	local int i; 
	local float sX, sY;
	/* 1 */
	for(i = 0; i < Score.Length; i++)
	{
		/* 2 */
		Canvas.SetDrawColor(255, 255, 255);
		/* 3 */
		Canvas.SetPos(0, List.Top * i/5);
		/* 4 */
		Canvas.DrawTeXt(Player[i], , Scale, Scale);
		/* 5 */
		Canvas.TextSize(Score[i], sX, sY);
		/* 6 */
		Canvas.SetPos(List.Width - sX * Scale, List.Top * i/5);
		/* 7 */
		if(Score[i] != 0)
    	{
    		Canvas.DrawTeXt(Score[i], , Scale, Scale);
    	}
	}
}

So you could be using the MobileMenuListItem's Canvas hook to draw buttons and the MobileMenuList's OnTouch event to handle the controls. You may need a separate ListItem for each of your buttons/etc so you can grab the right instance. (Unlike the HighScoresObject that just iterates over an array - it probably returns itself as the selected item)

If you want your list to continuously scroll, make sure to set bLoops to true in your MMenuList.

[tegleg]

thanks again bwhit
i already used my own scoreboard so i missed that
if i get it working ill post something on here
cheers

[Ivan84]

I'm working on this today. First of all a lot of thanks to bwhit for sharing this code.
I've started setting up something, what i want to achieve is a vertical scrollable list with 10 characters' names and you should be able to choose one of this scrolling the list.
I'm having a couple of issues putting more than one list element inside the list.

This is my (your ) list element class:

class MenuComponent_ListItem_PawnName extends MobileMenuListItem;

/*
* @ var Player: Array that holds all the player names of high scores.
* @ var Score: Array that holds all the high scores.
* @ var Scale: Scale used with Canvas to render text.
*/
var string CharName;
var int Scale;

/*
* This function is called when this object is added as a ListItem to the HighScoreMenu's MobileMenuList. Not when
* being saved/loaded.
* 1. Instead of having explicit objects to render, this iterates over the Score array and draws all of them.
* 2. Set the canvas draw color to white.
* 3. Set the canvas position to the top right of the owner list.(HighScoreMenu's MobileMenuList)
* 4. Draw the PlayerName of the current index, at the explicit scale.
* 5. Get the text size of the score at the current index, and out it to the local floats.
* 6. Set the canvas position to the top left of the owner list (HighScoreMenu's MobileMenuList) minus the score's 
* text width * explicit scale.
* 7. If the score at the current index isn't zero, draw it. Or else all of the empty high scores will be drawn.
*/

function RenderItem(MobileMenuList List, Canvas Canvas, float DeltaTime)
{
	/*
	* @ var i: Current index of iterator.
	* @ var sX/Y: X/Y scale of the score text.
	*/
	local int i; 
	local float sX, sY;
	
	/* 2 */
	Canvas.SetDrawColor(255, 255, 255);
	/* 4 */
	Canvas.DrawText(CharName, , Scale, Scale);
	/* 5 */
	Canvas.TextSize(CharName, sX, sY);
}

defaultproperties
{
	Scale=1
	//default value
	CharName = "Archer1"
}

And this is how i add them to the list inside the scene that is on the screen:

       Begin Object Class=MenuComponent_ListItem_PawnName Name=Archer1
		bIsVisible=true
		CharName="Archer1"
	end object

	Begin Object Class=MenuComponent_ListItem_PawnName Name=Archer2
		bIsVisible=true
		CharName="Archer2"
	end object

	Begin Object Class=MobileMenuList Name=ChooseChar
		Left=-0.3
		Top=0.5
		Width=0.4
		Height=0.5
		bIsHidden=false
		bRelativeWidth=true
		bRelativeHeight=true
		bRelativeLeft=true
		bRelativeTop=true
		EndOfListSupression=1.0
		Items.Add(Archer1)
		Items.Add(Archer2)
        End Object
        MenuObjects.Add(ChooseChar)

The result is that the items are drawn "correctly" but i'm not able to select anything.
I can scroll the list and i can see that the strings move up and down but every element inside the list is always visible and rendered. Scrolling the list seems to have no effects at all.

[bwhit]

I'm not sure I understand, it sounds like everything is scrolling properly. How are you handling the selecting of list items? Have a look through MobileMenuList.uc - there are a lot of functions to get the selected item. Like GetSelected():

function MobileMenuListItem GetSelected()
{
	local MobileMenuListItem Item;
	if ((SelectedItem.Index >= 0) && (SelectedItem.Index < Items.length))
	{
		Item = Items[SelectedItem.Index];
		if (Item != none && !Item.bIsVisible)
			Item = none;
		return Item;
	}
	return none;
}

edit: Also the MMList has an OnTouch event to handle global input and it gets a reference to the MMObject that was touched. It would probably be easiest to handle selection there.

[Ivan84]

Ok i am an ***, i'm reading all the code inside MobileMenuListItem and inside MobileMenuList. I didn't set the Height and Width of my MobileMenuListItem, now i've done it and something starts to get better. I think i'm far from a working version but now it select the item.
I'm also overriding the MobileMenuList class to debug with a couple of broadcast what's going on.

Now i'm not using the selected item because i don't have a working list yet, then i will need to take the string inside the selected item. Thanks again, i will post here the next steps if i will reach a decent point with this.

[Ivan84]

Ok i wasn't so far.
Now it works, it was just a settings issue. After setting a decent Height it worked automatically.

At this point the basic list i have is done in this way:

class MenuComponent_ListItem_PawnName extends MobileMenuListItem;

var string CharName;

function RenderItem(MobileMenuList List, Canvas Canvas, float DeltaTime)
{
	 Canvas.SetDrawColor(255, 255, 255);

	 //draw the text
	 Canvas.DrawText(CharName, , 1.0, 1.0);
}

defaultproperties
{
	 //default value
 	CharName = "Archer1"
}

and inside the scene i add the items inside a List in default properties:

        Begin Object Class=MenuComponent_ListItem_PawnName Name=Archer1
		CharName="Archer1"
		Width = 100
		 Height = 50
	end object
 	Begin Object Class=MenuComponent_ListItem_PawnName Name=Archer2
		CharName="Archer2"
		Width = 100
		Height = 50
	end object
	Begin Object Class=MenuComponent_ListItem_PawnName Name=Archer3
		CharName="Archer3"
		Width = 100
		Height = 50
	end object
	

	Begin Object Class=MobileMenuList Name=TestList
		Left=100
		Top=500
		Width=200
		Height=350
		bIsHidden=false
		bRelativeWidth=false
		bRelativeHeight=false
		bRelativeLeft=false
		bRelativeTop=false
		EndOfListSupression=1.0
		Items.Add(Archer1)
		Items.Add(Archer2)
		Items.Add(Archer3)
	End Object
	MenuObjects.Add(TestList)

It is very ugly but it works. I will implement the logic needed for my game and I will try to add a background and other details.
Thanks for the help.

[tegleg]

messing with this again and need a bit of help please
what i want to do is display a list of times, since the list is long it would be easier to add them dynamically rather than in DefaultProperties.
however, it doesnt display anything.
heres the menu (cut down)

class StatsMenu extends MobileMenuScene;

var MobileMenuList TheList;

event InitMenuScene(MobilePlayerInput PlayerInput, int ScreenWidth, int ScreenHeight, bool bIsFirstInitialization)
{
   //create and init list items
   local FTSave_Game SG;
   local TimeList_Item CurrentItem;
   local int i;

	super.InitMenuScene(PlayerInput, ScreenWidth, ScreenHeight, bIsFirstInitialization);

   //load save game to get times
   SG = new class'FTSave_Game';
   class'Engine'.static.BasicLoadObject(SG, "FTSave_Game.bin", true, 1);

   //add 40 items to the list and set values
   for (i=0;i<40;i++)
   {
    if (i != 0) //not first one
    {
//create the item       
CurrentItem = new class'TimeList_Item';
       CurrentItem.LevelTime = SG.LevelTime[i];
       CurrentItem.Level = i;

//add item to the list
       TheList.Items.AddItem(CurrentItem);


    }
   }
}

defaultproperties
{
	bRelativeLeft=true
	bRelativeTop=true
	bRelativeWidth=true
	bRelativeHeight=true
	Left=0
	Top=0
	Width=1
	Height=1

//the list thats supposed to display the times
Begin Object Class=MobileMenuList Name=ScoreList
      Left=0.30
      Top=0.3
      Width=0.4
      Height=0.5
      bIsHidden=false
      bRelativeWidth=true
      bRelativeHeight=true
      bRelativeLeft=true
      bRelativeTop=true
      EndOfListSupression=1.0
      Deacceleration=0.9
      EaseOutExp=8.0
      bTapToScrollToItem=true
      //bLoops=true
      bForceSelectedToLineup=true
      //Items.Add(HighScoreObject)
   End Object
   MenuObjects.Add(ScoreList)
   TheList=ScoreList

and the item

class TimeList_Item extends MobileMenuListItem;

//level times
var float LevelTime;
var string DisplayTime;
var int Level;

var int Scale;

function RenderItem(MobileMenuList List, Canvas Canvas, float DeltaTime)
{
 	   DisplayTime = FormatTime(LevelTime);//a function that truncates the float

        if(LevelTime != 0)
    	{
    		Canvas.DrawTeXt(Level$": "$DisplayTime, , scale, scale);
    	}

}

logs show that the items are created and added to the list Items array. but it just doesnt show

any ideas?

thanks

edit:
seems taking all this out of the list object
EndOfListSupression=1.0
Deacceleration=0.9
EaseOutExp=8.0
bTapToScrollToItem=true
//bLoops=true
bForceSelectedToLineup=true
makes the items appear if i open the menu and try to scroll, but when i scroll down, it all dissapears...

[TheBuilder]

I haven't read all post in this thread, but they removed the section about list after I complained about it a few years ago (sorry :P) ( http://forums.epicgames.com/threads/...bruary-version ).

However, on a general note I recomand to focus on how the menu system work in general (looking at subclasses and see how they do things). After I learned that well (took some time though), I was able to make everything I could come up with, without looking at any tutorials.

[bwhit]

Hmm, not much time to look but make sure you're MobileMenuListItems have a Width and Height, without them you can expect odd results with both drawing and functionality.

[tegleg]

thanks, it still doesnt work.
the link from TheBuilder is interesting but hardly any of it is still used.

im running out of things to try here
has anyone got a scroling list to work properly?
maybe its broken?

while looking through the classes i noticed MobileMenuInventory and it seems to have the same kind of functionality as the list.
all attempts to use it so far show nothing.