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 Cats, Camping, Collision Detection, and 2.5D w/ ImpactJS

Notice: A non well formed numeric value encountered in /nas/content/live/auz1111/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /nas/content/live/auz1111/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

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.


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.


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.