I took about five minutes to play with the engine, and felt it was definitely a good beginning, and I can’t wait to see what these guys can do. Check out the D.E.M.O. they have been working on for a preview of what the engine can do.

Click for Demo

What is VideoJS?

VideoJS is a JavaScript API for accessing the HTML5 media library.  There are many HTML5 video players now online, and many more are popping up every day.  I chose to work with VideoJS for now, because it was the easiest for me to understand, and I really didn’t feel like experimenting with any others at the moment, although Popcorn.js is looking pretty “butter”! Using the VideoJS API also adds some functionality to the player that some browsers have not implemented such as fullscreen, subtitles, and it also provides a consistent JavaScript API for HTML5 and Flash.  Another great benefit of VideoJS is that it is open-source and CDN hosted.

 An Example

I began researching HTML5 players when my homie, Spencer,  at Umami Media filled me in on a project he was working on for a client that is ready to start experimenting with HTML5 video.  We were both interested in the control and functionality of the player.  More specifically, we wanted to know if the playhead could be moved, or if we could pull meta information out of the video to be used in scripting.  I decided to work on a small demo that night, and was able to rapidly put together a quick demo.  VideoJS makes it easy to access most of the functionality we were looking, and with some custom JavaScript and jQuery you can do some pretty amazing things.  Please click the link below to open up the demo and “play” around.  The demo shows how  information such as duration, play time, play head location, volume, and dimensions can be pulled from the player and displayed within the HTML.  All of the players controls have also been built in HTML, and can be used anywhere on the page.  Make sure to click the “Switch Source” button to see the video changed and play on auto.  If you wait for 8 seconds on the second video (The Google Vid), you can see how I used some jQuery to animate certain parts of the player at specific times in the video.  WOW!  That was really cool, and fun to play with.  Let the video play until the end and you will see an HTML <div> pop up letting you know the video has ended.

Click for Demo

Conclusion

It is easy to see why HTML5 video will play an important role in the future of the web from just this simple demo.  There are currently being applications built with the spec that allow for some truly amazing interaction.  Check out this Sketchpad Walkthrough built with another HTML5 JavaScript API called Popcorn.js.  The demo shows how the player can manipulate the HTML and generate a code walkthrough that is in sync with the media.  DOPE!

Keep your eyes open, because we are going to see an explosion of this type of video interactions in the coming years.  HTML5 may not be standard quite yet, but that shouldn’t stop us from playing with and pushing this technology forward.  I am definitely looking forward to the future of the web, and technologies like this will surely sharpen that vision.

Click here to PLAY!

Moving on…

Over the past two months I have felt an enormous amount of excitement for HTML5 game development and the idea that some of today’s most popular computer games will one day be run in the browser using the tools that built the web.  I constantly run into professionals that are ready for true multi-platform development.  There is so much to look forward to for “web development”.  Will web developers still be “web developers” when the term encompasses so much more?  Sounds fun to me!

1st Bday #inBend

At this very moment last year I was visiting my brother and his family in Atlanta.  I was over joyed to be with my family, but the timing was just a little off.  Actually, Jenna and Nate would say it was right on time, and it is hard to beat a bday with the number “11”x2 in it!  Fortu”Nate”ley, I was able to spend this year with the fam as we celebrated Marlo’s first Birthday!  There is nothing like a first bday, and Marlo’s was no exception.  Friends and family showed up from all over with an appetite for Nate’s superb

brunch, and maybe a few beers!  Marlo kept us all entertained because she is pretty much the cutest thing you have ever seen on this earth.  Can’t wait until birthday number two!  It’s just bday number 18 I’m worried about… I guess Nate will have had plenty of target practice with the shotgun by then!

The Cos

If you have the opportunity to take your family to see Bill Cosby while he is still touring I would highly suggest it.  We had a chance to see Bill last Sunday at the Hooker Creek Event Center in Redmond, OR.  I  expected Bill’s performance to be similar to what we have come to expect from him, but maybe a little slower.  He is after all, much older than his days of bouncing Rudy and Bud around on one knee.  It was Bill’s perception and values that gave me hope for breaking the stereotypical african-american family portrayed in the media.  I stereotype that even today is often placed on TV because of the ratings dramatic character development often brings.  Anyway, I expected him to be humorous, but not “as” humorous.  In reality, it may have just been the fact that this was somebody I looked upon as a role model when I was younger. I’m just happy I finally was able to experience him LIVE in Bend, Oregon.  That… plus the fact that it was in Bend, Oregon… a place where even a black man can relate.  One thing is for sure… we all know how to laugh… and that’s exactly what we did.

For two decades web developers have used JavaScript(JS) to shape the web.  Most of this took place on the client’s machine using the browser to manipulate web pages.  Today, there are ways to use JavaScript on the server which has opened up new doors for web development.  Using JS on the server allows the browser and the server to communicate in new ways.  Node.js is leading the pack for these server-side JS frameworks.  I am not really a server guru or back-end developer, but that’s just it. Node.js  makes some of that work a little more accessible. I followed Valhalla’s Youtube Video to incorporate multi-player into my ImpactJS demo. I chose to begin my Node.js education with O’reilly’s Node: Up and Running.  Check the review on Amazon.

How Basecamp FAILED!

We have been using Basecamp for about 6 months now, and I have just been getting this bad feeling about it from day one.  Well, when we sign up for the service the interface had COMPLETELY changed from the system I used in 2008.  I knew they had new system, and were not letting people sign up for the old version so I took this as improvement, but quickly found the opposite.

The portfolio view is pretty to look at, but not very functional.  If you have tons of companies that you are working with then you are constantly scrolling down the screen to find them.  So, I changed the view to the “list” option and this view lacked the feel I was hoping for as well.  You lose the  images of who is connected to the project, and it’s almost too simple!  Then I changed to the featured/list view, but I wouldn’t use this view because my featured project changes daily or weekly.  It would be work just to maintain this view.

I didn’t let this small issue stop us, though.  We continued to use the system, and found that it worked well.  Then I began noticing small things that should be possible were NOT!  Didn’t the old version have project templates?  Apparently, this version does not.  That seems like a downgrade to me…I thought this was the new system!?! Oh, I can’t email in tasks? Hey, how do I duplicate a task? NOT possible!  Can I filter or sort this task list? NOT Possible! Wait, isn’t this kind of functionality expected these days?  And are we not paying a monthly for this?!?!

So, I began to run into a lot of little things that can add up to a lot of missed productivity.  It was time to find something else.

Edit:  you can now email in tasks to Basecamp.

What is Do.com?

A few days ago I started researching project management apps, and came across a looooooong list of clones, and other products/services.  The only one I felt was similar to Basecamp, yet more advanced was Do.com.  Do.com is a web application with collaborative task/TODO lists focused on projects and tasks.  I actually ran into Do.com while searching the Google Apps Marketplace.  Google Apps is the backbone of our email, and document sharing so I wanted something that would connect.  Do.com is developed by Salesforce, and has been making some waves in collaborative task management.

What it Do.com Better

Do.com allows you to sign in with your Google Apps account from the start!  This means it saves me time training employees how to login and remember passwords for yet another web application.  They can just type in their current email address and password and start using the system.  The interface is clean, but also offers much more depth than Basecamp.  You can keep all the tasks on the screen when drilling down to a single tasks.  This makes moving between tasks much more efficient.   There is the ability to create project templates, which will save us a lot of time, and help us refine our processes.  You can email in task by sending emails to task@do.com. So simple!  Oh, and look at that! It is possible to filter tasks, and you can even create sections for organizing tasks!  Another awesome feature is the ability to attach Google Docs from your Google Drive.  That alone was almost enough to sell me.  Do.com also has an open API for developers.  Sometimes, a task requires documentation, and I do all of mine in Google Docs.  I was amazed and for the low price of FREE (there will be a premium version later), I started moving all of our projects over to do.com.  I knew the team would love learning a new system just after getting to grips with Basecamp, but it would be worth it in more ways than one.

Conclusion

When I researched project management systems/ TODO List I also came across Asana which was created by some former Facebook developers. Wow! This system looks great too! It is pretty much Do.com (or vice versa), but with a few additional features.  I noticed that you can add tags to tasks, which adds even more sorting, filtering possibilites. Asana also makes it apparent they have lots of shortcuts which are conveniently placed at the bottom of the screen.  Hmmmmm… I think we will stick with Do.com because it looks cleaner/simpler, and the Google Apps integration is better.

My only complaints about Do.com at this point is the small view for task/TODO comments, and the lack of an option to edit the comment.  The tasks view in general should be given an option to expand and give you more formatting controls ie the task detail page for Basecamp.  The option to track the time spent on a task would be nice so that we could import that data into Freshbooks.  Also, the lack of tags for tasks could be “easily” fixed.   I will be paying close attention to Asana, and other cloud hosted project management apps that emerge.  Another one I have on the radar is Teamlab. For now I am sticking with Do.com, and it looks like our company will too!

August 15, 2012 EDIT: Do.com made some changes to the interface yesterday.  It looks better, but I don’t see much functionality change.  I sent a feedback message to their team stating I would like to see templates for task list.  This would allow you to add a list of tasks to an already existing project.

Links:

• http://techcrunch.com/2012/09/11/google-chose-do-com-instead-of-asana-to-get-stuff-done/
• http://mashable.com/2012/08/04/salesforces-do/

Sprite Work

The past week I spent a lot of time manipulating ripped sprites from Scott Pilgrim.  Again, these tests are just for demo purposes.  The game’s sprites and backgrounds were all created by Bryan Lee O’Malley and Paul Robertson.  I was able to get more of the first level entities in and it feels more 2.5D-ish now that you can walk behind all of the level’s entities.

Collision Detection

Two weeks ago I started playing around with dynamically creating the player’s boundaries and the collision map.  Here is an example of how you can load in a level’s attributes:

zPlaneBounds: { "bounds" : [ 

			{ "areaName" : "Snowy Toronto", "from" : 0, "to" : 2540, "ceiling" : 116 , "bottom": 233, "cameraCeiling": 150, "cameraFloor" : 296, "yDependency" : 0, "slope" : 0 },

			{ "areaName" : "Kids Park", "from" : 2540, "to" : 3755, "ceiling" : 128 , "bottom": 233, "cameraCeiling": 150, "cameraFloor" : 296, "yDependency" : 0, "slope" : 32 },

			{ "areaName" : "Backyards", "from" : 3755, "to" : 5190, "ceiling" : 149 , "bottom": 233, "cameraCeiling": 150, "cameraFloor" : 296, "yDependency" : 0, "slope" : 0 },

			{ "areaName" : "Downtown Toronto", "from" : 5190, "to" : 8280, "ceiling" : 116, "bottom": 233, "cameraCeiling": 120, "cameraFloor" : 296, "yDependency" : 0, "slope" : 0 }, 

			{ "areaName" : "Tunnel", "from" : 8280, "to" : 9400, "ceiling" : 210, "bottom": 280, "cameraCeiling": 120, "cameraFloor" : 306, "yDependency" : 160, "slope" : 0 }, 

			{ "areaName" : "Tunnel > x < Snow Field", "from" : 9400, "to" : 9760, "ceiling" : 116, "bottom": 280, "cameraCeiling": 120, "cameraFloor" : 300, "yDependency" : 0, "slope" : 4 }, 

			{ "areaName" : "Snow Field", "from" : 9760, "to" : 10500, "ceiling" : 200, "bottom": 280, "cameraCeiling": 120, "cameraFloor" : 300, "yDependency" : 0, "slope" : 0 }  

		]},

As you can see, it is also possible to load in the camera’s position as well.  I’m using a camera that works similar to Shaun Inman’s , and uses the code described HERE.  This works reasonably well and you can have multiple boundaries for an area that are dependent on the player’s Y position.  The last value, slope, allows you to create a gradual sloping boundary to the next point/area.  One bug that I am trying to squash is the transition between each area.  Usually, the player continues to press right or left to navigate.  For some reason the game’s continuous update cycle known as the game loop, is not detecting the player’s position and keeping them inbounds if the left or right button is continuously being held down when transitioning between areas.  I think it something that can be overcome, though.

I was also able to add animations when the player and the enemy receive damage.  Ramona’s is just her crouch sprite so it looks a little ridiculous, but conveys the feeling until we get our real sprites in. It took me forever to get the player’s “received damage” sprite to continue animating.  I eventually made sure no other animations were being loaded for at least a second after the collision.

Closing Up…

Well, I am actually not going to post the new version this time, as a friend let me know that he was having trouble loading the scripts last time.  I know it is taxing the client with the huge sprites, and possibly some broken code.  I am going to work on some

things a little more before posting again.  Hopefully, next week…

So, it’s actually starting to look like a real game, rather than a moving heap of crap.  I may end up throwing away most of this when working on the real game, but I have taken away many lessons.

In other news, I had a great weekend with my family over in Corvallis, OR.  We celebrated my brother-in-law’s recent graduation and ate some amazing BBQ. Of course, we drank more than a few Oregon beers and ended the night by the campfire.  On the way home we obtained a brand new kitten that is now cat number two on our Rescued Kitty Team sponsored by Kids, Clutter, and Chaos.  We also stopped by Odell Lake to drop off a birthday gift for my nephew, and thank him for rescuing our new family member.  Now, I am all ready to go for the week ahead.

Peace and love until next time!

Collision Detection

Entity to Entity: In the last week I made improvements to the collision detection for enemies and the player. I am keeping all of the hit boxes for entities at their feet. In a 2.5D world the only things we really need to check for is hard collision at the feet. That would at least let us use the engine’s built in collision detection and we can program our own in for the rest of the body based on where the feet are. This may not suit everybody’s needs, but mine does not require pin-point hit detection.

Entity to Map: Because we can’t use the engine’s built in collision maps, there had to be a way to keep the player bounded.  There is now a way to create a bounding-box/collision-layer that dynamically changes in relation to the player’s X coordinate. This allows us to load in a level’s boundaries with JSON, and enable different boundaries for the player depending on their X coordinate in the level.  One of the reason’s for not using the built in map collision is because your player can’t jump with static collision boxes above them.  The new system allows you to turn off/pause the dynamic collision map while jumping, and resume once the player is standing.

Gravity

I was also able to get a hole/pit working with the game engine’s physics still controlling the player’s fall. One of the major issues I am having with tricking ImpactJS into a 2.5D world is the loss of the game engine’s built in physics. After playing with many ideas I came up with an OK solution that will do for now.  When the player hit’s a hole there are special tiles that detect this, and add gravity back to the game. The dynamic collision map is turned off at this point allowing the player to fall, and die.

Breakables

Another accomplishment this weekend was the edition of breakable objects. You can now break the safe box near the beginning of level1 , and I am slowly adding more breakable entities.

Signing Off

This past week saw many more additions, and fixes such as corrected player animations for left and right movement, new sounds for attacking, many more objects added, custom enemy AI, and a scripted bus that makes a bus stop colliding with the player! The game development is moving along nicely, but there is soooooo much more to do. Check out the latest version and I will update you on the progress next time.  Thanks for tuning in, and I’m sorry for missing the beers this weekend PNate. You know I have become addicted to this stupid game.  Will put it on pause after the next life!

PS – Yes, that is an African-American version of Link.  And no… I didn’t HAVE to color change Zelda’s sprite. HA! Happy 4th of July you guys!

Click here to PLAY!

Please keep in mind this is a concept-of-proof demo. Much love to Paul Robertson and Bryan Lee O’Malley who’s hard work can be seen in the sprites of Scott Pilgrim and other games.

I ran across this film a few days ago and didn’t even see the trailer before I clicked purchase. As I dive deeper into indie game development I am all for the CAUZ of supporting media that brings attention to this awesome industry.

The film was produced by James Swirsky and Lisanne Pajot, from Winnipeg, Manitoba, Canada. For year the two worked on the project by gathering stories and interviews from indie game developers. Props to these two for all the hard work! Enjoy!