Skip to main content

News

Topic: Problem with Drawing Multiple MsgBoxes (Read 6574 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.
Problem with Drawing Multiple MsgBoxes
How do I draw multiple text boxes onto the screen?

Here are the Global Variables I am using, they where initiated in main.js once.
Code: (javascript) [Select]

//global variables
var player = "key"
var player_sprite = "char_key1"
var font = GetSystemFont();
var window = LoadWindowStyle("window1.rws");
var sh = GetScreenHeight();
var sw = GetScreenWidth();
var move = false;


I created a MsgBox Object
Code: (javascript) [Select]

function MsgBox(txt,x,y,w,h,xo,yo) {
   //properties for MsgBox
   this.window = window;
   this.font = font;
   this.color_1 = CreateColor(0,255,255,255);
   this.color_2 = CreateColor(255,255,255,255);
  
   this.draw = function ()//draw method
      {
         while(!IsKeyPressed(KEY_X))
       {
       RenderMap();        
     this.window.drawWindow(x,y,w,h);
     this.font.drawTextBox(xo,y,w,h,yo,txt);
     FlipScreen();
       }     
      }
   }


In an Update Script I am running the following code so that the message box will draw where the player is not standing
e.g draw the MsgBox right if the player is more left from the centre of the screen.
      draw the MsgBox left if the player is more right from the centre of the screen.

Code: (javascript) [Select]

var player_x = GetPersonX(player);
var player_y = GetPersonY(player);

var msg = [];
msg[0] =new MsgBox(txt[0],4,4,64,96,4,0);
msg[1] =new MsgBox(txt[0],sw-68,4,64,96,sw-68,0);

if (IsKeyPressed(KEY_Z) && move == false)
     if (player_x >= sw/2)
     {
     msg[0].draw();
     }
else if (player_x < sw/2)
     {
     msg[1].draw();
     }


It works fine and they are no problems with the object and how the MsgBox is drawn

But what if I want to draw two MsgBoxes at the same time e.g one for issuing commands and the other for player basic stats
when IsKeyPressed(KEY_Z) is true.

I tried using a for loop to handle drawing multiple MsgBoxes

Code: (javascript) [Select]
for(var i=0;i<1;++i){msg[i].draw();}


But it would only draw the first MsgBox in the loop.

  • Last Edit: July 31, 2013, 06:53:19 am by Xenso

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: Problem with Drawing Multiple MsgBoxes
Reply #1
That for loop only executes once.  Once i is incremented, the condition i<1 is no longer true and it terminates.  And anyway, you're looping through an array, you shouldn't hard-code the loop counter like that. Change the loop condition to i<msg.length and try again.
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

Re: Problem with Drawing Multiple MsgBoxes
Reply #2
I tried

Code: (javascript) [Select]
for(var i=0;i<msg.length;++i){msg[i].draw();}


but its the same. It only draws the first msg[0].draw();


  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: Problem with Drawing Multiple MsgBoxes
Reply #3
That should work. If it doesn't, something else must be wrong somewhere else in the code.
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

Re: Problem with Drawing Multiple MsgBoxes
Reply #4
I think its the while loop

Code: (javascript) [Select]

while(!IsKeyPressed(KEY_X))
               {
               RenderMap();        
                     this.window.drawWindow(x,y,w,h);
                     this.font.drawTextBox(xo,y,w,h,yo,txt);
                     FlipScreen();
               }


Sphere most probably get "stuck" in this loop unless you press KEY_X and in the loop it only draws once, X terminating the entire loop all together. It makes odd sense as to why this wont then draw all the MsgBoxes but how can I work around this?
When I remove the while loop and press and hold z both images are indeed drawn but they flash on and off as long as I am pressing and holding KEY_Z...
I'll sleep on it and see what I can do... maybe you guys have an idea. I'm stumped.

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Problem with Drawing Multiple MsgBoxes
Reply #5
There are two things happening here:

1. Your MsgBox function renders the map, then draws the window and text, then flips the screen, all while waiting for the X key to be pressed (like you guessed). It's what's known as a "blocking" function, where everything afterwards is blocked from executing until the input is handled (in this case, the X key is pressed) thanks to the while loop. The other MsgBoxes will only run after the previous ones are X-ed out, and even then since you're using IsKeyPressed there is no time buffering so if you hold the X key even a little longer than one frame it will X out multiple boxes.

2. MsgBox renders the map, then one window and one block of text, then flips the screen. If you want all the MsgBoxes to display simultaneously you have to render the map before all the MsgBoxes (after removing it from the MsgBox), then render all the MsgBoxes, then flip the screen. It's doable but would be better done in something like a cutscene system like Scenario unless you're more advanced in your JS knowledge than I'm assuming. I haven't even touched upon how to handle the input if you attempt to script it yourself, since that will be the hardest thing about it.

Re: Problem with Drawing Multiple MsgBoxes
Reply #6
I'm not yet a master scripter so I might as well just download scenario to solve this for now.

then how would I use scenario to display multiple MsgBoxes?



  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Problem with Drawing Multiple MsgBoxes
Reply #7

I'm not yet a master scripter so I might as well just download scenario to solve this for now.


!!!  :-\ That might end up being too complicated for you.

Code is not magic and this is not too hard to figure out. What you want is a message box that pops up when you hit the x key and makes sure it pops up on the side the player is not currently at. Is that right?
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

Re: Problem with Drawing Multiple MsgBoxes
Reply #8
Yes, a message box that pops up when you hit the z key and makes sure it pops up on the side the player is not currently at. the x key is there as a cancel button.

So far it pops up in the right places, I got that part figured out but the while loop seems to be the problem. I don't know an alternative that makes sense. I would rather not download scenario unless it was absolutely mandatory because part of the reason behind working on my project with sphere is to learn how to code in an OOP language properly without relying on external libraries (unless its absolutely mandatory). But so far I cant think of a way to draw something without a loop.
  • Last Edit: July 31, 2013, 05:49:06 pm by Xenso

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Problem with Drawing Multiple MsgBoxes
Reply #9
So, your code change changes would be thus:

Code: (javascript) [Select]

function update()
{
    while (AreKeysLeft()) {
        switch (GetKey()) {
            case KEY_Z:
                if (GetPlayerX(Player) >= sw/2)
                    msg[0].draw();
                else if (GetPlayerX(Player) < sw/2)
                    msg[1].draw();
    break;
        }
    }
}

this.draw = function ()//draw method
{
    var done = false;
    while(!done)
    {
        RenderMap();        
        this.window.drawWindow(x,y,w,h);
        this.font.drawTextBox(xo,y,w,h,yo,txt);
        FlipScreen();

        while (AreKeysLeft()) {
            if (GetKey() == KEY_X) done = true;
        }
    }
}
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Problem with Drawing Multiple MsgBoxes
Reply #10
Ohhh, I misunderstood the problem. My bad. :/

Re: Problem with Drawing Multiple MsgBoxes
Reply #11
Code: (javascript) [Select]

this.draw = function ()//draw method
{
    var done = false;
    while(!done)
    {
        RenderMap();        
        this.window.drawWindow(x,y,w,h);
        this.font.drawTextBox(xo,y,w,h,yo,txt);
        FlipScreen();
               
        while (AreKeysLeft()) {
            if (GetKey() == KEY_Z) done = true;
        }
    }
}


I understand, we have a variable done that sets itself to false outside the loop, then within the loop if KEY_Z is pressed done is equals to true and the loop breaks but then done sets itself to false again and continues the process. I am using this script for Messages from NPC's and it works perfect.
I did not use the code for the update function because I am using this for NPC's so when you hit the Talk button (KEY_Z) the messages will show properly in sequence until they are no more messages left then done = true and the while loop breaks. But I've noted the update code for later use for Menu's right now I'm almost done with the NPC Message box.

Sorry I think I forgot to tell you the use of my code (<_<) but thanks once again for the help.