Now is a good time to talk about images and graphics. Generally we use the terms graphics and images interchangeably but they really are different. There are two different types of graphics - bit mapped and vector based graphics. LiveCode refers to bit-mapped as Images and Vector shapes as Graphics

Vector based graphics are drawn with lines and math. So they are smooth and when you enlarge them, they still look good. These include squares, circles, rectangles, ovals and more. LiveCode provides Graphic Tools to create your own graphics and work with them.

                                        These are the Graphics tools for you to use in LiveCode on the Tool Bar

Images

Bitmapped graphics are made of pixels or blocks of color. When you enlarge a bit mapped image, you see jagged lines and squared blocks of color. It is much like you see when you have a poor signal to a LCD TV. Blocks of color come and go and the image breaks up).  This is not so bad because they are easier to edit and work with.

You can create your own images (characters, scenery, objects, etc) using software like Gimp (which is free), Photoshop (which is not free) or other software. You can also look for images on the Internet but you have to make sure that what you use is legal and royalty-free. 

Image files will have the extensions of JPG, GIF, BMP or PNG.

LiveCode provides tools to work with Images where you can create your own or edit ones that you bring into LiveCode

                                     These are the Image or bit-mapping tools that you have to use on the Tool Bar in LiveCode.

You can use these tools to create your own artwork or use them to edit the images that you find elsewhere.

1. Editing the image in LiveCode

For instance, you find a tree on the Internet that is not copyrighted and free to use. But when you import it, it comes in as a square with a tree on it and a white background.

                                             

note: that background is actually white pixels, not transparent ones. So the "intersect" command will detect the boundaries (the square outline) before you actually touch the real object.

Use the Eraser tool from the Tools Palette to erase those white pixels from around the tree. 

note: It is easier to edit it if you enlarge/stretch the tree to make it much, much bigger. It is easier to edit. Then when done, shrink it down to the best size.

2. Using Preview on an Apple computer

It is very easy to make a transparent image (GIF or PNG) using Preview on a Mac (Apple) computer running OS/X. - here