Story Log Plugin

  - show room_night: 
  - text: Welcome to the Story Log example
  - text: You can check the story log by pressing the button on the top right corner of the screen.
  - text: If you open it now, you should see the first lines of the game.
  - show deuzi: normal AT CENTER WITH FADE
  - deuzi says: When a character speaks, the story log will record it, and also show who said what.
  - deuzi says: You can see for yourself now, my dialogues should appear with my name.
  - deuzi says: Isn't it great?
  - choice:
    - It does look nice:
      - deuzi says happy: Yes, it looks (color:#FF0055)amazing(end)!
    - But what about styles?:
      - deuzi says: I was just about to tell you about (color:#FF0055)that(end)!
  - deuzi says: If you check the log now, the last line should appear with the same style as you saw it in the message box.
  - var variable: hello
  - text: If you show variables, they will be saved with the value they had at that moment.
  - text: For example
  - text: 'The variable value is {variable}==hello'
  - text: Let's change it now to something different.
  - var variable: world
  - text: 'Now the variable is {variable}==world'
  - text: If you check the log now, the variable will have the expected values.
  - text: This log can show about 11 lines of text at the same time.
  - text: If the log has more than this number, navigation controls will appear!
  - text: You should be able to see those controls if you open the Story Log right now, as a lot of text has been shown already.
  - deuzi says: The Story Log is a plugin, so you can change how it looks completely by modifying it!
  - deuzi says: You can check the code in the plugin tab down below.
  - deuzi says: And that's all you need to know about this cool feature!
  - deuzi says: Ciao!
  - endgame:

In Config.yaml, set keepStoryLog to true.

keepStoryLog: true

In GUI.yaml, add the Open Log button to the hud, and add the assets to use.

    - type: button
      x: 724
      y: 20
      asset: logBtn
      binding: showTextLog
      name: logBg
      fileName: logbg.png
      name: logBtn
      fileName: logbtn.png
      w: 56
      h: 53
      name: logReturnBtn
      fileName: returnbtn.png
      w: 137 
      h: 53
      name: arrowBtn
      fileName: arrowbtn.png
      w: 56 
      h: 45

class TextLog extends RenJS.Plugin {

    log = null;
    text = null;
    maxLines = 11;

    pageUpBtn = null;
    pageDownBtn = null;

    currentPage = 0;
    finalPage = -1;
    pages = []

    onInit() {
        //create log object
        //create phaser group to hold all graphic elements
        this.log =;
        this.log.visible = false;
        //create invisible graphics layer with input enabled so when the log is shown, nothing else in the gui "works"
        const bgLayer =;
        bgLayer.drawRect(0, 0,,;
        bgLayer.alpha = 0;
        bgLayer.inputEnabled = true;

        //create log background centered in the screen            
        const bg =,20,"logBg");

        //create return button, to close the log
        const btnY = 415;
        const returnbtn =,btnY,"logReturnBtn",async () => {
            //hide log with fade (but faster)
            const fade =
   = 150;
   = fade;

            this.log.visible = false;
            this.pages = [];
            this.finalPage = -1;
            this.currentPage = 0;

        //create arrow buttons
        this.pageUpBtn =,btnY,"arrowBtn",async () => {
            if (this.currentPage>0){
        this.pageDownBtn =,btnY,"arrowBtn",async () => {
            if (this.finalPage==-1 || this.currentPage<this.finalPage){
        //flip arrow
        this.pageDownBtn.scale.x = -1;

        // create empty text object where the text will be displayed
        const style = {};        
        style.wordWrapWidth = 640;
        this.text =, 50, "", style);
        //add new action for the text log button['showTextLog'] = async ()=>{
            //update log text, so it will display the last messages first
            //show log with fade in (but faster!)
            this.log.alpha = 0;
            this.log.visible = true;
            const fade =
   = 150;
   = fade;


        this.currentPage = page;
        if (this.pages.length <= this.currentPage){
            if (this.currentPage == 0){
            } else {
        //only show page down button if you're NOT on the last page
        this.pageDownBtn.visible = this.currentPage!=this.finalPage;
        //only show page up if you're NOT on the first page
        this.pageUpBtn.visible = this.currentPage!=0;
        //set page
        const message =[this.currentPage].message,this.text);
        this.text.text = message;

        var lines = 0;
        let finalRawText = '';
        // build the log "page", with a max amount of lines
        for (var i = -1 - offset; i>=0; i--){
            const entry =[i];
            var message = entry.message;
            if (entry.choice){
                message = "    - "+message;
            if ({
                const name =[].config.displayName
                //we'll show the character name in white
                message = "(color:#ffffff)"+name +":(end) "+message;
            //remove any style tag to calculate the wordwrap
            const finalMessage =,this.text);
            const messageLines = this.text.precalculateWordWrap(finalMessage)
            if (messageLines.length + lines > this.maxLines){
                //stop adding lines
            // use the raw message text to build the final message, so it will keep the style tags
            finalRawText = message + '\n' + finalRawText;
        // if the index got to the end of the story log, it's the last page
        if (i==-1){
            this.finalPage = this.currentPage;
            // when you get to the last page, complete the text with empty lines
            for (var j=0;j<this.maxLines-lines;j++){
                finalRawText = '\n' + finalRawText;

        this.pages.push({message: finalRawText, offset: - i});



Return to the Gallery Download from Github