Scrolling a large image fast and smooth

[Millerszone]

I'm having trouble scrolling a large image FAST and SMOOTH vertically on the iPad.

The image is 768x2048.
I'm using just basic code something like this:
WHILE TRUE
  INC scrollY, 1  <-- 1 is smooth but very slow. 10 is good but not smooth on the iPad.
  DRAWSPRITE 0, 0, scrollY
  SHOWSCREEN
WEND

Is it possible to load both images in memory and use VIEWPORT to scroll or will I have to
use tiles?

Thanks

[MrTAToad]

I would recommend using tiles myself...

[Moebius]

I'd use POLYVECTOR for this because it supports floating point texture offsets, and therefore you can move by values other than whole numbers.
However, if you are using an integer speed, tiling is easiest.

The reason your fast movement looks bad is that there is no motion blur.  In real life, when objects move, you get a blur as the motion is completely smooth, with no framey jerkiness.  Just wave your hand in front of you.

However, when you approximate this movement into frames, the motion blur isn't present.

There are two approaches:

1) For a FIXED SPEED:  Pre-render the motion blur by applying a motion blur effect in software like Photoshop
2) For VARIABLE SPEED:  Draw the image several times at a lesser alpha level.


Example of variable speed (note: untested  ):

Code (glbasic) Select Expand

LOCAL Speed% = 10 //Change to whatever you want, even inside your code
LOCAL YPos% = 0

LOADSPRITE "Image.png", 0

WHILE TRUE

    ALPHAMODE 1 / Speed

    FOR YOffset% = 0 TO Speed
        DRAWSPRITE 0, 0, MOD(YPos + YOffset, 2048)
    NEXT

    YPos = MOD(YPos + Speed, 2048)

    SHOWSCREEN

WEND

Try that, see if it looks smoother.  I will test it soon

[Moebius]

Okay the above seems to work, although it seems strangely slow on my PC...

In fact this one works faster for me, and supports your choice of resolution and floating point speed 

Code (glbasic) Select Expand

LOCAL Speed = 7.5 //Change to whatever you want, even inside your code
LOCAL YPos = 0, TempYPos = 0

CONSTANT Resolution% = 5

LOADSPRITE "Media/tile.png", 0

WHILE TRUE

ALPHAMODE 1.0 / Resolution

STARTPOLY 0, 2

FOR YOffset% = 1 TO Resolution
TempYPos = FMOD(YPos + Speed * YOffset / Resolution, 2048)
POLYVECTOR 0, TempYPos, 0, 0
POLYVECTOR 60, TempYPos, 60, 0
POLYVECTOR 0, 60 + TempYPos, 0, 60
POLYVECTOR 60, 60 + TempYPos, 60, 60
POLYNEWSTRIP
NEXT

ENDPOLY

YPos = FMOD(YPos + Speed, 2048)

SHOWSCREEN

WEND

Characteristic of me, it lacks comments    but anyway I'll leave you to it.  The problem of motion blur is an interesting one and it affects many games.

[Kitty Hello]

You are just drawing that image? It's astonishing that it's slow.
set alphamode 0, and try clearscreen -1 before the loop.

[Moebius]

I think it's something wrong with my PC.  It's running at full speed again now...  See my topic 

[Millerszone]

Thanks for the examples Serpent.

The first example works good on the PC, but actually looks worse on the iPad.
The second example shows a small square scrolling on the left of the screen.

I'll have to use tiles. Never used them before, so it'll be a learning experience.

Thanks

[Moebius]

If you want to use the second example, you have to replace all the 60s to match your image width and height...

Try this.  Set WIDTH and HEIGHT at the start to the width and height of the screen (768x1024 on iPad?):

Code (glbasic) Select Expand

CONSTANT Width% = 768, Height% = 1024

LOCAL Speed = 7.5 //Change to whatever you want, even inside your code
LOCAL YPos = 0, TempYPos = 0

CONSTANT Resolution% = 5

//LOADSPRITE "Media/tile.png", 0  //My test image

WHILE TRUE

ALPHAMODE 1.0 / Resolution

STARTPOLY 0, 2  // Change the '0' to the number of whatever image you're using.

FOR YOffset% = 1 TO Resolution
TempYPos = FMOD(YPos + Speed * YOffset / Resolution, 2048)
POLYVECTOR 0, 0, 0, TempYPos
POLYVECTOR Width, 0, Width, TempYPos
POLYVECTOR 0, Height, 0, Height + TempYPos
POLYVECTOR Width, Height, Width, Height + TempYPos
POLYNEWSTRIP
NEXT

ENDPOLY

YPos = FMOD(YPos + Speed, 2048)

SHOWSCREEN

WEND