Worlds.com     |  Development Kit Table of Contents  |

Creating a WorldsPlayer Interface


Overview

WorldsPlayer Interface Layout

Background Edges. This part of the WorldsPlayer interface is currently black. If you want this to be a different color, you'll have to specify an RGB value. NOTE: The space above the Help Button (the top of rtpanel) changes in height depending upon how large or small the user has the browser set.

Background. This part of the interface changes width as the user resizes the interface. It can be any RGB value to match your button art. The text that appears on this background (Username to the left of the drive button, Info to the right) is white unless otherwise specified (requires Worlds.com programming time).

Ad Cube. Several ads are served on this rotating "cube". A 128 x 128 8-bit .bmp files are required.

Interface Artwork. These are the parts of the interface that have buttons with "rollover" and "selected" effects.

NOTE ON TEXT COLOR:
Any text on the interface that is programmed (Username, Info to right of drive button, Friends Online list, actions list on Actions pop-up window, text on Change Avatar pop-up window) is white unless otherwise specified. Changing this text color requires Worlds.com programming time.


Creating the Artwork

Click on the download link for sample gifs and Photoshop files:
Download (1.4 MB)

Buttons

There are six parts to the WorldsPlayer interface buttons:

Right Panel
97 x 182
IMPORTANT NOTE:
The size of the button area and order in which they are presented on this panel cannot change. For example, the Help button must be at the top and the button area remain 23 pixels high. In the Photoshop file Interface.psd, please use the guides to determine where the buttons are placed. For further reference, the heights of each button area are listed next to the image at right.
rtpanel
Friends
97 x 11
Tiles vertically beneath the right panel, the number of times it tiles depends on the size of the user's browser window. The version at right is the state used when a friend is online - the program writes the friends name on top of this gif.
friends button
More Friends
97 x 11
The end of the friends list. It's normally empty (null state). If a user's Friends Online list gets filled up, this section changes to a button that says "More Friends..."
more friends button
Universe Map Button
98 x 22
Note that the bottom of this gif needs match the Background Edge color (black in this case).
Universe Map Button
Drive Button
81 x 19
Drive Button
Quit Button
65 x 19
Quit Button

Each of the final gifs for the buttons contains four button states: null, normal, rollover, and selected. The final form for each gif looks like this:

The quit.gif above is four times the width of the quit button (65 x 4 = 260). The first section on the left is the "null" state, the next section is "normal", the third section is the "rollover" state, and the last section is the "selected" state. Within the Samples folder, there is a folder titled Interface. Please look at all the gifs in this folder. These are examples of all the finished gifs for the interface. Use Interface.psd to help you design the interface as a whole.

 

Map

The map in the lower right corner of the WorldsPlayer interface changes for each world the user enters. It can contain as many or as few teleport links as you want (or as will fit!). The image is 158 x 124, and the final gif should be in the same form as the other interface gifs:

Each button area or "hot spot" needs to be square or rectangular. In the sample below, the areas for four of the buttons are outlined in blue. Along with the final gif, we will need the coordinates of all the hot spots. For example, the top left corner of the map image is considered 0,0, so the Home button on the example below is located at 117,0 (it's top left corner is 117 pixels over, 0 pixels down). The width and height of the area is 41 x 28. So the coordinates you would give us for that button would be "Home: 117 0 41 28". See the meteor-mapEXAMPLE1.gif and meteor-mapEXAMPLE2.gif in the Samples/Interface folder.

 

Pop-Up Windows

There are five pop-up windows:

Actions
Top: 142 x 65
Middle: 71 x 15
Bottom: 142 x 8
This window comes up when the Actions button on the WorldsPlayer interface is pressed. This window is divided into three parts: top, middle and bottom. The top part contains the instructions - this text must not be changed (change the color if you need to). The middle part is the action button which gets tiled within the window. The program writes the names of the actions over this gif (be sure to leave room for this text). The bottom is simply the....bottom. Use the Photoshop file ActionsWindow.psd as reference.
actions top

actions middle

actions bottom
Hang On! Teleporting...
200 x 50
Cancel Button: 61 24 84 20
This window appears whenever a user teleports to another world.
teleporting window
Change Avatar
177 x 47
Yes button: 39 23 48 18
No button: 96 23 48 18
This window pops up when an avatar is chosen in the Avatar Gallery. This gif needs blank space at the top for the program to write the text, "Do you want to change to avatar fill in the blank?"
change avatar window
More Info
244 x 47
Yes button: 48 22 60 19
No button: 139 22 54 19
This window pops up when an item in the 3D store is click on or when the user clicks on various other clickable objects in the worlds.
more info window
Do You Really Want to Quit?
260 x 173
Yes button: 141 76 78 22
No button: 141 114 78 22
Pops up when Quit button is pressed.
quit window

The gifs for four of the pop-ups (hangon, changeav, moreinfo, dyrwtq) have the familiar null, normal, rollover, and selected states:

hang on!

The current coordinates for the buttons on these pop-ups are listed above. If you change the location of these buttons, we will need the new coordinates of each area (x and y location of upper left corner plus width and height).

The actions pop-up is divided into three separate gifs (see sample above). Use the Photoshop file ActionsWindow.psd as reference.

Within the Samples folder, there is a folder titled PopUps. Please look at all the gifs in this folder. These are examples of all the finished gifs for the pop-up windows.

 

Splash Screen

splash screen

The Splash Screen appears each time the WorldsPlayer is run. You can design it however you like, but it requires the following:

- It needs to be a 400 x 300 8-bit gif
- Worlds.com copyright information
- a small Worlds.com logo (see wrlds_logo_smtag.eps - you may change the size of the logo, but the text must be legible)
- Worlds.com's web address.

We'll need two gifs, the base 400 x 300 graphic without the text "Please Wait..." and then a separate "Please Wait" graphic that will get overlaid on top of the base graphic:   We'll also need the x,y placement of the upper left corner of the Please Wait graphic. Use Worlds_Splash.psd as reference.

 

Install Screen

install screen

The Install Screen is basically a larger version of the Splash Screen. It needs to be a 500 x 375 8-bit gif, and you need to leave room at the bottom of the gif for the install buttons.

 

Desktop Icon

icon example
The desktop icon for your branded version of WorldsPlayer will appear on the user's desktop when they install the program. This icon is also used in the upper left corner of the WorldsPlayer browser (it gets scaled by Windows so the result is not always pretty). To create your icon, it helps to use an icon editing application such as IconEdit Pro (Download IconEdit Pro Here). Your icon must be in the following format:

- 32 x 32
- 16 color (icon programs such as IconEdit Pro have the palette you'll need)
- save your icon in the .ico format


Finished Art

1. If you're changing the Background Edge, Background, and/or Text color (on interface), you'll need to send the RGB values for those colors.

2. Send coordinates for pop-up window buttons (if changed), map hot spots, position of "Please Wait..." on Splash Screen.

3. All of the final art needs to be sent as 8-bit .gif files with the exception of the ad cube art which needs to be an 8-bit .bmp file and the icon which is a 16 color .ico file. Below are the file names to be used:

Interface
YourCompany_rtpanel.gif
YourCompany_friends.gif
YourCompany_mfriends.gif
YourCompany_umbutton.gif
YourCompany_drive.gif
YourCompany_quit.gif
worldname-map.gif
YourCompany_adname.bmp

Pop Up Windows
YourCompany_hangon.gif
YourCompany_moreinfo.gif
YourCompany_changeav.gif
YourCompany_dyrwtq.gif
YourCompany_actt.gif
YourCompany_actm.gif
YourCompany_actb.gif

Other
YourCompany_splash.gif
YourCompany_pleasewait.gif
YourCompany_install.gif
YourCompany_icon.ico


Back to Top of Page

Any questions, contact Julie at julier@worlds.com

Updated 09/25/00