UDN

Search public documentation:

GFxSplitScreen

Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 Home > User Interfaces & HUDs > Scaleform GFx > How to handle split screen

How to handle split screen

How to handle split screen

Overview

GFx 3.3 introduced focus groups and split screen extensions, and I'll be releasing a video tutorial on that eventually, but for now here is some info that might help you:

The new focus group extension makes using a single movie instance for splitscreen and off-line multiplayer possible. GFx 3.3 allows for the creation of up to 16 focus groups, and provides an interface to map a specific controller to a focus group. By default all controllers belong to focus group 0.

Using Selection.setControllerFocusGroup, you'll be able to assign a controller to a new focus group.

GFx 3.3 also introduces the concept of focus group masking, using a new extension called focusGroupMask. A focus group mask is a 16bit value (0000 0000 0000 0000) where each bit represents the focus group at that index. For example, bit 0 represents focus group 0, bit one - focus group one, bit two - focus group two, and so on. Bit 0 is the farthest bit to the right, and bit 15 is the farthest bit to the left. The MovieClip.focusGroupMask extension can be used to indicate which focus groups a movieclip belongs to by simply flipping the bits from 0 to 1.

Assign Controllers to Focus Groups

In the first segment here, we set player 1 (the first controller) to focus group 0. Now bear in mind that all controllers are 0 indexed, so the first controller is really controller 0, not controller 1. We then set player 2's controller to focus group 1.

// Set up two focus groups

Selection.setControllerFocusGroup(0, 0);   // controller id 0 set to focus group 0
Selection.setControllerFocusGroup(1, 1);   // controller id 1 set to focus group 1

Set Initial Movie Clip Focus

The first example below sets myMovieClip1 to have its focus set to the decimal value of 1, equivalent to the binary value of 0001, which represents focus group 0, using a CLIK specific method.

Example 2 uses a generic method (Selection.setFocus). And in the case of the generic method, you don't use the focus group mask, but instead use the controller index as the second parameter. Player two's controller index is 1.

//Set initial focus

myMovieClip1.myButton1.focused = 1; // 0x1 - clik specific
Selection.setFocus( myMovieClip2.myButton1, 1 ); // non clik specific (generic)

Lock Movie Clips to Focus Groups

Now we lock each movie clip and its children to a specific focus group, meaning that only controllers belonging to that focus group can access that movie clip.

// Lock each movie clip to a specific focus group using a decimal value

panel1s.focusGroupMask = 1; // hex 0x1 - binary 0001
panel2s.focusGroupMask = 2; // hex 0x2 - binary 0010

Any movie clip that has not been assigned to a focus group can be accessed by all controllers. And, you can even allow mutliple controllers to access a movie clip with the focusGroupMask.

Just figure out what the bitmap mask decimal value is that will allow both the player 1 controller and the player 2 controller to access a given movieclip. So, for controller 0 to have access, we need to flip bit 0 to 1, and for controller 1 to have access we need to flip bit 1 to 1. This gives us a binary value of 0011. And this binary value translates to a decimal value of 3.

If you can't figure out binary to decimal there are plenty of free web-based converters.

So, the result of this is that we set myMovieClip.focusGroupMask = 3. Allowing both controller 1 and 2 to access it.

Focus Indicator Graphics

This is supported by CLIK for Button and button-like components, such as checkboxes and radiobuttons. By default, all focus groups will use the same graphical indicators as before. Inside a component, you'll see the focusIndicator layer on the timeline. The focus indicator is a movieclip with the instance name of, focusIndicator.

Drill down into focusIndicator. Inside there should be a series of keyframes. Starting with the first frame, there should be no graphic on the stage. And this frame needs a label of state0 assigned to it. This frame represents no focus. In other words, if the player hasn't selected this component with his controller, it will display this frame. Moving right on the timeline one frame, the next keyframe should be labeled state1. This keyframe needs the graphic representing player 1's controller, or controller 0, and this is will be the frame used to represent that the player 1 has selected the component with his controller. The 1 in the label state1 represents the bitmask decimal value for focus group 0, which controller 0 is assigned to.

Moving over another frame, the next keyframe should have the graphic for player 2's controller, or controller 1. And the label for this frame is state2. So, the thing to understand here is that each frame must be labeled stateN, where N should be replaced with the appropriate decimal value of the focus group bit mask. And, of course, each frame should have a stop actionscript command on it.

The next frame would be labeled state3. It should have a graphic for both the player 1 and player 2 controllers. Remember, the decimal value of 3 translates into the binary value of 0011. And this means that bits 0 & 1 are flipped to on (or 1), so the state3 frame represents focus when both the player 1 and player 2 controllers are focused on that component. You need to create keyframes for every possible combination of controller focus that you want a particular UI element to handle. You could add keyframes for state4, state5, state6, and so on, each representing a different controller or combination of controllers having focus on a UI element.