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.

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

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.

Simple iPhone example using FreePascal and SDL

Posted by Johannes Stein on Feb 17, 2010 in Development, Games, Libraries, Mac OS X | 3 comments

I’ve made a quick how-to on how to set up a simple iPhone example using FreePascal and SDL and run it with the iPhone simulator.

Please watch in HD. There are englisch and german subtitles available on Youtube.
Video Link on Youtube: http://www.youtube.com/watch?v=Hm4UIPl1GqA
Video Link on Vimeo: http://www.vimeo.com/9522466

The example source code can be downloaded here: http://www.freeze-dev.de/files/SDLiPhoneFPC_Colors.zip

The SDL 1.3 iPhone header I provide in this example is still incomplete and at best Alpha.

Also I’m using ElysionLogger from the Elysion Frameworks Subversion repository to create a HTML log file in the directory of the application bundle. If you don’t any log files to be created, delete ElysionLogger from the uses clause and any calls that begin with TelLogger.getInstance.

Update
If you rather develop with Lazarus, you might want to try this project file, which allows you to install the application on the iPhone Simulator right out of the Lazarus IDE. You need Lazarus 0.9.29 and the iPhone Laz Extension (http://wiki.freepascal.org/iPhone_Laz_Extension).
http://www.freeze-dev.de/files/SDLiPhoneLaz_Colors.zip

Progress report

Posted by Johannes Stein on Dec 31, 2009 in Development, Libraries, Linux | 0 comments

So, before the year is coming to an end, I’m giving a small progress report on what I’m working right now and what’s to come:

Elysion Frameworks: I’m still figuring which unit should depend on which unit, so you have the option: You can either use Elysion$(InsertSubset), e.g. ElysionLegacy which includes audio, graphics and font output and so on or you can just use every unit you want to, like “uses ElysionApplication, ElysionBitmapFont, … ” and so on.

FreePascal GP2X Wiz Cross-Compiler for Linux: My Wiz arrived yesterday and it’s better than I expected. I like that it can be charged via USB and doesn’t use AA batteries any more (even though I am fond of the idea of using AA batteries). Also the smaller and more compact design is great and the touchscreen definitely improved from the GP2X F200. A shame that there aren’t a lot of games supporting touchscreen.
I’ve uploaded this a while back and it works on the Wiz as long it’s simple (just using SDL library, no friends like SDL_image, SDL_mixer, etc.). When I tested a more complex application it was just a black screen or was stuck at the loading screen. So, that needs a little bit of fixing, but it’s still great to have one executable which works on all three GP2X platforms (F100/F200/Wiz) while C/C++ programmers have to recompile their applications.

Elysion + Horde3D mixed

Posted by Johannes Stein on Dec 21, 2009 in Development, Libraries | 0 comments

Just a little preview of things to come. This is ElysionKronos with Horde3D:

You are able to use Horde3D for all your 3D stuff and Elysion for everything 2D. Elysions’ sprite and font classes are more advanced than Horde3D’s overlay routines. Do I even have to say that you can use TTF fonts with Elysion while Horde3D just uses bitmap (TGA) fonts.
And just look at nice rotating, scaling and alpha effects…
(Allright, scaling overlays is possible with Horde3D, I know)

Elysion Frameworks: New structure

Posted by Johannes Stein on Nov 26, 2009 in Development, Libraries | 0 comments

Finally I finished designing the diagrams for the Elysion frameworks. It’ll take a bit to implement, it’s gonna be a modular framework, but you can still use ElysionLegacy.pas, ElysionKronos.pas, ElysionMobile.pas for example and even though there will be a lot changes (and even though I can count people using Elysion Frameworks on one hand ) it’s gonna be backward-compatible to the current version.

Click on picture to enlarge