DialogueSystem.js 2.1.1f

• Fixed bug w/ text animations' property finding
• NamedArrays now returns undefined instead of { } when an item can't be found

DialogueSystem.js & Time

This update makes the game based update loop even better!
Which introduces...

V-Sync

You either love em or hate em.
It is now possible to use the user's display's refresh's rate.
Yes this is enabled by default ;))))

Of course you can change it by the DialogueLoop.vSyncCount property.

"Unlimited" FPS

Makes the system run as FAST as possible.
Done by DialogueLoop.targetFrameRate = -1
Also enabled by default
(Learn more here)

Note

You cannot use DialogueLoop.targetFrameRate with V-Sync on.
You can only choose one.

's

DialogueSystem.js Version 2.1f

DialogueSystem.js Now @ Version 2!!!

IT'S BEEN 2 YEARS... (and 8 months since the actual release of v2 lol)

And because of that, we got 2 years of features added to the former dialogueSys.js plugin! (I guess from a 14-16 yr old's standpoint)
In fact, this is no longer an update. It's an entire revamp of the system, made to be better than my old garbage code.

Accessibility

The plugin is way easier and less of a headache to use.

Compared to the last version, less spaghetti.

Other than that, there's now ✨Documentation✨.
This makes the plugin easier to work with, complete with segmented tutorials, fun examples and microstories.

Animations

Animations are now stable!
This update also introduces a BUNCH of features for animations.
Like states, css, math and code-based animations. And best of all, actual workable text animations.

(Learn more here)

Portraits and Audio

Resources are now preloaded on creation. Cached, ready to be reused.
You can now load multiple resources at once.
(Learn more here)

Portraits can now be switched to the left or to the right.
(Learn more here)

You can now modify the audio's volume, pitch, and how frequent it plays.
You can also play it outside of sequences.
(Learn more here)

Events

Unlike back then, you can now listen to events and sequence with it.
And you can finally wait for resources to load before starting your sequences.
(Learn more here)

Performance

Way faster and more reliable frame updates.
We used an update loop designed for games, which is great for having constant updates between frames.
Less jitter!

INTRODUCING

(OG meme)

(Learn more here)

Control

You can have way more control of the plugin without touching the source code.
You can modify a TON of variables to your liking.

Power & Extensibility

Other than plugin control, you can do whatever the heck you want without placing your head into the source code.
Almost everything is extendable and modifiable.
You can even ignore the plugin's intended purpose and use it for something absolutely different.

Other Changes

• Styles are now easier to work with
• Directories and file paths are now easier
• Configuration is now better
• Bug fixes lol

Start Using DialogueSystem.js!

• Website
• Installation
• Templates

Documentation

• Manual
• Scripting Reference

DialogueSystem.js Version 2f

Overall Update

Minor dialogueSys.js Update 1.3.21f

Change Log

• dialogueSys object parameters 2(blockedText) and 3(characters) can now be set to null

LICENSE Update

I forgot to add that people who are going to use the plugins I made for them don't need to credit me or use the license

Major dialogueSys.js Update 1.3.20f

Change Log

• remade the typeOnBox system
• line break prediction (kinda)
• text style can now be changed

Code:

// variables are assigned the same way
// as css style attributes
// 
// dialogueSys.textColor = color
// dialogueSys.textBg = background
// dialogueSys.textStyle = font-style
// dialogueSys.textWeight = font-weight

diaSys.clearBox();

diaSys.typeOnBox("You can now use ", 1, "claire", "Happy", () => { diaSys.textColor = "yellow"; });
diaSys.typeOnBox("color, ", 1, "claire", "Happy", () => { diaSys.textColor = "#f0f0f0"; diaSys.textBg = "linear-gradient(red, orange, yellow, green, blue, indigo, violet)"; });
diaSys.typeOnBox("background", 1, "claire", "Happy", () => { diaSys.textColor = "inherit"; diaSys.textBg = "none"; diaSys.textStyle = "italic"; });
diaSys.typeOnBox(", style ", 1, "claire", "Happy", () => { diaSys.textStyle = "normal";});
diaSys.typeOnBox("and ", 1, "claire", "Happy", () => { diaSys.textWeight = "1000"; });
diaSys.typeOnBox("weight " , 1, "claire", "Happy", () => { diaSys.textWeight = "normal"; });
diaSys.typeOnBox("in text.", 1, "claire", "Happy");

• text characters can now be manipulated individually

Code:

// Every text characters are in a span which can be
// manipulated
// 
// The element has an id of `dialogueSysChar_${charIndex}`
// charIndex defines a count of characters from start to end
// charIndex starts counting from 0
// 
// The element can be simply get by using
// document.querySelector

diaSys.typeOnBox("Welcome to ", 1, "claire", "Happy", () => { diaSys.textColor = "red"; });
diaSys.typeOnBox("Hell", 1, "claire", "Happy", () => {
    
    // Magik starts here
    
    // We set an array of the elements/chars we will use
    var chars = [
        document.querySelector("#dialogueSysChar_11"),
        document.querySelector("#dialogueSysChar_12"),
        document.querySelector("#dialogueSysChar_13"),
        document.querySelector("#dialogueSysChar_14")
    ];
    
    // For each variable in chars
    for (let i = 0; i < chars.length; i++)
    {
        // We need to set the display to inline-block
        // because inline element cannot be animated
        chars[i].style.display = "inline-block";
        
        // Add the animation
        chars[i].style.animation = `shake${i} 0.12s infinite`;
    }
});

• functions now ONLY run when another function from the same object is not active (this means functions are now queued(example can be seen on previous examples))
• less horror code (usually spaghetti code)

Before:

After:

Credits

• styles in example from SpiritAxolotl's Cool Site
• sprites in example by Temmie Chang from their cool game Dweller's Empty Path which can also be found in SpiritAxolotl's Site
• font used in example by Temmie Chang from Dweller's Empty Path. Remade from bitmap to font formats by SpiritAxolotl which can be found here