Web Based Adventure (WBA)

Tips, techniques and tutorials about creation tools.

Re: Web Based Adventure (WBA)

Postby Super » Tue, 14Aug05 18:53

So Sy said this was good so I wanted to try and test it out.

Unfortunately, I can't seem to figure out how to make a new page... heh.
Super
legend of the South Seas
 
Posts: 545
Joined: Wed, 11Aug24 20:59
sex: Masculine

Re: Web Based Adventure (WBA)

Postby SoulMate » Tue, 14Aug05 23:00

@superawesomemans
new pages are created automatically. Just create a response, redirect or image map. Fill the new pagename into the "page" field. And voila, a new page is created.

I'm also working on a new version which includes the (awesome) ability to drag and drop all your images in the editor.
It creates a new page for every image (if the image is not used before).

This version is ready to deploy, just had no reason yet to upload it.
Ill upload it a.s.a.p so you can test.

I'm also working on a pathfinder script (available debug.html).
This script tends to find all the possible paths in the game.
Its an expensive task to do, but can be really handy.
I'm currently testing the script on your Inspiring Celina game.
It found already 600 different paths in 5 different endings (e.g. 28 paths to theend.html, 190 paths to theend1.html) and still not found them all.
The script stops after 10.000 unique pages/states because of performance issues.
Ill PM you about that one ;-)


If you have any other question, feel free to ask.

SoulMate
SoulMate
great white shark
 
Posts: 79
Joined: Wed, 14Apr23 17:56
sex: Masculine

Re: Web Based Adventure (WBA)

Postby TeineWolf » Thu, 14Aug07 07:00

I've been off for awhile dealing with some personal, real life, situations. Now I am back to try and be annoyingly helpful. Is this project still in progress?
User avatar
TeineWolf
lagoon predator
 
Posts: 178
Joined: Thu, 13Aug15 23:58
sex: Masculine

Re: Web Based Adventure (WBA)

Postby SoulMate » Thu, 14Aug07 09:29

Yes, the project is definitly in progress. Making progress every week.

As stated in my first post:
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 also looking for feedback from game developers. What are they running into, what could be done easier or quicker.

So, if you're here to help, i would be very thankfull!!
SoulMate
great white shark
 
Posts: 79
Joined: Wed, 14Apr23 17:56
sex: Masculine

Re: Web Based Adventure (WBA)

Postby SoulMate » Fri, 14Aug08 13:47

And there it is. Version 1.7 with image drag and drop, automatic path finding and autocomplete on page and variables fields.

Feedback is welcome!
SoulMate
great white shark
 
Posts: 79
Joined: Wed, 14Apr23 17:56
sex: Masculine

Re: Web Based Adventure (WBA)

Postby sylakone2 » Sun, 14Aug31 03:02

Hey Soul

Something I have been trying to do for a while but never really worked out how to do it.

I don't know if you have played any of Chaotics later games.
One of the features he has on his games is that he shows a graphic version of the time, influence, and lust variables in his games on every page.
I really only want the Time variable graphically shown on ever page either with a digital graphic or analog face that can be decided later just not sure how to do it in WBA.
Any ideas?

Cheers

Sy
Cheers Sy
User avatar
sylakone2
lagoon predator
 
Posts: 224
Joined: Mon, 12Jan09 13:08
Location: Australia, SA
sex: Masculine

Re: Web Based Adventure (WBA)

Postby SoulMate » Sun, 14Aug31 20:26

Hi Sylakone2,

I posted an axample a few versions ago.
I'll explain the code below in this post.

SoulMate wrote:Version 1.5 is released. See the first post for changes and download link

@sylakone2
I'm working on an API for custom behaviour. Display stats could benefit from it, because its hard to create a 'general purpose' interface.
An example of displaying the user's name in the stats DOM element is shown below (paste it in custom.js).
The div can be styled within custom.css, so its totally up to you what you want to show.
The interface updates automatic when the variable changes :-).
If you have any questions,feel free to ask

Code: Select all
(function () {
    'use strict';

    // Create a DOM element for displaying the username
    // This element can be styled with CSS
    var $userName = $('<div class="user"></div>');

    // When the game is loaded
    WBA.on('init', null, function () {
        // Add the username to the stats element
        WBA.getDomElement('stats').show().append($userName);
    });
    WBA.on('varChange', 'user', function () {
        // When the username changes display the name in the DOM element
        $userName.text(WBA.readVar('user'));
    });
}());


Explanation:
Code: Select all
(function () {
    ...
}());

Wrap all the code within your own scope.
This way your variable names won't collide with any other variable names within the same page.

Code: Select all
    'use strict';

Use the javascript strict mode. Not nessecairy, but makes catching errors in your script easier.
Full explanation:
http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/.

Code: Select all
    // Create a DOM element for displaying the username
    // This element can be styled with CSS
    var $userName = $('<div class="user"></div>');

Creates a DOM element (I.E. some custom html in the game) and saves it into the variable $userName.
This code is executed once while the game is starting. At the moment of creation its not attached to the webpage (we'll do this later).
It uses jQuery ($) to create the element.

Code: Select all
    // When the game is loaded
    WBA.on('init', null, function () {
        // Add the username to the stats element
        WBA.getDomElement('stats').show().append($userName);
    });

The WBA object is the game engine. You can interact with this object to create custom behaviour.
The WBO.on() function listens to changes in the engine. In this case it listens to the 'init' (first parameter) event, which is fired when WBA is ready to customize.
The null parameter are the options, but its not used on the init event.
The last parameter is a function itself. This is the function that is executed when WBA sends the init signal.
Now we ask WBA to get the dom element named 'stats'. Its an element in the top-left corner (default, can be changed with css).
Next we show the 'stats' portion of the page to the user (it's default hidden, because there no stats visible by default)
Next we append $userName (your own username div, which is empty thus still not visible)


Code: Select all
    WBA.on('varChange', 'user', function () {
        // When the username changes display the name in the DOM element
        $userName.text(WBA.readVar('user'));
    });

Next, we need to listen to changes in the username, and display the changed in the username to the player.
Again we use the WBA.on function, but this time we listen to the 'varChange' event.
This time we only want to listen if the 'user' variable changes. Were not interested in the other variables. So we put 'user' as our second parameter.
The thirth parameter is again the function that is executed each time the user variable changes.
Within the function:
$username.text() changes the text inside de user DOM element in the stats element in the top-left corner of the image.
Inside the text() is another WBA call. In this case WBA.readVar('user') which reads the user variable and returns the value of it. The value is inserted as the text.
With CSS the dom element can be styled so it looks seamless with the game looks.

All this code van be put in the custom.js file.

If you want to add more code. Remember that the (function () { }); , 'use strict'; and the WBA.init(); should be only once in the file. You can have multiple WBA.on('changeVar') events to listen to multiple variable changes.

A bit more ontopic to your question:
If you want to display the time as an image, you can create a var, for example 'time' and create .png files with clock_1.png, clock_2.png etc.
Change the varChange event as follows:
Code: Select all
    WBA.on('varChange', 'time', function () {
        // When the time changes, display the image with the right time
        $userName.html('<img src="img/clock_" + WBA.readVar('time') + ' />');
    });

And the $userName variable can be changed to $clock.


My english is not that good, but i hope you get the point.
If you got stuck, plz let me know :-)


SoulMate
SoulMate
great white shark
 
Posts: 79
Joined: Wed, 14Apr23 17:56
sex: Masculine

Re: Web Based Adventure (WBA)

Postby sylakone2 » Mon, 14Sep01 12:28

Hi Soul

Thanks for all the info.
I was able to get the text version to show unfortunately I cant get it to show the picture.
Once I change the varChange event to the picture code you sent me it shows nothing.
Here is my Custom.js

function showname()
{
document.getElementById('name').innerHTML = name;
}

(function () {
'use strict';

// Create a DOM element for displaying the username
// This element can be styled with CSS
var $clock = $('<div class="user"></div>');

// When the game is loaded
WBA.on('init', null, function () {
// Add the username to the stats element
WBA.getDomElement('stats').show().append($clock);
});
WBA.on('varChange', 'time', function () {
//When the time changes, display the image with the right time
$clock.html('<img src="img/clock_" + WBA.readVar('time') + ' />');
});
}());


I have the images in the img folder.
and I have named them clock_1.png etc.
In the builder I have the variable time set to 0 in the _begin page then the next page which is intro2 I have the variable time changed to 4.

Do I need to make any changes to the css?
What am I doing wrong?

Cheers

Sy
Cheers Sy
User avatar
sylakone2
lagoon predator
 
Posts: 224
Joined: Mon, 12Jan09 13:08
Location: Australia, SA
sex: Masculine

Re: Web Based Adventure (WBA)

Postby kexter » Mon, 14Sep01 13:46

I can see at least one typo in your code.
If you replace the following
Code: Select all
$clock.html('<img src="img/clock_" + WBA.readVar('time') + ' />');

with this
Code: Select all
$clock.html('<img src="img/clock_' + WBA.readVar('time') + '.png" />');

does it make any difference?
@kextercius
User avatar
kexter
Moderator
 
Posts: 214
Joined: Sun, 13Dec29 11:01
sex: Masculine

Re: Web Based Adventure (WBA)

Postby sylakone2 » Mon, 14Sep01 23:19

kexter wrote:I can see at least one typo in your code.
If you replace the following
Code: Select all
$clock.html('<img src="img/clock_" + WBA.readVar('time') + ' />');

with this
Code: Select all
$clock.html('<img src="img/clock_' + WBA.readVar('time') + '.png" />');

does it make any difference?


Thats worked!

Thanks heaps kexter.

Cheers

Sy
Cheers Sy
User avatar
sylakone2
lagoon predator
 
Posts: 224
Joined: Mon, 12Jan09 13:08
Location: Australia, SA
sex: Masculine

Re: Web Based Adventure (WBA)

Postby Super » Thu, 14Sep18 13:16

So I've finally started on my next game, and Sy recommended this.

So I was making a few pages, going a bit ahead of what images Sy had... and it seemed like they disappeared? Like, thee pages without images and only title text. Do we need the images as soon as we make the pages? Because that might be a problem with planning ahead...

EDIT: Yeah, nevermind, for some reason I didn't think I had to save. Heh

Hm, think you could make the saving feature a bit more intuitive? Having to copy game.js form my downloads (where it will get a (#) on there) is a bit more tricky than it needs to be...
Super
legend of the South Seas
 
Posts: 545
Joined: Wed, 11Aug24 20:59
sex: Masculine

Re: Web Based Adventure (WBA)

Postby SoulMate » Sun, 14Sep21 13:35

@Superawesomemans,

I'm afraid that's not possible.
Webpages do (for security reasons) have no permissions to write to the filesystem.
The only way to put a file on your disk it trough downloads.
If someone knows a hack/exception to this, feedback is welcome.

What i can do is build a quick save, meaning the game could be saved in localstorage (something like cookies).
This way you can save your progress, try it out in the debug/play page.

Once you start deploying, you do a real save by downloading the data.js so its available in other browsers and other users when you upload it to a webserver.

Would that be a solution for u?
SoulMate
great white shark
 
Posts: 79
Joined: Wed, 14Apr23 17:56
sex: Masculine

Re: Web Based Adventure (WBA)

Postby Super » Thu, 14Sep25 00:57

Hm... you can't have the download game.js as a save as? :/
Super
legend of the South Seas
 
Posts: 545
Joined: Wed, 11Aug24 20:59
sex: Masculine

Re: Web Based Adventure (WBA)

Postby Super » Sun, 14Sep28 00:16

Think I figured out a way to make it, although not ideal, acceptable.

Anyway, can you have it so you can alphabetize the pages on the list on the left? At the moment, as far as I can tell, it only is listed in the order you created it, which gets confusing when writing and will probably get more annoying as time goes on... I know there's a search feature but being able to alphabetaize it would be a lot better when trying to figure out which page exactly I'm looking for, when I know it's in a certain area but not the exact number.
Super
legend of the South Seas
 
Posts: 545
Joined: Wed, 11Aug24 20:59
sex: Masculine

Re: Web Based Adventure (WBA)

Postby sylakone2 » Fri, 14Oct10 03:20

Hey Soul

I have sent you a couple of pms but have not heard from you did you receive them?

Cheers

Sy
Cheers Sy
User avatar
sylakone2
lagoon predator
 
Posts: 224
Joined: Mon, 12Jan09 13:08
Location: Australia, SA
sex: Masculine

PreviousNext

Return to The workshop of creators

Who is online

Users browsing this forum: No registered users and 9 guests

eXTReMe Tracker