WebGL Simple Platform Game Demo with ThreeJS
I’ve been playing with WebGL, not nearly as mush as I’d like to, but absolutely loving the ThreeJS framework. I thought I’d have a quick go at creating a simple platform game example. ‘Game’ is really an exaggeration but I wanted to keep this as simple as possible so that people can go further with the code and make it into a game. Feel free to download it, I’d love to see what people come up with.
Use left and right arrow keys to move and up arrow key is the jump.
First try at WebGL
I’ve been reading up on WebGL for the last few weeks when I’ve had the time. I have decided that the best framework to use at the moment is Mr. doob’s excellent three.js framework.
The code didn’t take too long to put together and the part that took the longest was actually just getting the model into the right format. In the end I downloaded Blender and added the python script to that. I use Cinema4D so I exported the model in 3DS and then took that into Blender. The normals came out reversed with the first export, so I had to figure out how to flip the normals in Blender.
What I find completely ground breaking about this, is how there is no plugin required, it just runs and fast. Notice the film grain post-processing which I can’t take credit for as I nicked it from one of the example files, but I love the effect.
HTML5 Canvas EaselJS Video Tutorials
Easel JS is a javascript framework for HTML5 Canvas that gives it a display list like you would find in Flash. Download EaselJS from here.
These tutorials have been designed to take you through the basics of using Easel JS, making a simple game that introduces interactivity and creating animated content.
1 – Getting started with EaselJS
Adding text and images to the Canvas element, then make it move. Take a look at the finished example here.
2 – Creating a simple clicking game with EaselJS
IMPORTANT – getObjectUnderPoint – only works if HTML file is on a web server, unless you use SAFARI
Click on spaceships to make them disappear and stop the invasion. View the finished file here.
3 – Creating Sprite Sheets for Easel.JS with Zoe
Create sprite sheet from Flash assets. View the finished file here. Use arrow keys to walk left and right.
4 – Working with SpriteSheets in EaselJS Tutorial
Control a character walking left and right with arrow keys. View the finished file here.
Let me know if you want any more, I have code ready to go for a platform game demo.
Adobe Muse Tutorial for Web Designer magazine
There has been a lot of thoughts from the Web Design community about Adobe Muse because it’s a web design tool that allows users to author web content without the need to know HTML code. Not a bad thing you might think and rightly so, but the code it produces does give some non-semantic tags as well as empty div tags, which is where it has received it’s criticism. I personally believe the tool is aimed at the none designer who wants a site quick. The main reason behind this is that it’s a subscription based piece of software so you can have it on a month by month basis.
I got to use it in order to create a tutorial for WebDesigner magazine, I really don’t mind this as a piece of software, it would be nice to have the ability to specify content, aside, etc in semantic terms. The software itself is really easy to use and once you get used to it, is very creative. It’s not aimed at me as I can write HTML, JS and the like, but it has it’s place and I’m not so negative or dogmatic about alternative ways to design!
BA (Hons) Interactive Media Production Showreel
Just a little showreel I put together for clearing week at Bournemouth University. We cover such a wide diversity of areas on the course, the showreel highlights some of the excellent work by 2011 graduates.
