HTML5 & CSS3 Readiness

html4 css chart

Need to know what browsers are compatible with HTML5 & CSS3 along with other functional details based on the year? Well this handy dandy chart created by Paul Irish and Divya Manian just does that. Pretty sweet too.

Check it out at http://html5readiness.com/

PHP – Mobile Detect

Query mobile

What a sweet gem I found! It’s at http://mobiledetect.net/. This will detect or figure out what device the visiting guest is using. Great for responsive design projects, although, Bootstrap can handle that too.

Unity3D Multiplayer Game

Game by James Tadeo

This is an ongoing personal project I work on when I need a bit of fun and sanity. Here’s the link to the test page where the game currently lives. I update it now and again. I also built a custom REST API for the scoreboard and integration with a CMS database.

Photon Server Tutorial – How to Install PUN (Photon Unity Networking Plugin)

A quick video to people started with Unity and Photon. Using PUN (Photon Unity Networking) has made multi-player game dev so much easier to implement. I remember when I was trying to wrap my head around Raknet* and the tons of hours I spent on it. This makes it a breeze.

*http://www.jenkinssoftware.com/

PHP Classes – How to Create a Class with a Method Function Return

class PHPClassWithMethodAndReturn {

/*Define your variables*/
var $fname;
var $lname;

/*Create our custom function and indicate
it will be accepting two parameters.*/
function ShowInfo($fname,$lname) {

/*Passed parameters need to be assigned
values so we can use them.*/
$this->fname = $fname;
$this->lname = $lname;

/*This is how we will output the value.
will assign the final value to a return variable*/
$ret = "The name of the person is " . $this->fname;
$ret.= "The last name is " . $this->lname;

return $ret;

}

}

//create a class
$myPHPClassWithMethodAndReturn = new PHPClassWithMethodAndReturn;

//Call the method and pass two parameters and output using echo.
echo $myPHPClassWithMethodAndReturn->ShowInfo("James", "Tadeo");
?>

PHP Classes – How to Create a Class with a Method Function


class PHPClassExampleMethod {

/*Define your variables*/
var $fname;
var $lname;

/*Create our custom function and indicate
it will be accepting two parameters.*/
function ShowInfo($fname,$lname) {

/*Passed parameters need to be assigned
values so we can use them.*/
$this->fname = $fname;
$this->lname = $lname;

/*This is how we will output the value.
We concatenate strings and values.*/
echo "The name of the person is " . $this->fname;
echo "Their last name is " . $this->lname;

}

}

//create a class
$myPHPClassWithMethod = new PHPClassExampleMethod;

//Call the method and pass two parameters
$myPHPClassWithMethod->ShowInfo("James", "Tadeo");

?>

PHP Classes – How to Create a Class

// remember to name the file PHPClassExample.php if we plan on using it as part of an includes file.

class PHPClassExample {

/*Define you variables and do an immediate value assignment*/
var $fname = "James";
var $lname = "Tadeo";

}

// create a class
$myPHPClass = new PHPClassExample;

/*Access the class value for the corresponding value, notice we don't need to add the $ in front of the variable, that's because
we already defined it in the class*/

echo $myPHPClass->fname;
echo $myPHPClass->lname;

?>

PHP – Randomize Image Display

There are times when we need to randomize a value. For example, we want to be able to randomize images that appear on a page. Here’s a simple starting point I’ve used in the past to do this.


// get a random number
$rndNumber = rand(0,3);

// plug value in the switch statement - it'll pull up value and serve it up
switch($rndNumber) {

case 0;
$rndImageToUse = "mypic0.png";
break;

case 1:
$rndImageToUse = "mypic1.png";
break;

case 2:
$rndImageToUse = "mypic2.png";
break;

case 4:
$rndImageToUse = "mypic3.png";
break;

default:
$rndImageToUse = "mypic4.png";
}

// spit out the image value (we'll need to wrap this in an img src tag
echo $rndImageToUse;

?>

OpenSceneGraph for Mobile iOS?

One of the projects I worked on in the past used OpenSceneGraph. OSG allows your to create simulations for games, VR, virtual spaces, walk-throughs and just about anything that requires a 3D scene. It is versatile and open source. It runs in both Windows and OSX. It runs on other platforms too but those are the ones I work with on a daily basis. You can check out the site at http://www.openscenegraph.org to get access to their documentation, downloads and examples. If you are not experienced with wading through docs, it’s hard to know where to start and a few times I found myself losing my place as I clicked around for info.

In terms of definitive sources of info there is a book by Xuelei Qian that gives you a very good step through on how to work with OSG. Within the first hour I was able to downoad, install and start using the OSG program. The samples, while simple gave me enough to go by. I guess you could compare it to the standard “Hello World”. I could use my imagination to see what I could personally make. By hour 7 you will feel comfortable enough to try a personal project. The book is well paced for someone who is starting out. It doesn’t assume too much on the part of the user and is a gentle intro to OSG. The book covers the basis for starting the right way with OSG. Here’s a link for OpenSceneGraph 3.0: A Beginner’s Guide.

I think what’s great about OSG is the potential to pack it into other applications. Maybe even mobile apps? From what I understand this is already being done but I’m not sure if it’s still active. Check out this initiative at http://www.imrc.kist.re.kr/wiki/Mobile_OSG.

I’m not sure to what extent it’s been tested or available, but it looks very promising. I think there is an svn trunk available. If anyone has worked with it, please do chime in.

…sip…

48 Hour Game Challenge – The AfterMath

Last weekend I took part in a 48 Hour Game Challenge organized by Techority.com. The challenge was to create a game using Ansca’s Corona API in a couple of days.

It was certainly a challenge to concept, create and finish a game in 48 Hours. For this challenge, I teamed up with Robert Nay from Nay Games LLC. Robert, you may recall, created Bubble Ball and was responsible for beating Angry Birds in the App Store for a few weeks in the top spot. I think to date he’s had over 5 million downloads. Not too shabby for a 14 year-old.

So what did we get done in 48 Hours and did we submit on time? Well, I’ll tell you what happened and it’s something that I will always keep in mind the next time I do this. To start, here are some screen shots of what we did finish. It’s a bit rough in some cases but it was fun to make.

Screen shots of the work Robert and I produced within the 48 Hour period.

Defining Who Does What and When

One of the rules of the 48 Hour Game Challenge was either you enter as a team of two or by yourself. There are benefits to entering as a single entry but in this case we thought it would be a lot of fun to enter as a team as we both saw the value each brought to the challenge. Both of us can program in Lua, but as for me, I also had an art background. It was decided then that I would make the art for the game as my illustration capabilities would work well for this challenge.

As I had done work with Robert in the past, it was a good fit. For someone so young, Robert is a diligent worker and is not afraid to try something out. In my viewpoint, he is the real deal. He literally whipped out the code as I made the art and graphics during the challenge. Afterward, we would chat about how this would work with that and how.

When the challenge started at 12AM PST, within the first few hours, one of the first things we did was discuss the concept and we quickly decided what we were going to do. Before speaking with Robert, I had sketched out some chicken scratch concepts. My goal was to get the essence of what it was we might be doing. After taking a picture of them with my iPhone and sending them off to him, we discussed it. The whole process was about 15 minutes and we were off to the races.

For me, the challenge started at 3AM EST. I had my alarm set so I woke up and took a look at what we had to make. After that, I fired up the coffee maker and started to percolate some initial ideas.

We created a Google Doc spreadsheet and we listed what we had to do and who would be responsible. It was a simple list and for this challenge we really didn’t need anything more. We just needed to get it done. Goggle Docs was very helpful and for this 48 Hour Challenge it was sufficient.

During our initial discussions Robert suggested we use Lime as it was the De facto standard for making tile-based games with Corona. This was a very good decision as 48 hours later we discover it really helped us make delivery of Coconut Moon. It saved us a lot of time.

For being able to exchange files between ourselves, we used Dropbox. It’s a very tidy program that integrates well with OSX and Windows. You literally drag your file and drop it in the remote folder. This saved us from having to e-mail one another. Sometimes when there is a volume of e-mails, things can get lost very quickly. Using Dropbox, things can be organized in a set of folders. What I really like about Dropbox was that it added an icon at the top of my Finder where I can easily pickup files. Dropbox is a free service for up to 2GB at the time of this writing. However at times, we did end up just using an e-mail attachment and sending off files to one another as it got closer to the deadline.

Dropbox was extremely helpful as we threw files back and forth during our work. Dropbox is a free service.

At the start of the 48 Hour Challenge we were both amp’d. For me, one of my first goals was to organize what it was that I had to draw out and how they related to the game. For a few quick wins and to gain some momentum I started with the easy parts for the asset creation. I started with the low hanging fruits. They were simple to draw and I had a lot of references like the kitchen table. We had some fruits there. As time was of the essence, I chose an illustration style that was very natural to me. In my early art and design days I enjoyed the pastel style art and so I chose that. The difference this time is that I had to crank out several images within a few hours. Going the traditional route was not a choice as it would take forever. I ended up using my iPad. Here are some of the initial samples.

I used my iPad to create the art based on initial sketches I had worked once I knew what we were suppose to include in the challenge. No one knew until 12AM PST. It was 3AM for me.

Time Goes By Then Arrives Hour 47 – Panic Sets In

Before we knew it, hour 47 decided to show up out of nowhere. Both of us knew that there were parts to the project that had to be fixed or polished.  At this point in the challenge, we both agreed to start gathering any and all code and media assets and start building to a deliverable state. While we did run and test as we made them, we had to make certain choices to get it out the door. This is where our list came in handy. The last mile was gruelling as we’d both been up for several hours working on files. I was on EST time so it would be around 3AM when Hour 48 would arrive. We tested, adjusted, tested, fixed and tested what we could. It was insane as a few times (of all times) our Internet connections were lost. It was as if Murphy’s Law was toying with us.

Still not delivered we had about 7 minutes and we were madly zipping and files still. Robert’s connection was cutting out every so often and I was ready to jump out the window as I helplessly watched his connection go offline during chat making wonder if he would be able to submit the files.

It was down to 3 minutes now and I had resigned that if for whatever reason we didn’t submit on time then I would keep only the good parts of the last 48 hour challenge in memory.

It was 2:58 am. Nothing from Robert and huge rush of panic set in my heart and I felt weak as I thought this was it. Ofcourse, I kept reminding myself, “Pah! It’s only a game challenge. Put it in perspective James.”

But still. It wasn’t.

At hour 2:59 am it got shipped out to PeachPellen, the organizer.

Exhilaration ensued and sudden relief that we were done.

I have to admit, it was crazy. Shipping that close to deadline is not something I would want to get use to and in the next few weeks I’m going to create a system that will assist in expediting the work.

Anyway, at least we shipped.

After the close of the 48 Hours, we got confirmation from PeachPellen that she had received our entries. That was good.

48 Hours After the 48 Hours – The Aftermath

I think I woke up a couple of days later and felt I had entered a new world. Sleep is a glorious endeavor, I believe it should be engaged in regularly.  I thought it would be cool to load up the app into an actual device, so I created a provisioning file for it and compiled a binary. Here’s what that looked like:

Now that it’s done, one of my first tasks after the challenge was to do some cleanup work. I spent the next couple of hours at a cafe sipping and going through the project. I also wrote this blog. Here are some things I wrote  for the aftermath.

  1. Backup and notate your work.
  2. See where you could improve it.
  3. See if it’s a viable project that can be expanded.
  4. Process wise, clear up the bottlenecks in your production for both art and code.
  5. Organize the bits that worked and save those for review.

What I Learned

During the course of the 48 Hour Challenge I observed and took note of key items that I believed helped then and will help in the future.

  • Block out the time. Let all your friends and anyone who might ask you to do something know that you are participating in a 48 Hour Challenge. This makes it clear they can’t call you up to fix their database or install a server for them. Oh yeah, and get a gooooood night’s sleep the day before the challenge. It’ll come in handy. Ya’rly!
  • Start with a proven technology: pen and paper
  • Get some initial ideas. I do well to go somewhere in the house that doesn’t have a computing device buzzing or beeping for my attention. In this case, I took a nice walk in the cool air very early in the morning.
  • Have a cut-off time for the concept and just go with what you’ve got – I had milestone alarms that would go off when I hit hour 10 or 20 and so forth. It would remind us where we should be in the 48 hour scheme of things and if we weren’t we had better get moving — and fast!
  • Get your sound and resource references easily accessible. Whether they are links, folders or on paper, whenever you produce these types of projects you will need an asset management system that you can work with. There are many out there.
  • It’s easy to want to do it all, but pick what you can do reasonably well and can do very quickly.
  • At some point there is that time where you just have to say, “We’ve done all we can, we need to collect files and ship this thing”.

How to Keep It Moving Forward

As we were both working from different locations, me in the frozen north called Canada and Robert out there in Utah, it was important that we would be able to communicate with one another in various ways. I’ve mentioned some of these earlier but here are some of my scratch notes on that:

  • Use DropBox to keep track of files.
  • Use Google Docs for lists of things to get done. You could use BaseCamp, but for this gig, it would be overkill.
  • Reply to e-mail so there is no wondering what’s going on
  • Before the project, have a phone kickoff meeting. While it may seem kind of perfunctory, it nevertheless helps to officiate what you’re about to do. It’s also good for morale.
  • When you write messages to one another, write so there is as little chance to be misunderstood
  • Get on chat – e-mail is still good, but the delay can cause confusion
  • Let them know when you will be away from your computer
  • Keep food stuffs handy
  • Get some rest
  • Hydrate yourself. Beer and wine don’t count.

Benefits

As tired as I was after the 48 Hour Challenge I still felt good. It was a good tired. A productive tired. As for me, these were some of the great things I experienced during the 48 Hour Challenge:

  1. It was fun. Sometimes it was fun in a panicky way but most of the time is was a lot of fun.
  2. I got to know Robert a bit more. Working and chatting during game development can bring out some really really funny conversations.
  3. We could now take this and expand it and make it into a real game.
  4. I saw where my weakness was in terms of art and design production and have notated how to make it more streamlined. I used to do contract work in various animation studios in Toronto back in the day and have experienced the benefits of a well streamlined workflow.
  5. Exhilaration. The feeling of getting it done! It’s not what I do full time as my full time work is PHP+MySQL programming but it was a good chest beating “I am PROGRAMMER hear me code” feeling. In my case it was more like “Hear me draw” and then a wimper at the end as the close of the 48 Hour was very close.

I hope to see more 48 Hour Challenges in the future and would recommend it as it really is an experience that will stay with you during your game development career. It can test your metal and can give you a good indication on what you need to work on to improve your game skill set and development toolbox. Did I mention it was fun too?

…sip…

Thanks for reading this far.

I invite your comments.

Testimonials

"Okay, obviously you're showing off here. NOBODY does turnaround times measured in minutes. = : ) Thanks again."
Jim Walker, James Walker Home Inspections
"THANK YOU JAMES YOU ARE INCREDIBLE! My sincerest thank you I really can't thank you enough..."
Bruno Marsala, HDMedia
"James has been a pleasure to work with. He gets stuff done efficiently, and listens to my every little gripe and comment. He's very good and I highly recommend him. "
Robert Nay, Nay Games LLC