Skinning Buttons (putting an image on them)We use buttons because they are easy to add, move and work with. Images can be too big and have too many pixels to work with. Graphics are too basic and simple. Buttons are best
But moving around a red box is not very entertaining. Let's make it more fun by turning that red box into a character or something more exciting. We will still use that box but we will attach an image to it. That is called "skinning" You may be familiar with the term - skinning - if you have customized your browser or another game.
First we import a graphic to use as a 'face' or 'skin' for our button. We are going to import the graphic as a control so that we can reuse it elsewhere and more than once. It is best to choose a smaller graphic - like a "png" file but you can use others too (gif, jpg). You will be able to resize them but generally, the smaller the graphic, the less space it takes up and the faster it loads. You have two generally choices of where to save your graphics. You can hide them outside the boundary of your card or you can add a new card to your stack just for graphics. Either way works. It is just a matter of preferences and how many graphics you will have. Click on "File", "Import as Control", "Image file...". and once you select your graphic file, it should appear on your card. Make your card larger and move the graphic to the edge of the card where it is away from the main action.
Open up the Property Inspector and edit its name to make it simpler. Very Important - - > note what it's ID # is (like 1021) because that's what we use to skin it.
Now select your object (button "box") that you want to skin. Open up it's Property Inspector, click on "Basic Properties" and select "Icons and Border". Put the ID # of the graphic that you imported in the field called Icon. Now your button will have the graphic on top of it.
You may have to adjust the size of the button to show the whole graphic, or you may want to adjust the size of the graphic smaller to fit the button.
Lock the Size and Position of Your Graphic Once you have shrink down your original image to the size that you want, you can lock it down so it does not return to its original size every time that you open up the card. In the Property Inspector for the image, go to "Size and Position" and check the box that says "Lock size and position". Resize the image to fit the Size and Position of Your Graphic A better way is to actually resize the file so you don't waste memory space. set the imagedata of image "asteroid" to the imagedata of image "asteroid" This will reduce the file size. If you put the imported image on your card, you can now move the edge of the card back to its original size (the size that will show on the screen).
move the card back to its original size so the imported graphic is hidden from view. Do not worry about the graphic being hidden. It is still there on the card. It just doesn't show on the screen.
Anytime you want to use that graphic to skin other objects, just use it's ID # on the new object. You can use it as You can import other images to use, the same way - ....import as control, and note the ID # to use in the Icon field of any object.. You can now change 'skins' for any object, just by changing the Icon number.You can do the with code at any time For instance, your player is moving along and steps on a mushroom and is immediately transformed into a witch. After 5 seconds, it goes back to being a person if intersect (button "box", button "mushroom", "pixels") then
set the icon of button "box" to 1017
wait 5 seconds
set the icon of button "box" to 1015
end if set the icon of button "box" to 1017 set the icon of button "box" to 1015
where my graphic "witch" has an ID # of 1017 and my graphic of a person is ID # 1015
... screenshots to come...
|
|
