Justified text

One missing thing in livecode is the justified text. However there are some workaround.
The first option is to use the free hhtextEdit widget for livecode:

It's based on the browser widget, full of option. You can download from this link: http://livecodeshare.runrev.com/stack/860/HHTextEditBasic

Otherwise you can use this code in a field:

local finaltext

on closefield
   justifyme
end closefield

on justifyme
   lock screen
   put empty into finaltext
   stripspaces
   set the dontwrap of me to true
   put the text of me into temp
   set the text of me to empty
   replace return with (space & chartonum(1) & space ) in temp #we separete words with newlines attached, and much more, newline is a word now
   put the width of me into tw
   put the number of words of temp into nw
   repeat with i=1 to nw
      if word i of temp is chartonum(1) then
         put return after me
         put the text of me after finaltext
         put empty into me
         next repeat
      end if
      put word i of temp after me
      if the formattedwidth of me > tw then
         delete the last word of me
         addspaces 0
         put word i of temp & space into me         
      else
         put space after me
      end if
   end repeat
   put the text of me after finaltext
   set the text of me to finaltext
   set the dontwrap of me to false
   unlock screen
end justifyme

on addspaces temp
   if the number of words of me is 1 then
      put the text of me after finaltext
      set the text of me to empty
      exit addspaces
   end if
   
   put the width of me into tw
   put the number of words of me -1 into nspaces #the correct number of spaces between words is nspaces -1, but we'll use mod
   put temp mod nspaces into temp
   add 1 to temp
   put space after word temp of me
   if the formattedwidth of me > tw then
      put the number of chars of word 1 to temp of me into tc
      delete char (tc +1) of me
      put the text of me & space after finaltext
      set the text of me to empty
   else
      addspaces temp
   end if
end addspaces

on stripspaces
   put the text of me into temp
   repeat for each char tchar in temp
      if (tchar is space) and (the last char of t2 is space) then
         next repeat
      else
         put tchar after t2
      end if
   end repeat
   set the text of me to t2
end stripspaces

on resizeControl
   justifyme   
end resizeControl



The result is good:

Creating the frogger game in less of 10 minutes

I'll show how to create a Frogger game in livecode in less of 10 minutes.
Frogger is a very old game, where a frog try tro cross a highway trying to avoid cars.
This guid will create a very simple version, but it will cover many topics of game programming... and in less of 10 minutes!
Are you ready? GO!
Create a new Mainstack, this is the window of our game.
Put inside the window these elements:

• Start button
  
• a green circle, named frog
• a pink rectangle named car1. 
• a big dark green rectangle namer arrival.
• put the arrival label on the dark rectangle

 This should be the result:

Now in the card put his code, it's the code to move the frog with arrow keyboard:

on arrowkey puls
   if the giostat of me is "attivo" then
      switch puls
         case "up"
            move graphic "frog" relative 0,-30         
            break         
         case "down"
            move graphic "frog" relative 0,30         
            break
         case "left"
            move graphic "frog" relative -30,0
            break               
         case "right"
            move graphic "frog" relative 30,0
            break         
      end switch
      if intersect(graphic "frog",graphic "arrival") then
         set the giostat of this card to "stopped"
         answer "You win!"
      end if      
   end if
end arrowkey



This is half of the work, now we have to work with cars.
If the window lwidht is 400 pixels, then this is the code to put inside the car, it will set the starting poit, move from left to right and gagain put it on the left of the screen (on and on until the game end):

on iniziagioco
   set the percorso of me to true
   controint
   gioco
end iniziagioco

on moveStopped
   put the percorso of me into temp
   set the percorso of me to not temp
   if the giostat of this card is "attivo" then
      send gioco to me in 0.1 millisec
   end if   
end moveStopped

on gioco   
   put the percorso of me into temp
   if temp then
      move me relative 400,0 in 3 sec without waiting
      else
         move me relative -400,0 in 1 millisec without waiting
      end if
end gioco

on controint
   if intersect(graphic "frog", me) then
      set the giostat of this card to "stopped"
      stop moving me         
      answer "Aaaaah! The frog died!"
   end if   
   if the giostat of this card is "attivo" then
      send controint to me in 0.1 sec
   end if      
end controint




Let's explain the code.
Iniziagioco is the message to start the game, once activate the car will move from left to righ for 400 pixels. Reached the end of the screen will teleport a the left and start again. This loop will continue until the custom property giostat will become "stopped". Custom property are very handy because are easy to inspect and the can be seen everywhere in program.
Controint is a loop message, cycled every 0.1 seconds, to chech if the car is under a car.
The messages gioco and movestopped are to move the car. We want to put 6 cars, so we use the move without waiting form, this way all cars move independently. MoveStopped is automatically launched by livecode when a grapic stop to move.
Now copy and paste the car 5 times, this way we have 6 cars on the screen. Change the name to car2, car3, car4, car5 and car6. Change the size of the cars as you like. Now in the code of the last 3 cars change the 400 in -400 and viceversa, so these cars will move from right to left.
The final result will be like this:

And now this iis the code of the start button:

on mouseUp
   set the loc of graphic "frog" to 200,300
   set the giostat of this card to "attivo"
   repeat with i=1 to 3
      set the left of graphic ("car" & i) to the left of this card
   end repeat
   repeat with i=4 to 6
      set the right of graphic ("car" & i) to the right of this card
   end repeat
   repeat with i=1 to 6
      send "iniziagioco" to graphic ("car" & i)
   end repeat
end mouseUp



FINISHED! Less of 10 minutes!
As you can see the start button to the work to correct position the carsm of the frog and it send starting signal at the cars.
This is a very simple example, but you can improve it these ways:

• substitute livecode graphic with images or animations
• changing speeds or random speed of cars, valuing cars dimensions
• random cars
• move works on any curve, you can create random or complex highways
• you can add timer and scores

Free to post comments

The Hangman game

You can download this game from  http://livecodeshare.runrev.com/download/stack/69/Hangman, it's the classic Hangman game:

It's a nice example of:

• Custom graphic for buttons
• Custom top bar
• Custom shape windows (see the bottom window corners)
• Windows slowly disappearing

Play with it and then I suggest you to study the code.

Working with ZIP files

Livecode has the ZIP libraries integrated, so you can work with zip files.
In order to compress files or folder you have to use the absolute path of the new archive, example:

revZipOpenArchive "C:/myarchive.zip", "write"



Now you can add files and folders, just indicate the absolute paths inside the archive. You specify just files one by one, and directories are created by the path used, this is the code:

revZipAddItemWithFile "C:/myarchive.zip", "test.txt", "C:/Programs/RunRev/test.txt"
revZipAddItemWithFile "C:/myarchive.zip", "folder1/test.txt", "C:/Programs/RunRev/test.txt"
revZipAddItemWithFile "C:/myarchive.zip", "temp/folder2/test.txt", "C:/Programs/RunRev/test.txt"



After adding files, you have to close the archive, only at this point the ZIP file is correctly created:

revZipCloseArchive "C:/myarchive.zip"

In order to unzip files, first you have to get the list of files and folders, then you have to create all the folders needed on the destination filesystem, finally you can decompress files. For example, this is the code to do it on Windows:

on mouseUp
   answer file "Select Zip file to decommpress:"
   put it into myzip
   revZipOpenArchive myzip,"read"
   put revZipEnumerateItems(myzip) into tItems
   repeat for each line tline in tItems
      if last char of tline is "/" then
         create folder "C:/Documents and Settings/max/Desktop/" & tline
      else         
         put "C:/Documents and Settings/max/Desktop/" & tline into temp
         revZipExtractItemToFile myzip, tline, temp
      end if
   end repeat
   revZipCloseArchive myzip
end mouseUp

You can modify the above code for your needs.

Changing window shape

If you want a custom window shape, like this:

instead of this:

You have to import the image backgroud, this image must have transparent parst like a GIF or a PNG.
Then you have to set the windowshape of the stack to the imported image, using the property inspector. Finished.
Unfortunately you have no more the icons to iconify or close the window, ho you have to add these buttons:

Now add the following code in the close button:

on MouseUp
   quit
end MouseUp

and this code in the iconify button:

on mouseUp
   set the iconic of this stack to true
end mouseUp

Now add this code in the stack to move it:

on mouseStillDown   
   set the loc of this stack to globalloc(the mouseLoc)
end mouseStillDown
   

Toggle button

One of the missing controls in Livecode palette is the toggle button.
To obtain a toggle button, just add this code to a button:

on MouseUp
   put the hilite2 of me into hitemp
   if hiTemp then
      set the hilite2 of me to false
   else
      set the hilite2 of me to true
   end if
end MouseUp

setprop hilite2 temp
   set the hilite of me to temp
   set the hilite2 of me to temp
end hilite2

I used a new property, because the hilite is actived as soon you press but you still don't relase the mouse.

Animation with drawing

You can create an animation with the drawing commands of livecode, for example see this script:

on mouseUp
   set the rect of the templateImage to 100,100,400,400
   create image "test"
   choose brush tool
   set the brush to 8
   set the brushColor to red -- could use an RGB triplet here
   set the dragSpeed to 20 -- very slow
   #H
   drag from 120,120 to 120,300
   drag from 120,200 to 150,200
   drag from 150,300 to 150,120
   #i
   drag from 180,120 to 180,150
   drag from 180,180 to 180,300     
end mouseUp

this is the result:

The example is simple, but you can use all geometric shapes of livecode, so you can create very complex animations.