Web Based Adventure (WBA)

[tlaero]

Hey SoulMate, are you interested in influencing the feature set for AC? Are there things that your users really like that you think I should add to my tool? I've been heads down on Redemption for Jessika, so I haven't really looked at WBA in a while, but on reading this thread, it looks like you've got some cool stuff that might benefit my users too. If you'd rather not, though, I understand.

Tlaero

[SoulMate]

Hi Tlaero, of course I want to share my opinions. Better tools to create Adult adventure games leads to better games :-)
I do not know AC that wel (installed and tried it once) so maybe the some features I name are already available in AC.
I'll give a quick overview of WBA and then you can decide what features you or the users of AC may like.

Sylakone, I used your now Model Friends game as example. I hope you won't mind.


Lets start with the dashboard

One handy feature: drag and drop images. For each image dropped there a new page is created. Great for starting a new game.


Next the Settings tab

Mostly as the name gives away: settings.
But one nice feature is game variables. Click on the button "show usages" to get a clickable list of pages which uses this variables.


The TODO tab

This one has the best features I think.
Missing pages: It search for missing pages (If pageX references to pageY, but pageY does not exists)
Unreachable pages: pages that exists (for example has an image), but no page reference to it.
Todo list: On each page you can add multiple todo items. Here all the todo's are listed


The Edit tab

This is where all the magic happens. Here you can build page by page, similar to AC.
In the topbar you can add blocks the the page. Blocks can be titles, todo's, one or more images, prompt the user for some info (like his/her name)
In each of these blocks you can add info to the page.

Some features:
For all clickable elements (image maps and responses) you can add a 'onclick change variables' where you can configure multiple variables to change when a user clicks on it.
Multiple image maps can be resized and repositioned on the image, simply by dragging.
When typing page of variable names, a dropdown box with suggestions appears. This leads to less typo's and quick development.
For almost each visible item (response, image map, image, title) you can decide by adding a 'show if' to show it or not by adding a few constraints. This is very useful for minor changes (day and night, male and female, has a certain item or not, etc). I got some great feedback from Super and Sylakone about this feature.


The view tab

This shows the page (configured in the edit tab) how it looks when someone is playing the game.


The raw tab is more for debugging of WBA itself
The Overview tab


I think this is the most awesome tab. It shows the next [x] images in relation to each other.
It can go many levels deep although I'm not sure 12 levels will render on all PC's without crashing the browser
It shows red blocks for missing pages, green arrow on the first level


Further more
As you probably saw in the pictures some stats (time, money etc) are show on the screen.
These are variables, which can be added by the WBA API with a few lines of code in custom.js
Also the theming can changed with custom.css


The debug page

There is also a debug.html page where you can easily debug your game.
All the clickable image maps are outlines instead of hidden
See why clicking on a image map or response leads to a certain page
See all the variables and the current value


And the latest addition:
A menu with multiple load/save games




That's about it I guess. I hope it will help you with the new featureset of AC.
If you need any details about the features, code examples, tips and tricks. Ill be willing to help you in any way possible.


@Sylakone, Super
If you know some features you'd like to see build into AC, feel free to share them with Tlearo

[tlaero]

Thanks SoulMate.

I'm adding localization to AC at the moment, but when I'm done with that, I'll definitely take a look at this. That Overview tab looks pretty slick. I'll definitely want to pay attention to that.

Can you tell me more about "show if"? I saw that Syl really liked that, so I want to understand the feature.

Tlaero

[kexter]

Can you tell me more about "show if"? I saw that Syl really liked that, so I want to understand the feature.

In AC-terms, it basically only shows a hotspot or response if the specified condition is met. So you don't have to make two separate pages, one with 3 hotspots and one with 2 if one of the hotspots only shows up if some condition is true. It can be used to simplify certain Choose()-scenarios. An example would be:

Code: Select all

// The second area is only shown if "test" is greater than 3.
AddArea(...);
if (readVar("test") > 3) { AddArea(...); }
AddArea(...);

// Or in a bit more condensed form:
AddArea(...);
readVar("test") > 3 && AddArea(...);
AddArea(...);


[sylakone2]

It's all good Soulmate I have begun rewriting it.
It's much less complicated now lol.

I also Really like the images feature it helps a lot.
I have been using if for all of my pages since I have a day night cycle in my images.
Before I had to make multiple pages depending on the time now I have one page with all the required imagemaps which switches the image depending on the game time.
I really wish I had these features when i begun lol but am very greatful they are here now.
Here is a bit more detail on it.
You can put down a list of different images to be used on the same page and then apply show if restrictions so only the picture required at the time is shown this has changed the way I am doing Model Friends.

Since the Show if command came in to play I am actually re-wrting the game using this different method.
It is reducing my page numbers dramatically as well as almost completely removing the need for check pages which have redirects based on certain variables.

Also another good feature is the Random feature you set up a page which points to multiple pages and then randomly selects one of them when you play the game.
I have used this to randomize the replies the character gives which I think reduces the monotony of the Life sim kind of game that I am modelling Model friends on.

Cheers

Sy

[SoulMate]

I'm starting to think about implementing the next feature for WBA.
Which feature do you need the most?

1. A sound system (background, voices, system sounds)
2. Animated images (loop, pingpong, mouse triggered)
3. Translations
4. Something else...

[sylakone2]

Hi Soulmate

At the moment I can't think of anything I need yet.
Although the animation options is a good idea.
Maybe a background and foregound image so like the way renpy and other interactive novel engines deal with graphics.
Just a thought.

Cheers

Sy

[tlaero]

SoulMate, I get a ton of benefit out of the jpg animations in AC. They're considerably more beneficial to my games than sounds were. I'm working on Translations now, and that's worthy, but you'll get more bang for your buck with freeing your users from animated gifs.

Tlaero

[tlaero]

Question about WBA "show if." What's the user (developer) interface for it? Does the developer add a variable and a value, and the condition happens if the variable is greater than or equal to the value (kind of like the AC "Choose" function), or is there the option to do more complex conditions? If more complex, what syntax do you expose for the condition?

Thanks,
Tlaero

[sylakone2]

Hi Tlaero here is an example

You can basically add as many variables with different checks as you like.

Here is a basic one from within the build.html interface.



Cheers Sy

[tlaero]

Thanks Syl, that's pretty cool. It doesn't really fit in my ui, but I've been thinking about the concept of adding a "condition" box to the areas and letting people add a function to it. The idea being that the function returns true or false and the hit target doesn't show if it returns false. That would let you write a function that did as many conditions and things as you'd like. It also solves the problem for me that I tend to use bitpacked events rather than variables, so I need the flexibility.

I can see that a condition function that you have to write isn't as good as WBA's show if, though.

What else can show if change? I believe you've said it works on the picture and the hit targets. Anything else?

Tlaero

[SoulMate]

It also works on title texts above the image and the response choices below the image, so practically everything shown on the page.

I'll definitely look into the animated images.
I'm not sure how to implement it in the current WBA, but i'll think of something.
Tlearo, what animation options does AC have which are used regulary?

[tlaero]

Here's how animations work in AC.
I require that the picture names follow this naming scheme.
The name of the first image can be anything you'd like.
The name of the next frame, is the name of the first with a "1" at the end.
The name of the next is the name of the first with a "2" at the end.
So, if the first image is bar2a.jpg and there are 5 frames total, they're bar2a.jpg, bar2a1.jpg, bar2a2.jpg, bar2a3.jpg, and bar2a4.jpg.
We've settled on the convention that animations end in "a" (bar2a.jpg) because it's confusing if they end in a number (bar2.jpg, bar21.jpg, bar22.jpg...)
(If you use the same naming scheme, then our users will have an easier time switching back and forth between our tools.)

The AC UI has the following options.
A "number of frames" box (if not set or 0, no animation)
A "timeout" box (milliseconds between frames, can be set to 0 for mouse control animations)
A "loop" checkbox
A "reverse" checkbox
and a "ping pong" checkbox

I support all 8 combinations of the 3 checkboxes (and I've used all 8 of them).

Most of the code for doing this is in the _functions.js in the AC distribution, especially the AdvAnim function. You're welcome to lift it wholesale if you'd like. (And, if any of it doesn't make sense, don't hesitate to ask.)

Tlaero

[Super]

Can you have it so that it checks all the pages and outputs a list with all of the pages that don't currently have images? Would make it easier when figuring out which ones we may have missed and which ones we still need to do.

[SoulMate]

I'ts been a while i updated WBA, but a few days ago i had some time to improve WBA.
I also had some unreleased updates locally, therefore the big version gap.

Highlights
- Added the ability to animate images by using multiple .png of .jpg files
- Added clickable overlay icons, which acts almost the same as image_maps
- Basic ability to write own plugins with: WBA.registerPlugin(name, plugin_code)
- Added image preloading for faster page transitions on slow connections
- Title teksts and images map descriptions are converted to SVG text to allow better text outline

Animation options


SVG tekst with outline


Overlay icons


Changelog
Update V2.2
- Added support for animated images

Update V2.3
- Added support for clickable icons in extend to image maps

Update V2.4
- Splitted the core code into a Plugin based system and WBA.registerPlugin(name, plugin_code)

Update V2.5
- Fixed several modules broke after the migration to the Plugin based system
- Added Ubuntu as default font
- Added image preloading. Load all the image of all possible next pages to increase page load speed on slow connections
- Transition to svg text with outline possibilities
- Image maps without rectangles, but with mouse label
- Menu slightly improved
- Achievement plugin slightly improvements
- Deleted old <map> behaviour
- Temporary disabled broken debug option: 'find all paths'

Download V2.5 here
https://mega.nz/#!SMtnXRpR!a5yIkd7w0uCYC-brLOE3IUu0lBxTPXRW0BVXMIavBrk

How to update from older versions
1. Be sure to make a backup of your old code.
2. Extract the V2.5 zip
3. Copy all the file from the zip to your game directory EXCEPT: custom.js, custom.css, data.js
It's important to keep those file of your own or you'll lose all modifications