Efficiently show many images

[philip]

Hi,

Lets say I have 10,000 images and want to show them in a vertically
scrollable list.
I only want to show approximatively 3 images on the viewable screen at
any time.
The user can scroll up and down using the arrow keys.

I guess that its not a good idea to load 10,000 images into Sgine as
bitmap images all at once. This is not going to be efficient.
What would be a good way to go about programming this?

Thanks, Philip

[philip]

Maybe I can make a vertical layout of 10 images using ....layout :=
BoxLayout("vertical", 10) then scroll them up, as it scrolls up, move
top image to the bottom of the list and change its image.
Need to clip this to a box, how to clip?

[Hicks, Matt]

This is often how it's done.

[philip]

Hi, so I got it scrolling.

I have a different question. To make things move on the screen, I
guess I should not move them in my main loop, this seems to be a bad
practice.

As I found if I move objects in my main loop manually, then there is
two troubles. One is that sometimes there is "jumping" on the screen
where the screen re-draws half way through my updates. I mean, I am
updating the position of many objects and before I have finished
updating then the screen re-draws.
The other trouble is sometimes the program seems to crash if I do too
many updates in a short amount of time.

So I guess I should move objects by something like follows:
vert.location.y.animator = new
EasingNumericAnimator(Linear.easeInOut, 5.0, false)
var change = new PropertyChangeEffect(vert.location.y, 200.0)
val animate:CompositeEffect = new CompositeEffect(change)

I could make my own EasingNumericAnimator class to do my own movement.

This is good if I want to move a object from x,y to some distance in x
or y. What if I want to do some complex movement for a character in a
game? What if the character is dependent on other game characters
positions? What if the user suddenly change direction for a game
character? Can you point me in the right direction as to how I should
implement this.

Thanks, Philip


On Jul 12, 10:58 pm, "Hicks, Matt" <mhi...@captiveimagination.com>
wrote:

[philip]

At least one important question for me, is how can I make UI updates
and prevent the UI from re-drawing while I make the update.
For example, I reordered the items in the list to be drawn via the
vertical BoxLayout, then I moved it by some pixels up or down. But, it
seems to re-draw immediately after I reordered the items, and just
before I moved it by some pixels. However it is in a bad visual state
in this half-completed time, so I need some way to prevent screen
redraw.

On Jul 12, 10:58 pm, "Hicks, Matt" <mhi...@captiveimagination.com>
wrote:

[Hicks, Matt]

Well, if you're using a BoxLayout you're asking the layout to manage location for you.  In your case you're essentially going to either need to create your own layout, or manage them explicitly.

If you simply add a mouse listener to the images you can then update the locations and everything will happen independent from the render thread, but will properly be maintained to avoid stuff getting out of sync.

[philip]

Hi Matt,

Ok, so I gather from you said is that if I move something, its going
to move on the screen. I was hoping I could do some movement without
any update happening on the screen and then call something to update
the screen. Like a database transaction, perform some statements but
they don't get applied until commit statement.

So I made my own BoxLayout class and gave it a offset from the top
which allows me to scroll it by adjusting this offset and re-
calculating the position of all child items. Now it doesn't flicker on
the screen as all position updates are correct all the time.

This is my code for the layout which allows me to scroll it by calling
its slideBy function:
http://pastebin.com/8xNvD36h

It assumes that all items in the vertical list are 63 pixels in
height.

Philip


On Jul 15, 4:39 am, "Hicks, Matt" <mhi...@captiveimagination.com>
wrote:

[Hicks, Matt]

You can look at org.sgine.property.Transaction to build a transaction of changes for several properties and then commit when you're done.

[philip]

Thanks, that seems essential if I want to move 100 objects on the
screen? otherwise there would be many screen re-draws while I am half
way through moving objects.


On Jul 15, 10:18 pm, "Hicks, Matt" <mhi...@captiveimagination.com>
wrote: