Hi Folks

I've been spending some time working on a tool which makes it possible to easily create your own HTML/Web adventure games.
It's not finished yet, but i just got enough to throw it into the wild, hoping for feedback, collaboration and fresh made games.

The tool runs within a webbrowser, so its platform/os independent.
It should work on most modern webbrowsers.
The code runs locally, so no webserver/website needed (only when you deploy the game to your fans).

With the current featureset ist possible to create simple HTML based adventure games which include:
- Multi-colored titles
- One image per page (jpg, png or animated gif)
- Image maps (recangles)
- Unlimited amount of responses
- Changing variables when a user clicks on a imagemap/response
- Changing variables on page load
- Decide which page the user is redirected to based on those variables
- Executing custom defined functions on page load or when a user clicks on a imagemap/response for maximum flexibility (javascript knowledge required)
- Adding a tag/label on top of the image
- Prompt the user for input (for example their name)
- Save/Load game states
- Ability to style the game so its fits neatly into your own website (css knowledge required)
- Achievements
- Overview of multiple pages and their relation to each other
- Create test files, which could be run after modifying the game to check if each path to the end still works
- Test for broken links / unreachable pages
- Duplicate page(s) to create second slightly different paths
- Variable images based on the value of game variables
- Image preloading
- Image animations

If you want to collaborate, there are some funs things to start with.
I can use some help with:
- Testing (different browsers)
- Writing documentation
- Design/Layout
- Creating a demo/example game
- Coding (if your an experienced Javascript developer)


I'm open to idea's for new features or improvement of the current features. So if you have any, please let me know in this thread.
My own list of idea's consists of:
- Inventory (show what items the user has collected - camera, dress etc)
- Display variables to the user (time, money, amount of drinks, progress)
- Add comments in the code
- Sounds

Update V2.7
- Random choice supports only_if/show_if
- set_var on page load or item click supports only_if/show_if
- Improved check on what page each variable is used
- Added option to clone elements to other pages

Update V2.7.1
- Fixed variable debug sidebar

Update V2.8
- Fixed wrong order of title texts
- Added webserver to allow data.js upload

How to Update:
- Overwrite all the files with the files in the zipfile, EXCEPT data.js, custom.js and custom.css

Note:
The build page does not work in some browsers when running on local filesystem (file:///)
Doubleclick on webserver.bat

The code is released with the MIT licence, so feel free to modify it to your needs.
https://mega.nz/#!TF1ETQaQ!zPH2DmXih036 ... FnNGl-P3I4 [V2.8]

Interesting. Been using AdventureCreator, which this seems to be another version of. when you get a few more of your planned features in, I may use this.

A couple quick thoughts.

It took me a bit to figure out that images had to be stored in the image folder inside the WBA folder in order tos how up, but when I did, there's a weird black bar in the upper left of the image when I click on View.

For the image maps, it's annoying now but I see you already want to modify that to be easier. Just being able to drag a rectangle on where you want it to be like in AdventureCreator would do fine.

So, is the ultimate goal for this to be a single .exe file for the entire game, instead of the bundle of html files existing html games are? Or did I completely misunderstand your goal?

Will it be able to include sounds?
I couldn't figure out what to do after opening the build html file (part of it ran off my computer screen).

@Superawesomemans
Cool that you already tried it.

I have no control of the folder a user can choose from and cannot determine the folder the user has selected.
Ill add a message when the page is unable to load the image, so the user will be informed when he's choosing an image from the wrong folder and give some quick instructions.

The black rectangle is a csss issue, ill fix that in the next version. Easy creating image maps should take a bit longer.

It's not my ultimate goal to have one single .exe file. Its totally web based so no .exe files are needed.
The goal is to separate the contents of the game from the engine itself. This will allow to extend the engine/builder/debugger/play interface without modifying the game itself. So old games should benefit from future changes. Also it allows much easier responsive design which will allow tablets and mobile phones (and any other future devices) to be able to play these games.
The web is constantly improving, the amount of devices is growing, so it will be able to keep in sync with those.
With one logical data file its also possible to run static analysis on the games to find common mistakes, so that will make developing easier.


@fleet
Ill add Sounds to the list of idea's. Any idea's in which ways you want to use them (looping. single, on mouse move, one or multiple etc)

Whats your screen resolution. I try to make it work in 1024px width and larger for the builder, don't know if it's possible to do so.

For the play component any resolution above 480px wide should do the job. Tested on a samsung galaxy II.

Controls for sound should include looping, and the ability to end the sound playback.

My screen resolution is 1024 x 768 landscape.
As previously stated, I couldn't figure out what to do after opening the build html file.

@fleet
Try adding and image, title, or response: https://mega.co.nz/#!KdES2IzL!smlruh0_r ... yJKzNioV0o

The only problem i faced with 1024px resulution is adding image maps.
Ill look into that
Update: Fixed in V1.1.1

@all
Updated the code to V1.1
- Moving and resizing imagemaps are now supported
- Black rectangle is gone
- Added message when the user selects an image outside the images folder

SoulMate wrote:@fleet
Try adding and image, title, or response: https://mega.co.nz/#!KdES2IzL!smlruh0_r ... yJKzNioV0o

The only problem i faced with 1024px resulution is adding image maps.
Ill look into that
Update: Fixed in V1.1.1

@all
Updated the code to V1.1
- Moving and resizing imagemaps are now supported
- Black rectangle is gone
- Added message when the user selects an image outside the images folder

I had to change my browser settings to reduce the font to 75% to get all of the words to appear.
I was able to enter a title and have it appear, but I was unable to get an image to appear using Google Chrome (version 34). I tried Internet Explorer 11 and had the same result.
Using Mozilla Firefox (version 27), I was finally able to get an image to appear. I'm running Windows 7 Home Premium, 64 bit.

@fleet
The image loading in chrome and IE should now be fixed in V1.1.2
https://mega.co.nz/#!KUlSSRpS!-iAx1sThc ... q-Ep8VkwDQ

SoulMate wrote:@fleet
The image loading in chrome and IE should now be fixed in V1.1.2
https://mega.co.nz/#!KUlSSRpS!-iAx1sThc ... q-Ep8VkwDQ

I checked both Internet Explorer and Google Chrome, and they both now allow me to bring in pictures.

Now, how do I add a second page, and how do I save my work?

To add a new page, just add an imagemap or response and then fill in the 'page'. This will add a new page and link that item to it.
To save your work, there should be a "save" tab on the right side of the tabbar (hope its visible on your 1024px screen, if not please let me know).
The save tab has a download button which serves a data.js file. Just overwrite the data.js file in your game folder.

@Superawesomemans
Any features you like to see made first?

Hm... I'd say cleaning up the user interface and making it easier to use is a necessity. Having the hover-over text bubble pop up with what a function does would be good. Then, an overview of multiple pages.

Otherwise, I guess achievements, showing variables and inventory.

question about achievements: how exactly were you planning on them working?

Also, you say Animated Images is on your to do list. What exactly do you mean? I assumed at first you meant gifs but I find that they worked, so what?

Anyway, my first and major suggestion is to clean up the interface and make it more user intuitive.

Added a lot of title/hover texts to describe the uses of buttons/input fields
https://mega.co.nz/#!Kd0AhI5S!x-jdjN4y1 ... -sVmoh_jBc (V1.1.3)

Please let me know if the descriptions are not informative enough.
Any more ideas to improve the usability, i'm not an expert in that so i could use some feedback on it.

I haven't thought about the implementation of achievements. If you have suggestions feel free to share them.

With animated images, i mean to animate a set of static images (based on time or on mouse movement)

Okay, I figured out how to add a new page.

When I clicked on image map it added a dark square to the existing image. I was unsure what to do with that, so I started over.
When I clicked on 'response' I determined that I had to type something in the 'response text' box, then type something in the 'page box', and then back where the response text box had been to get the new page to show up on the left hand side. By clicking on the new page name that just appeared on the left side I was able to open a new page.

I correctly saved my work to a new data.js file (overwrote the old one).
In Google Chrome and Firefox, the game played correctly when I clicked on the index.html file. It did not play correctly in Internet Explorer 11 (the images did not change, the image from the first page repeated on pages two and three).

WBA will be VERY useful once it is more fully developed and has a user guide. Clicking on a word on the tabbar beats the heck out of writing code.

Very respectfully,
fleet

For achievements... Having a button on the toolbar to define a certain page as an achievement would be great.

Furthermore, I've been toying with the idea of tying achievements to a user profile on a site. I'm nowhere near skilled enough to judge how feasible that is, but just thought I'd mention it

@fleet
The dark (yellow transparent) square is the image map (location on an image) where the player can click on and be redirected to another page.
This square can be dragged by holding the left-mouse-button and moving the mouse. The dark small rectangle within the image map is for resizing.

Currently the interface is build with effectivity in mind.
I hope it will be userfriendly later on.

About the user guide, would you (or maybe Superawesomemans be willing to write some documentation?
Ill be happy to include it in the builder itself.


@Superawesomemans
Ill look into achievements. I'm also thinking about make it possible to reach a part of the achievement.

The second part is not that easy i guess altough it would be readlly nice .
It would involve a website which handles the user profiles. You have to make one yourself or maybe use:
facebook : https://developers.facebook.com/docs/games/achievements/
gamejolt : http://gamejolt.com/developers/achievements-new/
drupal (make your own): http://drupalcontrib.org/api/drupal/contributions!achievements!achievements.api.php/7