Mouse events are great for games – and if you’ve followed the ipad accelerometer tutorial you’ve even learned how to use the accelerometer in your games.  But in many games you may want to access the arrow keys or take text input from the gamers.  Fortunately Processing.js makes it easy to get the keyboard input onto the html5 canvas. Similar to the mousedown function there is a keyboard event function that is called whenever a key is pressed: void keyPressed(){ println( keyCode ); if(keyCode == LEFT){ //Do something } if(keyCode == RIGHT){ } ...
Read more...
If you’ve gone through the lessons might be asking yourself – where does the ipad accelerometer data come from? The answer is pretty simple.  If you have javascript experience, then you will know that the window has listeners for different events, such as onload  and onmousedown.  The mobile browser adds other event listeners like the ontouch events. It also adds one special one called ondevicemotion.  In iOS, this event has acceleration variables.  To make these work in processing we simply create an ipad object and update its accelerationX, accelerationY,...
Read more...
Section Links – will turn orange when they are active Story development – creating a high level summary of our game, some intro screens, characters, and some storyboarding Displaying content in Processing (Sprites vs Graphics) Menus – images, text, and user input (will be continued later with leader boards and more functionality) Layers Class – The Scenes that will contain the different parts of our program GameObject and CharacterObject classes – base classes for characters Level Design and Baddy Movement Baddy Class Development and AI Sprites – using...
Read more...
This is just a quick tutorial to explain the different parts of a processing sketch.  Hopefully this will have you quickly creating your own processing applications. If you haven’t already done so – follow the Processing.js getting started tutorial to learn how to run Processing.js in a website. Now we are going to walk through a couple of examples to get you started in Processing. Here is the Processing sketch from the previous tutorial:   //Hello World Processing Application void setup(){ size(500,500); } void draw(){ background(200,100,100); ...
Read more...
Many of the tutorials on this site will be built using processing.js. Processing.js allows you to take a processing sketch developed for the Processing desktop environment and use it on a website. The processing.js javascript file will take your sketch and convert it into javascript to run in html5 canvas. If you are not familiar with Processing, it is a really nifty programming language that is great for anyone interested in interactive art or games. As I will show you in coming tutorials many games can be quickly created using it. To get started developing with Processing go to...
Read more...