The Shady Wizard

Tutorial Tuesday: Accordion Menu Using UITableViewController

Steve — Tue, 31 Aug 2010 17:04:26 +0000

I think the idea for this menu feature came to me in a dream. In all seriousness it was late at night my coffee had just worn off and I was like “HEY I can add an accordion menu!” Problem solved. My implementation is insanely simple and animated which is awesome. So here we go.

The idea of an accordion menu is a menu with sections that are clickable and when clicked these sections expand up or down to reveal a menu item. The purpose is so you can neatly compact all your menu items into a nice small section and let them expand as needed.

This idea of menu items and them being clickable and expanding and moving and reacting to one another fits perfectly with in a UITableViewController. So that is where we will start first make a UITableViewController like so:

1
2
3
4
5
6
7
8
9

#import
#import "AccordionSelectorCell.h"
#import "AccordionDataCell.h"

@interface AccordionTableViewController : UITableViewController {
int numRowSelected;
}

@end

Here we are making a table view that has one section and twelve cells, the number of cells should be even to allow for half menu selectors and half being menu data. Each odd numbered cell is being made a DataCell so those cells will be filled with the content of your menu item. The even cells are being made SelectorCell so these will be the menu items that are clicked that correspond to a DataCell.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

#pragma mark -
#pragma mark Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
// Return the number of sections.
return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
return 12;
}

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {

if(indexPath.row != 0 && (indexPath.row - 1) % 2 == 0)
{
cell = [[[TowerInfoDataCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
else
{
cell = [[[TowerInfoSelectorCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.textLabel.text = @"Upgrade Name";
}
}

// Configure the cell...

return cell;
}

In the table view’ s delegate is where the magic happens. in using the selected row we change the numRowSelected to the menu item that is one row beyond it if you want menu items to be titled from the bottom just change the “+” to a “-”. Also the use of [beginUpdates] and [endUpdates] will cause the table to animate the change in height of the cells.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#pragma mark -
#pragma mark Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
// Navigation logic may go here. Create and push another view controller.
/*
To conform to the Human Interface Guidelines, selections should not be persistent --
deselect the row after it has been selected.
*/
[tableView deselectRowAtIndexPath:indexPath animated:YES];

// Main logic for selecting of the cell and it's corresponding dataCell
[tableView beginUpdates];
numRowSelected = indexPath.row + 1;
[tableView endUpdates];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if(indexPath.row == numRowSelected)
return 100.0; //returns floating point which will be used for a cell row height at specified row index
else if((indexPath.row - 1) % 2 == 0 || numRowSelected < 0)
{
return 0.0f; //returns floating point which will be used for a cell row height at specified row index
}

return 15.0f; //returns floating point which will be used for a cell row height at specified row index
}

in the viewDidLoad I am initializing which row should start selected and adding a special case if no menu items should appear.

1
2
3
4
5
6
7
8
9

#pragma mark -
#pragma mark View lifecycle

- (void)viewDidLoad {
[super viewDidLoad];

// The first menuItem to be opened on load or make this -1 to have zero menuItems appear open
numRowSelected = 1;
}

Now in the TableViewCells just set up each view how you want it to look. Also making the selectionStyle of the DataCell equal UITableViewCellSelectionStyleNone is rather important.

Tutorial Tuesday : AS3 Bad Word Filter

Ethan — Tue, 31 Aug 2010 05:50:54 +0000

If you ever need to filter bad words in your Flash programs, it’s a simple task. Thanks to the String class in Actionscript 3.0, its “search” function packs this solution into only a few lines of code.

There are several ways to go about this, but for this example we’ll put any bad words we want to filter into an array. Here I am just adding a few fake profanities for testing purposes, but you’ll need to add a lot of offensive words to have a complete filter list.

1
2
3
4
5

public var badWords:Array;
public function Main():void
{
badWords = ["poop", "pee", "doodoo"];
}

Whenever you need to test if a String contains any profanities, we’ll just pass it into our custom filterWord function. The function checks each bad word in our list to see if it is within our tested String. If we don’t find it, the search function returns -1. If a bad word is found, the search function returns the index of where it was found. *NOTE* We’re converting the String to lowercase before testing it, just to make sure the profanity filter doesn’t have to deal with any combination of capital letters.

1
2
3
4
5
6
7
8
9
10
11
12
13

public function filterWord(word:String):Boolean
{
word = word.toLowerCase();
var i:int;
for (i = 0; i < badWords.length; i++)
{
if (word.search(badWords[i]) != -1)
{
return true; //we found profanity!
}
}
return false; //these aren't the droids we're looking for, move along
}

I wrote a quick program that demonstrates this bad word filter, and I’ll post the code and swf below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

package
{
import flash.display.Sprite;
import flash.events.*;
import flash.text.*;

[SWF(width = "300", height = "300", backgroundColor = "#000000")]
public class Main extends Sprite
{
public var badWords:Array;
public var tf:TextField;
public var filterText:TextField;
public var format:TextFormat;

public function Main():void
{
badWords = ["poop", "pee", "doodoo"];

var format:TextFormat = new TextFormat("arial", 14, 0x000000);
format.align = "center";
tf = new TextField();
tf.defaultTextFormat = format;
tf.background = true;
tf.type = TextFieldType.INPUT;
tf.width = 300;
tf.height = 20;
tf.y = (stage.stageHeight / 2) - (tf.height / 2);
tf.text = "Click Here and Type Something";
addChild(tf);

format.color = 0xffffff;
filterText = new TextField();
filterText.defaultTextFormat = format;
filterText.width = stage.stageWidth;
filterText.y = tf.y + tf.height;
addChild(filterText);

tf.addEventListener(MouseEvent.CLICK, handleTextClick);
addEventListener(Event.ENTER_FRAME, updateFilter);
}
public function filterWord(word:String):Boolean
{
word = word.toLowerCase();
var i:int;
for (i = 0; i < badWords.length; i++)
{
if (word.search(badWords[i]) != -1)
{
return true;
}
}
return false;
}
private function updateFilter(e:Event):void
{
if (filterWord(tf.text))
{
filterText.text = "BAD WORD!";
}
else
{
filterText.text = "No naughty words detected";
}
}
private function handleTextClick(e:MouseEvent):void
{
tf.text = "";
}
}
}

Any user input containing our buzzer words(poop, pee, doodoo) will be detected immediately.

Tutorial Tuesday: UIKit With Interface Builder for User Interfaces and Orientation

Steve — Tue, 24 Aug 2010 21:49:38 +0000

After watching the WWDC 2010 Session video called Game Design and Development for the iPhone OS I was really inspired to integrate UIKit into my openGL projects. The plan is to make .xib files with Interface Builder and load them into my openGL project with the right orientation and a little functionality.

The top level view will be my EAGLView, which will contain all my subviews, which for this tutorial will be a heads-up-display(HUD) that appears when a tile is selected. My first task was getting my UIViewController setup with an associated .xib file. The file wizard will create a file in your project named whatever you-name -it and it will create a (samename).xib file that will be connected to that UIViewController.

Once the UIViewController file is made we can setup any IBOutlet objects you will need, for my example I will need three buttons: FireButton(btnFire), PlantButton(btnPlant), and WindButton(btnWind).

1
2
3
4
5
6
7
8
9
10
11
12
13

@interface UItower : UIViewController
{
IBOutlet UIButton * btnFire;
IBOutlet UIButton * btnPlant;
IBOutlet UIButton * btnWind;

}

@property (nonatomic, retain) IBOutlet UIButton * btnFire;
@property (nonatomic, retain) IBOutlet UIButton * btnPlant;
@property (nonatomic, retain) IBOutlet UIButton * btnWind;

@end

Double clicking on the .xib file will open it in Interface Builder. You will notice that the file wizard has hooked up a few things for us in Interface Builder.

The next step will be connecting the UIButtons to UIButtons that we make in Interface Builder. Drag a few UIButtons onto the View window and position them how you want. For this project I need the orintation to be Landscape mode so you can change the view window to landscape mode by clicking the rotated arrow button in the top right corner of the view window.

With your UIButtons positioned in your view and with any little customizations you need added to them; all you will need to do is connect the IBOutlet Buttons in the file owner to the UIButtons currently positioned in the view. Do this by clicking and dragging from the little circle beside the button in the connection window and hooking it to the button it corresponds too. Now save your .xib file and your done with half of the work.

Now that we have a .xib file all setup with good data we need to load it into the game and use it. For my case I am going to load my instance of the UIViewController I named “UItower” into my class called “TowerButtonSelected” and I will be initialing this “UItower” in my “initWithView” method. The interface will look like so:

1
2
3
4
5
6
7
8
9
10

#import

@class EAGLView;
@class UItower;

@interface TowerButtonSelected : ButtonTypeSelected {
UItower * contextMenu;
}
-initWithView:(EAGLView*)glView;
@end

The “initWithView” will be defined as:

1
2
3
4
5
6
7
8
9
10

-initWithView:(EAGLView*)glView
{
if([self init])
{
contextMenu = [[UItower alloc] initWithNibName:@"UItower"
bundle:[NSBundle mainBundle]];
[glView addSubview:contextMenu.view];
}
return self;
}

I am using “initWithNibName” passing the .xib file name as my first param and the main Bundle as my second. The second param should be whichever Bundle you have your .xib file in. Then I just add the contextMenu’s view into the subview of EAGLView which I passed in from my MainGame class.

Unfortunately the .xib file doesn’t tell the UIViewController that my Device is in Landscape mode so my interface is rotated in a bad way. To solve this you can overwrite “shouldAutorotateToInterfaceOrientation ” but that is an uncomfortable solution because the Interface is still loaded wrong and only after a message has been sent to the UIViewController will it orientate itself. The best solution I have found is to overwrite a UIViewController and just rotate the view in that class’s “viewDidLoad” then just derive off that UIViewController for the views that you want loaded in Landscape mode. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13

#import
@interface LandscapeUIViewController : UIViewController {

}
@end

@implementation LandscapeUIViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.center = CGPointMake(160, 240);
self.view.transform = CGAffineTransformMakeRotation(degreesToRadian(90));
}
@end

Note that you will need to center the view and also rotate but that is mostly because we are dealing with a flipped X and Y direction because of the Portrait mode nonsense. So now we just derive UItower off of LandscapeUIViewController and your view will load properly in LandscapeRight mode.

1	@interface UItower : LandscapeUIViewController

Now for your application to orinate properly based on the Device’s orientation you just have to move the EAGLView based on the UIDeviceOrientaion. For that I simple added a few lines in the delegate. Make sure to call

1	[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];

Then add an observer for the “UIDeviceOrientationDidChangeNotification” like so:

1
2
3
4

[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(didRotate:)
name:UIDeviceOrientationDidChangeNotification
object:nil];

For my specific project I wanted only Landscape mode available so my “didRotate” function looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

- (void)didRotate:(NSNotification *)notification
{
UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];

if(orientation == UIDeviceOrientationLandscapeLeft)
{
glView.transform = CGAffineTransformMakeRotation(degreesToRadian(0));
}
else if(orientation == UIDeviceOrientationLandscapeRight)
{
glView.transform = CGAffineTransformMakeRotation(degreesToRadian(180));
}
}

You can add animations instead of just changing the transforms to make a nice transition from one orientation to the next if you like.

Now our app will orientate for LandscapeLeft and LandscapeRight and the UIViewController we loaded in will be loaded with the LandscapeRight orientation that we wanted.

Kicking off Tutorial Tuesday

Ethan — Tue, 24 Aug 2010 06:56:53 +0000

We decided to start posting some useful Flash/iPhone tutorials on tuesdays, so I’m starting with a pretty simple demonstration of some of the neat easy-to-use filters in Actionscript 3.0 : GlowFilter, BlurFilter, and ColorMatrixFilter. They all have their uses, and they can help you make some neat effects without needing an artist in your pocket.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

package
{
import flash.display.*;
import flash.events.*;
import flash.filters.*;

[SWF(width = "300", height = "300", backgroundColor = "#000000")]
public class Main extends Sprite
{
public var box:Sprite;
public var blur:Number = 1;

public function Main():void
{
var boxData:BitmapData = new BitmapData(40, 40, false, 0xffffff);
var boxBitmap:Bitmap = new Bitmap(boxData);

box = new Sprite();
box.addChild(boxBitmap);

box.x = (stage.stageWidth / 2) - (box.width / 2);
box.y = (stage.stageHeight / 2) - (box.height / 2);

box.addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
box.addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
box.addEventListener(MouseEvent.CLICK, handleMouseClick);
}
private function handleMouseOver(e:MouseEvent):void
{
box.filters = [new GlowFilter(0xffffff, 1, 16, 16, 2, 5, false, false)];
}
private function handleMouseOut(e:MouseEvent):void
{
var matrix:Array = new Array();
matrix = matrix.concat([Math.random(), 0, 0, 0, 0]);
matrix = matrix.concat([0, Math.random(), 0, 0, 0]);
matrix = matrix.concat([0, 0, Math.random(), 0, 0]);
matrix = matrix.concat([0, 0, 0, 1, 0]);
box.filters = [new ColorMatrixFilter(matrix)];

blur = 0;
}
private function handleMouseClick(e:MouseEvent):void
{
blur +=2;
box.filters = [new BlurFilter(blur, blur, 5)];
}
}
}

Lines 3-5: import our libraries. The filters libraries are required to use these effects.
Lines 10-11: We’re declaring a few variables here. We’re going to apply our filters to the “box” sprite, and the blur number will help us keep track of how blurry to make our BlurFilter.
Lines 15-22: Here we’re just setting up our box sprite. We’re drawing a 40×40 white bitmap and adding it to the box sprite. Then we’re adding the sprite to our stage.
Lines 24-26: Adding mouse event listeners to the sprite. We’ll want to apply different filters on hovering over the box, hovering out of the box, and clicking the box.

On to the actual filter effects!

Line 30: This is the GlowFilter- just a 1 liner. There are several settings that can be passed in here:
color : color of the glow
alpha : transparency of the glow
blurX and blurY : how far out the glow should extend
strength : the intensity of the glow
quality : How good the glow looks — this parameter greatly effects the performance of the filter, but the default quality of 1 gives a really crappy glow effect. Unfortunately, tons of cranked up quality GlowFilters will bog things down.
inner : true or false, should the glow be on the inside or outside of the object?
knockout : true or false, the knockout effect punches out the object of the glowfilter, sort of like an eclipse.

Lines 34-39: The ColorMatrixFilter looks pretty intimidating, but using the basics of it is pretty simple. It takes in only a matrix i.e. array. The 3 random values you see there represent the red, blue, and green values, while the 1 is the alpha. so if you want to make something look more blue, you just pass in low values for the red/green and a high value for the blue.

Lines 45-46: the BlurFilter. All we’re doing here is adding a blur when the box is clicked. Each time the box is clicked we’re increasing the blurX and blurY and reapplying the filter. The quality setting is similar to the quality setting in the GlowFilter. It will definitely slow down your program if you use too many filters with high quality settings!

And this is the finished product. Hovering over the box makes it glow, clicking on the box makes it blurry, and hovering out of the box gives it a random color.

In Retrospect: A Psychosis Tale

Steve — Thu, 25 Mar 2010 17:20:40 +0000

For about a year right after I graduated from Full Sail, a friend and I moved to Seattle and started an iPhone studio named “Psychosis Studio”. During my time at Psychosis Studio I was privy to all the data that surrounded the sales and success of all the apps that were released. So I got to see first hand what just a little bit of “press” and marketing can do for a small struggling iPhone developer.

OUR STRATEGY

The general idea at Psychosis when it came to marketing was: “tell our friends”, “tell Touch Arcade” and “pray we get featured”. That was the extent that marketing was a priority. In fact we did get on a featured list at one point under the “Hot New Games” but we struggled to even get above last place on that list for our game Parking Panic. We used facebook and a little of twitter but being code monkeys our social skills were lacking to say the least, which is a bad thing for social media.

A GAME WITHOUT MARKETING

Our first game at Psychosis was a simple little puzzle game with a hundred levels and sliding tiles called “Turtle Soup”. In general Turtle Soup was a failure we barely sold one hundred copies our first day and over all the game was seen as big expenditure of time without a good pay out. The only good thing that did come from Turtle Soup was we had learned a lot about what doesn’t work. With Turtle Soup the idea was to release the game, pray it got featured, and then hope that would carry us to the top (so a lot of wishful thinking). With no exposure other than being on the “release date” we had no chance of selling enough to place anywhere in the top paid of our category.

First week sales: $126
Average first month daily sales: $10

A GAME WITH A LITTLE MARKETING

Shortly after Turtle Soup we started development of a game we released called “Tunnel Vision”. With this game we employed our marketing strategy and the results were surprising compared to Turtle Soup. I would deem Tunnel Vision a success as far as what we could expect from the amount of actual marketing we did do. The game sold well over three hundred copies the first day and continued its good sales numbers up until the end of the app’s lifetime. For about four months after the release we maintained sales of about two to three hundred per week. Valuing it based on time spent on the game it was very profitable with one programmer and one artist the game was developed tested and released in about six weeks.

First week sales: $1965
Average first month daily sales: $133

CONCLUSION

In the end the general flaw with what we were doing with the games was not doing enough of what works. We really needed to “push” our games more because that is really what generates sales. If we were to do the whole thing again I think bringing in someone that is skilled at getting buzz and talking about projects would have been a good thing to do. Getting a hybrid team member (something/marketer) would have been a huge boon to the company and the sales of the games. What this has taught me is that I personally need to work harder at being that hybrid person, because even a little shove can make a game sell ten times better.

China, oh China

Ethan — Sun, 28 Feb 2010 04:36:02 +0000

The Great Poop Shoot has been around for a little while now, and it’s been played over 40,000 times! That’s not a very high amount of plays by any means, but I thought it was quite interesting how many of those plays were from China.

Is China the potty humor capital of the world!? I highly doubt it, but it seems The Great Poop Shoot found its way to a popular Chinese site “7k7k.com” and hopefully gave all of those Chinese people a chuckle.

This Ain’t No Fool

Ethan — Mon, 22 Feb 2010 16:07:16 +0000

I’ve been a fan of the Metal Slug pixel art for some time now, but those games are old old news. If you really want to check it out and get spammed with ads, someone over at MetalSlugSprites.net has ripped a ton of images and animations from the game(more than likely illegally). It’s worth a look for study purposes, but please don’t use them for your games.

Metal Slug, I’ma let you finish, but… the other day I stumbled on a guy named Yuriy Gusev, whose art left me completely stunned. He goes by the alias “Fool” on some websites, including Pixel Joint. He runs his own website, Foolstown, which is a delightful experience in itself.

I originally came across a few of his characters and immediately had an interest in his style. But his scenes and animations are what really take the cake and qualify Yuriy as one of my favorite pixel artists of all time. How can this not make you weak in the knees?

The Joys of Distribution

Ethan — Wed, 10 Feb 2010 15:24:19 +0000

Yesterday I spent a few hours working on distributing my game to various portals on the interwebs. This is a surprisingly daunting task, especially if you’re doing it all manually. Each portal has a different submission process, but most of them want you to register. Expect to fill out a decent of information about yourself and your game before moving on to the next flash arcade.

There are over 100 sites to submit games here. Unfortunately they are not all automatically accepted. Yesterday I put my game up on a handful of sites, but it is waiting for approval from several other portals.

One of the key features that Mochi Media offers is their distribution system. While not recommended as an only tool for spreading your work, it really helps to get your game around without even lifting a finger. The Great Poop Shoot is still waiting on Mochi to approve it into the distribution system, but after that it should make its way to many more sites.

I’ll post a follow-up update sometime regarding how much exposure the game received. Until next time … !

New Game: The Great Poop Shoot

Ethan — Mon, 11 Jan 2010 02:16:20 +0000

The new and crude game I mentioned in a previous post is now complete. It’s called The Great Poop Shoot. It was a very quick and dirty project, and most of it was done in a few hours over the Thanksgiving holidays. Read more about it and play it under the cut…

There’s not much depth too The Great Poop Shot. You’re mostly just shooting poos as fast as you can before they get away. Obviously it won’t be an addicting game, but I’m quite curious how the subject matter alone will impact its number of plays. I’ll be sure to report on that later.

Soon I’ll be going through the process of distributing The Great Poop Shoot. First, I’ll enable the free distribution option on MochiMedia’s website. This helps to put the game on some sites without much effort, but it’s by far not the only thing I’ll want to do.

After that, I’ll be going through a list of sites that take game submissions. This is a pretty boring procedure, but it’s really necessary if I want as many game plays as I can get. One of the best sites for MochiAds games is Mindjolt. They have a pretty large player base, and new games get front-paged for several days. The only problem is that it takes 2-3 months for them to post your game if they approve it. I don’t think The Great Poop Shoot is really Mindjolt quality, so I won’t be submitting this one.

Should I try to find a sponsor? This is another situation where I would want a much more in-depth and polished game. Sponsors have a lot of games to choose from, and the good ones aren’t going to want their brand associated with games made in a day.

I’ll be writing a follow-up post on everything I did to distribute the game. Enjoy popping some poos!

Peek-a-Boo Wizard

Steve — Thu, 07 Jan 2010 19:00:35 +0000

Look What I made! This is a simple task Ethan had me do. We are planning on using it for a splash screen on our flash and iphone games.

The animation of the expanding black circle is a little hacked and on flash and the iphone we would be better served to just use a mask to do that same effect. How i created that effect in the .gif was I made twenty four layers in Photoshop and scaled the circle 4% each layer. I probably could have done something with tween frames and all the fancy things that come with Photoshop, but really all i needed to make was the wizard background so the animation suffered.

We made the image to be 300 by 300 pixels so we could fit it in an iphone in both landscape and portrait. The image itself was me reusing the wizard from the header of this site and the ivy covered wall from our navigation background. Little art projects can be fun and they can be a nice relaxing break from staring at code all day.