Outbreak Week 2: Panning, Pinch Zoom, Stock Images and Stubbed Layers

I wish I could say I spent the whole week working on this project, but past contact was extended, and I worked on my other non-game project, the Dog Park Finder. We are updating the logo branding and adding thousands more dog friendly locations with new filters and map icons. But this is a dev diary about our Outbreak project (view all posts here). Also visit Skejo Studios to see all we are doing.

For this update, instead of working on a ton of under the hood methods, I hours I did spend on I used on some UI elements. Or more precisely, stubbing out the UI.

Below is one of out UI sketches we made. Partially we were just brainstorming on what a player would need to, prioritizing frequent interaction and highlighting them above less frequent actions. Though we in no way consider the sketch as perfect, we wanted to get something on paper, and then get it in rough for into the game. This way we are getting closer to a fully playable demo, as well as interactive with device and testing user and action flow.

Really, we just decided to place the different player information on the bottom, the upper right will hold the game controls (undo move, pause game, show manual…) and the right side will hold the 'actions' tray. We are also planning to place a message ticker on the top of the board, but that is not fully decided or tested.

So I haven't had the chance to really make the UI yet, so check back next week for a much more complete rendering of the UI sketch. But I did add more cities (admittedly in a grid on the map), as well as stubbing out the layers for the 'Actions Tray', the 'Player Tray', as well as the game controls.

Also, throwing a temporary map image as the background layer helped get away from the drab black and white feel. Because of the details of the large map area, I knew that zooming and panning around the playing surface was necessary. So glad Cocos2D is a mature project, just checked around a bit and found an extension, CCPanZoomControlloer, http://mobile-bros.com/source/CCPanZoomController/. Check the demo movie included, it shows it all.

Besides just placing the different controls on the game play layer, you of course should have a way to show/hide the trays to improve visibility of the map. The above shot shows both a zoomed in view of the map, as well as the lower tray having been expanded. Check out Ray Wenderlich's tutorial on creating buttons and attacking actions to presses. To move a tray, just leave it off screen except for the button that expands it. The attach a move action to it. Currently one such function looks like this for me.

- (void) toggleRoleCardTray {
    CGSize screenSize = [CCDirector sharedDirector].winSize;
   
    //Movement distances are the same, just in opposite directions.
    int changeX = screenSize.width*0.5;
    int changeY = 100.0f;
   
    if (roleCardTrayOut == TRUE) {
        //Tray out, now hide
        roleCardTrayOut = FALSE;
        changeX = -1*changeX;
        changeY = -1*changeY;
    } else {
        //Tray in, now show
        roleCardTrayOut = TRUE;
    }
   
   
    id moveAction = [CCMoveBy actionWithDuration:0.1f
                                        position:ccp(changeX,
                                                     changeY)];
    id moveEffect = [CCEaseIn actionWithAction:moveAction rate:1.0f];
    [roleCardTray runAction:moveEffect];   
}

Besides these items, I also stubbed the layer for the game manual, and wired it up for viewing from both the main menu as well as from the main game screen. Since a manual gets a bit long, I needed to find a way to have a type of scrollview for the text w/o having to use the UIKit's normal scroll view classes. I quickly used the code from http://www.cocos2d-iphone.org/forum/topic/4806#post-28726. But is a bit hard to work with, so I might experiment further with http://www.cocos2d-iphone.org/forum/topic/6821/page/3#post-93423, the CCTableView.

Pretty good for just two+ days of work. Next week I hope to get the UI a bit more function. No need to trying to add polish. Adding niceness to a layer that you later remove after UI/Player testing is a form of waste. Trying to get to that first iteration of usage as quickly as possible. Until next time. -Greg

Comment below, or with Twitter,

Tweet Post

This is a dev diary about our Outbreak project (view all posts here). Also visit Skejo Studios to see all we are doing there.