frame

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Printing text using arrays

edited June 20 in Game Design
imageimage
image



http://flowlab.io/game/view/936837
Here's a text demo that prints out "TEXT IN FLOWLAB TEST ABCDEFGHIJ" using an array of integers representing the letters of the alpahabet. Just hit enter and it will print.

This is the exact expression used:
var text = [20, 5, 24, 20, 27, 9, 14, 27, 6, 12, 15, 23, 12, 1, 2, 27, 20, 5, 19, 20, 27, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 5, 24, 20, 27, 9, 14, 27, 6, 12, 15, 23, 12, 1, 2, 27, 20, 5, 19, 20, 27, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 5, 24, 20, 27, 9, 14, 27, 6, 12, 15, 23, 12, 1, 2, 27, 20, 5, 19, 20, 27, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 5, 24, 20, 27, 9, 14, 27, 6, 12, 15, 23, 12, 1, 2, 27, 20, 5, 19, 20, 27, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 5, 24, 20, 27, 9, 14, 27, 6, 12, 15, 23, 12, 1, 2, 27, 20, 5, 19, 20, 27, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 5, 24, 20, 27, 9, 14, 27, 6, 12, 15, 23, 12, 1, 2, 27, 20, 5, 19, 20, 27, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 5, 24, 20, 27, 9, 14, 27, 6, 12, 15, 23, 12, 1, 2, 27, 20, 5, 19, 20, 27, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 5, 24, 20, 27, 9, 14, 27, 6, 12, 15, 23, 12, 1, 2, 27, 20, 5, 19, 20, 27, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; text[a];

var text = [x, x, x, ...]; is the array 'text' containing integers representing letters of the alphabet.
text[a]; at the end will output the 'a' position of 'text'.

Expressions in flowlab have 'a' and 'b' inputs, and an evaluation input. It starts with 0 being input to 'a', the 0 position of this array is integer "20". This "20" is saved as "savetext" and a write message is sent to object "font". font objects receives the write message and use proximity detection into an AND to filter "savetext" and display an animation representing that character, 1=A, 2=B, and so on. When this is done, the writer moved 32 pixels to the right, and does this all over again using incrementing [a] values. Also added linebreaks, when the writer reaches this part it will move start printing on the next line. You can see the second .gif showing a non-rectangular printing field with the linebreaks, it works just fine


What is cool about this is that arrays can hold massive amounts of information compared to everything else in flowlab, for this test I'm using 248 array elements and there's room for a little more. The average sentence length has around 70 characters so 248 can fit quite a bit. I don't think it's very efficient creating and deleting the array with each evaluation, but for dialogue in rpgs or something like that and with a slower printing speed it is probably fine. Something I think will work good is having END triggers like "999" in the array which can tell the program to stop at that point, they can function like periods in sentences, so all you have to do is input the starting point of a particular dialogue and it will print until it reaches the 999.

Comments

  • edited June 21
    Wizardry you genius. You could use 28 for . 29 for , 30-40 for 0-9 41 for ! 42 for ? and so on. This is very impressive. You could even use 99 to go down a line, like Enter, I'd assume. I don't see why not. You always come up with such interesting new ideas I would never even consider.
  • That's a good idea using 99 for what's essentially a linebreak, a formatting character. In most rpg dialogue systems you have the character's name top-left of their speech, something like this:

    Character name
    Whatever the character is saying here

    Which could be represented in the array like this:
    Character name <99> Whatever the character is saying here

    I don't know what the limit I encountered earlier was based on, whether the array had too many elements or the character count in the expression was too great. If the limit was because of character count, I will probably rearrange the numbers so that the most common letters of the alphabet are placed on 1-9, this way they only use 1 character space. Also might be able to remove whitespace, the spaces after the commas separating the elements of the array to decrease its character count. I'll test some things out and see what the limits are
  • If you make punctuation animations, put the punctuation all the way to the left, so you won't need a space after it.
  • edited June 24
    what exactly is an array and how does it work?
  • edited June 24
    arrays are like an index of things, in this case integers. you can access its contents using index numbers or the position within the array [0, 1, 2, 3, 4, 5, 6] 0 being the contents of the first index number, 1 being the second and so on

    image
    here is some work making a more normal looking font instead of the 32x32 ones above, also has some numbers and lowercase. i had the linebreak function working but redid most things so it's not working at the moment, the words still wrap around automatically though when they reach the end of the printing field. the speed can be set faster i just have to tweak it, because the leftmost char will get skipped if there isn't enough delay. i've been trying to flush it out into a working dialogue/text system that would let you print from any number of "text files". like for example you bump into an old man, it will load up the old man dialogue, etc
  • Thank you for the explanation!
  • Oh, I didn't check, is this on game layer or GUI? It's kind of important to know how it works when moving your character. Also, how did you do a lowercase from from capital? How I would have done it would be 1 through 26 for lowercase, and for Capital it would be 101 to 126. That way would be a system that is easy to remember, 26 letters of the alphabet, just put a 1 in front if you wanted to be a capital letter.
  • haven't posted the 16x32 version above yet but everything was done using game objects, it should be easy enough to convert to ui objects for an actual version. instead of proximity just extract and compare positions between writer and a character to determine if its on it.

    i can make some kind of tool to encode text into something usable for this, so even though 1-26 and then 101-126 is easier, it's not like you would be encoding it all manually anyway. it makes more sense to pack things into 1-99 and not get into triple digits space unless necessary to cut down on the size of things. this is if the array error i've experience is from character limit, i still haven't checked but it seems likely
  • Oh yeah, that's true. I'm dumb, I don't know why I didn't just consider a converter. I used to use a converter to turn text into binary, I don't know why I didn't just think of something similar like that for turning it into an array. Sometimes when I'm tired I do things the hard way, I was actually sitting there thinking of how long it'll take to write dialogue, using numbers and commas manually.
  • edited June 25
    So I know a good converter for turning text into hex, I used to use it for writing custom N64 and Action Replay codes, but it doesn't put commas, and I don't think that really matters, unless the calculator can read hex. Does it understand letters, besides A and B? I never even bothered to do more than basic math with it. If not, guess we will just have to make our own converter tool.
  • Oh yeah, I forgot, it is using an array to spit out numbers to go to a filter to play an animation based on the number, isn't it? I don't think number would be able to understand hex regardless. It has to be two digit numbers. Well, back to square one.
  • I found this site to be useful. I couldn't find a good text converter, so I started searching for custom code cipher encoders. I was thinking of filling in all the blanks and then downloading the page to save the numbers. In retrospect, it would probably be faster to search github or something for a custom ascii cipher code and run it, but I wasn't thinking about it. http://stevenhansen.info/cipher/

    Screenshot_2018-06-24-22-49-19
  • Does it understand letters, besides A and B?
    From what i've seen expressions in flowlab can only output integers, the expressions themselves could internally deal with strings and stuff but it's of little use. And also arrays containing multiple variable types, for example strings and integers, are generally less efficient than arrays with a single variable type


    Oh yeah, I forgot, it is using an array to spit out numbers to go to a filter to play an animation based on the number, isn't it? I don't think number would be able to understand hex regardless. It has to be two digit numbers. Well, back to square one.
    Yeah that's how it's set up, but I think it might be handled easier, instead of having 100 filters, animation blocks, etc to deal with all the characters. why not just one animation, but 100 frames, and use the animation "go to frame #"? No need to filter the output as well, it can be input directly, only commands like linebreaks, end markers, etc really need filtered
    image
    This pic shows how much easier it is, the yellow box is the filters/animation blocks necessary for respresenting A-Z, the old method I was using, and the white box is all that's necessary now, plus it can hold 4X more than the yellow box with the 100 frame limit for a single animation

    I found this site to be useful. I couldn't find a good text converter, so I started searching for custom code cipher encoders. I was thinking of filling in all the blanks and then downloading the page to save the numbers. In retrospect, it would probably be faster to search github or something for a custom ascii cipher code and run it, but I wasn't thinking about it. http://stevenhansen.info/cipher/
    That is pretty good, it even saves your settings. I'll be using it until I make my own tool, ideally something other people don't have to configure on their own and is ready to go

  • edited June 25
    Wait, we can do 100 frames in an animation now? I thought grazer limited it because it went offscreen. Go to frame would be much faster, that's a lot of filters though, you could basically skip filters for the most part, I think. Like let's say 99 is line break, okay so filter = 99 (is not) then the number just goes to the frame slot, no other filters are needed, unless I'm wrong. You should only need a filter for line break. All the other numbers just go to animation frame.
  • You're kind of right, I misremembered someone's thread about running out of room for animation frames, although technically there doesn't seem to be a limit, it's just after 50 it goes off screen. you can zoom the page out and the rest will show up but that's not practical, even if you could stuff in 100 frames. easier to just make another animation with a new set of frames and filter input to either
  • Why not just have multiple animations

    Like A-Z
    1-9
    And then symbols
  • Sorry that's basically what I meant
    A-Z    1-26    animation 1
    a-z    27-52   animation 2
    numbers and symbols    53-??  animation 3
    commands   ??-??   animation 4

    Say the output from array is 43, a single range filter can cover 27-52, and route it to animation 2. it represents "q" but since there aren't 43 frames for this animation, you just subtract 26 from it to get 17.


    image
    here's an example of different dialogues working, and some text resizing


    image
    this is where all dialogues are stored, each expression array can be numbered and output its contents on demand. to add more dialogue you just set the filter to whatever number you want the array associated with, and paste in the array to the expression
  • edited June 26
    Oh yeah, the text resizing looks pretty good. For a second there, I forgot we had resizing, and I thought you made a ton of different sized fonts. That could be useful, you could also make event fonts or special fonts or just bold and italic or something, like 91 sets all animations to bold, 90 sets them back to standard, 92 sets them to italic, etc, like using tags >b< word >/b<.
  • edited June 26
    A side thought for alternate characters, I could incorporate some sort of filter system to write Japanese. I could do say 80 for Hiragana and 81 for Katakana, and do something like this.
    Say I want to write すごい,
    On a standard keyboard, you can type sugoi. If you notice, there are 5 English characters, but only three Japanese characters.

    S+U, G+O, I
    19, 21, 7, 15, 9

    Not going to go too deep into detail, because there are way more characters than just these, but for the sake of simplicity, I'm just going to put the basics in a screenshot with a number chart for the English alphabet. Pretty much any word can be made of syllables, that can be pronounced the similar way to English syllables, by combining letters. Using numbers for letters, and math, I should be able to make filters for Japanese.
    1529977549351
  • edited June 28
    @grazer You can't even believe it yourself while you've created flowlab. Nice :D
  • @Latif3
    grazer is used to everyone on the forums requesting stuff and asking tons of questions. Meanwhile, Wizardry is basically saying "I don't need to wait for new features, I'll make my own", and grazer is mind blown every time.
  • image
    Here's an example of interaction with the text field, so instead of simply printing stuff you can use it like an interface to select things or have dialogue trees. some extra stuff/labels are shown that was used for debugging which you can ignore
  • Oh, very nice. Now we are getting into printable menus? I hadn't even considered that as an idea. Now you're blowing my mind. What are you going to do next? Make a way to type back? You know, for name creation, file saving, nicknaming your Pokemon or whatever, or one of those text based adventure games? I could see that.
  • What are you going to do next?
    Right now everything is built with regular game objects meaning nothing will display right as soon as the player moves, if the camera is following the player. I tried quickly converting everything to UI objects earlier but it doesn't work, i rely too much on proximity for a lot of things. I have to make it so when a dialogue is triggered all the text stuff relocates to the player's position. once that's done i just have to make like a background behind the text and to clean up some stuff, it's already functional enough and with menu interaction pretty useful

    Inputting text to set a player name should be easy, i don't know a good way to store the character's name without saving each character on its own but that's probably alright
  • edited June 30
    Yeah, you have to store each character on its own, saving a number for each letter that is entered out of like 12 Max.

    Is it actually Impossible on the GUI? I figured you would do something like, there is no proximity or anything like that, instead, it uses numbers, and sends a message per number, to objects on the GUI, for each letter slot. If you don't get what I mean by that, let me know, and I'll explain it more. What you are doing is having a blip pan to the right, and then teleport down, when you could just be using numbers for each grid text box. You could use an array for that too, for example, 30 text boxes, 30 numbers in the array, you skip a line, you skip to 20, or skip to 30, or Tab 5 boxes for a gap. Pressing a or whatever button goes to the next array of dialogue sets all the boxes to zero, or whatever the blank space number is. Or you could just make it simple and have a bunch of spaces instead of a separate array, so it always prints in order, and never skips a line. That should work. I might test it myself.

    That should prevent any problems where it accidentally skips a letter, like mashing enter fast does it in your original example. You should be able to make the text move as fast as possible, using an array order of messages instead of a blip.
  • @Wizardry I got ya-


    For everything that needs to stay onscreen, use an once and an extractor pair that saves coordinates, get a pair of expressions as well. You’ll also need two mailboxes

    Connect an extractor to A, and Connect a mailbox to B and set to whatever Axis you’re using. Connect to a position. Repeat for the other axis.

    Then- In the character, connect the scrollview outputs to a message pair, sending the coordinates of THAT to the elements


    This should keep them in position relative to the top left corner of the screen- I think
  • @CrimsonBlackGames

    Does that work with clones now?
    Won't it be jiggly and slightly desynced? The blip has to be very precise, which was why I suggested messages instead of a blip.
  • edited June 30
    That should prevent any problems where it accidentally skips a letter, like mashing enter fast does it in your original example. You should be able to make the text move as fast as possible, using an array order of messages instead of a blip.
    Original example hasn't been touched since being posted, I've rebuilt it a few times so it works a little different now. right now there's just a timing issue with word wrapping and a character can be skipped, that's the only issue i've found. this is the current version http://flowlab.io/game/view/941374 just press 1/2 to clear the debug stuff in the beginning. "printer" is storing all the text arrays in a bundle, "player" has the text triggers in another bundle, these and "char" are basically all it needs to print, "button" is for input, everything else is a formatting object controlling things like wordwrapping or indent positions, starting positions

    Maybe it's possible for gui but i don't like how gui and regular objects are in separate object libraries you have to switch between to edit, and some behaviors are missing
    This should keep them in position relative to the top left corner of the screen- I think
    Something like this yeah, although since the game mode changes when dialogue displays to prevent player movement, the text objects only have to relocate once whenever the dialogue is triggered, not a constant update
  • edited July 2
    So I was working on a GUI version of this, using a different method, but then I realised I would have to upload every letter and number for every single animation for every single box frame printer, and man, that would take a few hours. I requested animation uploads from grazer, so then we can share our animations and text between other people or our other games. How's your moving box attempt going? Have you got it staying up in the corner moving stable and whatnot? Let me know, so I can decide if this GUI test is a waste of time or if I should keep working on it. It's turning out to be more annoying than I had planned in my head. Parent groups don't work how I hoped they would, and I kinda wish child objects shared parent animations. That would save so much time, in theory.
Sign In or Register to comment.

flowlab.io

| make games in your browser
@ 2017 Flowlab.io, All rights reserved.

Contact us

Get In Touch