Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Inline Image (Quad) Help

A topic by AnthonyUccello created Jun 30, 2020 Views: 628 Replies: 14
Viewing posts 1 to 15
(1 edit)

Hello

I am trying to place an image inline with the text but I looked at the sample scene and I did not see an example and after reading the Quad documentation a few times I am still struggling to understand what I need to do.

I have an array of sprites that I need to display inline in the text. Can you provide an example of how I would write the tags to add images from an array?

This is a scriptable object and the array with sprites is a property and ideally I can reference an index in the array to grab the sprite.


Please advise how this can be done thank you!

Also note, I don't see where I actually put the textures in the inspector.

Developer (1 edit)
Hey!

Using an array of sprites isn't *naturally* supported, each one would have to be manually defined (or the STMQuadData objects could be generated with a script!), or combined into the same sprite sheet!

Here's how a quad is set up... this is inside of the textdata inspector, after clicking on the [T] in the top-right of STM's inspector window.



"cross" is the name of the quad (used for the tag, <q=cross> or <quad=cross>), "GameButtons" is the texture/sprite being used. Columns and rows represent how many sprites are on the texture. If your texture only features one sprite on it, these values can be left at 1 and you can skip straight to adjusting size/offset/advance.

Here's where it gets a bit more complex... "Icon Index" represents which sprite in the sheet will be used. It starts counting from the bottom-left cell, going to the right, then wrapping up to the next row above. Here's a quick illustration of a 5x3 grid, the values inside each cell are the corresponding index.



So now you're probably thinking... well, this is going to be annoying! I want to use an index to grab a specific cell in this sheet, and I don't want to define 15 different quads!

But there's an extra feature in the quad tag! If you do "<q=cross,1>" the 1 will override the Icon index and go with whatever is in the cell corresponding to "1" instead! So it would display the circle sprite instead of the cross. You can also do <q=cross,1,1> to get an icon at a specific x and y position on the sprite sheet.

...I really should put more of this data in the docs! I wrote the quads section a long time ago and I think this is way more descriptive...
Let me know if you have any further questions, I hope this helps!

First off thank you thats very helpful information (espcially pressing that T button as I was unaware that was even a toggle).

As for my setup this approach posses a serious problem and this is a rather large deal. We specifically got Super Text Mesh so we can put sprites in our text as we are making a card game.

The problem is I need a way of doing this dynamically and without having to use a sprite sheet.

The way the game we works is we have a Card game object and one of the children is a Super Text Mesh object. There is also an attached CardModel object which has a list of Sprites that go in the description. These are indvidual sprites and are not in a sprite sheet. There are also literally hundreds so using indexes and putting them all into a sprite sheet would be a nightmare.

Is there a way to do this dynamically and do it passing in sprites at runtime?

Developer (1 edit)

Hmm... so there's two solutions, here. It all really depends on how you want to do this...


Solution 1: Use a program like photoshop or aseprite, and combine all the sprites into a sprite sheet. Doing it by hand would be a pain, and I remember from my pixel art days that there are scripts out there to do this. If you're searching by index anyway, then it's just a matter of... <q=cardsprites,x>!


Solution 2: Use a script that generates STMQuadData files out of a sprite array. If you want to go with this, I can write the script for you as part of this support! You'd end up with one STMQuadData file for each sprite, but the names could be auto-generated from the sprite's name, so you could have... <q=symbol> <q=othersymbol> etc. I will say, this method is less rendering-efficient, since every unique texture means a unique material.


Either way, using a program to set up 100s of these is what I think should be used! No one should have to define 100+ sprites by hand.

Thank you for the help


Can we look into doing the quad generation approach? I also want to be sure that these can be passed in at runtime (as opposed to needing all quads already attached to the text)

The render efficiency is not an issue because only one card will ever be rendering at a given time

Looking at the data.quads property it does look like we can change this in real time! So ya if we can work together on the SpriteToQuad converter that would be amazing!

Developer

Ooh, not a bad idea... it's a bit hacky, but I think if you have a manager script it should be fine... STMQuadData objects are ScriptableObjects which in a build, do not serialize. But as long as you have a script that updates the one scriptableobject in particular before text is rebuilt... I think it should work. Maybe. I'll give it a shot in just a moment!

the model object is also a scriptable object so its just read at runtime so this should work 馃憤

Developer

Is something like this good? You're trying to assign a sprite based on index, right?

using UnityEngine;
using System.Collections; public class STMSetQuadData : MonoBehaviour 
{
    public STMQuadData quadData;     public Texture[] textureArray;     public void Assign(int index)
    {
        quadData.texture = textureArray[index];
    }
}

Interesting. So here you are just assigning the texture to the quadData. I think I should be able to this directly the by passing the texture right to the quad data. Let me run an experiment

Oh ya it totally worked and it was painless!

I just added some quads on the text ("sprite1", "sprite2" etc). Then I do this:

        // Replace "sx" tags with appropriate Super Text Mesh Quad tags
        for (int i = 1; i < actionEffectState.numberOfPhases; i++)
        {
            // There will be 6 sprite quads named sprite 1-6 on the Super Text Mesh and this replaces sX with quad spriteX
            _descriptionText.text = _descriptionText.text.Replace("s" + i, "<quad=sprite" + i + ">");
            _descriptionText.data.quads["sprite" + i].texture = effectModel.fullViewSprites[i - 1].texture;
        }


Easy peasy!


Thank you for the help! This was a lot less complicated than I thought it was going to be haha!

Developer

Oh, perfect!


This is a really smart way to do this... I'm glad that it's possible!