Latest Entries »

Learning how to use Xcode  was particularly challenging, especially because it can only run on a Mac OS.  Since I am not yet working on a Mac of my own I had to share someone else’s through the learning process.  The multiple panels seem to be a bit confusing if you’re not used to that environment. However, there are lots of resources online that will help you adjust and learn some of the other components necessary for developing for Mac and iOS.  A great and resource I found was at Cocoa Dev Central.  Here you can find concise tutorials for Cocoa, Objective-C and even basic C for Cocoa.  They also have tutorials for specific coding styles.  This site is great!  Another Gem is a PDF that I found at CocoaLab.  It focuses on using Xcode to program for Mac but the skills can easily be transfered to iOS, just bring in your mobile efficiency considerations.  A common book that I have seen come up a lot on blogs, and even on the desks of some of my colleagues is Apress’s Beginning iPhone Development: Exploring the iPhone SDK.  It averages $26.30 CDN on Amazon.ca.

I also had the pleasure of attending a presentation by Matt Rixx the creator of the Trainyard app for iPhone and he explained that his transfer from AS3 to Objective-C and Cocoa was made much easier by using Cocos2D for iPhone

The learning project that I worked on with a few other students, just to get an understanding of the interface, was to make a datepicker.
In our .h file, we declare myLabel and myPicker so that the interface builder knows to listen for them. We create the UILabel and UIDatePicker and give them their instance names declared earlier.  We also tell the datePicker to listen for the actions of the setDate function.
Here is what our code in the .h file looks like:

//
//  DateViewController.h
//  Date
//
//  Created by Florence Kwok on 11-03-15.
//  Copyright 2011 __MyCompanyName__. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface DateViewController : UIViewController {
	IBOutlet UILabel *myLabel;
	IBOutlet UIDatePicker *myPicker;
}
@property (nonatomic, retain) IBOutlet UILabel *myLabel;
@property (nonatomic, retain) IBOutlet UIDatePicker *myPicker;
- (IBAction)setDate: (id)sender;
@end

In our .m file, we synthesize myLabel to myPicker.  In the setDate function we assign myPicker.date to myDate2, then make the date (myDate2.description) appear in the myLabel text field.  When a date is selected from the datePicker it is assigned to myDate2 and subsequently inserted into myLabel and can be viewed and used for submission later.
Here is the code for our .m file:

//  DateViewController.m
//  Date
//
//  Created by Florence Kwok on 11-03-15.
//  Copyright 2011 __MyCompanyName__. All rights reserved.
//

#import "DateViewController.h"

@implementation DateViewController
@synthesize myLabel, myPicker;

/*
// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}
*/
/*
// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {
}
*/
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];

	NSLog(@"Hi from IMM");
}
- (IBAction)setDate: (id)sender{

	//myLabel.text= myDate;

	NSDate *myDate2 = myPicker.date;

	myLabel.text= myDate2.description;

	NSString *myDate = myDate2.description;
	NSLog(@"Date Picked = %@", myDate);
}
/*
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/
- (void)didReceiveMemoryWarning {
	// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

	// Release any cached data, images, etc that aren't in use.
}
- (void)viewDidUnload {
	// Release any retained subviews of the main view.
	// e.g. self.myOutlet = nil;
}
- (void)dealloc {
    [super dealloc];
}
@end

As you can see, the syntax has a similar feel to many of the OOP Ecma scripting languages we may be used to, and it is definitely helpful is you understand a script like  ActionScript 3, but it can sometime take up to 10x the amount of lines to make the same thing in Objective-C that you might be used to in AS3.  However, it is much more efficient with memory management and has better garbage collection.

I can now put my apps on Android devices! I have successfully added Gnome Escape to an Android device using Adobe AIR version 2.5.  The process was amazingly simpler than the iPhone process and I didn’t have to use a special account for developing test apps.  I just had to get the updated AIR, learn a few lines of code in Command Prompt, and test on an emulator. Also, if you want to make apps for the Android Marketplace then you have to pay a fee to become a developer but it’s only $25 and a onetime fee.  If you want to have paid apps on the Marketplace then you have to pay $30 for a Google Checkout Account. Overall though, this is much cheaper and apparently MUCH less of a headache to do compared to the iPhone App Store process ($100/yr to be an Apple Developer).  I found a very informative article on the comparison between the Windows, Apple and Android Marketplace processes: http://www.codeproject.com/KB/mobile/wm_iphone_android_market.aspx#GettingStarted-Android.  It is definitely worth the read if you are getting into mobile development.  Here is another great article that compares iPhone and Android development: http://www.lessonsoffailure.com/software/android-app-store-cure-worse-disease/.

One of the drawbacks that I’ve found about developing for Android is that there are many different types of devices with different depths and resolutions and to have an app that is versatile amount all thees devices you have to accommodate these differences.  Now I haven’t yet come close to doing this type of development for Android apps, but I can see just by the setup process and all of the options and operating systems I can choose from that there are many different environments that I will have to keep in mind when I enter this realm on a regular basis.  There is a section on developer.android.com that discusses how to set up your app to work across multiple screens with only one compiled apk file.  It also explains how to adapt your file if you have already compiled it before planning for diverse screens.  This is very useful to know, for when I get to that stage in the development of my game.

When I was installing the emulator onto my computer, I have to admit, it was a bit frustrating, but after going through that process, it made putting the apps on the actual device much easier.  Using the plugin for Flash that lets you publish directly to the device was very useful.  It can be downloaded directly from:  http://download.macromedia.com/pub/labs/flashpro_extensionforair/flashpro_extensionforair_p2_112210.zxp.  I also found it relatively easy to use the Command Prompt (Terminal on Mac) to install applications to the device as well as the emulator.  If I already created my apk file using Flash then I’d just use the Command Prompt to install it/re-install it.  Why go through the whole compiling process again when I can just hit the up arrow once or twice and hit enter?

Overall, developing for Android seemed to be a much more enjoyable process but as I do not yet have an Android of my own, and since the Apple App Store has all of the attention at the moment, I will focus my time there, however I will be preparing for a the Android Market at the same time so that I can land running when I jump into that market.

Sorry, no pictures of my app running on the Android tablet, but I assure you, it was there!



Setting myself up with the ability to put my flash games/apps onto my iPhone was quite the process. I am currently a PC user which means that I have to go the difficult route to be able to develop for apple devices, not even mentioning the fact that I can’t develop using objective-C while on a PC… So, at least for now, it’s very useful that Adobe Labs  has come out with the Adobe Flash Packager for iPhone, which converts the AS3 code into objective-C.  For a few months back in 2010 Flash development for the iPhone was stunted by Apple’s ban apps created by third party APIs, right when the iPhone packager was being developed at a rapid pace.  Finally when the ban was removed to only unauthorized APIs, Adobe continued development on the iPhone packager; however, within those few months many developers either gave up on Apple or turned to Objective-C, no longer needing Adobe’s API, thus development slowed significantly from what it was before.  3 brief articles that chronicle this process can be found on Republic of Code.  So now I can code in Flash for my iPhone but this process isn’t perfect and there seem to be a few bugs and limitations when trying to access certain controls of the device, but it works and is a great way to test my apps.

I was originally trying to put my Gnome Escape game to my iPhone but for some reason it would not run once it was on my device.  I figured this was just a result of the Box2D physics engine being too much for the iPhone’s little wee processing and RAM capabilities (even for the amazing, heralded iPhone 4) so I decided to make a test app to verify that I could get an app working on my iPhone.

My Ball Music App

My Ball Music App

I made a simple app that still utilizes the tilt accelerometer and has a ball floating around on the screen. It worked on my iPhone, which was good, but it still didn’t help me figure out why Gnome Escape wasn’t working. I decided to make this app a little more complicated to see if my phone could handle it.  I imported an audio file into the library and called it as a class to play while the ball was moved around by tilting.  That worked fine.  I then created a mini in-app MP3 player that displayed the ID3 information of the song that it was currently playing.  I find it wonderful that, through AS3, I can easily pull the mp3′s ID3 tag information and display it in text fields! A good source for the code can be found on a thorough tutorial I found on kirupa.com. The app would start with just the ball on screen, along with the app name up top, and a button on the bottom left titled MP3 Player.  When the user clicks MP3 Player it expands and control buttons appear at the top and right below are the ID3 text fields.  While the MP3 Player is open the ball can still be tilted in the top half of the screen but it cannot pass the top boundary of the MP3 Player.  Once the MP3 Player is minimized, the ball has full access to the entire screen space.

This all worked well on the pc, but when I made the MP3 player I loaded the file from an external folder; it was no longer located in the SWF’s library.  When I uploaded this new version to my phone there was no music loaded at all.  It took me a few tries to realize that I needed to indicate the folder to also include when the project was compiled.  This can be done in the little file box in the first tab of the iPhone Publish Settings dialog Box.  After Iincluded the folder, the music loaded perfectly on the phone.  I could start it and stop it and will and the ID3 info would show or hide appropriately.  This was the answer for my Gnome Escape game!

 

My Gnome Escape game on iPhone

My Gnome Escape game on iPhone

Gnome Escape Level 1

Gnome Escape Level 1

Trying once again to get Gnome Escape working, I included the levels folder which contains all of the xml files that hold the coordinates of each item on the screen minus the background.  Now that it has data to load, everything displays and I can play my game. Finally! There are still a few bugs, however, such as glitches when loading levels which don’t appear on the PC, but most importantly there are lots of memory leaks.  If I leave the app running and try to do something else, like play music, or talk on the phone, the whole phone gets really choppy and starts to stutter until I completely close Gnome Escape.  I know that most of these leaks can be fixed by going through my coding and using proper garbage collection but, from what I’ve been told, some of the memory issues are due to the iPhone packager’s limited capabilities in converting to objective-C and what it is able to utilize on the iPhone. However, something I have learned to anticipate is how the iPhone (or any mobile device) will manage the app when it receives an interruption, for example a phone call or when the user hits the sleep button. The iPhone does not know how to pause your game by itself so the code needs to be prepared for this.  I found a great sample of the code at Republic of Code Hopefully more development will be put into the iPhone packager now that the iPhone can once again support apps created in Adobe Flash.

Hand Share - Square Object

Two hands joining a severed square

I have just completed my first multiuser game in Flash AS3.  I used the Robin class provided by Dan Zen’s Flash Feathers collection which utilizes php ports and AS3 to connect rough a server.  The Robin class was originally created to work on a Linux server but it can work on local machines by commenting out a line of code in the mysetup.php file that checks if the server connection had been made.  The ability to use Robin allows us to set up multiuser programs in AS3 that use PHP instead of being reliant upon JAVA servers r the Flash Media Server, which can require a lot of programming or cost a lot of money, respectively.  I found another type of multiuserplatform for AS3 that seems similar to Robin called Mesmotronic Multiuser Server; however, Mesmotronic only allows up to 10 connections with the free version and an upgrade to unlimited costs £399.  Robin is free to use and despite it being free you’re not limited to the amount connections you have, it’s completely based on your hardware.

Hand Share - Heart Object

Joining the severed heart, the last of the 3 objects

As usual, I decided to create an interactive game.  In this game, two users have to cooperate to combine a series of three shapes in order to win.  The shapes must be combined perfectly for it to register; just mashing them together won’t trigger the hitTest.  If one user moves too low or too high then the shape won’t complete.  The score is given by shape completion and is indicated by the shape tweening to the top, where it stays, and has its shape number displayed on it.  After all three shapes appear up top, the text “Great Team Work!” appears across the screen and applause is played.

The difficulties I ran into were mostly to do with making sure both hands had the same shape at the same time and that the code wasn’t still expecting hitTests for previous shapes.  I had to create quite a few booleans and use each one several times in order to prevent the code from getting confused (although they caused a lot of confusion on my part while I was implementing them).  However, since everything was now dependent on my booleans, it was easy to make the game reset after the users had finished.  The only extra things I had to do were to remove the event listener, then create a new function that the init function called that re-added the event listener.  It was the easiestreset feature I’ve ever had to make.

This marks the start of my journey into multiplayer applications.  Since I have been very inclined to create games and game-related applications/websites it only makes sense that I’d be drawn to the multiplayer element.

Hand Share - Victory

Great team work!

Gnome Escape MenuWhen I started utilizing the tilt technology for mobile devices in Flash AS3 I was completely enthused.  The Accelerometer class was not as hard to use as I had originally dreaded.  It was using the Accelerometer and coupling it with my game idea that was the challenging part.  I created a game called Gnome Escape where a gnome has to find his way through a hedge maze back to his home in a giant mushroom while passing obstacles and collecting items for points.

I began by drawing my gnomes in Adobe Illustrator. I knew that I wanted the gnome to face in the direction that he was walking (only four compass directions for now) so I drew four different views: front, back, left, and right.  I then drew a mock-up maze using a bush asset that I created.  This allowed me to have a visual example of my maze so that I could start planning and creating my other assets like holes, items, finishing point, etc.  I spent a lot of time on making my graphics detailed, clean and fun looking, and following a specific theme (garden/backyard).  This has always been my setback, theming my projects, so I’m glad I’ve started taking the time to focus on that.

While I was creating my assets, I was setting up the basic code so I could import them and test my hitTests at the same time.  However, I had to make sure that my accelerometer worked first. I began by using the Penguin Class, a part of the Flash Feathers collection by inventor Dan Zen.  This allowed me to control my accelerometer with an emulator which would write the acceleration into an XML file that the compiled program would read and animate accordingly.  This worked for my purposed at first but I decided that I wanted to develop this for the iPhone and sought out how to adapt my code now so I wouldn’t have to change it later.  I stumbled upon a great tutorial at the Republic of Code that set the grounds perfectly for using the Accelerometer class in Flash.  Once that was all set up I could weasily add the rest of my code to it and begin testing.  As everything came together I started working on getting the gnome to stay within the bounds of the bushes on either side of him.  I asked my professor, Dan Zen, if he had any ideas and he sent me a sample of a circular maze that he had made.  After looking through the code I thought it might be a better idea, for my square-based maze, to just put all of my bushes into an array and do hitTests against that array.  Now came the task of creating this array.  That in itself wouldn’t have been too difficult to do, just time consuming, but I knew that I wanted to create many levels in the future and I’d have to set all of the new bush and item positions each time I made a new map.  Doing his manually would  be a very inefficient use of time.

Gnome Escape Map BuilderTo make it easier to add new maps in the future I created an AIR based CMS with the help from a colleague of mine, Justin Howlett.  This CMS allows me to add each element of the map to a grid, exports the names and positions of each item into XML, then my Flash file imports those coordinates from the XML file when it is compiled.  This took a long time to get running properly because neither of us had ever attempted making a CMS of this type before but after lots of trial and error we got it working perfectly.  I now have a better understanding of how to integrate XML with AS3.

Gnome Escape Level 1Now that the map creator was finished it came time to set all of my hit tests to the newly positioned items (which can be variable from now on, instead of hard coded in). After that was done, I made sure all of my sound effects were embedded in the document, for portability, and played and stopped as they were directed.

Now the game is done and working.  It’s time to make more levels and increase difficulty as we move throughout the game.

The funny thing is that gnomes used to seriously creep me out.  But now I think they’re fun and like making graphics about their hard times in the garden. =D

So today I’ve pretty much completed my gesture assignment for my Multimedia Pioneering Class for IMM at Sheridan.  I’m pretty proud of it, I must say.

We had to utilize the webcam using Ostrich Flash Webcam/Motion Cursor (http://ostrichflash.wordpress.com/).  At first this seemed a little daunting, especially with our Spy Gadget due around the same time.  I had originally wanted to combine the two assignments into one where my spy (rather a ninja-spy) would turn invisible, satisfying the spy gadget element, then he would shoot the enemy agents on the adjacent roof using the motion cursor.  After consulting with Dan I realized that I’d have one less portfolio piece by combining the two.  Probably not that big of a deal, but to be safe, and probably yielding less headache, I decided to keep them separate and start a new idea for my gesture project.

The ideas:  After dumping the spy shooting idea I spent about two days trying to come with something new.  I had it!  I wanted to make a piano keyboard where the keys would sound when the motion cursor went over them.  I created all the assets and started planning out how the ActionScript would work.  This is where I figured out that this would also be a headache idea.  The cursor flies around kind of sporadically (it actually follows ANY motion on the screen) so it would be near impossible to play a decent sounding song.  Every time the cursor would go wild it would probably trigger a whole bunch of notes which could be jarring to the user(s). I also figured it would be quite the task to create 13 buttons and triggers (a whole major scale), and possibly other events (because I never like to stay at just simple) with the amount of time and knowledge on AS3 that I currently have.

Back to the drawing board.

My mom plays an aquarium game on Facebook that is quite entertaining, though monotonous after a while.  While watching her feed her fish last Tuesday night I decided what my final idea for this project would be: an aquarium where the user can feed a little fishy using gestures to move towards a worm.

This aquarium evolved quite a bit from what I originally had in mind.  At first I had blue translucent background and a worm on a plate would appear (through addChild) and the fishy could eat it.  It would disappear after the cursor was held over it for 2 seconds (the default in the OstrichButton.as) and the fish would increase in size using scaleX and scaleY.  It worked!  But it was boring.

I then turned the worm on a plate to a worm on a string.  Then I added two more worms on strings that would get called with a 6 second timer after the first worm was devoured.  At this point, after the fishy was held on the worm for 1 second it would disappear and the string would get pulled back up.  As he munched on a worm he would make a chewing sound (me, recorded) and then he’d gulp when the worm would disappear (also me, recorded). So the fish (Fishy) would eat the three worms.

Screen Shot of my Fishy feeding game

Fishy is about to eat the first worm.

Then what?  Well to make things exciting I wanted Fishy to be able to lose the weight he just gained from eating the worms.  I wanted him to exercise but that would seem silly. So, instead, and more biologically correct, I have Fishy poop it out.  Now to be civil and to respect Fishy’s privacy, a black screen with a comment fades over the screen and when it fades out Fishy is blushing and there is a little pile of poop on the bottom of the tank.

This is all cute and all but I didn’t want to stop there.  I wanted the poop and the blush to disappear after 10 seconds and Fishy could start eating again.  An endless game of feeding Fishy till he poops then starting again! All other internet games, watch out!  However, this seemed to be a bigger task than I had bargained for.  I couldn’t get the button objects to go away after fishy had eating a worm.  Once I figured that out, because that was crucial to the first stage – before the game repeats, I then tried to get them to come back for the repeat stage.  I couldn’t make them disappear with a removeChild because I didn’t addChild them in.  They were already initiated by the graphics code up top.  I couldn’t delete the objects because they were required by the imported Class.  Using graphics.clear() didn’t work because I couldn’t get them to reappear.  It was a nightmare figuring all this out.   I researched Flash code to help me out and it all got me nowhere (well I learned a fair bit in the process, but it didn’t help my current situation) . I then remembered Dan talking about moving an object far off stage when it wasn’t needed.  This was it!  I could move the buttons of stage and bring them back when I needed them again.  This took quite a bit of mathing-around but I figured it out and they work beautifully!
(Note: There might be ways of making the above methods work but if this is true I was unable to figure them out at the time).

Initializing Screen: Instruction on how to Feed Fishy

Initializing Screen: Instruction on how to Feed Fishy

This morning I set up an initializing screen with instructions on how to feed Fishy.  The user has to click on “Okay!” to start the game which makes sure the focus is on the game when this is inserted into a browser window; it also makes sure that they know how to feed Fishy so they don’t get too frustrated by not knowing that he has to finish each worm to move on.

Overall, I’ve learned quite a bit, especially about Display.graphics and adding and removing children. I understand how to initialize the camera and motion cursor using the supplied Class and also how to manipulate it, a little bit, to my likings.

I’m excited to make more games in the future that use this technology and make them increasingly more complex as well!

You can see the final product at www.antoniocarito.ca/imm/mp/gesture.  Enjoy!

Follow

Get every new post delivered to your Inbox.