Web Based Adventure (WBA)

[sylakone2]

Hi Soul

I think that link you put up is for the old vesion when I dled it it still said 1.8 not 1.8.1 and the build.js file had the modified date of 16/10/14 meaning it had not been updated and when I checked after copying the build.js to the old version and opened it there the option in dashboard to disacrd quick save ws not there.

Cheers

Sy

Whoops ;-)
Here is het V1.8.1 link

Hi Soul where is the Link??

Cheers

Sy

[Super]

It's in the first post Sy

I updated the one in the google drive, though

[sylakone2]

Hi Sylakone2,

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

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

Hey Soul or Kexter I cant seem to get multiple variables to show.

How can I achieve this?

So what I am trying to achieve here is something similar to the lopgames as far as multiple stats at the top like attraction to individual girls and stats like cleanliness style, that kind of thing.

Cheers

Sy

[kexter]

I'm flying blind here but it should be something along the following lines:

Code: Select all

(function () {
  'use strict';
  // Say you want to display three different variables, namely health, armor, and ammo.
  var $health = $('<div class="health"></div>'),
    $armor = $('<div class="armor"></div>'),
    $ammo = $('<div class="ammo"></div>');

  // This adds the individual divs for each variable on startup.
  WBA.on('init', null, function () {
    var div = WBA.getDomElement('stats').show();
    div.append($health);
    div.append($armor);
    div.append($ammo);
  });

  // These update the text for each variable if/when they are changed.
  WBA.on('varChange', 'health', function () {
    $health.text("Heath: " + WBA.readVar('health'));
  });
  WBA.on('varChange', 'armor', function () {
    $armor.text("Armor: " + WBA.readVar('armor'));
  });
  WBA.on('varChange', 'ammo', function () {
    $ammo.text("Ammo: " + WBA.readVar('ammo'));
  });
}());


[sylakone2]

Thanks heaps Kexter that sorted it.
Now just go to work out how many I want lol
Also what do you think would be required to say have another block of vars on the opposite side of the window as these stats are on the right in a column.
I was thinking of how I can set up a different group of variables on the opposite side of the page for example the attraction level of each girl in the game.
Would you just set up a different lot of stats say stats 2 in the css and tell it to use stats2 instead of stats for the different variables would that work?

Cheers

Sy

[kexter]

You are on the right track Sy, you would need to add a "stats2"-div, style it so it's on the right-hand-side, and add the vars you want displayed there to that element instead of the original one. After modifying my previous example, it looks like the following.

custom.js (only WBA.on('init', ...) is changed):

Code: Select all

(function () {
  'use strict';
  // Say you want to display three different variables, namely health, armor, and ammo.
  var $health = $('<div class="health"></div>'),
    $armor = $('<div class="armor"></div>'),
    $ammo = $('<div class="ammo"></div>');

  // This adds the individual divs for each variable on startup.
  WBA.on('init', null, function () {
    var div = WBA.getDomElement('stats').show(),
      stats2 = $('<div id="stats2"></div>').insertAfter($('#stats')).show();
    // Build the left-side stats.
    div.append($health);
    div.append($armor);
    // Build the right-side stats.
    stats2.append($ammo);
  });

  // These update the text for each variable if/when they are changed.
  WBA.on('varChange', 'health', function () {
    $health.text("Health: " + WBA.readVar('health'));
  });
  WBA.on('varChange', 'armor', function () {
    $armor.text("Armor: " + WBA.readVar('armor'));
  });
  WBA.on('varChange', 'ammo', function () {
    $ammo.text("Ammo: " + WBA.readVar('ammo'));
  });
}());


With the following added to custom.css:

Code: Select all

#stats2 {
  position: absolute;
  right: 0;
  top: 2.3em;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  max-width: 6em;
  width: 15%;
}


After these modifications "Ammo: ##" should be shown on the opposite side. Of course #stats2 can be styled any way you like.
Also I don't know if WBA has/requires any special way to insert DOM elements, so I just inserted #stats2 after #stats with plain jQuerry in the example - any objections SoulMate?

[SoulMate]

Nice kexter. Its good to see good programmers around here :-)
The jQuery insertAfter is a very good solution. i woudn't have it done better myself.
You seem to really understand WBA and Javascript.

If your interested in contributing to WBA, just let me know :-).

@Sy, i'm starting to be really curious for your new game.
See WBA in action, with a game produced by a great writer.

[sylakone2]

Nice kexter. Its good to see good programmers around here :-)
The jQuery insertAfter is a very good solution. i woudn't have it done better myself.
You seem to really understand WBA and Javascript.

If your interested in contributing to WBA, just let me know :-).

@Sy, i'm starting to be really curious for your new game.
See WBA in action, with a game produced by a great writer.

Well I am actually working on 3 projects lol
All 3 use WBA. One I am doing just the graphics for with Super which is Envying Celina.

The other two I'm working on are my own but I have decided to put one of them on hold for now as it's in the same style as the Celina Games, The Ariane games, and the Chaotic games.
These games require a lot more on the graphics side which is the most time consuming part of these games in my experience.

The one I am working on now which is what I am trying all of these changes to WBA is a game along the lines of the LOP Games.
They are far less graphically intensive but require much more coding which always take much less time compared to graphics.
Which means this game should take a lot less time to produce.

Again thanks heaps Kexter for your coding expertease and thank you heaps soul for a great game engine.

Cheers

Sy

[Super]

Would those two non celina games be the ones you had some concept renders in the supersy drive?

I'd like to get envying Celina out soon but I dunno how long it'll take lol. The first day took 100 pages and I dunno how long the whole thing will be

Oh, small suggestion: mYbe you could have a function that goes through the JavaScript and outputs a text file of all pages that don't have an image? Might be useful in helping fill in blanks

[kexter]

Maybe you could have a function that goes through the JavaScript and outputs a text file of all pages that don't have an image?

If you're comfortable using the js-console (F12 in most browsers) then the following little snippet should do just that (might not work in IE). Just copy-paste it in the JavaScript console and hit enter.

Code: Select all

(function(){var e=[];for(var t in game_data.pages){typeof game_data.pages[t].image==="undefined"?e.push(t):null}window.open("data:text/plain;charset=utf-8,"+encodeURIComponent(e.join("\n")),"_self")})()


Alternatively you could stick "javascript:" (without the quotes) ahead of it, put it in the address bar and hit enter. Either way it should open a simple list of all pages without images. It should work with build.html, index.html, or debug.html.

And if you want something a bit fancier then the following should mark all pages without images in the editor (build.html) with a red border.

Code: Select all

(function(){var e=[],t=$(".list-item");for(var n in game_data.pages){typeof game_data.pages[n].image==="undefined"?e.push(n):null}for(var r=0;r<t.length;r++){for(var i=0;i<e.length;i++){if(t[r].innerHTML.indexOf(e[i]+"<")===0||t[r].innerHTML===e[i]){t[r].style.border="2px solid red"}}}})()


Beware, neither one is fully tested.

[sylakone2]

Would those two non celina games be the ones you had some concept renders in the supersy drive?

I'd like to get envying Celina out soon but I dunno how long it'll take lol. The first day took 100 pages and I dunno how long the whole thing will be

Oh, small suggestion: mYbe you could have a function that goes through the JavaScript and outputs a text file of all pages that don't have an image? Might be useful in helping fill in blanks

One of them lol but that one is the one I am putting on Hold.

The new one is completely different lol.

Oh also Super you can just use the overview option and select it to 8 that is how I can see what scenes do not have pics it makes it very easy. I know it only gives you the next 8 depth of pages that link tp the one you have selected but it is easy to get a visual idea of what needs pics.

Cheers

Sy

[Super]

Hey Soul, new request for next update.

CAn you make an option to copy pages exactly? Sometimes, I have two seperate pages that are almost identical except for a slight dialogue or variable. I can copy and paste all the stuff into the new thing just fine, but it'd be easier to just be able to copy everything in one page and move it to another with the click of a button. Not anything urgent but still

[SoulMate]

Hi Super,
Thx for the feedback. Here's a new version.

Update V1.9
- New Feature: Copy page
- New Feature: Rename page
- Improved feature: Better sorting of the pages in the left sidebar

Upgrade notes (from V1.8):
- Overwrite build.js and build.css with the new files

https://mega.co.nz/#!LcFGGLKY!TC3hKl_dA ... 1ldkugn0f8

[sylakone2]

Thanks Soul

That will definitely come in handy.

Cheers

Sy

[RVR1669]

Returned to WBA, downloaded one of the latest versions, but something has changed in it recognising where the images are, all the images are in the image folder, though the path in the settings is undefined. When I go to "change image" I get the message

The chosen image cannot be found, did you select the image from the game /images folder. If not, move your images to your /images folder and try again.

All the images are in the folder /images in the game, and they are reading them from my previous work so the build is reading the path to the images folder, this problem only happens when I want to add a new image. Haven't found a way round it yet.