Teh My Room Adventure

Since 'tis the season, I might as well plug my own holiday-themed game.

http://tmra4.cerapter.net

It's something I cooked up ages ago, using photos from my student dorm and what little I knew of Flash scripting. It's a kind of point-and-click game. Some have found it addictive, and it is definitely frustratingly illogical. But if you find the fox on a rock, he will give you hints!

EDIT: New and improved version is up!

Teh My Room Adventure FOAR.2

Well, this one really is from the Proterozoic eon. It's the last one I made, 7 years ago. I've had eight other rooms since then, most of them during some December, but these have passed silently into the night without a new TMRA.

BUT. Yesterday I found a bug in the high score database. It has prevented new scores for six years. Now I fixed it and that means your accomplishments will be remembered.

I'm investigating whether a TMRA could be made using just PHP and AJAX. Flash was nice because it had a graphical interface for drawing polygons to click on, but it was also quite cumbersome to make the games that way, because I had spread the code across many separate frames. Plus, installing Flash is not an option.

If I figure out a way, I'll try to design an "engine" that can import game data and photos. I already have a brief walkthrough on how I made the games and structured the data. If that makes it easy, I might make a new one one day.

While you're trying to figure this one out, I'm having fun cooking up TMRA without Flash. So far I've got:
- Navigation arrows working when clicked
- Clicking on photo is matched against polygons from a list, to tell if you've clicked something important
- Game progress stored in an encrypted cookie

Not really a proof-of-concept yet, but I'm thinking it might work. The only thing that is tricky is things happening when you hover, like the clicky pointer. Implementing that might leave traces in the source code, which enables cheating!

Today I've got:
- A graphical polygon design tool for all the photos
- Polygons can be clicked to trigger navigation, picking up items or activating events
- Scenes are referred to by names, the actual photo may vary depending on what has happened

Editing is done in the backend code atm, including these files so far:
- navigate.php, manages dynamic navigation options in every scene
- pointers.php, manages dynamic mapping from scene name to file name
- One file for each scene defining the polygons and what happens when you click them

- Message box is functional. It pops in and out when needed, chops long messages into pieces, and it can display icons and play sounds too.

It's getting complex. About 400 lines of PHP, 200 lines of Javascript, 100 lines of CSS and 50 lines of HTML. Next up is the item bag!

I'll also need to design some new graphics, most notably the navigation arrows, since all I got are screenshots from Flash. I suck at graphic design, so if anyone's up to the challenge, let me know!

Thanks! I looked around for a while, but in the end I found a way to remake the original icons.

The progress today:
- New and transparent arrow icons makes the game look good again
- Only relevant navigation arrows will appear with each scene, the rest will be hidden
- Added all navigation information for all scenes
- Added 20 photos' worth of polygons into the new version, almost a third of the scenes
- Improved the code and file structure. The game engine is kept in separate files from the configurable game data.

Definitely doable. This is fun!

- The item bag is starting to take shape. It can be opened/closed, and it displays the stuff you have picked up. Using and mixing is not yet functional.
- I've added all of the clickable polygons, and will soon start adding complex events and behaviors that change throughout the game.
- Discovered a bug in the polygon checking. Somehow, one point is dragged all the way to the left side of the screen, so the click area becomes too large. Will try to sort this out.

- The item bag is almost fully functional. All that remains is item mixing.
- NEW FEATURE: items are clicked to grab them, and then clicked again where they should be used. Notice the floating fish in the second screenshot!
- Progressive game events are now working. Currently, doing this requires some introduction and programming know-how. Hoping this might be made simpler.
- The new version is working up until getting Dragon Power level 1.
- The game is currently 50 kB of code. The engine itself is less than 20 kB, while the game data makes up the rest.

The new version is now fully playable! That sure went faster than expected.

While the gameplay is complete, I haven't yet made the intro, the endings, or the hint function. Once I have, though, and after a bit more testing, this is ready to go online.

Then I'll assess how much work it would be to make a graphical interface for designing the game. Configuring in the code directly could be just as fast, but that is more prone to errors.

I'm attaching an example of the game code. The first image explains what a polygon can do when it's clicked. (The photo field loads a new scene.) The second image is a real example including updates as the game progresses.

]It's almost finished. The only thing missing now is making the endings shiny. I'll do that and look at that polygon bug, and then I'll launch Teh My Room Adventure FOAR.2!

Oh and cross-browser testing. I almost don't want to know how messed up it might be in other browsers, haha.

Thanks! Today I spent some time to make credits animations from scratch. I'm also putting a Facebook share button for the final score, if I can make it work properly. Plus some tiny tweaks to improve the gameplay.

I should have it ready just in time for Christmas!
Okay, here goes. I'm letting you guys at it first!

--> Teh My Room Adventure FOAR.2 <--

I haven't done a lot of testing, but I've done many playthroughs. Please let me know if there are any visual bugs of otherwise obvious ones!
I've made a tiny version of TMRA as a demonstration of the engine. This can be used to make new games!

I'm putting it out there in case I don't make a graphical interface to make it even easier. Making a room adventure this way doesn't require programming skills or detailed syntax knowledge. It requires having no code phobia, good copy-paste skills and an eye for details. It also requires a web server.

If any of you want to give it a try, I might be able to help you out and host your game.

Here is it:
Teh Room Adventure Starter Pak!

Quote from Link

You should attach that as an uploadable file, just in case the filehost goes down or removes your package.

That is my own web host, so I have full control over it. I put it there because the file was too big for a normal upload on the forums (2.3MB)

If I can bother and if it fits in, I might put it on GitHub later.

Thanks! It kept me busy through boring days and saved me from doing more important things

So now I'm planning an interface for designing your own TMRA on my server. It might have an export function so it can be put somewhere else too.

I haven't done any coding yet, so I don't know yet whether it's something I can finish. It's going to be a lot of JavaScript, some of it quite tricky, and it will require nearly 20 database tables. (The games themselves do not rely on a database apart from the hi-score table)

This admin interface will have four pages; scenes, polygons, items and misc. settings. Each will have an overview of its elements and a dialog box for adding and editing.

There won't be any need to edit code. There also won't be a way to edit files directly unless you export and edit the files for your own server.

Currently I'm spending time on the layout, which is not my strongest skill. I might try to look for something like Google's bootstrap style, but darker. Anyone have any ideas?