I thought that NB Studio should take full ability of Multimedia, unlike Wick, which fails at even SVGs. What i’m getting to is a crazy.
Yes, i’ll try to add Video Encode, Decode and video playing in a “game engine”.
There’s a lot of documentation of the Macromedia Director file formats, so something like this wouldn’t be completely impossible… just really hard.
As for the nbs file format, all you need is a simple rename of the file extension from wick to nbs… just saying 
FFMpeg Support built-in!
geez, might as well make this a standalone program… or maybe find a way to make ffmpeg into JS yourself… you seem to know what you’re doing!
As for the UI, I think I could help. That’s what I’m pretty good at!
Some guys randomly decided to make a FFMpeg port for the web! (2010)
Some guys randomly decided to make a FFMpeg port for the web! (2015) and it’s using WebAssembly!
Some guys randomly decided to make a FFMpeg port for the web! (2020) and it’s using WebAssembly!
cough cough
Thank the W3C gods for making WASM.
What in the unfinished buggy wikia site i found:
Note, the Scripting part took at least one hour… 
MMEncode(images: ImageData[], audio: Audio, framerate: number): Blob, do encode images and audio into video using FFmpeg.MMDecode(video: Blob): [ImageData[], Audio] to decode video to images and audio.WickVideo: Basically a WickObject with special video powers.@loadVideo, which uses MMDecode to make a timeline with all the videos’ frames as images.@currentVideo, a string ref to the video being played currently.The scripting in legacy wick is not usable. Even myself, could not figure, what are these scripts doing?
So, to improve the problem, I’ll rewrite the whole scripting framework in Wick Editor.
javascript (.js) to coffeescript (.coffee), making most scripts easier:// Example JS script.
var mySecret = random.uuid4();
var myObj = {
secret: mySecret,
name: "someObjectImUsingLater",
script: "function click(){ alert('peekaboo!') }",
someVectorData: new VecData generatedDataFromEarlier...,
position: new Vec2(100, 100)
};
console.dir(myObj); // the syntax to force-log as a object.
function myFunction(...props) {
for (var i=0;i<props.length;i++) {
alert(props[i]);
}
}
myFunction("Hello", "World!")
Now the Coffee Script version:
# Example CoffeeScript Script
mySecret = random.uuid4()
myObject =
secret: mySecret,
name: "someObjectImUsingLater",
script: "function click(){ alert('peekaboo!') }",
someVectorData: new VecData(generatedDataFromEarlier...),
position: new Vec2 100, 100
console.dir myObj # the syntax to force-log as a object
myFunction = (props...) ->
for prop in props
alert prop
return # lil' hack so the code doesn't generate a return here.
myFunction "Hello", "World!" # call function test
which generates:
// Example CoffeeScript Script
var myFunction, myObject, mySecret;
mySecret = random.uuid4();
myObject = {
secret: mySecret,
name: "someObjectImUsingLater",
script: "function click(){ alert('peekaboo!') }",
someVectorData: new VecData(...generatedDataFromEarlier),
position: new Vec2(100, 100)
};
console.dir(myObj); // the syntax to force-log as a object
myFunction = function(...props) {
var i, len, prop;
for (i = 0, len = props.length; i < len; i++) {
prop = props[i];
alert(prop); // lil' hack so the code doesn't generate a return here.
}
};
myFunction("Hello", "World!"); // call function test
Objectively, CoffeeScript is easier, and more helpful on coding- wait… I forgot about the class syntax, silly me!
# Class Creation Speedrun %ANY%
class Position
# the @val tells it to do the boilerplate of this.val = val.
constructor: (@x, @y) ->
toArray -> [@x, @y]
class Player
constructor: (@name, pos) ->
@pos = pos if pos instanceof Position
Which translates into:
var Player, Position;
Position = (function() {
class Position {
constructor(x, y) {
this.x = x;
this.y = y;
}
};
toArray(function() {
return [this.x, this.y];
});
return Position;
}).call(this);
Player = class Player {
constructor(name, pos) {
this.name = name;
if (pos instanceof Position) {
this.pos = pos;
}
}
};
Also, if you’re still reading through my walls of transpiled code, thanks!
Scripts shown here will all be in CoffeeScript from now on…
# old way
editor = wickEditor or wickPlayer
editor.runScript mainFactory, "create",
create: "Firey",
amount: 50,
callInit: true
# new (proposed) way
@run "create", #local way
create: "Firey",
amount: 50,
callInit: true
# Global Way
editor = wickEditor or wickPlayer
editor.run mainFactory, "create",
create: "Firey",
amount: 50,
callInit: true
I could go creating more things, but just these two improve scripts by a lot.
I’m also gonna compare NB Studio with CT.js, a free game engine, with some CoffeeScript. I’m choosing a simple game to recreate, but almost impossible with legacy wick!
I’m gonna build a space invaders clone real quick!
I’m importing my docs for wick editor, but… ummm… Let me show what the AI generated with it’s files…
Here’s how you can make a clip draggable:
onMouseDown , onMouseMove , and onMouseUp .let isDragging = false;
let offsetX = 0;
let offsetY = 0;
this.onMouseDown = function(event) {
isDragging = true;
offsetX = event.x - this.x;
offsetY = event.y - this.y;
}
this.onMouseMove = function(event) {
if (isDragging) {
this.x = event.x - offsetX;
this.y = event.y - offsetY;
}
}
this.onMouseUp = function(event) {
isDragging = false;
}
onMouseDown : When the user clicks on the clip, it starts tracking the position.onMouseMove : As long as isDragging is true , the clip follows the mouse.onMouseUp : Stops the dragging when the mouse button is released.This should allow your clip to be moved around the canvas with the mouse! 
Let me know if you need modifications or additional features like constraints (e.g., keeping it inside a certain area).
It’s starting to get it. But geez! This another level of wrong…
WebAssembly sure does look promising! If this was in Wick Editor, it’d be pretty awesome.
I need immediate help, as my instance of git has initiated death upon it’s premises!
Guys, I kinda hacked my way to make a push, I now have 2 commits!
if you don’t like it, why do use it?
It’s not ready yet. Wait some (maybe too much) time for me to bother to update the thing.
It’s been some time since I said about what changed in NB Studio… I’m here to show the new workflows and stuff.
The old method that was used to import the JS was, quite literally, importing every single file from the HTML. So I used my favorite (and easiest to implement) Build library, gulp!
I did a simple job to run the files, which is:
./dist
libs.js file (minified, too.)engine.js)player.js)If you didn’t understand, here’s the Gulpfile.
// Gulpy gulpy!
var [gulp, coffee, concat, uglify] = [require("gulp"), require("gulp-coffee"), require("gulp-concat"), require("gulp-uglify")]; // big hack cuz it's easier to do it this way.
var {src, series, dest} = gulp;
var del = require("delete");
function clean(cb) {
del(["dist/*.js"], function(err, deleted) {
if (err) {
cb(err)
} else {
cb()
}
})
}
function engine(cb) {
// Engine function's tasks:
/*
- take all the files from .src/project/*.js
- Uglify it (improves performance by some amount... Also makes debuging impossible without maps.)
- Concat it into one file (better load on the network?? idk man)
- return it.
*/
src("./src/project/*.js")
.pipe(uglify())
.pipe(concat("engine.js"))
.pipe(dest("./dist"))
cb();
}
function editor(cb) {
// Takes all of the editor code to match into one file.
// TODO: Redo Editor, so it isn't one of the WORST codebases to mod.
src("./src/editor/**")
.pipe(uglify())
.pipe(concat("editor.js"))
.pipe(dest("./dist"))
cb();
}
function player(cb) {
// Same thing. Player JS now!
src("./src/player/*.js")
.pipe(uglify())
.pipe(concat("player.js"))
.pipe(dest("./dist"))
cb();
}
function lib(cb) {
src("./lib/**.js")
.pipe(uglify())
.pipe(concat("libs.js"))
.pipe(dest("./dist"))
cb()
}
exports.default = series(clean, lib, engine, editor, player)
I’ve been hyping up changes, but I got snapped back into the reality:
DARN! This is old as heck!
The new direction is to upgrade everything, and then optimize.
These are the things I’m going to try in the future.
jQuery -> PreactIf the plugin system gets good, the engine might not need updates through the code.
I’m done. That’s all for now.
Stats Roundupstyles.css lines: 3263 lines (considering whitespace)engine.js lines: 12 (minified)libs.js lines: 58 (minified)player.js lines: 4 (minified)
The editor is partially broken, and i’m working on updates.
Since I can’t get UI to work anymore, I’m replacing the editor, and it’s jQuery requirement.
