## Scrolling apertures: a technical demo

Show off your games, demos and other (playable) creations.
kbmonkey
Party member
Posts: 122
Joined: Tue Sep 01, 2015 12:19 pm

### Scrolling apertures: a technical demo

Here is a technical demo of a scrollable surface. It is nothing fancy but might be useful for some, sharing is caring right?

It uses a stencil and transforms, there is no drawing to off-screen canvasses involved.
aperture-lorem.gif (405.39 KiB) Viewed 695 times
aperture-pictures.gif (205.23 KiB) Viewed 695 times
harness-testsuite.love

grump
Party member
Posts: 252
Joined: Sat Jul 22, 2017 7:43 pm

### Re: Scrolling apertures: a technical demo

Tjakka5
Party member
Posts: 216
Joined: Thu Dec 26, 2013 12:17 pm

### Re: Scrolling apertures: a technical demo

I don't think there is any advantage using stencils over scissor. It may even be quite a lot slower.

I also looked into the code and saw that, while the pages are indeed being clipped, invisible pages are still being rendered.
I think this is a big issue, since if you for example have a huge list of items performance may be very bad.

Instead I suggest you add a little wrapper for pages, where each page has it's own drawing function.
Then internally you can only draw the currently visible pages.
Check out my portfolio: http://tjakka5.sorunome.de/

zorg
Party member
Posts: 2056
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

### Re: Scrolling apertures: a technical demo

Tjakka5 wrote:
Tue Nov 14, 2017 11:41 am
I don't think there is any advantage using stencils over scissor. It may even be quite a lot slower.

I also looked into the code and saw that, while the pages are indeed being clipped, invisible pages are still being rendered.
I think this is a big issue, since if you for example have a huge list of items performance may be very bad.

Instead I suggest you add a little wrapper for pages, where each page has it's own drawing function.
Then internally you can only draw the currently visible pages.
I might be wrong, but in that case, using scissors instead would solve the issue of "invisible rendering", since anything outside the defined rectangle will not be rendered; unless you meant something else.
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

grump
Party member
Posts: 252
Joined: Sat Jul 22, 2017 7:43 pm

### Re: Scrolling apertures: a technical demo

zorg wrote:
Tue Nov 14, 2017 1:02 pm
I might be wrong, but in that case, using scissors instead would solve the issue of "invisible rendering", since anything outside the defined rectangle will not be rendered;
AFAIK, LÖVE doesn't do any clipping against the scissor rectangle. The fragments outside the sicssor rectangle get discarded, that's pretty far down the pipeline. Not much better than stencil tests. Stencils allow for arbitrary clipping shapes though.

Doing it properly it not an easy task though, since (the current version of) LÖVE does not provide a way to access the transformation state outside the GPU.

kbmonkey
Party member
Posts: 122
Joined: Tue Sep 01, 2015 12:19 pm

### Re: Scrolling apertures: a technical demo

Drawing the visible page would be easy enough

Code: Select all

if loremscroll.page == 1 then
-- draw page 1 here
elseif loremscroll.page == 2 then
-- you get the idea
end
That should satisfy any performance concerns. I will have to try scissors too, thanks for the idea!

Tjakka5
Party member
Posts: 216
Joined: Thu Dec 26, 2013 12:17 pm

### Re: Scrolling apertures: a technical demo

Note that you'd have to display 2 pages when you're moving from one to the other, just as a heads up
Check out my portfolio: http://tjakka5.sorunome.de/

s-ol
Party member
Posts: 1073
Joined: Mon Sep 15, 2014 7:41 pm
Location: Cologne, Germany
Contact:

### Re: Scrolling apertures: a technical demo

Stencils are definitely slower than scissoring, but scissor dimensions cannot be transformed (not even translated or scaled) so either one can be more useful depending on the situation.

s-ol.nu /blog  -  p.s-ol.be /st8.lua  -  g.s-ol.be /gtglg /curcur

Code: Select all

print( type(love) )
if false then
baby:hurt(me)
end

### Who is online

Users browsing this forum: No registered users and 5 guests