Announcement

Collapse
No announcement yet.

scrolling list?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    scrolling list?

    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

    #2
    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

    Comment


      #3
      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

      Comment


        #4
        Dev Ninja Source?

        Comment


          #5
          Originally posted by Chihastonick View Post
          Dev Ninja Source?
          http://forums.epicgames.com/threads/...Fruit-Slicing)

          Comment


            #6
            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.

            Code:
            /*
            * 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.

            Comment


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

              Comment


                #8
                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:
                Code:
                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:

                Code:
                       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.

                Comment


                  #9
                  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():

                  Code:
                  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.

                  Comment


                    #10
                    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.

                    Comment


                      #11
                      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:

                      Code:
                      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:

                      Code:
                              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.

                      Comment


                        #12
                        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)
                        Code:
                        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
                        Code:
                        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...

                        Comment


                          #13
                          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.

                          Comment


                            #14
                            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.

                            Comment


                              #15
                              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.

                              Comment

                              Working...
                              X