2D gaming using Processing.js

2D gaming using Processing.js(processingjs.nihongoresources.com)

100 points by jwco 11 years ago | 20 comments

silveira 11 years ago |

Really good tutorial. I'm saving it before Nintendo takes it down. It would be nice a version of this tutorial using friendly licensed game assets.

TheRealPomax 11 years ago | |

Nintendo generally doesn't care in the slightest if their assets are used for things like this. In the US and many other jurisdictions Nintendo might care about this is simply fair use. It's an educational resource without even a pretense of monetization, and has been up for years. I don't expect to ever receive a C&D for it.

RobLach 11 years ago | |

Yah, I'd flip out the art assets with whatever you can find with an open license to avoid copyright issues. (for example: http://opengameart.org/ )

"Let's make a Mario clone" would bring in the same audience.

Picard 11 years ago |

I started using Respond.js and SignalR to create a little multiplayer game about a year ago, but lost my steam because there doesn't seem to be much to go on if you're just casually learning. Maybe I could give this a try, thanks.

zwieback 11 years ago |

This is very nice. I started teaching my daughter some programming and although I have mixed feelings about JS this is the kind of tutorial that's at the right level and everyone loves Mario.

TheRealPomax 11 years ago | |

This isn't actually JS, it's Processing, so the idea is that this will work in the browser by virtue of a library that will run Processing source code in the browser. If you want to do the programming offline, just hit up processing.org, download the IDE, download the codebase.pde file on the same dir as the tutorial's page, and off you go.

zwieback 11 years ago | | |

Ah, thanks for the clarification. I didn't look at the source closely enough but now that I look at it again it's becoming clear.

ertdfgcb 11 years ago |

I noticed that if you walk into a level boundary and hold jump Mario jumps again before he lands on the ground, allowing him to jump up the wall

muhuk 11 years ago |

Where do these things come from? LevelLayer, Player, etc... They're not in Processing.js reference.

TheRealPomax 11 years ago | |

there's a codebase this builds on, simply called codebase.pde, in the same dir as the tutorial.

muhuk 11 years ago | | |

Got it. Thanks.

It says:

    For our game, we're going to use a library for writing 2D sprite-based games, using Processing.js.

So I got confused.

torkable 11 years ago |

object oriented JS, gross

Impossible 11 years ago | |

It's not js, it's Processing, which is a simplified version of Java with an elegant, simple API for doing graphics and visual art. It compiles to Javascript via Processing.js.

shangxiao 11 years ago | |

Better not define any functions or arrays then, they're objects and that would be "gross"

krick 11 years ago | | |

Actually functions or array being objects internally has nothing to do with "object-oriented" as style of writing code. Here it is about style, which is obviously dictated by Processing (and thus Proseccing.js) being ideologically object-oriented. So, well, yeah, it is quite more object-oriented than "proper" code in js, although I don't see why it is such a problem for the person you relply to.

jackmaney 11 years ago | | |

Better abandon any front-end JS, too...

rco8786 11 years ago | |

It's Java...

TheRealPomax 11 years ago | | |

well, close to. Processing is based on Java, but has a simplified syntax, different visibility model, and different scoping rules. Primarily due to how pde source code gets aggregated into a single class which can be compiled to run in the JVM, but because it's not actually Java any non-JVM implementation of a Procesing runner can pretty much ignore Java entirely and simply implement the much simpler Processing interpretation.

lotsofmangos 11 years ago | |

don't be daft, OO is far more classy...