This is a really neat idea! I ran into an error with Firefox, though:
---
A fatal error has occurred. Aborting.
Error: no valid storage adapters found.
---
For the benefit of anyone else who might run into the same thing, I found it worked fine in Chromium.
I also got curious and tried saving the HTML file from the frame here to import into Twine 2 myself, but I'm not familiar enough with SugacCube to be sure how everything works. Trying "Play" from within Twine produces errors which is strange because the actual character builder clearly DOES function in Chromium (and because of the SVG info in the relevant passages I gather it shouldn't depend on external files not included with the HTML):
---
Error: <<print>>: bad evaluation: '' string literal contains an unescaped line break
Given that, again, the thing clearly works as expected in at least one browser this may not be an issue to be fixed, but I include the details in case it's any help in making an admittedly ambitious project more robust. I've been rather intrigued by the possibilities offered by SVGs in Twine games myself and it's fantastic to see this: I might have a little go myself and see if it's possible to achieve something similar with Harlowe.
All in all, a technically impressive project that's also really cute. Thank you so much for sharing it!
Thank you for spotting this! Surprised it's not working on Firefox as that's what I used to test it. I believe it might be a missed paragraph break instead of a line break, but Twine might detect both as the same. I'll run every image passage through a remover just to be sure. (The Twine version it was made in is 2.5.1, so it might be causing some issues when opening with a newer or older version?)
And on SVGs in twine, oh it's just a treat to use! More people should as you can directly modify the appearance of the image ezpz. I've found Css images + masks to be slightly wonky in useability. With this, I can just inject an image that's testable from the get-go and inject my own modifications with variables. I'm unsure how to reproduce it in Harlowe, probably the same with utilising its own print command. Sugarcube is in general more suited to messing around with such stuff.
Glad you enjoyed it and hopefully inspired too! Hope to make a faux browser pet soon. I made a small diversion in developing it to revamp the graphics and release this as a small milestone.
I know I managed to affect text in an SVG image by trying to make it a hyperlink in Harlowe - the text in the SVG essentially ended up being styled as a hyperlink, which looked terrible but seemed to open up a few intriguing options - so I'm hopeful that there's some way of doing it. But I probably would pick up a bit of SugarCube just to work with stuff like this. SVGs appealed to me initially just as a method of including images in the HTML without the unwieldy passages produced by Base64 URLs, but what you've done here shows just how much more they can do. (I've experimented with layered PNGs with transparent backgrounds as well - which might be easier under certain circumstances - but you'd need a truly absurd number of them to do anything like the kind of colour customisation you've got here.)
Oh whew, I'll have to try that too! And ho boy...Base64. SVGs are a step up.
I've initially wanted to make a colour wheel of images, but that would have been too prohibitive if you wanted to give players a good selection. But just letting people pick whatever colour they want is such a step up. I think I would only touch pngs again, if I had beautifully drawn art, but perhaps they could be combined together regardless. (Like SVGs only affecting solid colour spaces underneath the image) I think it might lead to some neat results. With SVGs you kinda have to draw out every outline, so it becomes cumbersome if you have to work on multiple images and make sure every line connects. And sometimes some points get eaten up. (You can see in the game how some colours bleed over the border or don't reach the border at all) I'll get around to fixing that too.
Comments
Log in with itch.io to leave a comment.
This is so cute! Worked great for me and I got to make a super cute dragon
Awesome :D
This is a really neat idea! I ran into an error with Firefox, though:
---
A fatal error has occurred. Aborting.
Error: no valid storage adapters found.
---For the benefit of anyone else who might run into the same thing, I found it worked fine in Chromium.
I also got curious and tried saving the HTML file from the frame here to import into Twine 2 myself, but I'm not familiar enough with SugacCube to be sure how everything works. Trying "Play" from within Twine produces errors which is strange because the actual character builder clearly DOES function in Chromium (and because of the SVG info in the relevant passages I gather it shouldn't depend on external files not included with the HTML):
---
Error: <<print>>: bad evaluation: '' string literal contains an unescaped line break
<<print '<<set $RGB0 to "(" + $opossum'+ $ID +'GENE[0] + ", " + $opossum'+ $ID +'GENE[1] + ", " + $opossum'+ $ID +'GENE[2] + ")">><<set $RGB1 to "(" + $opossum'+ $ID +'GENE[3] + ", " + $opossum'+ $ID +'GENE[4] + ", " + $opossum'+ $ID +'GENE[5] + ")">><<set $RGB2 to "(" + $opossum'+ $ID +'GENE[6] + ", " + $opossum'+ $ID +'GENE[7] + ", " + $opossum'+ $ID +'GENE[8] + ")">><<set $RGB3 to "(" + $opossum'+ $ID +'GENE[10] + ", " + $opossum'+ $ID +'GENE[11] + ", " + $opossum'+ $ID +'GENE[12] + ")">><<set $RGB4 to "(" + $opossum'+ $ID +'GENE[14] + ", " + $opossum'+ $ID +'GENE[15] + ", " + $opossum'+ $ID +'GENE[16] + ")">>'>>Error: cannot execute macro <<include>>: unable to parse macro argument ""COMMON ": unterminated double quoted string
Error: <<print>>: bad evaluation: '' string literal contains an unescaped line break
Error: <<print>>: bad evaluation: '' string literal contains an unescaped line break
Error: cannot execute macro <<include>>: unable to parse macro argument ""COMMON ": unterminated double quoted string
Error: cannot execute macro <<include>>: unable to parse macro argument ""COMMON ": unterminated double quoted string
Error: cannot execute macro <<include>>: unable to parse macro argument ""COMMON ": unterminated double quoted string
---
Given that, again, the thing clearly works as expected in at least one browser this may not be an issue to be fixed, but I include the details in case it's any help in making an admittedly ambitious project more robust. I've been rather intrigued by the possibilities offered by SVGs in Twine games myself and it's fantastic to see this: I might have a little go myself and see if it's possible to achieve something similar with Harlowe.
All in all, a technically impressive project that's also really cute. Thank you so much for sharing it!
Thank you for spotting this! Surprised it's not working on Firefox as that's what I used to test it. I believe it might be a missed paragraph break instead of a line break, but Twine might detect both as the same. I'll run every image passage through a remover just to be sure. (The Twine version it was made in is 2.5.1, so it might be causing some issues when opening with a newer or older version?)
And on SVGs in twine, oh it's just a treat to use! More people should as you can directly modify the appearance of the image ezpz. I've found Css images + masks to be slightly wonky in useability. With this, I can just inject an image that's testable from the get-go and inject my own modifications with variables.
I'm unsure how to reproduce it in Harlowe, probably the same with utilising its own print command. Sugarcube is in general more suited to messing around with such stuff.
Glad you enjoyed it and hopefully inspired too! Hope to make a faux browser pet soon. I made a small diversion in developing it to revamp the graphics and release this as a small milestone.
I know I managed to affect text in an SVG image by trying to make it a hyperlink in Harlowe - the text in the SVG essentially ended up being styled as a hyperlink, which looked terrible but seemed to open up a few intriguing options - so I'm hopeful that there's some way of doing it. But I probably would pick up a bit of SugarCube just to work with stuff like this. SVGs appealed to me initially just as a method of including images in the HTML without the unwieldy passages produced by Base64 URLs, but what you've done here shows just how much more they can do. (I've experimented with layered PNGs with transparent backgrounds as well - which might be easier under certain circumstances - but you'd need a truly absurd number of them to do anything like the kind of colour customisation you've got here.)
Oh whew, I'll have to try that too! And ho boy...Base64. SVGs are a step up.
I've initially wanted to make a colour wheel of images, but that would have been too prohibitive if you wanted to give players a good selection. But just letting people pick whatever colour they want is such a step up.
I think I would only touch pngs again, if I had beautifully drawn art, but perhaps they could be combined together regardless. (Like SVGs only affecting solid colour spaces underneath the image) I think it might lead to some neat results.
With SVGs you kinda have to draw out every outline, so it becomes cumbersome if you have to work on multiple images and make sure every line connects. And sometimes some points get eaten up. (You can see in the game how some colours bleed over the border or don't reach the border at all) I'll get around to fixing that too.