Smooth scrolling text like C64/Amiga how to do it in basic?

[fusion_400]

Hello does anyone here know how to create smooth scrolling horizontal text just like in all the old Amiga and C64 demos where the textscroller was incredibly smooth and also lacked flickering/aliasing issues.

In the past i have seen some examples of text scrollers for the PC but they just don't cut it. They have no antialiasing they seem to be very jerky and some even have nasty tearing effects. I have seen some examples here also but they seemed jerky and i think they did not use DirectX drawing either.

So i am asking is it possible to make smooth antialiased scrolling text with all the fonts that are available in winXP in purebasic?

I myself is not very good at programming at all and can't make the effect but i still long for an incredibly smooth horizontal text scroller that is not jerky and butter smooth and that has antialiasing to avoid flickering.

This GDI drawing stuff also seems to contribute to serious problems when making a smooth text scroller.

Has anyone here made any attempts at this in Purebasic and how hard is it ? Is it possible to implement this very feature directly with a simple command like DrawSmoothScrollingText that takes a typical font antialiases it and uses directdraw to draw and takes an argument for the actual textmessage and where it should be drawn on screen. It would be absolutely fantastic. Maybe it even should use some smart buffering technique to make it silky smooth just as in the old days my god a 1mhz c64 was capable of doing why is it so hard now ?

I have searched over the whole net to find a good textscroller with source code for any language like Cpp, java or basic but it just don't seem to exist. What happened 20-25 years ago this was all the rage and now its very hard to do it on computers who are incredibly faster.

[Foz]

What you are asking for is not comparable.

Think of Mario Bros for the NES. Did you see jaggies and such like? No! Why? The output was a TV screen. That's a res of 256x224. The standard definition tv is VERY blurred.

Put the two together:
1. Ultra low res = not much processing power required
2. Built in tv blur = free anti aliasing.

Now, you are asking for a PC monitor (zero blur) to replicate the same effects.
This requires:
1. Ultra high res = extreme amount of processing power required
2. Ultra Anti aliasing = extreme amount of processing power required.

Don't take my word for it - download a spectrum emulator, and find one of the speccy public domain demos with scrolling text and weep at the jaggies.

High definition TV and monitors are ruining our graphical experience.

[Kaeru Gaman]

on C64 you had no Antialiasing, it had 320 pixels width, and it only seemed smooth because your TV blurred the output.

nowadays you normally make a scrolltext with sprites.
it's much faster then drawing a text via DirectDraw,
and it allows pattering of the single chars.

working with DirectDraw you would have the problem to calculate the with of the chars when using a proportional font.

easiest workaround would be to draw the entire text in every frame.

Code: Select all

a$ = "This is the easiest attempt for a smooth scrolltext "
a$ + "using DrawText(). It is completely drawn in each frame, "
a$ + "only the beginning position ist counted down. "
a$ + "Sure, that means a lot of obsolete drawing, I hope DirectDraw "
a$ + "does halfways a good job in cutting the overlapping areas. "
a$ + "Otherwise it would be a nuisance to use this method, "
a$ + "besides the Text is ugly because it's static and monochrome... "

InitSprite()
OpenWindow(0, #PB_Ignore, #PB_Ignore, 300, 150, "Scrolltext")
OpenWindowedScreen(WindowID(0), 0,0,300,150,0,0,0)
LoadFont(0,"Arial",60)
TextX = 300
TextRed = 0
Repeat
  Event = WaitWindowEvent(10)
  TextRed +2 : If TextRed > 255 : TextRed = 0 : EndIf
  ClearScreen($402010)
    StartDrawing(ScreenOutput())
      DrawingMode(#PB_2DDrawing_Transparent)
      DrawingFont(FontID(0))
      DrawText(TextX, 30, a$, RGB( TextRed, 192, 64 ) )
    StopDrawing()
    TextX -5
    If TextX < -13700
      TextX = 300
    EndIf
  FlipBuffers()
Until Event = #PB_Event_CloseWindow

[fusion_400]

Yes that code is a good start but it gets insanely slow when using for example a fontsize of 120 or 240. I wish it could smoothly handle very large fontsizes. Also even at 60 fontsize it ocassionaly is not butter smooth.

And yes you are absolutely correct about the tv blurring the output on C64 and Amiga also the fonts where pixelbased and could be optimized in the painting process to reduce some of the jaginess.

And using a c64 emulator for example and running it is a big problem on a computer monitor because c64 uses exact pal 50hz sync. So it will be jerky because all timings are dependant on pal 50hz. So it will be jerky just to remain in sync.

[Kaeru Gaman]

> Also even at 60 fontsize it ocassionaly is not butter smooth.

you mean the little tick every second?
this is a sync problem between the windows desktop and the DX-Screen.
it will not occur in Fullscreen mode.

anyhow, DrawText is much to simple and boring to bother with.
especially on fontsize 240, this is ridiculous.

if you want to create a scrolltext, create your own spritebased charset.

[Rescator]

If you are thinking credits scroll and similar,
for it to be really smooth one need interpolated sub-frames.
Not motion blur, but kinda emulate the way that images are "lighted" onto film. (exposure time)

The benefit of a modern computer is also it's drawback. It's too "perfect"

[fusion_400]

> Also even at 60 fontsize it ocassionaly is not butter smooth.

you mean the little tick every second?
this is a sync problem between the windows desktop and the DX-Screen.
it will not occur in Fullscreen mode.

anyhow, DrawText is much to simple and boring to bother with.
especially on fontsize 240, this is ridiculous.

if you want to create a scrolltext, create your own spritebased charset.

Its pretty strange that performance is good upto 109 in fontsize but when using 110 or larger the scrolling speed is extremely slow and the cpu usage suddenly jumps up very highly because suddenly csrss.exe which is microsofts Client/Server Runtime Server Subsystem. This process manages most graphical commands in Windows and for some reason it's cpu usage gets incredibly high when using fonts that have a size higher then 109.

[fusion_400]

If you are thinking credits scroll and similar,
for it to be really smooth one need interpolated sub-frames.
Not motion blur, but kinda emulate the way that images are "lighted" onto film. (exposure time)

The benefit of a modern computer is also it's drawback. It's too "perfect"

Exactly i want that butter smooth quality i remember many years ago on the c64 and amiga i was just amazed at how extremely smooth and jerkfree the scrolling text was running and i still long for this on the pc. The framerate was rocksteady =)

[Kaeru Gaman]

Its pretty strange that performance is good upto 109 in fontsize but when using 110 or larger the scrolling speed is extremely slow and the cpu usage suddenly jumps up very high

may it be, but I think it does not matter at all.

DrawText ist an absolutely simple tool.
when you want to program Grafical surfaces, you would not use DrawText for more than simple, small messages.
even for that the use is doubtable, because a Drawing routine always is
slower than displaying a dozen sprites, just because of it's nature.

Using DrawText at such a size is nothing one would do for a neat product,
so demanding performance and "butter smoothness" is just obsolete.

Exactly i want that butter smooth quality i remember many years ago on the c64 and amiga i was just amazed at how extremely smooth and jerkfree the scrolling text was running and i still long for this on the pc. The framerate was rocksteady =)

this is ridiculous.
create a scrolltext with 40 monochrome 8x8 chars on an 320x200 output,
and you'll get a "rocksteady" framerate as well on every PC.

additionally, the smoothness cannot be compared, just because of the blur and the afterglow of a simple TV or an old 80ies Monitor.
you'll have to add a huge amound of highly complicated calculations to simulate
such effects on a HighDefinition SuperFastReaction Monitor nowadays.

[dobro]

another example

procedure by Oliv French Forum

Declare Ondulation(X,Y,Texte.s,r,v,b)

; ***** variables a OLIV *********
           ; Variables

#HauteurSin = 50 ; Coef qui joue sur la hauteur de la sinusoide
#LargeurSin = 50 ; Coef qui joue sur la largeur de la sinusoide
#VitesseAngle = 1 * #PI / 50 ; vitesse de modification de l'angle de départ du texte
#Vitesse = 50 ; Temps du Delay() qui ralentit/augmente l'animation.
#font =1
Global angle.f, long_text_bas
           ; ****************************************


a$ = "This is the easiest attempt for a smooth scrolltext "
a$ + "using DrawText(). It is completely drawn in each frame, "
a$ + "only the beginning position ist counted down. "
a$ + "Sure, that means a lot of obsolete drawing, I hope DirectDraw "
a$ + "does halfways a good job in cutting the overlapping areas. "
a$ + "Otherwise it would be a nuisance to use this method, "
a$ + "besides the Text is ugly because it's static and monochrome... "

InitSprite ()
OpenWindow (0, #PB_Ignore , #PB_Ignore , 500, 300, "Scrolltext" )
OpenWindowedScreen ( WindowID (0), 0,0,500,300,0,0,0)
LoadFont ( #font , "Arial" ,60)
TextX = 300
TextRed = 0
Repeat
  event = WaitWindowEvent (10)
  TextRed +2 : If TextRed > 255 : TextRed = 0 : EndIf
   ClearScreen ($402010)
  
  Ondulation(TextX,30,a$,TextRed,192,64)
  
  TextX -5
   If TextX < -13700
    TextX = 300
   EndIf
   FlipBuffers ()
Until event = #PB_Event_CloseWindow


Procedure Ondulation(X,Y,Texte.s,r,v,b)
   ; procedure realisé par OLIV
  
   StartDrawing ( ScreenOutput ()) ; Pour pouvoir utiliser les commandes des dessin 2D.
     DrawingFont ( FontID ( #font )) ; On change la police
     DrawingMode ( #PB_2DDrawing_Transparent )
     FrontColor ( RGB (r,v,b) ) ; On change la couleur.
    
    angle + #VitesseAngle ; Angle de départ de la sinusoide en radian
     If angle >= 2 * #PI
      angle = 0
     EndIf
     ; On affiche toute les lettres
    PosX = 10 ; Position du caractère
     For n = 1 To Len (Texte) ; Pour chaque lettre du texte
      lettre.s = Mid (Texte, n, 1) ; on récupère la lettre à la position n
      PosY = 50 + #HauteurSin * Sin (angle + PosX / #LargeurSin ) ; on calcul la position en Y de la lettre
       ; On part du centre de l'image (50) puis on ajoute un sin
       ; #HauteurSin fait varier l'amplitude du mouvement
       ; l'angle mis dans le sinus est d'abord composé de l'angle de départ d'affichage du texte (Angle)
       ; puis on augmente l'angle au fur et à mesure que l'on affiche des lettres avec le coefficient #LargeurSin qui permet de faire varier la largeur de la sinusoide
      
       DrawText (X+PosX, Y+PosY,lettre)
      PosX + TextWidth (lettre)
     Next
   StopDrawing () ; On signife que l'on arrête les fonctions dessin 2D.
EndProcedure

[Kaeru Gaman]

nice effect.

...but when you already draw char by char, you could now easily limit the output to the chars that are really displayed and leave the million obsolete pixels away....

[Raybarg]

During those lovely years of democoding back in '94+ there was plenty of smooth as butter scrollers. Yes, exactly, modeX/13h, its 320x resolution with 256 colors, easy to do smooth scrolling for it.

With today computers it should be easy enough to do that in higher resolutions, all you need is a sprite one character larger than the scrollin area and for each character_width you just need to copy all but first characters to the beginning of the sprite and draw new character in the end of the sprite.

I believe this method is possible also with DrawText() since you know character width using TextWidth()... the redrawing of new characters need some more logic in it in case alot of thin characters are packed

This actually sounds fun, I might play around with it later today and post my work. Anyway, I am still concerned about smoothness in desktop application... so I just throw the towel and insist everyone use OpenScreen for smoothness

[Kale]

some extremely old code of mine should give you a starting point:

Code: Select all

;===========================================================================
;-CONSTANTS
;===========================================================================

#APP_NAME = ""

#SCREEN_WIDTH = 640
#SCREEN_HEIGHT = 480

#BITMAP_FONT_WIDTH = 16
#BITMAP_FONT_HEIGHT = 24

;===========================================================================
;-GLOBAL FLAGS / VARIABLES / STRUCTURES / ARRAYS
;===========================================================================

Global GammaSetting.f
Global ModuleToggle.b
Global DrawTextToggle.b
Global ImageYPos.f
ImageYPos = #SCREEN_HEIGHT
Global ScrollerPosX.f
ScrollerPosX = #SCREEN_WIDTH
Global ScrollerPosY.f
ScrollerPosY = (#SCREEN_HEIGHT - #BITMAP_FONT_HEIGHT) - 5
StartText.s = "All your base are belong to us..."


;===========================================================================
;-PROCEDURES
;===========================================================================

;simple error checking
Procedure HandleError(result, text.s)
    If result = 0 : MessageRequester("Error", text, #PB_MessageRequester_Ok) : End : EndIf
EndProcedure

;scroll continuously
Procedure ContinuousScroll(ScrollText.s)
    ScrollText = UCase(ScrollText)
    ScrollerPosX - 3.0
    ScrollLimit.f = Len(ScrollText) * 16.00
    ScrollLimit = ScrollLimit - (ScrollLimit * 2)
    If ScrollerPosX < ScrollLimit
        ScrollerPosX = #SCREEN_WIDTH
    EndIf
    TextPosX = ScrollerPosX
    For x = 1 To Len(ScrollText)
        Character = Asc(Mid(ScrollText, x, 1))
        If Character > 64 And Character < 91
            Character - 65
            ClipSprite(1, Character * #BITMAP_FONT_WIDTH, 0, #BITMAP_FONT_WIDTH, #BITMAP_FONT_HEIGHT)
            DisplayTransparentSprite(1, TextPosX, ScrollerPosY)
            TextPosX + #BITMAP_FONT_WIDTH
        ElseIf Character = 32
            TextPosX + #BITMAP_FONT_WIDTH
        ElseIf Character = 45
            ClipSprite(1, 667, 0, #BITMAP_FONT_WIDTH, #BITMAP_FONT_HEIGHT)
            DisplayTransparentSprite(1, TextPosX, ScrollerPosY)
            TextPosX + #BITMAP_FONT_WIDTH
        ElseIf Character = 46
            ClipSprite(1, 576, 0, #BITMAP_FONT_WIDTH, #BITMAP_FONT_HEIGHT)
            DisplayTransparentSprite(1, TextPosX, ScrollerPosY)
            TextPosX + #BITMAP_FONT_WIDTH
        ElseIf Character > 47 And Character < 58
            Character - 22
            ClipSprite(1, Character * #BITMAP_FONT_WIDTH, 0, #BITMAP_FONT_WIDTH, #BITMAP_FONT_HEIGHT)
            DisplayTransparentSprite(1, TextPosX, ScrollerPosY)
            TextPosX + #BITMAP_FONT_WIDTH
        EndIf
    Next x
EndProcedure

;scroll once
Procedure OneShotScroll(ScrollText.s)
    ScrollText = UCase(ScrollText)
    ScrollerPosX - 3.0
    ScrollLimit.f = Len(ScrollText) * 16.00
    ScrollLimit = (#SCREEN_WIDTH / 2) - (ScrollLimit / 2)
    If ScrollerPosX < ScrollLimit
        ScrollerPosX = ScrollLimit
    EndIf
    TextPosX = ScrollerPosX
    For x = 1 To Len(ScrollText)
        Character = Asc(Mid(ScrollText, x, 1))
        If Character > 64 And Character < 91
            Character - 65
            ClipSprite(1, Character * #BITMAP_FONT_WIDTH, 0, #BITMAP_FONT_WIDTH, #BITMAP_FONT_HEIGHT)
            DisplayTransparentSprite(1, TextPosX, ScrollerPosY)
            TextPosX + #BITMAP_FONT_WIDTH
        ElseIf Character = 32
            TextPosX + #BITMAP_FONT_WIDTH
        ElseIf Character = 45
            ClipSprite(1, 667, 0, #BITMAP_FONT_WIDTH, #BITMAP_FONT_HEIGHT)
            DisplayTransparentSprite(1, TextPosX, ScrollerPosY)
            TextPosX + #BITMAP_FONT_WIDTH
        ElseIf Character = 46
            ClipSprite(1, 576, 0, #BITMAP_FONT_WIDTH, #BITMAP_FONT_HEIGHT)
            DisplayTransparentSprite(1, TextPosX, ScrollerPosY)
            TextPosX + #BITMAP_FONT_WIDTH
        ElseIf Character > 47 And Character < 58
            Character - 22
            ClipSprite(1, Character * #BITMAP_FONT_WIDTH, 0, #BITMAP_FONT_WIDTH, #BITMAP_FONT_HEIGHT)
            DisplayTransparentSprite(1, TextPosX, ScrollerPosY)
            TextPosX + #BITMAP_FONT_WIDTH
        EndIf
    Next x
EndProcedure

;===========================================================================
;-GEOMETRY / SCREEN / INIT
;===========================================================================

HandleError(InitSprite(), "Error Initialising DirectX:"+Chr(10)+"Microsoft DirectX v7.0+ must be installed correctly."+Chr(10)+"Offending Command: InitSprite()")
HandleError(InitKeyboard(), "Error Initialising DirectX:"+Chr(10)+"Microsoft DirectX v7.0+ must be installed correctly."+Chr(10)+"Offending Command: InitKeyboard()")
HandleError(InitMouse(), "Error Initialising DirectX:"+Chr(10)+"Microsoft DirectX v7.0+ must be installed correctly."+Chr(10)+"Offending Command: InitMouse()")
HandleError(InitSound(), "Error Initialising DirectX:"+Chr(10)+"Microsoft DirectX v7.0+ must be installed correctly."+Chr(10)+"Offending Command: InitSound()")
HandleError(InitSprite3D(), "Error Initialising DirectX:"+Chr(10)+"Microsoft DirectX v7.0+ must be installed correctly."+Chr(10)+"Offending Command: InitSound()")

HandleError(OpenScreen(#SCREEN_WIDTH, #SCREEN_HEIGHT, 32, #APP_NAME), "640x480 32bit Screen could not be opened correctly.")

;===========================================================================
;-MEDIA
;===========================================================================

UsePNGImageDecoder()
HandleError(CatchSprite(1, ?Font), "Couldn't load 'font1.png'")

;===========================================================================
;-MAIN LOOP
;===========================================================================

BaseTime.l = GetTickCount_()

Repeat
    CurrentTime = GetTickCount_()

    FlipBuffers()
    ClearScreen(0)

    StartDrawing(ScreenOutput())

    ;SCROLLER BACKGROUND BOX
    If CurrentTime >= BaseTime + 5000
        If BoxWidth < #SCREEN_WIDTH
            BoxWidth + 6
        EndIf
        Box(0, (#SCREEN_HEIGHT - #BITMAP_FONT_HEIGHT) - 10, BoxWidth, #BITMAP_FONT_HEIGHT + 10, RGB(36, 46, 64))
        LineXY(0, (#SCREEN_HEIGHT - #BITMAP_FONT_HEIGHT) - 10, BoxWidth, (#SCREEN_HEIGHT - #BITMAP_FONT_HEIGHT) - 10, RGB(46, 56, 84))
    EndIf
    
    StopDrawing()
    
    ;FIRST SCROLLER
    If CurrentTime >= BaseTime + 7000 And CurrentTime <= BaseTime + 34500
        ContinuousScroll("-- Continuously Scrolling Text -- ")
    EndIf
    
    ;RESET SCROLLER
    If CurrentTime >= BaseTime + 34500 And CurrentTime <= BaseTime + 35000
        ScrollerPosX = #SCREEN_WIDTH
    EndIf
    
    ;SECOND SCROLLER
    If CurrentTime >= BaseTime + 35000 And CurrentTime <= BaseTime + 50000
        OneShotScroll("-- One Shot Deal --")
    EndIf

    ;RESET SCROLLER
    If CurrentTime >= BaseTime + 50000 And CurrentTime <= BaseTime + 50500
        ScrollerPosX = #SCREEN_WIDTH
    EndIf

    ;CHECK FOR ESCAPE
    ExamineKeyboard()
    If KeyboardReleased(#PB_Key_Escape)
        Quit = 1
        End
    EndIf

    Delay(1)
    HandleError(IsScreenActive(), "'Alt-Tabbing' is not supported.")

ForEver
End

;===========================================================================
;-BINARY INCLUDES
;===========================================================================

DataSection
	Font:
		IncludeBinary "font1.png"
EndDataSection

Font:

[Kaeru Gaman]

@Kale
regarding your Font... is it your work?
do you set it free, I mean, could everybody use it just for putting a thnx in the credits?

[fusion_400]

Fantastic code with the bitmap fonts thanks alot it looks awesome!

I am now trying to include a movie that plays simultanously in the code that Kaeru provided.

I have gotten it to work kind of when not using any video overlay but then there is massive flickering in the movie when playing. When i use the video overlay (PlayMovie(0, #PB_Movie_Rendered) and RenderMovieFrame command to render movie to a sprite i just get a black screen.

I hope maybe someone can help with the problem. I have ATI X1950Pro card and i use FFDSHOW for codecs.

There seems to be a major problem because i can't even use escape button to get out of the program.

Code: Select all

a$ = "Amiga and "
a$ + "C64 rulez for scrolling =)"

InitKeyboard()
InitMovie()
InitSprite()
InitSprite3D()
UsePNGImageDecoder() 
UseJPEGImageDecoder()
;OpenWindow(0, #PB_Ignore, #PB_Ignore, 1366, 768, "Scrolltext")
;OpenWindowedScreen(WindowID(0), 0,0,1366,768,0,0,0)
OpenScreen(1360, 768, 32, "PB Plasma")

LoadMovie(0, "testing106.avi")

LoadFont(0,"Arial",109)
result = LoadImage(#PB_Any,"Untitled3.png")
result2 = LoadImage(#PB_Any,"nclogo.jpg")
result3 = LoadImage(#PB_Any,"Untitled2.png")

Surface = CreateSprite(1, 800, 600, 0)
PlayMovie(0, #PB_Movie_Rendered)

TextX = 1366
TextRed = 1
Repeat
  
  TextRed = 1
  ClearScreen($402010)
    StartDrawing(ScreenOutput())
    ;StartDrawing(SpriteOutput(Surface))
    DrawImage(ImageID(result),0,0)
    DrawImage(ImageID(result2),0,720)
    DrawImage(ImageID(result3),0,120)
    RenderMovieFrame(0,Surface)
    DisplaySprite(1, 0, 0) 
      DrawingMode(#PB_2DDrawing_Transparent)
      DrawingFont(FontID(0))
      
      DrawText(TextX, 550, a$, RGB( 255, 255, 255 ) )
    StopDrawing()
    TextX -2
    If TextX < -1500
      TextX = 1366
    EndIf
  FlipBuffers()
  ExamineKeyboard()

Until KeyboardPushed(#PB_Key_Escape)