SkinZ - Creating Apps With SkinZ
Submitted:|| 27th August, 2003
Well, so far my additions to the daily click site haven't been all that useful, so i thought that i would hopefully create something that may give people some ideas. I did a quick search and checked no one had written a similar article, I guess before i start i must also apologies for the spelling, i haven't got anything with a spell checker on my system at the moment, EEEK...
SO, what's this article all about?? - I notice many apps use skins these days, It gives people a chance to be creative, popular programme's like win amp have whole sites dedicated to user created skins. I am writing a simple game at the moment and thought i would give it a little bit of flair by giving people the option to select different skins, as well as making it easy for them to create their own.
This whole example is done in MMF 1.5, but its almost the same in TGF, but you will have to download the unzip object if you want to make it exactly like this example.
Firstly lets think about what needs to be done in a skin.
* The user should be able to make their own graphics.
* In some cases the user should have some control over where certain images appear and how big they are. (say you was making a media player, you might want to have the play, Stop, buttons etc... in a different place so they don't get in the way of your background image.
* Their should be a preview option.
* And maybe somewhere for the creator of the skin to take some credit
Here's how i went about making my skin system.
I create 2 frames in the storyboard editor, one to be used as the skin selection system and one to be the frame for my game. I then created a little directory structure in the place my game was saved, i added a folder to put my skins in, I added a data folder (Currently just stores a ini file) and i added a temp folder.
I made a couple of test skins, each skin is a zip file, and in that zip are several images and a ini file. Each zip must contain files with the same names and same extensions its no good having a image called background.gif in one zip and a image called background.bmp in another, choose your file formats, and file names and stick to them.
Onto the selection screen, Firstly i added a List object, i used this to list the available skins at the start of the frame Appdrive$ + Appdir$ + "\skins\*.zip" Its important to use Appdrive$ and Appdir$ this ensures that the programme works regardless of where it is installed to. When i have finished a programme i like to close MMF up rename the folder its all in and then test it all still works.
Its usefull to understand how ini files work from this point on, their's many article on these - use the daily click search button (Top left of screen for you people who keep posting the same questions over n over) and do a search for them. They really aren't as scary as they seem and they are very useful. Its also useful to understand fastloops, although u could use this code without but it may be a little sluggish.
Now we need to highlight the skin that's currently in operation on the list we just made then load some details in about it. In each of my zip files i have a ini file called settings.ini. This is a file that the person creating the skins can edit giving a little more control over how the whole thing looks than just adding pictures. Here's how the details part of one of my skins inis looks
Details=This is one of several skins distributed with the game.
I also have another ini file which is one that only my programme controls, this is in the data folder and is called game_details.ini. This looks like this
When a skin is called its unzipped to the temp dir. At the call of the frame the temp dir should contain the last skin that was unzipped. As this is the construction stage it wont do so it may be useful to unzip your default skins to the temp dir.
Because we are needing to load a lot of info in here i used a fast loop, i called the loop at the start of the frame. In the fast loop i did the following
set current ini to Appdrive$ + Appdir$ + "data\game_details.ini"
changed it to the skin / last line of my ini
set my list box set current line of list box value of( "Ini" )
changed selected ini to Appdrive$ + Appdir$ + "Temp\settings.ini"
then loaded each of the separate lines into a text box
This should leave us with a List box containing all your skins, with the current one highlighted, and a selection of text box's with details about the current skin.
Next thing we need is to let the user change skin, i added a event that said if list box selection changes. Now remember the list of skins is really a list of files so the first thing i do is unzip the skin, if you haven't already done so add the unzip object to your project we can unzip the skin. I add these items
Set zip archive to Appdrive$ + Appdir$ + "skins\" + List Select$( "Skin_List" )
set destination dir to Appdrive$ + Appdir$ + "temp\"
I use *.* if you don't already know this means all files, this means ini files and the images all get unzipped to the temp folder
I then add a few lines to write the selected skin to Appdrive$ + Appdir$ + "data\game_details.ini" so that we know what the selected skin is for when they return to the skin selector
The skin in the temp folder has now changed so i reload all the skin details in from the settings.ini file
I want to be able to see what a skin looks like before i select it for my game, it would be a pain in the neck for the user to have to select a skin then go too the game and see what it looks like, then return to the skin editor and choose another. Blah what a waste of time, so i use a preview option. In each of my skin files i have a image called preview.jpg, this is basically just a screenshot of the skin. This is loaded into a active picture object (this is like a active object but its just one frame that's loaded in from the hard disk instead of internally). The above event has already unzipped the preview image so i can add a line to the end of this event to update the image. To do this i add the command new picture and then browse to the picture on the hard disk. This object is clever in some ways because there is no need for Appdrive$ or Appdir$ in the file location. Sadly its also very stupid in other ways, just adding this line alone wont update the picture, to get around this i made another image, just a 1pixel x 1pixel box and saved it into my folder, i called that first. Ya should now have 2 lines that look like:
New Picture : D:\sillygame\blank.jpg
New Picture : D:\sillygame\temp\preview.jpg
I also added the same lines to the fastloop that we run on the start of the frame to ensure that the current skin is shown at the start.
I created a Ok button that just loaded in my game frame.
That's it - my skin selector was finished
Now for the game frame, I used a whole lot of active picture box's, when creating these you have the option to make the transparent colour to the first pixel colour, i used this option to make sure that certain images didn't have boarders.
Now something you might want to add, I didn't have a need to do this in my skin programme, but in some it would be usefull to store image locations, and sizes in the ini files to allow the user to reposition them,
X_Size = 10
Y_Size = 10
X_Size = 10
Y_Size = 10
That's about all their is to it, i know this seems a long article, and i have probably babbled on a little but i wanted to try to make it as easy as possible. Still, im going to add a little more
In my skin selector i made a couple more options, I made a import skins button, this basically used the file selector object and copied the selected skins into the skins folder.
I made another active object that showed the skin you had when you loaded the selector. So with the other preview i had got like a before and after type of thing. To do this i used the file object and made it copy the preview.jpg file to a new image called old_preview.jpg at the start of the frame.
One last thing that's worth noting is that sometimes the active picture objects plays about with you... if your pictures aren't updating properly save the programme, close it and then open it again and it should start working, if it doesn't then its probably your sloppy code Im telling you this because i spent 20 minutes trying to figure what was wrong with my programme, and really their was nothing wrong it was just the object playing up.
Hope this has been of some use to all you clickers. This is my first article, and if its well received i might write some more. A quick thanXs to everyone who's posted good articles (don't mean them one line jokers) you helped me do so many great things, that's it, that's me done!