HTML5 Game Development with Playcanvas

Playcanvas, an up and coming HTML5 Game engine, is making some waves on the scene by pulling off 3D development.  It currently utilizes WebGL so IE is not supported, but you can bypass this with Google Chrome Frame if needed.

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

More Birthdays, Bill Cosby, Beer, and 2.5D w/ ImpactJS

In the past past few weeks I really have not done much with the ImpactJS demo I have been working on. There are some minor updates to the collision layers, collision boxes, and graphics, but not much functionality has been added. I’m currently working on developing a Game Design Document (GDD) for an original game so I don’t see much more time being spent on this demo/test. Most of the updates I made have been summarized in this thread. I didn’t get a chance to upload the most recent version last time so here it is. Keep in mind that there are lots of bugs, and Ramona is the least buggy character to play with.

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

The Billsons
My Little Pudding Pop!

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.

 

More Cats, Camping, Collision Detection, and 2.5D w/ ImpactJS

Well, I am still at a questionable position in developing a 2.5D game with ImpactJS.  The system is pretty rigged and I am still running into bugs with collisions and gravity.  Also, the backgrounds are way too large at this point.  I may just use this as a side project and begin focusing more on just a 2D side scroller.  In any event I have learned a lot about ImpactJS, and am impressed with the engine’s abilities.  I plan to continue developing with it and feel that Dominic will continue to improve the scripts.

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:

 

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 and 2.5D w/ ImpactJS

The past week has been a blur, and I am trying to refocus so I can take on the next one. If you tuned in last week then you know I am steady trying to recreate the first level of “Scott Pilgrim: The Game” with ImpactJS. So far, it has been a little rough. I know that ImpactJS is a 2D game engine, but I am determined to get a 2.5D demo working. I don’t know why I am fighting the engine, but I like this one better than any of the others available. I know that the main issues I am facing will be resolved with either a different game engine or ImpactJS will expand into the 2.5D realm.

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 Planet Auz Zelda Heart containerattacking, 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.

HTML5 Game Development: ImpactJS

Ever since I was six years old and my parent’s brought home a Commodore 64 I have been in love with computers.  Even more, I have always been fascinated with video games.  As I was hopping through the last castle to save the princess or defeating the Mother Brain, I always wanted to do more than just play video games.  Well, life seems to just never stop turning and some dreams you never get to…  Well, not this one!

I have been watching the development of several HTML 5 game engines over the past few years.  Several engines have risen to the top and have allowed developers to produce some great games.    I knew then and still see the potential for HTML5/Javascript gaming.  The technology provides a way to put games on any device that can run a browser.  No more worries about what operating system you are on or what software you have. No more worries about what Flash version your running or if your device can even run Flash. Now, we can have a game that runs in the browser and can be delivered on so many more devices making a great leap in cross-platform compatibility. It’s even possible to get these games running on the Xbox.  And the best part is… it all relies on HTML5, and Javascript which is technology that web developers have been using for almost 20 years!

ImpactJS

A few weeks ago I came across ImpactJS and began researching the game engine.  It is an HTML/Javascript game engine with a nice library of classes and an easy to understand framework.  I decided to spend the $99 for a license and have been addicted ever since!

When you purchase your license you receive access to the engine, some decent documentation, and a few source code examples.  After I went through the first few tutorials and played with the engine for a day or two I decided to start on my first game.  On day five of hacking away I   truly realized that my game may not work the way I had envisioned. I am shooting for a 2.5D Platform Scroller like Final Fight or Double Dragon. These scrollers allow the player to move vertically on a pseudo Z plane, and also allow the player to jump while incorporating physics into the game world.  Well, the ImpactJS engine is equipped to handle 2D games fine, but 2.5D and isometric games are out of it’s realm.

I was well into making the game and saw ways that it might be possible to trick the engine into thinking it’s 2.5D.  After about a week of still learning the engine, asking questions in the forums, and trying to break the 2.5D issue I finally made a break through and had my character jumping while also moving left,right,up, and down!  The best part is you can still use the game engine’s physics for velocity which is one of the main reasons for using a game engine, I would think.  It saves you a lot of time writing the code yourself.  However… there are still a few bugs in the script. When you touch the bottom of the game screen it thinks you have hit the ground and can’t break itself out of the gravity.  The other issue is that when you set up levels you have to place collision tiles to keep the player from moving through certain objects.  Well, when you are standing under such an object and try to jump, the game physics won’t let you. I found a way to break the dynamic collision boundary, but I haven’t messed with the ones created in Weltmeister.  Here is the code I used for the player entity on github.  I will probably post the whole game at some point. It’s not like HTML5/Javascript games have the greatest of security, anyway.

Another major obstacle I wanted to hurdle before I got to deep into the game’s design was multiplayer. I found a great resource for ImpactJs and Node.js on Youtube, and in a few days I had online multiplayer going.  Next, I had to set up a character select screen and add several more sprite sheets for characters.  Then, I had to wrestle with syncing the server with the clients in multiplayer so that everybody’s screen would display the correct characters for each player during a game. That was a long night…

Finally, got online multiplayer working with ImpactJS and Node.js!

Now, I am at the point of adding all the rest of the game mechanics. It’s a loooooong list, but I’ve got time.  Don’t worry I’m not quitting my day job so this project may take a good while!  I’m working on getting my brother-in-law to help out with the sprites and once I have the fundamentals down we can pop our own graphics in and work from there.  Currently, I am using sprites I have collected all over the internet from the game Scott Pilgrim.  The design of my game will be heavily influenced by Scott Pilgrim as it’s one of the best modern 8bit side scrollers I have ever played. Although, I have never seen the movie, but there is still time!

Below is the currently baked version of the game. You can kill other enemies, die, and finish the level by exiting the last yellow door on the left. I added some .ogg files for HTML5 sound support so you can hit “M” and turn it on.  Please don’t be upset if the music crashes your browser, though. This stuff is even too futuristic for Google Chrome!  A lot of this stuff are scripts and media I found online. It is all for testing purposes, so please don’t think this is anything that will make the final game. I know it looks pretty bad at the moment, but I am more than pleased with the start. Right now it’s a mashup of the tutorials and experiments that have helped me learn the system. I even left the ImpactJS Debugger on so you can open that up in the footer and have a peep.  The multiplayer code as been commented out in this version because I am just testing that locally for now.

Hey, when you’re reaching for a dream you have to start somewhere. Oh, and speaking of reaching for dreams… it’s time to catch some zzzzzz…

Click here to PLAY!