Question: relative positioning

[zeeeeby]

Hello!

Is there a way to position images relative to other images?

For example, in your template project, there is an anime character and the eye image is a separate large image, where only a small part is actually the eyes and the rest is just empty space. This can have a serious impact on memory usage.

I was wondering if it is possible to move the eyes to a separate, smaller image and then somehow tell the renderer with ink hashtag to draw the eyes at specific x, y coordinates inside the character's image?

[BlackRam-oss]

I assume you're using ink, right?
There's currently no way to do this in ink.

In Typescript, however, you can. You just create the image components separately and then add them to the container.

I don't think I want to add something similar to ink because it would greatly complicate the script syntax.

If you want, you can always create custom scripts https://pixi-vn.web.app/it/ink/hashtag to add custom logic designed just for your game.

(I should look into this further) In theory, the invisible space on .png images (or another modern format) shouldn't significantly increase the image space.

[zeeeeby]

Hashtags are very convenient!
Is there a similar way to process plain text that is not a hashtag? For example, I want to display some text in a bubble, and other text on the general text panel at the bottom of the screen. Is there any way in Ink to distinguish where to display the text?

[zeeeeby]

Hashtags are very convenient! Is there a similar way to process plain text that is not a hashtag? For example, I want to display some text in a bubble, and other text on the general text panel at the bottom of the screen. Is there any way in Ink to distinguish where to display the text?

maybe it is possible to create custom plain command as character "james: ...." in template

[BlackRam-oss]

I'm not sure what you want to do. But I assume the answer is no. What exactly is the purpose?

Now, I don't know your exact experience with web projects. However, in pixi-vn projects, you can add "graphic elements" in two places:

• canvas: completely managed by pixi-vn (https://pixi-vn.web.app/start/canvas)
• UI: i.e., HTML components. Pixi-vn has no control over them (https://pixi-vn.web.app/start/interface)

In the canvas, you can add text with the Text element (the same way you add an image). Currently, since I've never personally used the Text element and it's never been requested, I've tested it very little. In any case, there's currently no way to add this element with ink. But that's my fault, so I'll have to add it.

You're free to do whatever you want with the UI, but you obviously have to manage everything yourself (see the documentation for a better understanding).
Currently, however, since the narration text uses Markdown by default, you can embed HTML into the narration text to make it appear in the narration dialogue. You can find more information here: https://pixi-vn.web.app/ink/markup (the Ink wiki is being improved, but it should be understandable).

Do you need to use UI or Canvas? I don't know, it depends on what you want to do.