New version of ink.js
Whoops, didn't actually publish this post.
I updated the ink.js file in this template to match the Inky update from a couple weeks ago.
We hadn't said this in the README file before, but if the template fails to work because the template was built with a different version of Inky than you have, all that should be required is to do a full export for web (from Inky: save it somewhere that's not the VN template) and copy its ink.js file into the template, replacing the existing one.
Basically you want the ink.js and the story.js to be from the same version of Inky. Those things often change together, but the external Ink-runner interfaces that the template relies on haven't changed significantly in ages. So it shouldn't break the template to replace ink.js as well as story.js.
That said, I'm not great about keeping close tabs on Ink's development, so if you notice that the template is out of date, please do message me and I'll update it...
Files
Get Ink Visual Novel Lite Template
Ink Visual Novel Lite Template
A lightweight visual novel web template for Ink games.
| Status | Released |
| Category | Assets |
| Authors | JoshGrams, Geoffrey Golden |
| Genre | Interactive Fiction, Visual Novel |
| Tags | Asset Pack, Game Design, ink, inkle, Project template |
More posts
- Minor tweaksOct 28, 2023
Comments
Log in with itch.io to leave a comment.
Hi! I’m back here to ask about using the storylet system you have in your gist https://gist.github.com/JoshuaGrams/073e02468a5fe3addb8cdbfdc6f199d3 along with this VN template in a future project.
Where should I start to modify the main.js? Both templates modify the js in some ways and I’m not familiar enough with js to try frankensteining them together.
And if I want to show a variable on screen (especially to debug storylets), how would I do that?
Thank you in advance, and I hope I haven’t been too imposing (and no worry if this is too involved for you to answer).
Heh, I was just thinking I should take another look at squash and stretch - I couldn't find a goad way to change size based on an image's default aspect ratio rather than it's parent's aspect ratio or a fixed shape.
I haven't thought about that gist in... oh, probably about 4 years when I first wrote it, but on a quick look...
Yeah, I think it's just defining that `choose` function at the top and then using `choose(story.currentChoices, limit).forEach` instead of `story.currentChoices.forEach`
So you probably just need to copy in the `choose` function near the top of vn-runner.js and then putting lines 61 and 62 of the gist in the appropriate places (hrm, it's in two places in vn-runner, maybe lines 354 and 364? different for the alert box vs. regular choices. that could potentially be factored out, or just copy-pasted both places).
Or...hmm. Let me know if that's too involved and I'll shove it on a branch of the repository and send you a link.
I believe printing variables in ink is just putting curly brackets around the variable name.
If you don’t mind explaining, what would the parent be? And by fixed shape, does this mean that the image can be transformed into arbitrary polygons, as long as it’s in the same aspect ratio? This is more a curiosity than anything (also thank you for taking a stab at this, even when it proves to be more complicated than I thought).
I think I can do this now that you’ve told me where to look.
Oh, I mean to have it shown on the VN screen at all times, not in dialogues.
Not polygon, just any rectangle. The parent element in this case would be the display area where the sprites show up: it's currently a 2:1 aspect ratio. So if I did the naive thing and just gave you width and height, then "10 10" would be 10% of the display width and 10% of the display height, so the image would get stretched to a 2:1 rectangle no matter what size it was initially. That would let you do squash and stretch, but to get an image to be not stretched, you'd have to do the math to convert backwards to the image's actual aspect ratio (like a square image would need to be 10 5). Which seems... inconvenient.
Oh, I see. You can get ink variables in the javascript with story.variablesState["variableName"] but you'd need a way to display it. You could console.log it in continueStory? Or you'd have to find a place to put it in the HTML, maybe add a div or span with an id and get the element with document.getElementById, and then set element.textContent = story.variablesState["variableName"]
I’ll try that, thank you! It has been informative so far.