Optimized ScrollView Adapter + Playmaker support

Thanks for the tip. It was an uncomfortable thing to do, but it was necessary for the "use unscaled time for animations" feature because when the change was introduced, the default time scale also changed to Unscaled like most UI systems should work, so older users that relied on Time in their project in mightrelation to OSA would've got really-hard-to-debug issues.
It was the only way to prevent this from happening - people fix their errors every time, but they don't read the release notes every time.
Also, usually, inside an OSA subclass you'd use the same time, so you don't need to know whether to use the (older) Time.time or Time.unscaledTime - you'll just use the new property Time. Of course this focused more on animation-related uses. Things like scheduling some work using Time.time that handles data, not animations, would better be done outside the class to separate concerns.

I highly appreciate any suggestion, if you think there's a better way to handle this.

-- Lucian

 

I agree that people (me included) don't read the release notes very often.

Also note that 'UnityEngine.Time' contains more than 'time' and 'unscaledTime'.
It is not a blocking problem, we can still write 'UnityEngine.Time', but I must admit having lost some time finding out why the compiler refused to give me access to Unity's 'Time' class even with 'using UnityEngine;'.
And that's the main problem, if I have lost some time over that, some other people will also have the same problem.

As for a suggestion, I'm not sure I can provide one.
If you specifically generated a compile error to force people using 'Time.time' to update, then the compile error is a feature, a strange feature but still a feature.
Adding something in the manual can help it would indicate that to use the Unity 'Time' class one must write 'UnityEngine.Time' and not use the using.

 

I guess it's too late for a compiler error now. But yes, I should add a note in the manual. Thanks!
I'll also put comments about it in OSA class summary doc. Maybe while at it I'll get additional ideas.
Sorry for the trouble.

-- Lucian

 

i really really want... auto scroll function....... Is there a feature?
I want to express the effect that time flows automatically... like... video player...
help me TT

 

Hey,
You can use timed calls to SmoothScrollTo(). I suppose you want something similar to a clock which slides the h/mins/sec? If yes, you can use exactly that, but you need to manage the animation yourself, maybe in an external script.

Here's an example implemented directly in your OSA sub-class (but it's better to have it in a separate script):

Code (CSharp):

1.         float _LastStepTime;
2.         int _LastScrolledIndex = -1;
3.         protected override void Update()
4.         {
5.             base.Update();
6.  
7.             if (this.Time - _LastStepTime > 1f)
8.             {
9.                 // Finished scrolling
10.                 if (_LastScrolledIndex == GetItemsCount())
11.                     return;
12.  
13.                 _LastScrolledIndex++;
14.                 _LastStepTime = this.Time;
15.  
16.                 SmoothScrollTo(_LastScrolledIndex, .5f);
17.             }
18.  
19.         }

 

Are these any good examples showing a GridAdapter with multiple prefabs? I only see one using a OSA list view. I'm not sure how to override the CreateViewsHolder when using a GridAdapter.

Thanks

 

Hey,

Usually, any attempt of having multi-prefab grids I saw actually ended up as one of these:
1. a ListView of manually-implemented rows.
2. a GridView with a single cell prefab having multiple variants which you manually disable/enable,
3. (most used where there are sections of items of different looks) multiple independent GridViews with their own cell prefab, put in a regular parent scrollview, and have "Forward Drag Same Direction" checked, so that when you scroll through one of the GridViews and you reach its extremity, the GridView itself is moved (drag is forwarded to the parent) so that the next gridview is seen. This is the most advanced case and it provides the most benefits, but it takes more time to implement.

People usually go with #2 because it's the fastest to implement. But optimizations in general are highly-dependent on the details, so I could give you a more accurate solution if you'd provide more specs of your use-case (a video/gif/photo would also be very welcome).

Lucian

 

Thanks for the quick response. Option 2 seems like the best for me I will try that.

 

Hi!
problem!:

i use playmaker:

"Assets\OSA\Scripts\Playmaker\Adapters\PlaymakerListOSA.cs(30,18): error CS0619: 'BaseParamsWithPrefab.itemPrefab' is obsolete: 'Use ItemPrefab instead'"

"Assets\OSA\Scripts\Playmaker\CustomActions\Util\FsmArrayGetRandomItem.cs(95,11): error CS0103: The name 'ActionHelpers' does not exist in the current context"

dont start scene

this error log

 

Hi!

This was something that slipped away and made it into v5.0. It's fixed for v5.1, which will be released soon.
What you have to do is go to PlaymakerListOSA.cs and change

_Params.itemPrefab

to

_Params.ItemPrefab

This shouldn't happen. It may be a consequence of the above issue, but I don't get it on my machine.
Did you follow the instructions closely? They're in /Extra/PluginSupport/Playmaker/README.txt

Also, in the email you've sent, you mentioned something about OSA changing the standard assets. This shouldn't happen. If you refer to any "Missing reference" warnings in the inspector, they're resolved after any compiler errors are gone (it's the way it is, not something related to OSA). Don't worry about them.
But anyhow, always do a full backup of your project before importing a new asset. This is actually the 1st step in all of the readme files and manuals you'll find inside OSA. It's just good practice in general.
Waiting for your reply

-- Lucian

 

hello Lucian.
Yes, I did everything according to the instructions as much as possible. №7 - can not be done, because due to errors, the UI/OSA is not displayed. Playmaker - not displayed due to errors.

i have now only 1 error:

Assets\OSA\Scripts\Playmaker\CustomActions\Util\FsmArrayGetRandomItem.cs(95,11): error CS0103: The name 'ActionHelpers' does not exist in the current context

My actions (instructions steps)
1) ok
2) Already had (but your link is not working)
3,4,5,6) install:
DataMakerXMLTemplates-Unity2017-1-f3.unitypackage
Demos
TableView
Utilities
PMSupport-Unity2017-1-f3

to PlaymakerListOSA.cs change _Params.itemPrefab to _Params.ItemPrefab

what should I do?

 

I created a new project, repeated the steps - the same error.

 

Thanks for reporting this. I've found the culprit: Playmaker still doesn't use .asmdef files so OSA couldn't see the Playmaker code for Unity 2017.3 and up.
I've updated the readme for the next version and made it into an online resource from now on.
Here's the updated version.

Thanks again for helping me find this issue.

-- Lucian

 

Hi Lucian.

I still can’t figure out what to do!
I get an error:
Assets\OSA\Scripts\Playmaker\CustomActions\Util\FsmArrayGetRandomItem.cs(95,11): error CS0103: The name 'ActionHelpers' does not exist in the current context

because of this, the program does not start.
I commented out the code in the file:

// fsm = ActionHelpers.GetGameObjectFsm(go, fsmName);
// cachedGameObject = go;
// cachedFsmName = fsmName;

The program began to work, but an error occurred during compilation:
Assets\OSA\Scripts\Playmaker\Editor\OSAPlaymakerInitializeOnLoad.cs(11,3): error CS0246: The type or namespace name 'InitializeOnLoadAttribute' could not be found (are you missing a using directive or an assembly reference?)
Assets\OSA\Scripts\Playmaker\Editor\OSAPlaymakerInitializeOnLoad.cs(11,3): error CS0246: The type or namespace name 'InitializeOnLoad' could not be found (are you missing a using directive or an assembly reference?)

Help solve the problem!

 

You shouldn't comment out things in the OSA's source files. I can't help you after that because then OSA is not OSA anymore. You'll need to remove it completely and reimport it to make sure you have the original, untouched version, or, if you're sure that was the only change you've made, undo it.
Now, did you comment the code because my answer didn't help?

Also, the error you get in "OSAPlaymakerInitializeOnLoad.cs" makes me think you've also modified something else in the OSA's sources, which shouldn't be done, except if you're sure what the consequences are.
As a guess, I think you might've removed the "using UnityEditor;" at the top of the file. If yes, try adding it back and the error should disappear. But again, if you think there's even the smallest chance that you have modified something else, it's better to start again with a fresh import of OSA (remove, then import), using the new readme file I've linked above.
Please reply here if you solved it so I can know if to investigate it further or not.

-- Lucian

 

hello.
i delete /Scripts/OSA.asmdef and /Scripts/Editor/OSA.Editor.asmdef.
now everything works.
Thanks!

 

Hey, in the Grid packed scene, there are many empty spaces, I'm trying to build an album, but it doesn't look nice with all the many empty spaces around, even if I change it to the biggest group size there are still empty spaces (that could easily be filled with small squares). Any way to fix this issue? or do you recommend any specific setting to avoid the empty squares? Thanks

 

Hey,
Let's discuss on our discord server, because I'd need to first see an image of what you'd want it to look like. You can send me an example from some other app or draw a simple sketch.
Maybe what you want instead is a simple Grid, but I can give you more directions after I see what final result you need. See you there.

-- Lucian

 

Hey you can see this example, why are there 3 empty space? 3 small squares could fit there
I simply want the grid to be complete, different pic sizes
Pic from the asset: https://imgur.com/a/DNdJczn
Example from iphone album : https://ibb.co/bJkhsW1
-

 

Edit/
TL;DR version: If you have a small enough number of items, just set the group size to that number and the packing will work as expected from start of the grid to the end. Maybe 100-200 items will be fine, but you may even have 1000+ if load times aren't an issue for you (just do some tests - only the initial load time will be affected, anyway, not the scrolling speed).
/Edit

Oh, I see. You'll get better results if you use just 2 sizes and if size A is twice as size B (or the opposite). But It'll never be perfect, unless you use the included PackedGridLayout component directly, without OSA, or specify a high enough group size.

This part of OSA tries to solve an impossible problem by having a partial solution: The problem is the grid is intended to be "infinite", but the packing algorithm for the PackedGridLayout element (that's included as an utility in OSA), needs to know the position and size of each item and this is impossible because it'll mean the entire grid needs to be constructed at once, which would mean OSA wouldn't be needed at all in this case, because OSA's role is to recycle views, i.e. only the visible views actually exist in the scene.
One step deeper in the implementation, OSA uses groups of PackedGrids (like group 1 holds the first X items, then group 2 holds the next X items etc.) to give the impression of "infinite" lists while keeping items in each group condensed - the users can choose whether they want smaller groups (++performance --packingEfficiency) or larger groups (--performance, ++packingEfficiency). I think these details are explained in the code's documentation.

Let's go on our discord server and we can continue there (I'll also need to verify your purchase)

-- Lucian

 

I see, so it's designed wrong then-
the grid should build the empty different sizes before it loads the elements,(empty grid)
later when the elements are being loaded they can be zoomed (and cropped) to the grid size,
(since it's only an image preview)
look at- https://ibb.co/bJkhsW1 for example, before the pics were loaded it shows empty white squares
the grid comes first and later the pics,
I'd do it by myself but I use your script for the optimization and reusing elements
I'm on Discord username - @swifter, yes I purchased it of course

 

I appreciate the suggestion, and it makes sense as a standalone solution.
It's just that OSA is fundamentally optimized and micro-optimized everywhere, even the direction in which you scroll leads to different algorithms, which also branch out into different sub-algorithms based on how close are you to the edge etc.
OSA was initially implementing your solution, where it used the classic ScrollRect and the Content object was literally resized to the total size of all items, to make space for them. But after 100k items you get weird movements because of floating point numbers' precision, so in order to support up to ~2B items, we've basically re-invented the Unity's ScrollRect from ground up.
The basic principle is reusing items in a list, and that can be greatly extrapolated to grids (a row of items is an item itself) and several other solutions. But the PackedGrid, because its structure can't be defined in terms of a list of items, it must be a self-containing component and thus, handle its own recycling process.
Yes, it'll be a great addition to make the PackedGrid itself a recycling component using the old approach, and that can be used for lots of items without the OSA component. Unfortunately, there's no room on the to-do list for the v5.1 release, but I'm adding it below the list, so v5.2 will most probably have it.
Let's continue on discord, as you've suggested. I can answer further questions there.

-- Lucian

 

Hi there. It looks like I want to implement sort of the same thing as sp-sergio-gil. What we are thinking about is more freedom in terms of mixing and matching prefabs in a grid. See for example Spotify:



I've highlighted their "prefabs" with blue outlines. Here we have essentially 3 prefabs:

• Title
• Title + subtitle
• Horizontal scroller

I get that it makes sense to put the Horizontal scroller into its separate nested OSA sure. But for the two remaining prefabs, it would make sense to have them as prefabs and not having to stash them into their own OSA. Surely it must be more performant to have just one prefab displayed for each title or title+subtitle prefab, than embedding these elements into own nested scrollviews?


---

OMG it's starting to click now! Really had to wrap my head around this. Don't know why it's hard to grasp, but of course. To mimic Spotify above you would just make a vertical list adapter with multiple prefab support, toss a mixture of titles, title+subs, and horizontal scroller prefabs in there. The horizontal scroller prefab itself would have a horizontal OSA list adapter

Sorry for being stupid! (rubber ducking this with visualizations above worked here lol)

Btw. your Discord invite link (editor -> Tools -> OSA -> ask something (Discord) has expired

 

Hey,
You are correct about having a vertical OSA with multiple prefabs and have 1 prefab for horizontal nested OSAs, and other prefabs for the titles. It's actually not that obvious if you're just getting started or didn't use OSA that much.

Hint here: If your text-only prefabs are exactly like in picture, you could just use TMPro to put the 2-line text into the same TMPro text instance. If you don't want to also include the auto-sizing feature (although, it's already exemplified in the multiple prefabs demo), just use the same height for the both variations of the text-only sections, so you could just use CollectItemsSizes and only have 2 different sizes to specify here (but you can have as many as you want, of course). This could be just enough, but of course you can later transition to the auto-sizing method.

The discord link works for me if I open a new incognito tab, i.e. not logged it. Are you sure it expired? I remember checking "Do not expire" or something similar when creating the link. Maybe it's the browser or a bug on their end, but it seems to work now. Please let me know exactly what it tells you - a screenshot would also be welcomed.

-- Lucian

 

Sorry, i am still a beginner. How do I add Image source link to a cell prefab ? I noticed some of the images are gotten from the web. how can I add my own images?

 

Hey,

The provided examples already include most of the code you'll need for this, and and other common scenarios.
I can give you some directions on discord. Basically, the "grid async download" demo scene contains what you need - if you want a list instead of a grid, it's pretty much the same thing, but you'll first need to check out a list demo (+main manual) to make sure you understand how to work with simple lists and then implement the image downloading on top of that.

-- Lucian

 

hello Lucian
Is there any way to have a header in OSA and when the user scrolls down the header go up until disappears?

thanks

 

Hey,
Is this something different than the "Hierarchy with headers" demo? If you didn't try it, here's the link to the WebGL demo.

 

Hi,
First of all, thank you for the quick response, I really appreciate that

But I don't want a sticky header, please look at the attached image:
the first part is never repeated again, but it's part of the scrollView and should disappear when got out of the screen...

 

Oh, I see. OSAContentDecorator does exactly that. You'll find the necessary info on the class' summary.

Hope this helps

 

I am trying to implement pretty complex UI where we have 10-20 blocks with unknown internal elements count. Each block must have it's own UI background. Here is a schema
I don't have any idea how to solve it and seems demo scenes doesn't provide similar sample. If it would by just a list of ui elements of different type (A, A, A, A, B, B, B, B, B, C, C, C, D..... etc) there wouldn't be a problem. For a block title I could set another element where needed, but I don't have a clue, how to set the background for each block to make it stretchable to entire block content

 

Hi again.

Thanks for the visual. It really helps.

It boils down to the question: How many blocks and how many items in each block can then be, at max?
In 100% of the cases I've encountered, only one level needs optimization, the other one being implemented by a simple ScrollView or LayoutGroup.
In your case, since you'll have around 20 blocks that are costly performance-wise, you'll need an OSA parent, and the possibilities for the blocks themselves are:
a) Have a LayoutGroup on them and manage the sub-items manually, if you have, let's say, less than 100 items per block;
b) Also have an OSA on blocks, in which case you'll use nested_scrollviews_same_direction demo as guidance. This approach is not 100% what you want, but it's the only way to optimize when both the parent and the children have a lot of items and they have the same layout orientation. I've never seen this before, but nonetheless the demo was provided for those that don't want to use nesting in different directions (i.e. vertical parent OSA with horizontal children OSAs, like the nested_scrollviews demo).

-- Lucian

 

Thanks for response @thefallengamesstudio

1st option: I been thinking about it and the only way to use it is to minimize visible UI elements in total ~10 items, otherwise this will drop performance using native Unity UI scroll view. That could work, but... only like a temporarily one
2nd option: unfortunately not the result we want..

The only what I have imagined is to put blocks background in a separate layer and adjust the heigh according to visible ItemViewHolders of the associated group. I think it's possible listening "OnScrollChange" event, sort out visible view holders by groups and define the background top and bottom position... But it's pretty complex, that's why asking here, maybe there is some better solution.

 

So how many items will there be in a block, at max?

 

We wish to add "View more" button to each of the block, and list should expand on click loading next 5-10 items. Up to 100, probably

 

Hi there! I'am using grid scroll and my is goal is generate items textures (you can put here any cpu intensive task), when item is become visible. Now i just generate them on model's list creating, which takes a lot of time(3-5s). I think it should work like grid with async image download example. Could you help me adopt this for my purpose?
Did i understand right, that i have to replace this line "viewsHolder.iconRemoteImageBehaviour.Load" with my texture generation method?

 

Sorry for the late reply.
If you just want a background that'll visually separate items, and it's ok to keep the same spacing between all the items in the list, you can use an

OSAContentDecorator

for each group which will add any visual you want at any position in the ScrollView, and it'll scroll with it. You'll need to do some calculations to figure out the inset (distance from the Start edge of the Content) and size of each decorator.
So in a nutshell, you'll have a regular list, and the groups will just be represented by a background image (with the decorator script on it).
To get the inset of the first item in a group so you can correctly place the decorator's inset, you use

GetItemVirtualInsetFromParentStart(int itemIndex)

.
Let me know of your progress.

 

Yes, the async approach from there can be generalized. In that case, RemoteImageBehavior can be replaced with your own class that handles the async work, and provides a callback when it's done.

 

This is a fantastic asset and I appreciate the update. I'd like to get some advice on migrating from 4.2 to 5.0. I don't see any migration guides since some older versions (3->4 I think). Thank you!

 

Hey. I'll be happy to help, but first try the steps at "External links" in the manual. Note that they need to be done incrementally, i.e. you can't just jump from 4.2 to 5.0.
Hope this helps.

-- Lucian

 

Hey, guys, I'm trying to use the normalized position to get specific elements of the list displaying at the beginning:

Example

Code (csharp):

1. Initial state:
2.  
3.     visible       non-visible
4. [(1), (2), (3)] (4), (5), ...
5.  
6. Go to index 5:
7.  
8.    non-visible         visible       non-visible
9. (1), (2), (3), (4) [(5), (6), (7)] (8), (9), (10), ...

I'm trying to achieve this by doing:

SetNormalizedPosition([index of element] / [total elements]);

But it doesn't work correctly, the first elements are somewhat aligned but moving forward on the list it starts to offset more and more until it doesn't align at all anymore.

Am I missing something? Is there some OSA internal padding or offset that I should take into account to calculate the normalized position?

Thanks!

 

Hello! Hehe, meet the ScrollTo() and SmoothScrollTo().
You're welcome!

 

OSA has this method:

Code (CSharp):

1. /// <summary>
2.         /// <para>Most notably, it's called for all the items in the recycle bin at the end of a ComputeVisibility pass that are in excess.</para>
3.         /// <para>Controlling which/how many items should be destroyed can be done in multiple ways: </para>
4.         /// <para>- By setting the <see cref="BaseParams.Optimization.RecycleBinCapacity"/></para>
5.         /// <para>- By overridding <see cref="ShouldDestroyRecyclableItem(TItemViewsHolder, bool)"/></para>
6.         /// <para>- By pre-buffering pre-made views holders, created with <see cref="CreateBufferredRecycleableItems(int)"/> and passed to <see cref="AddBufferredRecycleableItems(IList{TItemViewsHolder})"/></para>
7.         /// <para><paramref name="isActive"/> is true if this is a currently used item (it's in <see cref="_VisibleItems"/> list). False if it's not active (a disabled item from the recycle bin).
8.         /// Example of events that can make the active items be directly destroyed, without first putting them in <see cref="_RecyclableItems"/>: Changing items count to 0, resizing the ScrollView, disposing OSA</para>
9.         /// </summary>
10.         protected virtual void OnBeforeDestroyViewsHolder(TItemViewsHolder vh, bool isActive)
11.         {
12.         }

which actually is empty and doesn't call vh.OnBeforeDestroy() method. Why so? I thought that must me called each time before destroying ViewHolder, and overriding it I can cleanup my custom ViewHolder.
Is it a bug or I misunderstood something?

Furthermore, I still didn't get, what is the proper way to cleanup scroll adapter? Is ResetItems(0) enough?

 

That worked perfectly, thank you very much!

 

Hey,
I assume you have v5.0.

Yes, ResetItems(0) should do the cleanup.

Thank you so much for finding this! Indeed it's an inconsistency that I just solved and will be rolled out with v5.1 (coming sometime this month).
Basically, vh.OnBeforeDestroy() was initially needed for when a grid's CellGroupViewsHolder cleared its child items, but of course it makes sense that OSA should also call this for its own items.
The code in v5.1 will look like this:

Code (CSharp):

1.  
2.         protected virtual void OnBeforeDestroyViewsHolder(TItemViewsHolder vh, bool isActive)
3.         {
4.             // Bugfix 07.07.2020 thanks to novaVision (Unity forum): vh.OnBeforeDestroy() wasn't being called
5.             vh.OnBeforeDestroy();
6.         }

Thank you!

Lucian

 

Implementing chat using OSA I met a problem with a content size fitter set to each chat message prefab. Adding items list and scrolling to the last item in a same frame it doesn't actually scroll to the end if last chat message is higher than standard item height. Looks like it updates on a next frame and I have implemented a workaround in coroutine using
`yield return new WaitForEndOfFrame()`
But, it's a dirty way.. How should I implement it better?

 

Hey,

If this is an issue in OSA v5.0, it most probably was fixed in v5.1, so if the below doesn't work, make sure to check the new version (check the migration guide please).

Do you use InsertItems/ResetItems with contentPanelEndEdgeStationary = true and ScheduleComputeVisibilityTwinPass with preferContentEndEdgeStationaryIfSizeChanges = true?
If you don't use ScheduleComputeVisibilityTwinPass, then you probably use ForceRebuildViewsHolderAndUpdateSize or RequestChangeItemSizeAndUpdateLayout, each of them having a similar parameter for keeping the end edge stationary, which you need to pass as true.
Also, setting the BaseParams.Gravity to END might help.


-- Lucian

 

Updated to latest 5.1 but still have a problems after the tests.

I use "SimpleDataHelper" for data management, and it doesn't have "contentPanelEndEdgeStationary" but seems it's "freezeEndEdge" is the same. I set to true, but it doesn't affect anything

UPDATE
seems "freezeContentEndEdgeOnCountChange" did a trick

 

Let's talk then on discord, where I can also take a look at your project. Please DM me there with a stripped-down version of the project where I can reproduce the issue and also let me know exactly which the issue is, in case in v5.1 it's a different one.
Thanks.

-- Lucian

 

I am fideling with the resize option and am having an issue/question!?

My prefab has 2 elements, RawImage and Text. I added a verticalLayoutGroup and ContentSizeFitter to the root gameObject. Both the RawImage and the Text can have variable sizes. Sometimes there is no picture and I disable the picture object in the prefab. I have the imagesize (height) as a variable in my model, which makes this part easy, but... Since the text can have variable sizes, I have also added a ContentSizeFitter to the the text object. that works as it should, but when scrolling through the objects I see the prefab size change when entering the viewport. This is not optimal.

My question, first, can i avoid this, secondly, I guess that if the object loaded and resized a bit earlier before entering the viewport, would I get rid of this? Is it possible to load the objects outside the viewport, lets say, 2 objects before viewport?

Hope you can help and thanks in advance Great plugin!!!