RenJS

HTML5 Visual Novel creation made easy and free · By lunafromthemoon

Add to collection

tool Community Devlog

RenJS community

About a story variable result to be dynamically inserted into an html tag value

A topic by Lapinay created Apr 14, 2019 Views: 427 Replies: 10

Viewing posts 1 to 9

Lapinay6 years ago (3 edits)

My question may sounds peculiar, but let says i have the following in index.html :

<div id="container">
  <canvas id="myStats" width="600" height="100"></canvas>
  <div id="overlay">This div is over the canvas <div data-component="modal" data-ui="stats" class="middle vertical align-center">
    <b>Stats</b>
    Intelligence:
    <meter id="intel" value="O" max="100" data-stat="intelligence"></meter>
    Love:
    <meter value="0" max="10" data-stat="love"></meter>
    Attractiveness:
    <meter value="0" max="10" data-stat="attractiveness"></meter>
</div>

Each metter tag displays a jauge.

Then i have a command in the story to call a button. On click this DIV appears. I've tested that part, it works.

In my story, i have a score.

But, if I need to replace the value of a <metter> tag with a number from a score variable in the story, why should I do ? Is it even possible ?

I work on this approach because i prefer working with html and CSS for modal window and other stuff that i can put over the game canvas.

lunafromthemoonDeveloper6 years ago

Hey Alix, it should be fairly easy. RenJS creates a global object called RenJS, which contains everything about the game. When you set a variable in game, it is stored into this global object, specifically here: RenJS.logicManager.vars

This is a map that contains all of the variables, and you can access it from wherever you want, be it in game or from any javascript you have. What's more, if you add variables to this map externally (let's say, you have an input and save its value into RenJS.logicManager.vars.myInput, then in game you can call this variable as you would normally do with {}.

I'm not sure I'm explaining myself too well, but let me know if you need to know more about this. The last part of this doc (https://lunafromthemoon.github.io/RenJS/actions/call/) has a list of things you can use to interact with the game from outside (or inside).

Lapinay6 years ago (1 edit)

I understand the magic behind RenJS.logicManager.vars :)

So i have to do something like

 <meter id="intel" value="{MyVar}" max="100" data-stat="intelligence"></meter>

But when it comes to the add some JS in the CustomContent.js file, using RenJS.logicManager.vars i am a bit lost. Would you know a tutorial somewhere to do a similar thing or could you explain, i am a newbie in JS .

lunafromthemoonDeveloper6 years ago (1 edit)

Let's say you have want to update your score. You would have to use the "var" action, and then call a custom function with "call", to update your GUI. something like this

  - text: You win one point!
  - var score: "{score} + 1" 
  - call updategauges:

Then, in the CustomContent.js, you need the function updategauges, something like this (if you're using jquery):

RenJS.customContent = {
	updategauges: function () {
	  var score = RenJS.logicManager.vars.score;
          $("#intel").val(score);
	  RenJS.resolve();
	}
}

This would update your "intel" meter. If you need to animate it, change the color according to the value, etc, you should be doing it in this function. And of course, when you start your game and all your gagues are in their starting value, you should call this function too so you see them.

Hope it helps!

Lapinay6 years ago

 <meter id="intel" value="{score}" max="100" data-stat="intelligence"></meter>

So i just add {score} in the html like above ? Then in the story, I just add a valuer to the score using - var score: "{score} + 1", but what should i do in the the custom file in JS to make it work ? Did i need do to do something ?

lunafromthemoonDeveloper6 years ago

I was editing my answer, read it now.

Lapinay6 years ago (1 edit)

Thanks. This is in my story, showStat is a button that displays the DIV where <meter> is, over the game canva. When i add call "updategauges" function the game freezes and don't read the next function showStat.

- text: You win 59 point!
  - var score: 0
  - var score: "{score} + 59" 
  - text: "You score is {score}"
  - text: Let's see stats graph
  - call updategauges:
  - call showStat:
      title: Stat

lunafromthemoonDeveloper6 years ago

Is there any error in the console when it freezes? Play it with the browswer console and you should see it in the console tab. Once we know what's the issue we can fix it.

Lapinay6 years ago

I did play until freezing, that's the screenshot :

lunafromthemoonDeveloper6 years ago

I can't really see what could be the problem, are you loading the Jquery library correctly? If you don't have it, then it can't execute.

Lapinay6 years ago

My bad, you were right. I forgot to load JQuery ! Thanks it works perfectly now !

itch.io

RenJS

About a story variable result to be dynamically inserted into an html tag value