[DevLog] Cwine!

[BigJKO]

So..

 

I started redoing the code for my Public Domain Jam, an interactive comic called Die Sieben Raben (still available here, but dreadfully slow to load)

 

(it's responsive and all!)

 

But it wouldn't be fun to just make a more efficient runtime code for this and call it a day, I'm also making a messily coded, probably inefficient, visual editor for making similar comics.

 

I'm dreadful at naming things, so it's just called Cwine* for now.

 

The editor runs on the web server along with the runtime, just because it felt like a natural choice. That means I'm messing about with lots of EaselJS and shit, which I've never done before. Saving to a JSON file also took me ages to figure out.

 

 

 

But, I now have a simple node setup. Just the panels with speech bubbles for now. Black lines are for when a panel automatically shows a new panel, white dotted lines for when a choice is to be made. It's all hugely messy, but the code is up on github albeit a few days old.

 

My hope is I can get a functional version of this editor finished before the Big Winter Wizard Jam of Jollies, so I can make a new interactive comic for that!

 

TO DO's

• Get that property panel actually working; It is currently not working meaning I can not change any properties (except the position of the speech bubbles and how the panels are linked up)
• Load images from the /img folder, so you can drag and drop new panels in.
• I broke the saving to JSON file, but HOW HARD CAN THAT BE TO FIX RITE?!
• More nodes besides panels (e.g. Random, Condition, etc.)
• Make a comic about toblix

 

*Comic Twine 

[gerbilsinspace]

This looks really cool! I'm very much tempted to make a dumb comic out of this when you are getting closer to ship. I'm really tempted to port this into my murder mystery game for interrogation sequences. If you support gifs, I'm sold.

[Twig]

it's pronounced "swine" for anyone wondering

[BigJKO]

This is coming along nicely! Still haven't implemented any way to.. y'know.. add panels, but SO WHAT, RITE?!

 

 

• Properties for panels and panel elements (bubbles) and the project are now editable in the Property tab.
• Speech bubbles can be dragged around and positioned!! Wut?!
• Branching paths work in the runtime now! And with cool highlight tinting that is probably not supported *at all* in any older browsers!
• Saving/Loading is not broken anymore!
• You still can't add new panels or bubbles, but whatever..
• I still haven't made a story about toblix

So yeah, biggest thing to add now is UI for adding new panels/speech bubbles to the node graph. Then it'll be on par with my jam game last year. Then I can add some cool new nodes to introduce randomness and conditions and such.

[Ben X]

Looks promising!

[BigJKO]

Thanks, I'm also excited about the story of The Cool Town Steak.

[Ben X]

Simpsons did it.

[Dinosaursssssss]

You smell nice.

[Gorbles]

I saw this briefly on Twitter before it was buried in all the other retweets those bots do. Neat stuff!

[BigJKO]

 

Panel and Element adding is in! Now you can drag and drop images from your computer into the Images tab, that can then be dragged into the Node View.

 

It's loading/saving off your local storage (or the best version localForage can find for it) so it's closer to how Twine works. Eventually, it would be nice to have a substitute for it, like Dropbox integration (suggested by toblix The Wise) so you don't risk losing it if you clear your browser's local storage.  And then a "output game .zip" which just outputs a .zip with the game and a clean runtime for it, ready to upload somewhere.

 

I need to update the runtime so it previews your project from the localstorage as well, but at the same time keep a clean version of the runtime that *just* loads a single .json file.

 

Anyway, thanks to gerbilsinspace and toblix the code is now running node.js, browserify, gulp and all that fancy shit!

[gerbilsinspace]

oh man, this looks so good now. Glad I could help!

[matthew]

I have to pronouce it 'swine'? I really dont like that. How abouuuuuuut Comic Twine. Twine for Comics, TwineComics, anything not pig related.

[matthew]

I've never actually used npm at all so I'm not sure if you can help here, but I'm getting this error message when running 'npm install -g gulp && npm install':

C:\Users\MattIshii\Downloads\cwine-master\cwine-master>npm install -g gulp && npm install
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
C:\Users\MattIshii\AppData\Roaming\npm\gulp -> C:\Users\MattIshii\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js
gulp@3.9.0 C:\Users\MattIshii\AppData\Roaming\npm\node_modules\gulp
├── interpret@0.6.6
├── pretty-hrtime@1.0.1
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.2.0
├── tildify@1.1.2 (os-homedir@1.0.1)
├── semver@4.3.6
├── v8flags@2.0.10 (user-home@1.1.1)
├── chalk@1.1.1 (supports-color@2.0.0, escape-string-regexp@1.0.3, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── liftoff@2.2.0 (extend@2.0.1, rechoir@0.6.2, flagged-respawn@0.3.1, findup-sync@0.3.0, resolve@1.1.6)
├── vinyl-fs@0.3.14 (graceful-fs@3.0.8, strip-bom@1.0.0, vinyl@0.4.6, defaults@1.0.3, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)
└── gulp-util@3.0.7 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, beeper@1.1.0, fancy-log@1.1.0, object-assign@3.0.0, replace-ext@0.0.1, has-gulplog@0.1.0, vinyl@0.5.3, gulplog@1.0.0, lodash.template@3.6.2, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.12)
npm WARN unmet dependency C:\Users\MattIshii\Downloads\cwine-master\cwine-master\node_modules\babelify\node_modules\babel-core\node_modules\babel-register\node_modules\source-map-support requires source-map@'0.1.32' but will load
npm WARN unmet dependency C:\Users\MattIshii\Downloads\cwine-master\cwine-master\node_modules\babelify\node_modules\babel-core\node_modules\source-map,
npm WARN unmet dependency which is version 0.5.3

C:\Users\MattIshii\Downloads\cwine-master\cwine-master>

And when I try running gulp I get: 

 

C:\Users\MattIshii\Downloads\cwine-master\cwine-master>gulp
module.js:339
    throw err;
    ^

Error: Cannot find module 'module-deps'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (C:\Users\MattIshii\Downloads\cwine-master\cwine-master\node_modules\browserify\index.js:1:75)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)

C:\Users\MattIshii\Downloads\cwine-master\cwine-master>

 

Which I assume means that the unmet dependencies are required. Is this a known issue?

[miffy495]

This is amazing. I've used TWINE in the classroom for my students before and would love to use cwine as well. Please keep posting about this, as it's something that my kids can wrap their heads around and is an awesome way to get them invested in storytelling. I want to use this in lesson planning SO BAD right now...

[osmosisch]

I've never actually used npm at all so I'm not sure if you can help here, but I'm getting this error message when running 'npm install -g gulp && npm install':

C:\Users\MattIshii\Downloads\cwine-master\cwine-master>npm install -g gulp && npm install
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
C:\Users\MattIshii\AppData\Roaming\npm\gulp -> C:\Users\MattIshii\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js
gulp@3.9.0 C:\Users\MattIshii\AppData\Roaming\npm\node_modules\gulp
├── interpret@0.6.6
├── pretty-hrtime@1.0.1
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.2.0
├── tildify@1.1.2 (os-homedir@1.0.1)
├── semver@4.3.6
├── v8flags@2.0.10 (user-home@1.1.1)
├── chalk@1.1.1 (supports-color@2.0.0, escape-string-regexp@1.0.3, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── liftoff@2.2.0 (extend@2.0.1, rechoir@0.6.2, flagged-respawn@0.3.1, findup-sync@0.3.0, resolve@1.1.6)
├── vinyl-fs@0.3.14 (graceful-fs@3.0.8, strip-bom@1.0.0, vinyl@0.4.6, defaults@1.0.3, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)
└── gulp-util@3.0.7 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, beeper@1.1.0, fancy-log@1.1.0, object-assign@3.0.0, replace-ext@0.0.1, has-gulplog@0.1.0, vinyl@0.5.3, gulplog@1.0.0, lodash.template@3.6.2, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.12)
npm WARN unmet dependency C:\Users\MattIshii\Downloads\cwine-master\cwine-master\node_modules\babelify\node_modules\babel-core\node_modules\babel-register\node_modules\source-map-support requires source-map@'0.1.32' but will load
npm WARN unmet dependency C:\Users\MattIshii\Downloads\cwine-master\cwine-master\node_modules\babelify\node_modules\babel-core\node_modules\source-map,
npm WARN unmet dependency which is version 0.5.3

C:\Users\MattIshii\Downloads\cwine-master\cwine-master>

And when I try running gulp I get: 

 

C:\Users\MattIshii\Downloads\cwine-master\cwine-master>gulp
module.js:339
    throw err;
    ^

Error: Cannot find module 'module-deps'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (C:\Users\MattIshii\Downloads\cwine-master\cwine-master\node_modules\browserify\index.js:1:75)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)

C:\Users\MattIshii\Downloads\cwine-master\cwine-master>

 

Which I assume means that the unmet dependencies are required. Is this a known issue?

looks like the quickest fix would be to try 'npm -g install source-map'

[Ben X]

I have to pronouce it 'swine'? I really dont like that.

 

Don't worry, JKO confirmed on chat that the correct (and logical) pronunciation is with a hard c.

[BigJKO]

Hey! I really wanted to work on this again. I've always thought it was cumbersome to get images into the project. You have to overwrite panels if you want to update them with a new image, and so and so.

 

The solution to that would be actual local folder access, so that you'd point Cwine to a project folder and throw assets in there and always have acess to them and they'd update automatically. Doing this in a web version is a pain. I considered adding Dropbox support, or something, but it just sounded like a pain to implement.

 

So, *naturally*, I decided to just rewrite the whole thing as a desktop app instead!

 

It's still very early, but I've got a project folder browser operational, which was the big part!

 

 

I tried out Electron at first, but I feel like trying to juggle all the different frameworks and shit to just make a simple UI layout and the canvas node view is just not worth it, so I decided to learn JavaFX which I'm finding super fun to use!

 

Anyway, it's still super duper early, but here's hoping I have a functional version soon!

 

Also, most importantly, here's the swanky, new logo!

 

[Ben X]

Good stuff!