Author Topic: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!  (Read 3703 times)

monkey0506

  • SEND PIZZA.
    • Best Innovation Award Winner 2017, for his work to help AGS games reach the widest possible audience - through popular distribution platforms (Steam, Galaxy) as well as other operating systems (Android, Linux)
    • monkey0506 worked on one or more games that won an AGS Award!
    •  
    • monkey0506 worked on one or more games that was nominated for an AGS Award!
This may be a bit preemptive, but I've been working on it pretty actively for the last 31 hours, and if I don't release something now, I probably won't get any sleep for the next 30 hours!

I've been working on (since some time Thursday) my latest module, designed to simplify the process of multi-line textboxes (i.e., a textarea). This is a pretty early release, but as I said, if I don't put something up I'll probably continue to fail to pass out.

The module uses a ListBox for the textarea, simply displaying each line of text as an "Item" in the list.

DONE:

- Provide structure for user access: TextArea array of eTextArea_MaxAreas areas (10 by default).
- Assigning a ListBox control to a TextArea: TextArea[ID].Box property.
- Allow dynamic setting/retrieval of text: TextArea[ID].Text property.
- Allow area to be disabled from the script: TextArea[ID].Enabled property.
- Word-wrapping of text.
- Differentiate between line-breaks (CARRIAGE RETURNS) and the '[' character.
- Backspace.
- Typing into the area.

TO-DO:

- Open ListBox controls (properties) to TextArea structure (where appropriate).
- Scrolling function.
- Allow line-delimiters (i.e., whitespace or punctuation at the end of a line instead of simply splitting the lines by width).
- Attempt to implement cursor to allow editing text in place if possible. As-is you can only delete the last character added (i.e., backspace is working but you cannot move the cursor to another position).
- Possible code optimization (it may currently be slow, especially when working with larger textareas).
- Document, test, and miscellaneous (anything else I may have forgotten to list here! ;)).

As this is just a primary release in BETA of the module I will be releasing there are potentially bugs. If you find any I would greatly appreciate knowing about them. However, there is no documentation yet, so you may be somewhat on your own. Basically all you need to get started is a ListBox and the following code in game_start:

Code: [Select]
  TextAreas[0].Enabled = true;
  TextAreas[0].Box = lstTextAreaBox;
  TextAreas[0].Box.SelectedIndex = -1;
  TextAreas[0].Box.Clickable = false;

Where lstTextAreaBox is the script o-name of your ListBox. Then once the GUI with the list is available, you should be able to type into it as you would a normal text-box.

Any feedback appreciated!

DOWNLOAD

naltimari

  • Use the source, Luke.
    • I can help with scripting
    • I can help with translating
Re: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!
« Reply #1 on: 19 May 2008, 05:14 »
Wow, THATs coincidence, because I was working on my very own text area module!!! I haven't released yet it because there are still some bugs around... if I'd known I would have released it before...  :-[

I would be happy to work with you on it, maybe we can 'merge' some code. Maybe the best feature of my module is the ability to place the cursor exactly where the user clicked. The 'scroll' feature is half-done, I guess.

monkey0506

  • SEND PIZZA.
    • Best Innovation Award Winner 2017, for his work to help AGS games reach the widest possible audience - through popular distribution platforms (Steam, Galaxy) as well as other operating systems (Android, Linux)
    • monkey0506 worked on one or more games that won an AGS Award!
    •  
    • monkey0506 worked on one or more games that was nominated for an AGS Award!
Re: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!
« Reply #2 on: 19 May 2008, 07:33 »
I'm sorry to hear that I may have stolen your thunder here. I actually had an idea for a game that involved the module, so I started working scripting it.

I've actually just gotten the cursor placement code working in my own module. The scroll code is going to be one of the simplest items for me because I'm taking advantage of a ListBox. All I have to do is keep track of which line is the top line and if the sum of the top line and the bottom line is greater than 200 I'll just offset which lines are stored in the ListBox; otherwise I can just scroll the ListBox.

Unfortunately I've already gotten most of the functionality worked out, it's more methodology that I'm working on now. I wouldn't mind if you released your work as an alternative to my own. There's nothing like a little friendly competition! :D

Again sorry if I stole your idea, but it wasn't my intention. I'd be interested to see the differences in the end results though. ;)

naltimari

  • Use the source, Luke.
    • I can help with scripting
    • I can help with translating
Re: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!
« Reply #3 on: 19 May 2008, 09:00 »
I'm sorry to hear that I may have stolen your thunder here. I actually had an idea for a game that involved the module, so I started working scripting it.

Dont be sorry, my game also needs a large text area and I started coding my own because there was no other option! Actually, I'm glad you did it, because i had to stop working on mine to do other stuff in the game, and it was not finished.

I've actually just gotten the cursor placement code working in my own module.

Good to hear that too. It's not too hard, once you find the line the user clicked at (given mouse.y), it's just a matter of using GetTextWidth with that line's characters until it reaches mouse.x.

The scroll code is going to be one of the simplest ... I'm taking advantage of a ListBox.

That's very clever. I started from a Label and had a very hard time. But I find the 'default' scrolling buttons really ugly, hope you can code functions to scroll the lines up or down, just so we can assign these functions to 'regular' gui buttons.

There's nothing like a little friendly competition! :D

I agree with you. :)

There are a couple of things I need that I hope you continue working on, like proper word-wrapping, and a blinking cursor that indicates where the user is at. I have these on my module, so I can always 'merge' them in your module and then post them back for your approval.

I'm looking forward to see your module finished!

[]s

Rui 'Trovatore' Pires

  • Lunge da lei per me non v'ha diletto!
    • I can help with AGS tutoring
    • I can help with play testing
    • I can help with proof reading
    • I can help with scripting
    • I can help with story design
    • I can help with translating
    • I can help with voice acting
Re: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!
« Reply #4 on: 21 May 2008, 09:12 »
Heh, if could be bothered I could even enter this competition - for a previous project of someone else's, I had to come up with a scrollable, multi-paragraph text area as well, it also word-wraps, can display letters with a delay between them for the typewriter effect (I think), and if the text is bigger than the display area a little "MORE" button pops up, waiting for input.

Coolest thing I've ever done after the SQ2 template.
Reach for the moon. Even if you miss, you'll land among the stars.

Kneel. Now.

Never throw chicken at a Leprechaun.

monkey0506

  • SEND PIZZA.
    • Best Innovation Award Winner 2017, for his work to help AGS games reach the widest possible audience - through popular distribution platforms (Steam, Galaxy) as well as other operating systems (Android, Linux)
    • monkey0506 worked on one or more games that won an AGS Award!
    •  
    • monkey0506 worked on one or more games that was nominated for an AGS Award!
Re: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!
« Reply #5 on: 21 May 2008, 10:26 »
Yes Rui, I seemed to recall you asking about something like this a while back...as a matter of fact I may have looked back to reference myself on the code... :=

I recalled it having been mentioned in the past, and it specifically applied to an idea I had. I figured the best thing to do would be to modularize the code and release it upon an unwitting public.

Currently to get the "animated cursor" effect I'm using a GUI Button for the cursor. This allows me to place it between the characters in the text dynamically as well as animating it. I am currently having issues with my code disliking me and for some reason if I move the cursor elsewhere besides the end of the text the cursor is moved, but the button is placed back at the end of the text.

For those who don't need the animated cursor I've set it up so that you can still have the underscore cursor at the end of the text (like TextBoxes), but you can't move this cursor throughout the text.

Pretty well none of the items on my to-do list can be marked off just yet because I had some difficulties trying to rid myself of that horrid array. I wanted to allow the user to create instances of the structure within the script, assign the necessary values, then call an update function in rep_ex. The biggest problem I had was trying to figure out how to capture the key-presses. Once I got that sorted, the issues with the animated cursor popped up. But I assure you I'm working on this.

I do unfortunately anticipate this becoming slow with large text areas because I allow the font, width, text, etc. all to be changed dynamically, and any time any of these change the entire area has to be rebuilt. Specifically, when adding text I could possibly optimize it to only rebuild the current and all subsequent lines. However font, area width/height, etc. would still require the entire area to be rebuilt. It probably wouldn't hurt for me to optimize my word-wrapping methods...the one I'm using isn't the most efficient.

In any case, I'm off to bed now. ;)

Re: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!
« Reply #6 on: 21 May 2008, 16:58 »
Well Since we are all posting our Multi Text box code I thought I would post mine for those who would like it or take from it what ever they can to help them. We are a community here to help each other right? And not hog all the code glory for ourselves.

This code is a mod addition to SSH's SpriteFont Module. I Sent him the code over a week ago to possibly add this SpriteFont Module. But it seems he was very busy with other projects. This is almost not beta and could be made to be more versatile, but It works perfectly for me for right now.. so why don't I share it.

Added this to SpriteFont.ash

Code: [Select]
import function display(String txt,  int x=-1,  int y=-1);  // My Display function
.
.
protected int Max_Txt_Pxl_Width;  // Maxium width of Desired Text Box Gui


In SpriteFont.asc is this....
(bear in mind that right now the TxtBox Gui sprite tiles are hard coded in for now..
TopRight Tile= sprite number 233... Top Middle Tile= Sprite number 234 and so on)
Also the middle text box Tiles 336-338 are the same Height as the sprite Text, And the Text Box Gui Tiles are uniform in their width and height as well. But Theoretically if you fallow what I have with Tiles being the same height and width and the sprite text is the same hight as the tiles everything should be full customizable with in those parameters. Here you go guys I hope you enjoy ;D ;D ;D

Naltimari and Monkey Please forgive me if I'm stepping on any toes. But please feel free to take what you want from my code and maybe it will help you guys out

Code: [Select]
// ********************  My New attempt at a Text box Gui with custom Gui Text Tiles  *************************


function SpriteFont::display(String Txt,  int x,  int y){

  int GuiBoxlength=0;
  int GuiBoxheight=0;
  int MiddleLoop=0; // int for how many Top Middle tiles there are?
 
 this.Max_Txt_Pxl_Width=System.ViewportWidth - (Game.SpriteWidth[233] * 3);
  // Set Max text Length wanted. This is half of your Background graphic width
  // This will be setted by a function in the future
   
  if ((Txt == null) || (Txt == "")) return; // invalid text parameter, abort

  int Txtwidth = this.GetSpriteTextRawWidth(Txt); // Get how long the text Graphics will be.
  int Lines = (Txtwidth / (this.Max_Txt_Pxl_Width)); // Find out how many lines will be in the Txt Box
   
 
  if (Lines == 0){   // if there is only 1 line. Get Box Length and height for sprite.
    int TopM=Game.SpriteWidth[234];  // Get Width of Top Middle custom Tile
 
    while(GuiBoxlength<Txtwidth){    // Get full Width of the Box's top middle
      GuiBoxlength+=TopM;
      MiddleLoop++;  // adding how many top middle sprites there are
    }
 
    GuiBoxlength+=Game.SpriteWidth[233] * 2;  // Add the length of the two Corner end pieces of the top part of the box for Full Width of the Gui Text Box
    GuiBoxheight=(Game.SpriteHeight[233] * 2) + Game.SpriteHeight[236]; // Get height by X2 top corner pieces and middle graphic for Full Height of Gui Text Box
  }

  else{     // Get Sprite size for multiple lines
    int TopM=Game.SpriteWidth[234];  // Get Width of Top Middle custom Tile
    while(GuiBoxlength<this.Max_Txt_Pxl_Width){    // Get how many Top Middle Tiles there are. This has to be done due to the fact
                                                   // that custom Gui tile sizes are difrent lengths
      GuiBoxlength+=TopM;
      MiddleLoop++;  // adding how many top middle sprites there are to match Max_Txt_Pxl_Width
    }
    GuiBoxlength+=(Game.SpriteWidth[233] * 2); // Add the length of the two end pieces of the top part of the box
    GuiBoxheight=(Game.SpriteHeight[233] * 2) + (Game.SpriteHeight[236] * (Lines+1));// Get height by X2 edge pieces pluss height of side middle tile X how many lines their are
  }

  DynamicSprite *sprite=DynamicSprite.Create(GuiBoxlength, GuiBoxheight); // create a sprite as big as the text box needs to be.
  DrawingSurface *TxtBox=sprite.GetDrawingSurface(); // Make a drawing surface to Draw the tiles on too
 
  // Draw The Txt box
  int spriteX=0;  //create another x and y that we can manipulate to draw onto our txt box
  int spriteY=0;
  //**************Top Line of Text Box ***********************
  TxtBox.DrawImage(spriteX, spriteY, 233);  // Draw Top Left Tile Onto the sprite
  spriteX+=Game.SpriteWidth[233]; // advance spriteX forward
 
  int i=MiddleLoop;
  while(i>0){  //Put the Top Middle Tiles in
    TxtBox.DrawImage(spriteX, spriteY, 234);
    spriteX+=Game.SpriteWidth[234];
    i--;
  }

  TxtBox.DrawImage(spriteX, spriteY, 235); // Draw top Right Tile
  //***********************************************************
 
  //**************Middle Line of Text Box ***********************
 
  int iL=0;
  spriteY=0;
  while(iL<Lines+1){
    spriteX=0;
    spriteY+=Game.SpriteHeight[233];  // Move spriteY down
    TxtBox.DrawImage(spriteX, spriteY,236);  // Draw Middle Left Tile
    spriteX+=Game.SpriteWidth[236]; // advance spriteX forward
   
    i=MiddleLoop;  // reset i
    while(i>0){  //Put the middle Tiles in
      TxtBox.DrawImage(spriteX, spriteY, 237); // Draw Middle tile
      spriteX+=Game.SpriteWidth[237];  // advance spriteX forward
      i--;
    }
    TxtBox.DrawImage(spriteX, spriteY, 238); // Draw Middle Right Tile
    iL++;
  }
  //***********************************************************
 
  //**************Bottom Line of Text Box ***********************
  spriteX=0;
  spriteY+=Game.SpriteHeight[236];  // Move spriteY down
  TxtBox.DrawImage(spriteX, spriteY,239);  // Draw Bottom Left Tile
  spriteX+=Game.SpriteWidth[239]; // advance spriteX forward
 
  i=MiddleLoop;  // reset i
  while(i>0){  //Put the Top Middle Tiles in
    TxtBox.DrawImage(spriteX, spriteY, 240); // Draw Bottom Middle tile
    spriteX+=Game.SpriteWidth[240];  // advance spriteX forward
    i--;
  }

  TxtBox.DrawImage(spriteX, spriteY, 241); // Draw Bottom Right Tile
  //***********************************************************

 
  DynamicSprite *textSprite;
  if(Lines == 0){    // if There is only one line then just draw our Txt onto the box
    textSprite = this.TextOnSprite(Txt);
    TxtBox.DrawImage(Game.SpriteWidth[233], Game.SpriteHeight[233], textSprite.Graphic); // draw our text
    textSprite.Delete(); // delete this sprite, we don't need it any more
  }
  else{  // Do this if there is Multiple lines to our lines of Txt in our box
    int LineX=Game.SpriteWidth[233];
    int LineY=Game.SpriteHeight[233];
    int LineWidth;
    int StrStart=0;
    int StrCntr=0;
    int TempMax=this.Max_Txt_Pxl_Width;
   
    iL=0;
    while(iL<Lines+1){
      LineWidth=0;
      while((LineWidth<TempMax) && (StrCntr<=Txt.Length)){    // Walk down the String Txt and find out
                                                              // where StrCntr Stops at the end of the max Width
        LineWidth+= this.GetSpriteCharRawWidth(Txt.Chars[StrCntr]) + this.CharSpacing;
        StrCntr++;
      }
      if(Txt.Chars[StrCntr]==' '){          // If the End of the Line at StrCntr is a ' ' (space)
                                            // Draw that line of txt
        textSprite = this.TextOnSprite(Txt.Substring(StrStart, (StrCntr-StrStart))); // grab Line Segment out of whole text
        TxtBox.DrawImage(LineX, LineY, textSprite.Graphic); // draw our text
        textSprite.Delete();
      }
      else {
        while((Txt.Chars[StrCntr]!=' ') && (StrCntr>StrStart) && (StrCntr!=Txt.Length)){ // Walk backwards and find a ' '(space)
          StrCntr--;
        }
        if(StrStart>=StrCntr) StrStart=StrCntr-1; // crash check
        textSprite = this.TextOnSprite(Txt.Substring(StrStart, (StrCntr-StrStart))); // grab Line Segment out of whole text
        TxtBox.DrawImage(LineX, LineY, textSprite.Graphic); // draw our text
        textSprite.Delete();
      } // end else of if(Txt.Chars[StrCntr]==' ')
      LineY+=this.GetSpriteTextRawHeight(Txt.Substring(StrStart, StrCntr)); // Move LineY down
      StrCntr++;
      StrStart=StrCntr;  // Get StrStart to point that the Begining of the next line
      iL++; // incease the line counter by 1
    } // end while(iL<Lines+1){
  }  // end else of if(Lines == 0)

 
  TxtBox.Release();  // Update Memory: release Drawingsurface TxtBox to sprite since we are done
 
  if ((x == -1) && (y == -1)){       // Set Default if no Parm is passed
    x = (System.ViewportWidth - sprite.Width) / 2; // default x to center-screen
    y = (System.ViewportHeight - sprite.Height) / 2; // default y to center-screen
  }
 
  Overlay *displayOverlay = Overlay.CreateGraphical(x, y, sprite.Graphic, false); // create our overlay
  sprite.Delete(); // delete our temporary sprite
  while (!WaitMouseKey(1)) {} // returns 0 if the time has elapsed, 1 if a mouse button or key was pressed
  displayOverlay.Remove();

}
Want to see how I am doing and how far I've gotten in my game? Visit my forum  http://www.freepowerboards.com/DragonKnight

Rui 'Trovatore' Pires

  • Lunge da lei per me non v'ha diletto!
    • I can help with AGS tutoring
    • I can help with play testing
    • I can help with proof reading
    • I can help with scripting
    • I can help with story design
    • I can help with translating
    • I can help with voice acting
Re: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!
« Reply #7 on: 21 May 2008, 19:31 »
Quote
Yes Rui, I seemed to recall you asking about something like this a while back...

Cool as my IF template is (progress has stalled somewhat, because I simply can't be bothered anymore), it's not the one I meant. Though experience from the IF template did help a lot. ;D
Reach for the moon. Even if you miss, you'll land among the stars.

Kneel. Now.

Never throw chicken at a Leprechaun.

Monsieur OUXX

  • Mittens Vassal
  • Cavefish
  • Mittens Half Initiate
    • I can help with proof reading
    • I can help with translating
    • I can help with voice acting
    • Monsieur OUXX worked on one or more games that won an AGS Award!
    •  
    • Monsieur OUXX worked on one or more games that was nominated for an AGS Award!
Re: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!
« Reply #8 on: 11 Feb 2014, 11:38 »
I'm digging up this thread to post a new version.

Version 0.9
- This version is not to replace Monkey's version. My version is a bit buggy (but rather stable -- it shouldn't crash your game)
- This version offers more features

See the demo video by clicking the image below :


VIDEO


Get it here : http://www.adventuregamestudio.co.uk/forums/index.php?topic=51280.msg636500344#msg636500344
« Last Edit: 16 Nov 2014, 21:26 by Monsieur OUXX »
 

selmiak

  • ǝsıɔɹǝxǝ ʞɔǝu puɐ uıɐɹq
    • I can help with play testing
    • I can help with proof reading
    • I can help with translating
    • I can help with web design
    • selmiak worked on one or more games that won an AGS Award!
    •  
    • selmiak worked on one or more games that was nominated for an AGS Award!
Re: MODULE: TextArea v0.0.1.1 BETA - Multi-line textboxes!
« Reply #9 on: 11 Feb 2014, 11:48 »
now that is a charming thing!