Moving text on a canvas?

[Nico]

Hi everyone,
 
I'm a teacher and I'd like to make an app for spelling (in French). Using the MoleMash game idea, I would like to display random words or sentences in speech bubbles, from two distinct lists (right or wrong), over the Mole's (or other animal's) head, as it appears somewhere on the screen. The user would have to touch it only if there's a mistake. 

Since ImageSprites have no "text" parameter, I thought of putting text labels (or buttons) out of the canvas, in an horizontal arrangement, (see screen capture) but it is very static. Would anyone have a suggestion to display text (from a written list, not text that has been drawn on a picture) on the canvas? I saw similar questions on the former forum, but the links aren't working anymore.

Thanks in advance! 


 

[SteveJG]

How about this Nico?

or ..use an image program like Paint    to create an image with the words/phrases  Bonjour!    Ca va?   in a bubble image.  Like:

Resize it to how large you want your sprite and then    Bonjour!   Yes this IS Text on a picture, however you can use the bubble (if it has a transparent background) in conjunction with the above code. Just place the bubble at the same time as the text (with an appropriate text offset to the image).    Yes, you will have problems if the text does not fit the bubble... you can not use the \n directive for multiple lines    I  wrote a solution to that problem 

It is possible to simulate wordwrap n.  This is an example of how you might do it.    The canvas in this case is 320 pixels wide and the example shows how this can be done with a text for which its length is known and which is less than 180 characters.   It seems the default text used on canvas (there is only one possibility...it is not possible to select text font) can post about 60 characters in a 320 pixel wide canvas -- each character, on average is 5.33 pixels wide.apparently.

The example wordwrap breaks at 60 characters, makes no compensation for hyphenation, or separating in the middle of a word.

A clearer image is here:  https://lh6.googleusercontent.com/-U3ldppTGLNI/VCMxFVUdc4I/AAAAAAAAA_4/AciQ5cE0TuE/s1600/CanvasWordwrap.png

Try it and let us know what you find.   This example is good for three lines of text and will break if it does not have sufficient characters to fill the space (there is presently no error checking). You will have to check for length of text and probably put the DrawText blocks within and IF ELSE statement to do that checking.  This solution is very primitive.

This article might be helpful   http://www.appinventor.org/Chapter17  understanding where the images need to go.  I would use a global variable in the call Canvas1.DrawText text field that comes from your list of phrases.  
would that work?

Happy New Year!,

Steve

[Nico]

Hi Steve, 
thank you so much for your detailed answer ; it will both solve my problem and help me learn more about AI2. 
Happy New Year! 
Nico

[Abraham Getzler]

Some more tricks to try ...

You can wiggle the words in the labels in the horizontal arrangement

by sandwiching them between blank labels with clock-controlled widths.

Or you could dynamically create little picture files from your word list

by stamping each word onto  a small word-sized canvas then saving the small canvas to new files at startup time, 

one file per word,

and swap the images of your sprites from that list at pop up time.

ABG

[Nico]

Thank you!