The importance of private

Hello, I was very very busy in the last months; so I restart to write posts now and this is a short post, but useful, post.

You know a  Livecode program is made of many object nested one inside another:

and livecode for every call, search that function or message from the stack to the nested element, so to avoid ambiguity in very big project, you can prefix the word private, so that function or message is visible only in that object (card, stack, button or else).
Example:

private function increase
      answer "Increase the volume"
end increase

Assembler emulator

Here it is an assembler x86 emulator wrote in Livecode by Andre Garcia:

You can download from here:: http://tinyurl.com/p48nhwd
There are 4 registers: ax, bx, cx, dx.
These are the commands;

• GET - ask a number
• PUT - shows ax register
• MOV - copy the target register
• MOV <target>, <register>
• MOV <target>, <number>
• CMP - compare registers
• JA - jump if greater than
• JB - jump if less than
• JAE - jump if greater or equal
• JBE - jump if less or equal
• JNA - jump if not greater
• JNB -jump if not less
• JE -jump if equal
• JNE -jump if not equal
• JMP - jump!
• XCHG - exchange 2 registers
• ADD - add
• SUB - subtract
• AND - bitwise and
• OR - bitwise or
• XOR - exclusive or
• CALL - call a  subroutine
• RET - return from a  subroutine
• HALT - stop the software
• SETE - set 1/0 if equal
• SETNE - set 1/0 if not equal
• SETLE - set 1/0 if lower or equal
• SETL - set 1/0 if lower
• SETG - set 1/0 if greater
• SETGE - set 1/0 if greater or equal
• SETNLE - set 1/0 if not lower or equal
• SETNL - set 1/0 if not lower
• SETNGE - set 1/0 if not greater or equal
• SETNG - set 1/0 if not greater

Find and replace

A very understimated Livecode tool is the editor Find and Replace. 
In order to open Find and Replace window click on "Edit -> Find & Replace":

otherwise you can press  Ctrl+Shift+F.

This window permit you to find or replace anything wherever is in your code.

Programmers use find to double check if a mistyping lead to an error or to check other programmer work. Please note that find works only on saved program; if you type and you don't save, the text just typed is ignored.


Find and Relace window permits you to refine your search with these option:

• simple text (all chars are interpreted as simple chars)
• jolly chars, like asterisk
• regular expressions
• case insensitive or case sensitive. 
• one of the words or all words
• in what part of the program limit the research (stack, carc ,button current source, etc.9

Results list show where they are:

Clicking on one of the results, you'll be immediately in the part of the code.


Replace is incredibly amazing, you can change a name in all the program, without worrying to forget some part of the program. Livecode program are so evolute, that other competitor programming language have so many files spread across folders that you usually miss something and never change what the code.

Multitouch

When you have a touch devices, like mobile phones and tablets, it is useful to manage the touch of multiple fingers simultaneously. Many programs, in fact, are easier to use with the touch of more fingers, such as zoom effects.

Livecode has also incorporated a system to manage multitouch without limit to the number of fingers that can be used simultaneously. This system works on Android and iOS.

The messages to be intercepted are: touchStart, touchMove and touchEnd.

For each of us we have a disposition a unique identifier (tID) of the finger a contact with the screen, which is presented by a number.

• touchStart is sent as soon as a finger touches the screen
• touchMove is sent when a finger scrolls across the screen, including the position (X, Y) of the finger
• touchEnd is sent as soon as a finger comes off the screen

For example, the following code show the position, the instant by instant, of the fingers on the screen.

on touchstart tID
   lock screen
   create field ("finger" & tID)
   set the width of the field ("dito" & tID) to 250
   put "1," & (22 * tID) into temp #posizione
   set the topleft of the field ("dito" & tID) to temp
   create graphic ("finger" & tID)
   set the opaque of graphic ("finger" & tID) to True
   set the style of graphic ("finger" & tID) to oval
   put (25 * tID) & comma & (25 * tID) & comma & (25 * tID) into temp #colore
   set the backgroundcolor of graphic ("finger" & tID) to temp
   set the width of graphic ("finger" & tID) to 30
   set the height of graphic ("finger" & tID) to 30
   unlock screen
end touchstart

on touchend tID
   delete field ("finger" & tID)
   delete graphic ("finger" & tID)
end touchend

on touchmove tID, tX, tY
   set the text of field ("dito" & tID) to ("il dito " & tID & " si trova in " & tX & comma & tY)
   set the loc of graphic ("dito" & tID) to (tX & comma & tY)
end touchmove

This is the result on a Android device:

Shrink images

Today we will see how to create a program that reads an image, resizes it and saves it resized.
Let's create a new stack and let's put a button to ask for the file of the image we want. Livecode can import the following formats as images: GIF, JPEG, PNG, BMP, XWD, XBM, XPM, PBM, PGM, PPM, PICT, EPS.
To avoid overloading the code I limit myself to the most common formats, so the button code will be:

on mouseUp
   if there is an image 1 then
      delete the last image
   end if
   answer file "Select imaage, please:"
   put it into temp
   set itemdel to "."      
   if the last item of tolower(temp) is not among the items of "jpg.gif.png.jpeg.bmp" then
      answer "That file is not a supported format."
      exit MouseUp
   end if   
   import paint from file temp
   set the top of the last image to 75
   set the resizeQuality of last image to "best"
   set the inw of the last image to the width of the last image
   set the inh of the last image to the height of the last image
   set the intl of the last image to the topleft of the last image
end mouseUp

Let's explain it:

•      we delete a possible image already present
•      we ask for the location of the file
•      we check that the file extension is one of those we like
•      we import the image, this operation creates a new image
•      we move it so that it does not cover the button
•      we set the quality for image editing on best (best)
•      we save the initial width, height and position

Then we put a scrollbar we will call scale, and a button to save. If all went well, we will have something like this:

Scrollbar code is:

on scrollbarDrag newPosition
   put the inw of the last image into iniW
   put the inH of the last image into iniH
   put the inTl of the last image into iniTl
   set the width of the last image to round(iniW * newPosition / 100)
   set the height of the last image to round(iniH * newPosition / 100)
   set the topleft of the last image to iniTl
end scrollbarDrag

As you can see, original data are saved, so we can't lose image details.

Now let's see save button code:

on mouseUp
   ask file "New file name:"
   export last image to file it as JPEG
end mouseUp



The export command supports: PBM, JPEG, GIF, BMP, PNG .

 Now you can enjoy with this program

Driving a car

If you need to create a car videogame, the controls are always relative where the car point to, so you need a little of geometry and trigonometry to do a correct work, let's see an example.
Let's create a stack with the image of a car, call the image car:

In order to rotate it, you just need to use the angle property, but how to move when it's rotated?

Now add this code to the card:

on arrowkey puls      
   put the keysdown into temp2
   repeat for each item tItem in temp2
      switch tItem
         case "65362"
            put the angle of image "car" into temp         
            #creaimo una strina del tipo x,y
            put -5 * sin( pi / 180 * temp) into movimento
            put "," after movimento
            put -5 * cos( pi / 180 * temp) after movimento
            move image "car" relative movimento      
            break         
         case "65364"
            #dobbiamo muoverla in indietro rispetto al verso del muso
            #prendiamo l'angolo della direzione
            put the angle of image "car" into temp         
            #creaimo una strina del tipo x,y
            put 5 * sin( pi / 180 * temp) into movimento
            put "," after movimento
            put 5 * cos( pi / 180 * temp) after movimento
            move image "car" relative movimento      
            break         
         case "65361"
            put the angle of image "car" into temp
            add 1 to temp
            set the angle of image "car" to temp
            break               
         case "65363"
            put the angle of image "car" into temp
            add -1 to temp      
            set the angle of image "car" to temp
            break                        
      end switch
   end repeat
end arrowkey



Finished! Explanation:
First of all, the angle property is always between 0 and 360, if you put the value out of this, livecode reconvert it, i.e. 361 becomes 1.
The same for position values, livecode convert to the nearest integer.
Just to keep in mind that angle is in degree, but sine and cosine use radians, so there is the conversion formula n/180.
The keydown is better for contemporary buttons pressed.
Finally, these are the coordinate systems on computers:

• origin in the top left
• X to the right
• Y to the bottom
• image angle at 12.00 and clockwise

like this:

Sudoku game

Today I'll show you a very good game made in livecode: a sudoku game.
You can download the livecode source from here: http://www.maxvessi.net/pmwiki/uploads/Site/Sudoku.zip
So you can play and see the code. You have transparencies, dragging images, and sudoku generation algorithm.
This is a screenshot:

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.

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.

Expandable animated menus

I needed a LOT of time to write this post, this time I'll show you how to create animated menu collapsing/expanding.
You are free to change anything of the code and animations.
You can change buttons in the examples below with any combinations of items you like for graphic.
It's a little complex, so I'll write a plugin to do this automatically and better.
The final result will be like this demo:

Please note the will need to do a lot of GROUPS. Here is the hierarchy of what we'll see, keep it in mind for the rest of this post:

First of all, create a button called main, then another button called +. Resize them to get this result:

Now put this code in button + script:

on mouseUp
   if the label of me is "+" then
      showMe
      set the label of me to "-"
   else
      hideMe
      set the label of me to "+"
   end if
end mouseUp



Group them together and call the group Main.
Create another button call it slider, resize it below Main like this:

Now group slider with itself (or other item you like in slider), and call the group Slider.
Now group group slider with group main, call this group element 1.
Set the lockLocation of group "element 1" to true.
Put this code in group element 1:

on showMe
   repeat while the top of group "Slider" of me < the bottom of group "Main" me - 4
      lock screen
      set the bottom of group "Slider" of me to the bottom of group "Slider" me + 4
      set the height of me to the height of me + 4
      layoutChanged the short name of me, 4
      unlock screen
      wait 10 milliseconds with messages
   end repeat
end showMe

on hideMe
   repeat while the bottom of group "Slider" of me > the bottom of group "Main" of me
      lock screen
      set the bottom of group "Slider" of me to the bottom of group "Slider" of me - 4
      set the height of me to the height of me - 4
      layoutChanged the short name of me, -4
      unlock screen
      wait 10 milliseconds with messages
   end repeat
end hideMe



Clone it has many times you like, for example 5 times.
Put any clone below the preceding clone, change the numbers in names, so we have: element 1 on top, element 2 down element 1, element 3 down element 2 and so on.
Group all and call it List.
Set the lockLocation of group "list" to true.
Put this code in group list script:

on layoutChanged pGroup, pSize
   lock messages
   
   local tElementCount
   
   if pGroup is "Element Template" then exit layoutChanged
   
   put word 2 of pGroup into tElementCount
   add 1 to tElementCount -- look for the next one
   repeat while there is a group ("Element" && tElementCount)   
      set the top of group ("Element" && tElementCount) to the top of group ("ElemenT" && tElementCount) + pSize--
      add 1 to tElementCount
   end repeat
   set the vscroll of me to the vscroll of me
   
   if the bottom of group pGroup of me > the bottom of me then
      set the scroll of me to the scroll of me + pSize
   end if
   set the vScrollBar of group "List" to the formattedHeight of group "List" > the height of group "List"
   set the vScroll of group "List" to the vScroll of group "List"
   unlock messages
end layoutChanged



FINISHED!!!