Sunday, January 5, 2014

That's a Novel Script

I revisited my old library NovelScript.js and realized how bad it was. No wonder nobody wanted to use it. It was insanely opinionated and had a terrible plugin system. I set out to fix these things a few days ago, and here's what I came up with.

(Note: I'm not necessarily advertising NovelScript more than I am sharing my design philosophy.)

I wanted something to give my Visual Novel a backbone, so I made a list of things I would need to create it myself:
  1. An event engine that gave me a bit more control than the native one
  2. I need some standard events
  3. Some standard way to load images, sounds, and music
  4. A good way to expose the DOM to me to make it feel more like an HTML app
  5. A really good mixin/plugin engine that enclosed functionality using functions
  6. A couple standard draw functions
  7. Abstracted audio functions

What I did instead

I made sure that I wasn't reliant on anything except Composer.js which became the plugin engine. It allows the developer to extend NovelScript in a very meaningful way that didn't impede on the developer.

Events


I grabbed a small event engine and learned how it worked, then redesigned it to contain "Default" events that ran after the event stack ran. For instance: if I trigger "page:draw", I would want the function that actually draws the page to be the "default" one instead of one the other events on the stack. Setup events should not actually draw on the canvas.

Images


I wanted a way to expose the DOM api and use mixins to define image elements inside of the options config. A simple JSON Config looks like this:



On top of this, I added the ability to load images on demand, and an event that fires when all images are done loading.

Those options match up to the dom api, including the styles. When using the default draw functions, it will actually calculate the width/height of the image using the dom api if those values aren't specified.

Extending NovelScript? Hell yes.


Changing the way every NovelScript object works is as simple as adding a closure using Composer.js.



I also wanted to add some play/stop/pause functions to handle my audio.

All in all, I took a really holistic approach and made the API have a really conventional opinion on how to do things. I hope this helps you make your Visual Novel work well! Remember that no matter what you want to do on the web, you still are coding in Javascript, and you should work with what you have.

Good luck!
~function(){console.log("Josh");}();

posted from Bloggeroid

No comments:

Post a Comment