I made a tool for making dungeon games with P5

Hi there,

I would like to show you my last project made with p5.js
It’s a tool to convert drawings into tiny video games :joystick: as shown on the image below :slight_smile:

I would be very curious to know your opinion. If any of you want to try it, feel free to tell me your experience and show me your creation. And of course, I’m really open to suggestions and improvement, the whole source code is editable online.

:point_right::point_right::point_right: http://captainlee.org/

The project was made during a residency in a fab lab in Paris, located in the lovely park la villette. (https://villettemakerz.com/)

6 Likes

Neat! Where did you get the idea for this?

Given that you call it a “tool”, did you have a particular application in mind?

1 Like

Thanks @tony !
I get the idea from another game I made using Processing.
The first application I had in mind was to run a creative workshop for kids in two steps. The first one is to draw, scan and play a game, and it works very well with both young and adult audience. The second would be to allow them to hack and modify the result and learn few basics about coding, but it is still in progress
I also like the idea that the project can be used by any developers to have a fun time creating a game very quickly.

2 Likes

I love claymation! And that music’s pretty cool as well.

How did you decide to use Processing to build your games?

1 Like

I love making games with processing :smiley:
I have an art school background and I started programming with creative coding, so Processing is the language I’m the most comfortable with.
Plus I like the fact that it’s not a language designed for video games, it push me to think creative and find my own solutions, without mentioning the open source aspect.
But I also use other engine for some projects as twine, unity or small tools like puzzlescript and flickgame.

3 Likes

Funny, I think I’m kind of the opposite - I’m majoring in CompSci, but have always been interested in art, and use Processing to bridge that gap. You make an interesting point about the fact that Processing is not explicitly designed to make games.

2 Likes

For what kind of project did you use Processing? It is great to have a place where computer science and claylmation can met !

3 Likes

I’ve used Processing in the past to explore a math concept. Otherwise, it’s great that I can go from idea to rough-visual in just an hour. Most of my sketches are kept on OpenProcessing.

3 Likes

Hi Colin,

This is impressive and exciting!

The website and the photo documentation is great. The concept is brilliant. If you don’t mind my references, it made me think of other tools, which you are probably likely familiar with but others may be interested in:

Fermando Ramallo’s Doodle Studio 95, which lets you draw in 2d and turn objects into 3d assets for Unity. https://fernandoramallo.itch.io/doodle-studio-95

Most closely resembling your tool might be DungeonScript http://farbs.org/dungeonscript by Farbs, a 3d overlay on Increpare’s Puzzlescript https://www.puzzlescript.net/ engine. I like how yours requires no user coding to get started but could allow coding via altering the p5 script.

I was part of a workshop once to photograph objects, run a script and place those images wrapped around 3d blocks in Minecraft. I’ll have to see if we put that code online - but that’s the only other thing that’s as beginner-friendly that I’ve seen, that turns images into an instant game.

Incidentally, I couldn’t get the embedded game to work properly in my Chrome browser. Sound worked and i could tell i was walking around because of the noises from bumping into things, but the screen was mostly black. I opened the page in Firefox and things ran fine. Not sure what that bug might be from.

I appreciated your well-commented code. I’m excited to try this out further by drawing and scanning and running some games. Congrats on creating such a great project.

1 Like

Tanks @lee !

Yes, I love every of the tools you mentioned, especially those from Increpare. I actually made a game using puzzlescript and one using flickgame.

As you said my approach is slightly different, the working environment I built (the one on paper) is very friendly, even for the younger audience, but the goal is also to go play with the source code and eventually become familiar with p5. I wanted to run a workshop that shows the creative and fun potential of coding as well as proposing an entrance door to p5 and game dev.

I’m very curious about this workshop you mentioned. Do you have some pictures of it ?

By the way, is the bug still happening on your chrome browser ? If yes what are your configuration ?

Can’t wait to play a game you made with captainlee :smiley:

1 Like

Cool, yes, I like your very beginner-friendly approach. Flickgame and Puzzlescript are super inspiring so it makes sense you’re a fan!

The workshop I described was at UCLA GameLab and there is documentation here: http://games.ucla.edu/resource/texturegrammetry-live-handmade-texture-generation-minecraft/

Yeah, I’m still getting that error on Chrome. Using Version 67.0.3396.99 (Official Build) (64-bit)
I turned off all extensions and tried again in Incognito Window mode.

Here are the console errors.

JQMIGRATE: Migrate is installed, version 1.4.1
draganddrop.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
p5.min.js:7 [Deprecation] The deviceorientation event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
e @ p5.min.js:7
p5.min.js:7 The deviceorientation events are blocked by feature policy. See https://github.com/WICG/feature-policy/blob/gh-pages/features.md#sensor-features
e @ p5.min.js:7
p5.min.js:7 [Deprecation] The devicemotion event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
e @ p5.min.js:7
p5.min.js:7 The devicemotion events are blocked by feature policy. See https://github.com/WICG/feature-policy/blob/gh-pages/features.md#sensor-features
e @ p5.min.js:7
p5.min.js:12 p5.RendererGL: enabled webgl context
1 Like