Author Topic: How do I implement a side-scrolling custom conversation?  (Read 165 times)

bx83

  • Get 'Er Doooooone
I already have a custom conversatoin tree - see here.

But how do I scroll to the left or right is there are too many icons in the single-line list?



As we can see here, the last item is off the screen and so can't (or can barely) be clicked.

ps. I increased the size of the icons from 64 to 96; just replace all of the 64's with 96's in the code linked to ;)

Cassiebsg

  • Cavefish
  • Fleeing the Cylon tyrrany...
    • Cassiebsg worked on a game that was nominated for an AGS Award!
Re: How do I implement a side-scrolling custom conversation?
« Reply #1 on: 03 Dec 2018, 18:12 »
just add a button to scroll left/right at each end. If you load the BASS template you can see how it's done there. ;)

If you want something more "streamline" like if the mouse cursor is over the GUI and is "x pixels from the edge" you could just make it scroll automaticly. Though that'll probably involve more coding and debugging than just a button.
There are those who believe that life here began out there...

bx83

  • Get 'Er Doooooone
Re: How do I implement a side-scrolling custom conversation?
« Reply #2 on: 03 Dec 2018, 18:18 »
'BASS' template?

Crimson Wizard

  • AGS Project Tracker Admins
    • Best Innovation Award Winner 2013, for spearheading the AGS 3.3.0 project
    •  
    • Lifetime Achievement Award Winner
    •  
    • Crimson Wizard worked on a game that was nominated for an AGS Award!
      Crimson Wizard worked on a game that won an AGS Award!
Re: How do I implement a side-scrolling custom conversation?
« Reply #3 on: 03 Dec 2018, 18:44 »
just add a button to scroll left/right at each end. If you load the BASS template you can see how it's done there. ;)

I don't think bx83 can do that, because he is using custom dialog option rendering, not builtin GUI. TBH I don't remember if it's even possible to receive GUI events while dialog options are on screen.



bx83,  First of all, have you ever tried abstauber's module?
http://www.adventuregamestudio.co.uk/forums/index.php?topic=36313.0
I don't know how it is done, but seems to support icons like in your example.

Then, I don't know what kind of scrolling controls you want. I believe when it comes to game or UI design first you plan on how do you want something to work, and then search for the ways to do that in code. Like Cassiebsg said above, it may be done with two "arrow" buttons, or it may be done with some kind of mouse tracking, or else. Since you didn't say anything I will assume the most obvious and give an example of how to add 2 "buttons" at the left and right ends of the GUI. Clicking on these would make icons scroll.
For this you need to:
1. Make sure that icons are drawn not from 0,0 to the end, but with certain margin to let some space for control buttons.
2. Keep track of scrolling position.
3. Draw buttons (sadly AGS does not support placing real controls when you do custom rendering) and handle clicks on them.

Following would be the very crude example of drawing scrolled items based on your code from another thread:

Code: Adventure Game Studio
  1. // How much space to leave for scrolling buttons
  2. int DialogOptionsIconMargin = 64;
  3. // The step to add when positioning icons
  4. int DialogOptionsIconStep = 64;
  5. // Current scrolling position
  6. int DialogOptionsScroll = 0;
  7.  
  8. //----------------------------------------------------------------------------------------------------------------------
  9. // Draw Dialog Options
  10. //
  11. // x_start and x_end - coordinates of icons inside the GUI
  12. // x_scroll - current scrolling position
  13. //
  14. //----------------------------------------------------------------------------------------------------------------------
  15. function DrawDialogOptions(DrawingSurface* ds, DialogOptionsRenderingInfo* info, int x_start, int x_end, int x_scroll)
  16. {
  17.   int i = first, xpos = x_start - x_scroll, ypos;
  18.   int step = DialogOptionsIconStep;
  19.   ds.Clear(COLOR_TRANSPARENT);
  20.   ds.DrawingColor = COLOR_TRANSPARENT;
  21.  
  22.   while (i <= info.DialogToRender.OptionCount && xpos < xmax)
  23.   {
  24.     if (info.DialogToRender.GetOptionState(i) == eOptionOn)
  25.     {
  26.       String str = info.DialogToRender.GetOptionText(i);
  27.       int cur_img = str.AsInt;
  28.       int sprwidth = Game.SpriteWidth[cur_img];
  29.       int sprheight = Game.SpriteHeight[cur_img];
  30.  
  31.       if (xpos + sprwidth > x_start)
  32.       {
  33.         // Icon should be visible, at least partially
  34.         ds.DrawImage(xpos, ypos, cur_img);
  35.         // If icon is slightly off-bounds, then clip the loose parts
  36.         if (xpos < x_start)
  37.           ds.DrawRectangle(xpos, ypos, x_start, ypos + sprheight);
  38.         if (xpos + sprwidth > xmax)
  39.           ds.DrawRectangle(xmax, ypos, xpos + sprwidth, ypos + sprheight);
  40.       }
  41.       xpos += step;
  42.     }
  43.     i++;
  44.   }
  45. }
  46.  
  47. //----------------------------------------------------------------------------------------------------------------------
  48. // Draw scrolling buttons
  49. // This is a new function you will have to code, it draws 2 buttons in the left and right ends of this surface.
  50. //----------------------------------------------------------------------------------------------------------------------
  51.  
  52. void DrawScrollButtons(DrawingSurface* ds)
  53. {
  54.   // For now just draw 2 colored rectangles
  55.   ds.Color = Game.GetColorFromRGB(255, 0, 0);
  56.   ds.DrawRectangle(0, 0, 64, 64);
  57.   ds.DrawRectangle(ds.Width - 64 - 1, 0, ds.Width - 1, 64);
  58. }
  59.  
  60. //----------------------------------------------------------------------------------------------------------------------
  61. // Dialog Options Render
  62. //----------------------------------------------------------------------------------------------------------------------
  63.  
  64. function dialog_options_render(DialogOptionsRenderingInfo* info)
  65. {
  66.   DrawDialogOptions(info.Surface, info, DialogOptionsIconMargin, info.Width - DialogOptionsIconMargin, DialogOptionsScroll);
  67.   DrawScrollButtons(info.Surface);
  68. }
  69.  

Then you'd need to similarily adjust tracking mouse over icons:

Code: Adventure Game Studio
  1. //----------------------------------------------------------------------------------------------------------------------
  2. // Dialog Options Repeat Exec
  3. //----------------------------------------------------------------------------------------------------------------------
  4.  
  5. function dialog_options_repexec(DialogOptionsRenderingInfo* info)
  6. {
  7.   int i = 1, xpos = DialogOptionsIconMargin - DialogOptionsScroll;
  8.   int x_start = DialogOptionsIconMargin;
  9.   int x_end = info.Width - DialogOptionsIconMargin;
  10.  
  11.   while (i <= info.DialogToRender.OptionCount)
  12.   {
  13.     if (info.DialogToRender.GetOptionState(i) == eOptionOn)
  14.     {
  15.       // First make sure the icon is actually currently visible, and then that the mouse is above it
  16.       if (xpos >= x_start && xpos <= x_end &&
  17.           mouse.y >= info.Y && mouse.x >= xpos && mouse.x <= xpos + DialogOptionsIconStep)
  18.       {
  19.         info.ActiveOptionID = i;
  20.         return;
  21.       }
  22.       xpos += DialogOptionsIconStep;
  23.     }
  24.     i++;
  25.   }
  26. }
  27.  

Finally, to detect when the mouse has clicked on a scroll button:
Code: Adventure Game Studio
  1. //----------------------------------------------------------------------------------------------------------------------
  2. // Dialog Options Mouse Click
  3. //----------------------------------------------------------------------------------------------------------------------
  4.  
  5. function dialog_options_mouse_click(DialogOptionsRenderingInfo* info, MouseButton button)
  6. {
  7.   if (info.ActiveOptionID > 0)
  8.   {
  9.     // do as usual
  10.     // ...
  11.     //
  12.  
  13.     // probably reset the scroll?
  14.     DialogOptionsScroll = 0;
  15.   }
  16.   else
  17.   {
  18.     if (mouse.y >= info.Y && mouse.x >= 0 && mouse.x <= 64)
  19.     {
  20.        // clicked on left scroll arrow
  21.        DialogOptionsScroll -= 1; // or any other number of pixels
  22.     }
  23.     else if (mouse.y >= info.Y && mouse.x >= info.Width - 64 && mouse.x < info.Width)
  24.     {
  25.        // clicked on right scroll arrow
  26.        DialogOptionsScroll += 1; // or any other number of pixels
  27.     }
  28.   }
  29. }
  30.  
« Last Edit: 03 Dec 2018, 18:56 by Crimson Wizard »