Code Monkey home page Code Monkey logo

Comments (5)

LucaBlackDragon avatar LucaBlackDragon commented on June 20, 2024 3

@Longwelwind what do you think about including a "blank templates set" within the project?

from adventures.

Longwelwind avatar Longwelwind commented on June 20, 2024 1

This is definitely possible, but it will take some time & effort, so don't expect it to be done soon 😐

if you still want to try:
At the moment, images are bundled into the CSS using a small Webpack plugin that replaces [[...]] by base64-encoded images.
Basically, in design.css, when you see this:

border-image: url("[[./images/Windows/_sheet_window_29.png,64,0,48,48]]");

It means that, at build-time, the image located in images/Windows/_sheet_window_29.png will be cut (starting from the pixel 64,0 and for a final size in pixels of 48,48) and base64-encoded into the final CSS file.
So if you want to create custom images, you can simply create images at those locations. You can use Chrome developper tools (Press F12 while playing your story in Twine) to find which CSS class is used. Most of the images in design.css aren't used (some are there for undocumented features). I'll try to make a quick list if I find the time ! :)

from adventures.

RunawayHaggis avatar RunawayHaggis commented on June 20, 2024

That's really useful info - thanks!

from adventures.

Warrenayiss avatar Warrenayiss commented on June 20, 2024

I'm perhaps stupid but I still can't change the images assets in my project
I was trying to use some free asset to avoid license problems (https://kyrise.itch.io/kyrises-free-16x16-rpg-icon-pack for icons and https://kenney.nl/assets/ui-pack-rpg-expansion for UI)

Can we have some more explicit tutorial or doc please?

from adventures.

Longwelwind avatar Longwelwind commented on June 20, 2024

Hi,

I should add a note in the README.md, but the project is not actively maintained. Normally, tough, the instruction I've given should still work to change images.

from adventures.

Related Issues (14)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.