growyourownhuman.com

Following on from my last post on how I made the facebook app for Grow Your Own Human I though I’d go over it again as I’ve managed to get it working properly now.

First things first, a couple of websites I couldn’t have done my app without.

• Devtacular – Style an application like Facebook
• Digital Web – Building Facebook Applications
• 20bits – 5 Facebook Application Gotchas
• Gath Adams – Write a Facebook app in 10 minutes

Once you’ve had a look at these awesome links your’ll have a much clearer insight on the whole process, when I built my app I was constantly encountering errors and these were a great help to me.

To get you started I’ve created a bare-bones facebook template, which will be downloadable at
http://www.gimpneek.com/downloads/facebookapp.zip
The reason I’m putting it up on my main website is because after I’m done with my MMA project I’ll be writing about facebook on that site, so it’s more convenient to have it over there.
Once you’ve set up your app with the template and added all your details, go to your app, and you’ll be asked to either log in or allow it to use your details, click allow and you’ll see some text at the top of the page, this shows 2 things, my facebook name (add me if you want) and your own name. When you edit the index.php file, you’ll see the way I managed to get your name to show up. This is just the basics of the facebook app, but the Facebook Developers Wiki has loads of info to help you make a great app.

So much for an indepth guide, but I’m hoping the template will help you.

This post is the last part of this series. In this post I’ll be going over the techniques I used to take the Flash version of Grow Your Own Human over to the Facebook Platform. I’ll also talk about how I got round the problems that the Facebook Platform imposed on the porting process and how I decided to get around them.

Step 1
Working out the functions your existing app provides
Before I even started to apply for my API key I sat down and analysed what functions Grow Your Own Human provides. I narrowed it down to:

• Uses a hit counter to decide which page it sends the user to
• In the Seed planting stage the user chooses where to plant the seed (x and y coords) and the date it’s planted is also logged
• In the add stage the user chooses which features the character has and submits the choices
• In the finished stage, the user is presented with an image of how the character came out and then has a chance to name it
• The user can add their e-mail to the e-mail list

This means I would have to work out how to convert these functions from actionscript to PHP and Javascript.

Step 2
Setting up Facebook specific functions
One of the reasons I decided to take Grow Your Own Human onto the Facebook Platform was because Facebook assigns every user an unique Identification number. If this number is stored with the data the user submits this means that Grow Your Own Human could display a single person’s choices. Using a function to display the logged in user’s friend’s submissions would be an ideal way to help spread the Facebook App and get more users submitting data.
To do this I needed to get hold of the Facebook Library files and then get the logged in user. I did this with this code:

include_once'facebook.php';
$api_key = 'API_KEY';
$secret = 'SHHH_ITS_A_SECRET';
$facebook = new Facebook($api_key, $secret);
$meh = $facebook->api_client->users_getLoggedInUser();
Facebook User ID:

This uses the facebook.php files (when provided with a proper api key and secret) to get the logged in users uid and then adds it to a text box so it can be sent to the form that it’s in

Step 3
Coding the app
So now I’ve worked out how to do the hard stuff, lets crack on with the main part of the coding. Most of the functions I set out earlier are basic data retrieving and form based stuff. The function that shows the different pages is actually an if statement that depending on how many hits there is shows a different block of content.

Step 4
Trouble Shooting – or – NUURRGHHH IT WON’T WORK!!
I encountered many problems when coding Grow Your Own Human on Facebook. These ranged from simple little things like not being able to get CSS working because I missed out the underscore between the app number and the id name, to not being able to get it to work for anyone else but me (and at time of writing I still can’t) but to try and help you out here’s a few tips:

• When using CSS it’s far easier to write the CSS in the same file instead of linking to a style sheet.
• Always remember to add the #app12318209381_ before everything
• the fb: js-string method is a great way to get content to change when a button is pressed
• Always check your code twice before hitting the internet for help, it’ll save you a lot more time
• Never give up

I’m hoping after I’ve written this I can get it working, and you can add it to your Facebook account. There’s an issue with it not giving out session ID’s.

How I made Grow Your Own Human pt3 Teh FaceBook App from Colin Wren on Vimeo.

The Code
My favourite part of making websites is the code, there’s nothing I like more than trying something new with code and I think just about 99% of what I did with Grow Your Own Human was new to me. I’ve never had to work with XML in PHP (though I’ve used it in Python) and only went over it in Flash a little bit when I was making PaedoBot so there were many many teething problems but once I had bitch-slapped it into submission all was good.

There are 2 parts to the Grow Your Own Human website, the Flash interface (the user sees this) and the PHP backend(the user will never see this). The Flash interface is coded in ActionScript 2 (because I can’t be bothered to learn AS3 just yet), And the PHP scripts are in PHP5.
The Flash side of things
The Flash part of the site consists of a swf with 4 frames (intro, new human, add to existing human, finish existing human). When the user hits the intro page they see a silhouette of a human filling up, what this is actually doing is giving the system enough time to work out where to send the user (based on the amount of hits the site has recieved). When the user clicks on the button they are then taken to the appropriate frame.
The New Frame
The user is presented with a green glowing hand which follows the mouse and the OS’s cursor is hidden. The code for this looks like this.


_root.hand_clip._x = _root._xmouse;
_root.hand_clip._y = _root._ymouse;
Mouse.hide();


As they move the mouse around the page the hand becomes a hand with a trowel when the mouse hits a spot the seed that grows the human can be planted in. This is because there’s an invisible button covering these spots that has this code attached to it


on (rollOver) {
_root.hand_clip.gotoAndStop(2);
}

on (release){
_root.hand_clip._x = _root.new_upload.holex;
_root.hand_clip._y = _root.new_upload.holey;
}


This code says if the mouse is outside the button then show the ‘can’t plant’ image but if it’s on the button then show the ‘can plant’ image and if the user presses the mouse button then set the variables to be uploaded to the current mouse x and y coords.
A pop-up box is then triggered at the end of an animation and the user is then asked if they want to submit their choice or try again, if they choose to submit their choice then their variables are sent to a PHP file using LoadVars

The Add frame
When the user enters this page a human swings into view from a vine, they can then choose how it looks (this just works out which frame the characters on and the adds or takes away one from it if possible) and then the datas uploaded like in my experiments

The finish Frame
When the user hits this frame they see how the current human looks and gets to name it (sent by LoadVars again) to work out which is the dominant choice I load the options for each feature into an array like this

skinarray = [];
hairarray = [];
eyearray = [];
moutharray = [];
toparray = [];
bottomarray = [];

}
//the address of the xml
hits_xml.load("character.xml");


I then use a for loop to work out which option has the most votes liek this

mbm = eyearray[0]
for (a=0; a if (eyearray[i]>mbm) {
_root.human_info_skin = a+1;
}
}

I use one of these for every array and send the result to a dynamic text box so the movie that displays the character can set the each feature to these results.

The PHP side of things
As each frame sends data to a separate PHP I'll just go over the basics of what each file does.
Each file loads the character.xml document and sets variables for the data sent to it using the $_POST['THINGYYY'] function. It will then read the nodes it's going to be editing and then modifies the nodeValue and then saves the document.
Pretty simple stuff but it's damn powerful.

As ever I've made a short screencast going over the code of the site

How I made Grow Your Own Human pt2 CODE! from Colin Wren on Vimeo.

It’s been a while since I last updated this blog. This is due to me spending alot of time developing the website. It’s almost done now, I’ve just got to refine the usability text so that people can actually understand what to do

To help people understand the techniques I’ve used I’m going to open the hood on the website. I’ll be doing this in 3 parts. The first part (this part) will take a look at the Flash site and how I created it. This will cover the art I made for the site, The second part will deal with the scripts that make the website function, and the last part will go over how I took the flash site and remade it to work on facebook.

On with the show!

The Art of Grow Your Own Human
For any website the art is really important, sites can look completely different with different art styles. In my presentation I set out 3 different art styles I wanted to try (illustrated, 8-bit and real). I chose neither of them in the end. I initially set out to make the website using an illustrated style, using a design I drew up within the first week. All the characters were to have cuboid heads and normal bodies but as I got into Illustrator I realised that I would never make all the art in the short time period I had set myself in my presentation.
With time limits in mind I decided to try a different style, 8-bit but with a different character anatomy, taking on a more plant like structure. This design didn’t work as well as I had planned due to the characters head changing size with every skin. This would have meant having 9 different hair movies clips (which in themselves had 9 options). I quickly decided to go back to my original character design but I still needed a quicker way to make all the art in the (now 2) weeks I had left.
I then decided to make the humans more realistic. I found an image of a model standing facing the camera and traced her outline in Illustrator (I then edited the shape a bit more to make it gender-less). I then added the square head and imported this into Flash where I used the outline as a mask. Using this mask I could then quickly draw the skins I wanted using a graphics tablet (yes every element of grow your own human is hand drawn). I then worked on creating the other features. It was a grueling task to complete but I managed to pull it off, though I think the quality of the features drops a little towards the end of options.
I then just had to make the plant animation, I had originally intended for the plant to be like a tree and to erupt from the soil growing bigger all the time until it spouted a pod and the human was born. I decided against this though when I thought about including the gallery part of the website (though this is now going to be replaced by a separate file which allows the user to view the human by typing in a number.) which originally was to be ontop of the trees in the background of the website, the user could fly to the top at any time to see all the grown humans. To make this seem plausible I needed to create a plant that would shoot the human up into the trees so I changed the plant to become like a deku baba plant in the Zelda games. The plant now grows to become like this though when the human is born it’s more egg like and breaks out of the plant.
Lastly I created all the little pieces of art, like the seed planting animation, the character swinging into the scene and the background images. These were rushed (apart from the hand which took quite a while as I traced a few images from google to get it perfect.)

I’ve made a short video that goes over all the art for the website which is displayed below.
object width=”400″ height=”225″>

How I made the art for Grow Your Own Human from Colin Wren on Vimeo.

is the tapping of a keyboard and me shouting at my monitor

The reason I’ve not been updating this blog is due to me working my arse off getting the growyourownhuman site made. If you want to keep up with the developments you can see it at http://www.growyourownhuman.com/fin/scene.php So far I’ve got about 3/4 of it working. I’ve decided to not start the finished character viewing part of the site until I’m confident in the condition of the rest of the site. I’ll try to explain what I’ve done and when I’m all finished making the site I’ll be posting up tutorials on all aspects.

So Far I have:

• A pre-loader which uses the amount of hits the sites got to direct the user to one of 3 pages, each page relates to the stages in the humans growth
• A ‘conception’ page which sees the user plant a seed which will then set the position of where the plant grows for the rest of the growing stage
• A ‘development’ page where people can vote on how the character looks and submit their choices, the votes are then added up over 100 hits

I still need to code the ‘birth’ page but it’s shaping up pretty well.

I have to get back to shouting at the website now, because it won’t display the birth stage

It’s easter so like every good atheist I didn’t know it was until last friday when Joe told me we had two weeks off..
I decided that this week I would just get all the art for Grow Your Own Human out of the way so that I can go back to uni and show some improvement.

I don’t want to reveal too much of the design (for obvious reasons) but I will say that I decided to change some parts of the design, I’m sticking to my rectangle headed characters but removing some of the cartoon-ness from them.
The Background for the main site actually looks pretty good, It’s a forest scene like I had talked about before, and there will be (further along in development) an option to zoom upto the top of the trees and look at the civilizations the humans have made.

For now though I’ll leave you with a little sneak peek of how the humans shape is looking.

Hopefully this doesn't reveal too much

I’ve been thinking about having a 8-bit style Grow Your Own Human site, I’m not great at Illustrator so this would be easier to achieve but at the same time, it doesn’t look as good, and definitely isn’t as cute as the look I want for the site. Anyways a small test is available for viewing at http://www.growyourownhuman.com/tests/test6/. I just really need to get friendly with Illustrator.

I’ve decided on the options the user can pick from when making a character. It’s a deviation from my existing plan but I think the new designs will (once made) fit into the forest Idea.

I want to make the characters head (which will change shape according to the design chosen) a fruit, this will help it become part of the universe.
The fruits the user can choose from are:

• Watermelon
• Apple
• Cherry
• Olive
• Strawberry
• Banana
• Blueberry
• Gooseberry
• Plum

The user can then select from what hair style they want to the human to have, they can pick from:

• Bald
• Mohawk
• Emo
• DreadLocks
• Long Hair
• Pony-Tails
• Girls Emo
• Croydon Facelift
• Afro

The user can select from the eyes after that, they can choose from:

• One Eye
• Two Eyes
• Three Eyes
• Four Eyes
• Five Eyes
• Six Eyes
• Seven Eyes
• Eight Eyes
• Nine Eyes

The user can then select from the mouth they want the human to have, they can pick from:

• Slight Smile
• Frown
• Gasp
• Shout
• Uber Happy
• Crying
• HillBilly
• Blinged Out
• Slight Frown

The user then selects the top clothes for the character, they can pick from:

• N64 Bear T-Shirt
• Flowery Dress
• Topless (no nudity though)
• Chav Tracksuit
• Bikini
• Baggy T-shirt
• Leather Coat
• Cardigan
• Blazer

The user can then choose the bottom part for human to wear, they can pick:

• Skinny Jeans
• Baggy Jeans
• Tights
• Shorts
• Bare Legs (no nudity)
• Track Suit Bottoms
• Skate shorts n knee pads
• 3/4 lengths
• Goth boots (with Jeans)

These choices should allow for some fun to be had, making weird combinations. Though thanks to the way GrowYourOwnHuman will work, it’s upto the consensus.

A quick mock up

Well it’s the first week of development and I thought I should write about the progress I am making.

This week has mainly been spent working on the visual side of things. I felt that my humans needed a more plant like feel. So I tried some experiments with making the skin tones more fruit like (see the melon skinned emo below). I think this would make it believable as a universe.

Melon Skinned Emo

I’ve also decided I’m going to let the user who plants the seed (so hit number 1 on the plants hit counter) decide where to plant it. This will use a mouse event to get the ._x of the mouse when its planted and then store it in the XML. This also means that I will be able to display the last 10 grown plants, withering in the background, using the ._x values in their nodes to make it look like a forest.

This gives a sense of history in the site

Talking of Forests, I’m also playing with the fact of having the website set in a forest, and instead of having a globe in the corner I will let the user scroll up to the top of a tree where 30 humans can be displayed at a time, the user can then scroll through the trees and look at the humans that way. It will be design intensive but I like the thought of there being a world when humans live in trees and only go to the ground to be born.

A rough lay out of how I want the site to look

As for the inhabitants of this magical world I have decided that I will be increasing the options of each character to 9 choices per body part. I haven’t yet decided on all of the cultures I want to use as a background but I’ll be blogging about that tommorrow I hope.

I’ve also been looking at all the data that needs to be stored per human.
I need to be storing:

• Date Created
• Date Last Modified
• X position
• Skin Option
• amount of choice 1
• amount of choice 2
• amount of choice 3
• amount of choice 4
• amount of choice 5
• amount of choice 6
• amount of choice 7
• amount of choice 8
• amount of choice 9
• Hair Option
• amount of choice 1
• amount of choice 2
• amount of choice 3
• amount of choice 4
• amount of choice 5
• amount of choice 6
• amount of choice 7
• amount of choice 8
• amount of choice 9
• Eyes Option
• amount of choice 1
• amount of choice 2
• amount of choice 3
• amount of choice 4
• amount of choice 5
• amount of choice 6
• amount of choice 7
• amount of choice 8
• amount of choice 9
• Mouth Option
• amount of choice 1
• amount of choice 2
• amount of choice 3
• amount of choice 4
• amount of choice 5
• amount of choice 6
• amount of choice 7
• amount of choice 8
• amount of choice 9
• Accessories Option
• amount of choice 1
• amount of choice 2
• amount of choice 3
• amount of choice 4
• amount of choice 5
• amount of choice 6
• amount of choice 7
• amount of choice 8
• amount of choice 9
• Top Option
• amount of choice 1
• amount of choice 2
• amount of choice 3
• amount of choice 4
• amount of choice 5
• amount of choice 6
• amount of choice 7
• amount of choice 8
• amount of choice 9
• Bottom Option
• amount of choice 1
• amount of choice 2
• amount of choice 3
• amount of choice 4
• amount of choice 5
• amount of choice 6
• amount of choice 7
• amount of choice 8
• amount of choice 9
• Amount of Hits
• Humans Number
• Humans Name (chosen by last person to see it being grown)

This may be changed at a later date as I realise I need more or less functions

Tomorrow I have to give my presentation where I have to convince my teacher that GrowYourOwnHuman is a good idea. He has already said that it’s awesome but I still have to do the presentation as part of my uni assignments.

I went down the flash path as I’m delivering it on an older machine at uni which doesn’t have Keynote so I’m going to use Safari instead.
If you want to check it out its at http://www.growyourownhuman.com/presentation/