Intro to Processing.js for web games

Posted by Johannes Stein on Jul 13, 2010 in Development, Games, Libraries | 0 comments

With HTML5 and its new features – most notably Canvas – gaining popularity each day, the question arises if you Canvas is capable of web games. Well of course it is or wouldn’t be writing this tutorial. So the question is more like “Where do I start?”.

Welcome to this intro to Processing.js in which I am going to show what this Processing is, how it is capable of web games and the first steps when to get started.

What is Processing?

The Processing language was created by Ben Fry and Casey Reas. It evolved from ideas explored in the Aesthetics and Computation Group at the MIT Media Lab and was originally intended to be used in a Java run-time environment. In the Summer of 2008, John Resig (Inventor of jQuery), ported the 2D context of Processing to Javascript for use in web pages. Much like the native language, Processing.js is a community driven project, and continues to grow as browser technology advances.

Source: http://www.processingjs.org

If you want to read the rest of the article click here to read more over at Incognita-Studios.

Read More

HTML 5 Canvas for FreePascal/Delphi

Posted by Johannes Stein on May 3, 2010 in Libraries, Miscellaneous | 0 comments

I’ve been working on a proof-of-concept for the last couple of hours. With HTML 5 being more and more stable and HTML5 games slowly becoming an alternative to Flash games, I was looking for a way to port existing games for the Web platform.

HTML 5 Canvas seems like a good choice for the graphics output, so began a low-level implementation. At the moment it is just a proof-of-concept, it can just draw different types of shapes in different colors and I’m not sure if I’m gonna develop it any further or even if the way I took was the right one.

Currently it works like this: Compile an example with

fpc -Mdelphi filename.dpr

or

fpc -Mobjfpc filename.dpr

which results in a compiled executable. Execute it and you get a html- and a javascript-file. Just open the html-file and you should see the result.

It comes with three examples. Download here (5 kB)
Every example from https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage and https://developer.mozilla.org/en/Canvas_tutorial%3aDrawing_shapes should work if translated to Pascal.

Read More