Javascript Tree and HTML5 Flies

This is a progress update to my Learning HTML5 post. I completed the first two courses through SkillSoft about HTML5 and CSS3. I learned a bit about the new tags and attributes and what’s been deprecated and abandoned from older versions. However, what I was learning was not proving to be that helpful to my ability to develop an HTML5 game except the very short section on the canvas element. I decided to start fooling around with drawing on the canvas using JavaScript to learn more.

JavaScript Tree Thing

I had this image of a bunch of threads growing up and sprouting leaves and branches and sort of weaving together into a tree. The little tree thing growing there was a sad effort toward that end, but I wasn’t ready to try to build tree growing procedure at the time. Maybe when I get to exploring procedural generation I’ll revisit the visual I have for that in my head. Anyone know if it already exists out there?

One of the other things I said I would do using the List of HTML5 Game Engines was to pick an engine to dig into and learn. I found a few other resources in making my decision that might be useful to others:

Phaser

The game engine I decided to use is Phaser! Here’s a few places I’ve bookmarked as good resources so far:

The forum I found to help make my decision is also a great resource for Phaser development. As a curiosity I decided that it might be cool to port my flies over from the FleaGame. I used the starter project form LessMilk as the shell for my flies, but it turned into a very shoddy hack and hardly uses the Phaser framework at all… Anyway, here is a demo of the fly behavior minus the brief pause when they land that they have in the C++ Allegro version (because there isn’t anything for them to land on in this version).

Fly Movement Demo using Phaser


I did a little brain storming and generated a list of ideas for quick games to help me get into Phaser so expect some HTML5 games here in the near future! Along the way I’ll explore a few concepts that have been bouncing around in my head.

Allegro 5.0 and the FleaGame

Due to familiarity I came back to Allegro when I started getting the itch to work on video game development. I found out that Allegro had undergone a major version change and that I had some learning to do. I found a great set of tutorial videos that covered Allegro 5.0 at FixByProximity. My plan was to go through the tutorial videos and then to rewrite my Final Project from my Game Programming Class to prove I had learned enough of the new version to move on to new projects.

The tutorials cover sprites, animation, sound, collision detection, and other things. They really are a comprehensive, though basic, rundown of what you need to start game development with Allegro 5. You are expected to know a little bit of C++ and have a Windows computer due to the use of Visual Studio 2010 as the IDE (Integrated Development Environment). The excellent manual pages for Allegro 5 and the Wiki are available for the details of the library’s functionalities and other tutorials.

I finished the videos and was updating my old Final Project under the name of ReFinal but I was interrupted by a conversation with a co-worker. I was talking about what I was doing in my spare time and the co-worker (that is also interested in making video games) had some concern about the logic for a simple mechanic like jumping and a little collision detection. I stated I would show them and with just a little bit of time had a working program with a little black pixel that could jump, collide with a single other object (a floating block), fall off the object, and be affected by gravity (so that the jump ends). This was the beginning of my FleaGame.

The FleaGame may never become a legitimate game but it will get tinkered with over a long time span and it serves as a platform for trying out things. I did finish updating my old Final Project, but I did just enough to call it updated and then spent more time on the FleaGame. The details can be found at the FleaGame Project Page and includes links to videos on YouTube.

This article pretty much sums up my current game development efforts and the next article should be about learning something new!