DesktopX: Scripting A Complete Widget 1
From WinCustomize Wiki
| Scripting A Complete Widget 1 | ||||||||
| ||||||||
“So I know how to script visibility, motion, color, and time,” you tell me, “What do I do with all this stuff?”
Well, your only limitation is your own imagination. If you can dream it up, there’s probably a way to do it with DesktopX. Look through the galleries at WinCustomize and see what creative ideas other DXers have come up with.
Here are some tips that might help you get started on your own projects.
Contents |
[edit] Scripting a Complete Widget: Tips
Concept
- Have a clear idea of what you want your widget to do. List the different functions of your widget; everything you want your widget to do and how you want it to do it. Does something like it already exist? If so, will your widget just be a replicate or can you make it significantly better? Ask yourself these questions:
- What is it?
- What does it do?
- What are its functions?
- How does it function?
- The layout. Even if you don’t know what color scheme or cool glassy/chrome look you want to give your widget, you still need to have a general idea of where everything goes. Do you need to use images or text for certain parts? How big or small is your widget? Where would it fit on the user’s desktop?
Execution
- Research; make sure your widget is at least feasible even if you don’t quite know how yet. Go through some of the functions of your idea and refer to the Developer’s Guide to see how to make it work. I usually like to start with the core functions—the ones that really make the widget run—and see if what I’m aiming for is at least possible. Find a widget that has similar functions and see how it is made. You can even ask the author for help.
- Keep track of your progress with a list of things to do.
- Save your work often and keep separate versions when you make big changes.
- Use stand-in graphics where applicable until you are ready to create the final design.
- Ask for help on the Wincustomize forums if you get stuck. Many friendly members there are always ready to help.
- Search the internet for various vbscript references. You’ll find a wealth of ready-made scripts at your disposal.
- Pace yourself….I know once you get into a project it’s obsessive, but really, taking a little time away from the project to clear your head allows you to return to your work more focused with a clear goal.
Well, usually, this is where I say goodbye and good luck, but I’ve decided to take the extra step and show you how to take all the stuff you’ve learned so far and combine them to make a working widget!
Onward, to our first DesktopX project: CLICK ME!
[edit] Scripting a Complete Widget: CLICK ME the Game
[edit] Concept
- What is it? Click Me is a game where the user clicks on a target and gets points.
- What does it do? The target randomly appears on the screen and the user must click on it before it disappears.
- What are its functions? There is a high score to each level, and a set amount of time, in which, the user must match or beat that high score. Each level has faster speeds, higher scores and more points per click.
- How does it function? On startup, there is a description of the level. The target and description text is color coded for the level. The user clicks on the target to start the game. Each click on the target adds to the user’s total score. When time is up, if the user matched or beat the high score they can move onto the next level. If not, they play the same level again.
[edit] Execution
[edit] Overview
We’ll need 3 objects: the target, the level description text (text object), and the score count text (text object).
Since we need to recognize l-clicks on the target, the main script should be in the target object. We’ll use this one script to control everything; using as few scripts as possible is always a good idea.
We’ll need timers to show the object (for a short amount of time), hide the object for about a second, and a timer to countdown the total seconds.
Of course, there’s the l-click function that will add to the total score, and update the score text. It will also start the game but we’ll need a variable to keep track of whether the user is starting the game or already playing the game.
We’ll need a function that sets the various values for the current level: high score, points per click, hue shift etc.
That should give us a general idea of what we’re doing. Now don’t worry, it isn’t as complicated as it sounds and if you’ve been following this series you have already learned everything you need to create the game. I’ve already worked everything out so all you have to do is follow along. It only takes about 10-15 minutes to complete.
[edit] Setup
Open DesktopX Builder. Create a new object and name it “clickme”. Apply the image below:
Create another object and name it “scoretext”. In the states tab, change its appearance to text. Enter some text and then apply the settings below.
Font style: bold. Font size: 12. Font color: white. Font border color: black. Alignment: center. Enable shadow.
Clone the scoretext object. Name the clone “messagetext”. Change the font color to RED. Also, set the width of the object to 300 so that the text wraps.
Select both the scortext and messagetext objects. R-click and open properties. Set the activation to ‘none’. This is so the user doesn’t accidentally click on them when playing the game.
You should have this:
Don’t worry about positioning. That will be taken care of in the script.
[edit] Script
Here, I’ll have codes for you to copy and paste and codes for you to type up yourself. It’s better for you to get used to typing up scripts yourself. You’ll find that as you type, the DX Script editor is equipped with auto text that often completes your procedures or shows you options for completing certain syntax. Take a moment to review the scripts as I describe them.
The first thing to do is declare our variables—well you never really know exactly how many variables you’ll need right off the bat, so they were actually added as I created them. Remember, this script goes in the “clickme” object.
Dim xmid, ymid, randomnum, randomnum2 Dim hideTime, showTime, ttime Dim gamestart, hscore, ppoints Dim lvl, startmsg, endmsg Dim scoretxt, clkpoints, hueshift
The variable ‘showTime’ is how long the target will stay visible. Its value changes based on what level it is, as does 'hscore', 'startmsg', 'endmsg', 'clkpoints' etc.
Next is OnScriptEnter and here we set the target to the center of the screen. We set some variables like lvl, hideTime, and gamestart. Gamestart is the variable that keeps track of whether or not the game is in play. Finally, we call the procedure that sets all the current level’s information. Go ahead and type it up as you see it here.
(Scripting Tip #1: Watch your spelling. Small mistakes can lead to big headaches.)
Here is the procedure ‘setlevel’. It resets the ppoints (total player points per level) to 0, and depending on what level it is it sets the amount of time the target is visible (showTime), the total time (ttime), the high score (hscore), points per click (clkpoints), and hueshift. Next, we set the actual text for the scores (scoretext) and level description (messagetext) using the information from the predefined variables. Finally, we apply the text to their respective text objects and set their positions on the screen.
Sub setlevel
ppoints = 0
Select Case lvl
Case 1
showTime = 500
ttime = 30
hscore = 500
clkpoints = 50
hueshift = 0
Case 2
showTime = 400
ttime = 30
hscore = 1000
clkpoints = 100
hueshift = 50
Case 3
showTime = 350
ttime = 30
hscore = 2000
clkpoints = 250
hueshift = 100
Case 4
showTime = 300
ttime = 30
hscore = 3000
clkpoints = 275
hueshift = 150
End Select
object.Hue = hueshift
'Set messages for level
startmsg = "LEVEL " & lvl & ": Each click is worth " & clkpoints & " points. Match or beat the high score in " _
& ttime & " seconds to move onto the next level. GOOD LUCK!"
scoretxt = "SCORES" & vbcrlf & vbcrlf & "YOUR SCORE: 0" & " HIGH SCORE: " & hscore
'Set text objects
Desktopx.Object("scoretext").text = scoretxt
Desktopx.Object("scoretext").left = (system.ScreenWidth/2) - (Desktopx.Object("scoretext").width/2)
Desktopx.Object("scoretext").bottom = object.top - 30
'Set message text
Desktopx.Object("messagetext").hue = hueshift
Desktopx.Object("messagetext").text = startmsg
Desktopx.Object("messagetext").left = (system.ScreenWidth/2) - (Desktopx.Object("messagetext").width/2)
Desktopx.Object("messagetext").top = object.Bottom + 30
End Sub
Now we have our l-click function. It checks whether the game is in play (gamestart) and either starts the game or adds points to the user’s score. After that, it updates the score text and position.
'Called when L-click is released
Function Object_OnLButtonUp(x, y, dragged)
If gamestart = False Then
startGame
Else
ppoints = ppoints + clkpoints
Desktopx.Object("scoretext").text = "SCORES" & vbcrlf & vbcrlf & _
"YOUR SCORE: " & ppoints & " HIGH SCORE: " & hscore
Desktopx.Object("scoretext").left = (system.ScreenWidth/2) - (Desktopx.Object("scoretext").width/2)
End If
End Function
Here is the function that starts the game. It hides the object, sets the message text to a countdown timer and starts the timers. Timer 1 will deal with the target’s visibility & position, and timer 2 is for the countdown.
Now come the timers. Timer 1 has two functions. If the target is hidden it moves it to another position, unhides it, and resets the timer for the amount of time it is to remain visible. If the target is visible, it hides the target, resets the timer for the amount of time it is to remain hidden, and lastly it generates two random numbers for the next target position.
'===OBJECT MOVEMENT TIMER=== Sub Object_OnTimer1 object.KillTimer 1 If object.Visible = False Then object.Move randomnum, randomnum2 object.Visible = True object.OnTop object.SetTimer 1,showTime Else object.Visible = False object.SetTimer 1,hideTime 'Get random numbers for object position Randomize min = 1 max = system.screenwidth - object.width randomnum = Int((max-min+1)*Rnd+min) min2 = 1 max2 = system.screenheight - object.height randomnum2 = Int((max2-min2+1)*Rnd+min2) End If End Sub
Timer 2 decreases the amount of time left (ttime) and updates the message text. If the time is up, it kills all timers, checks the user’s score and puts up an end message relative to whether or not the user beat the high score. It will also increase the level if the user wins.
'===COUNTDOWN TIMER===
Sub Object_OnTimer2
If ttime = 0 Then
object.KillTimer 1
object.KillTimer 2
object.Visible = False
gamestart = False
If ppoints => hscore Then
endmsg = "YOU WON!"
lvl = lvl + 1
Else
endmsg = "Sorry, you lose"
End If
Desktopx.Object("messagetext").text = endmsg
Desktopx.Object("messagetext").left = (system.ScreenWidth/2) - (Desktopx.Object("messagetext").width/2)
Desktopx.Object("messagetext").visible = True
object.SetTimer 3, 5000
Else
ttime = ttime - 1
If len(ttime) = 1 Then ttime = "0" & ttime
Desktopx.Object("messagetext").text = ":" & ttime
End If
End Sub
At last, we have timer 3. This timer is just the wait time before the next level is loaded.
That’s it! Now you can apply the script.
Before you play, be sure to check out the notes section below. I hope you’ve enjoyed this project and that it has been worth the extra step. :)
[edit] Notes
- I created four levels for this tutorial. It will play up to the 4th level but the game is incomplete. You can add more levels or you can decide what you want the game to do when all levels are completed. One idea might be to add up the user’s scores from all levels and keep an overall high score chart.
- You might want to consider hiding desktop icons and the taskbar so that when you’re clicking all over the place you don’t accidentally run a program or something.
- You can adjust any of the values for the levels to your liking. You can also adjust the hideTime and timer 3.
- Once you get the widget working the way you want it to, select all and export to finalize the widget.
