0
\$\begingroup\$

enter image description hereI'm completely new to Unity. I'm trying to create something similar to Scrabble.

I've simply got a tile as a sprite (red arrow).Firstly, I don't understand it being so small.. I'm trying to give the tile a label, "A", say. So, in my text input I have entered the "A". What am I missing?

If that would work, I could go into dynamically programming a bag of tiles.

\$\endgroup\$
4
  • \$\begingroup\$ As you can see, your top right arrow has a canvas renderer but at the left arrow you can see you are missing an actual canvas. You need to add one and make this prefab of your letters a child of it. An use the TextMeshPro Text Components if you want to add text, it will make your life easier \$\endgroup\$
    – Zibelas
    Oct 22, 2023 at 6:58
  • \$\begingroup\$ Check your transform, it is 2.25 px wide \$\endgroup\$
    – Zibelas
    Oct 22, 2023 at 13:29
  • \$\begingroup\$ I incresed it to 200 x 200 and see a transparent square with blue corners \$\endgroup\$ Oct 22, 2023 at 18:19
  • \$\begingroup\$ thanks in advance for your time @Zibelas \$\endgroup\$ Oct 23, 2023 at 7:31

2 Answers 2

0
\$\begingroup\$

This small step by step guid will give you at the end a small scrabble like hand with random letters and values. It is meant to be used with a canvas. The screenshots are containing the how it will look at the end of the guide, don't worry if there is sometimes a bit more listed.

enter image description here

First we need to define a Tile. Usually a scrabble tile can be broken down into three parts: background, letter and points.

  1. First we add a canvas to our game scene.

  2. Create an empty GameObject in the canvas. Unlike a normal GameObject, it should have the Rect Transform. Name it Basic Tile. enter image description here

  3. Under the this new Basic Tile, create another three GameObject, one for each background, letter and points. The order is important, later ones are drawn over earlier ones, if we have first a letter and than the background, it will hide the letter.

  4. Select the Background Gameobject and assign an Image Component (Component -> UI -> Image). Give it your scrabble background tile. Set the transform to 0, 0, 0. As for width and height, you need to do some math. (Since this is most likely one of your first games, use the resolution of your target device to make it look nice. Canvas uses pixels, if your phone has for example 2280x1080 and you want to display a 6x6 board with maybe a hand below, your tiles can be around 100x100 to make it not too crowded.) enter image description here

  5. Select the letter GameObject, attach the TextMeshPro - Text component. Give it the same height/ width as your background, set the text to autosize and under text options to center and middle. This will place our letter always in the middle. Give it a good contrast color. enter image description here The first time you add a TextMeshPro component, you should get a popup asking for permission to import the relevent files. enter image description here

  6. Repeat step 5 for the points but make the size smaller. Once you are happy with the size of the letter, select the anchor present and move it to the top right corner with both pivot and anchor (shift + alt click) enter image description here

  7. We are creating a basic tile setting script.

    public class TileScript: MonoBehaviour {
    
        public TextMeshProUGUI textLetter;
        public TextMeshProUGUI textPoints;
    
        public void InitTile(string letter, string points) {
            textLetter.text = letter;
            textPoints.text = points;
        }
    }
    
  8. Add this script to the Basic Tile GameObject, assign over the editor the two TextField by dragging the whole GameObject onto them. Once all is assigned, make a prefab out of everything.

  9. As a bonus here is a small generation script. It will need some adjusting for real tile values. Create a new GameObject HandTiles under the canvas, give it a GridLayoutGroup and a width of how ever many tiles you want to display in your hand. Add some small spacing and attach the following script.

    public class TileBag: MonoBehaviour {
    
        public GameObject basicTile;
        public GameObject handTileHolder;  
    
        private void Start() {
            for (int i = 0; i <= 5; i++) {
                GameObject tempTile = Instantiate(basicTile, handTileHolder.transform);
                var letter = (char) Random.Range('A', 'Z');
                tempTile.GetComponent<TileScript>().InitTile(letter.ToString(), Random.Range(1, 8).ToString());
            }
        }
    }
    

enter image description here

That's it. In your game you want the TileBag script somewhere in your game logic, tempTile should go to some variable which tiles are already generated. You should not read out the value from the tiles themself, your logic code should keep track which tile is placed where later on the board.

\$\endgroup\$
10
  • \$\begingroup\$ Thanks ever so much...fantastic!! \$\endgroup\$ Oct 23, 2023 at 14:28
  • \$\begingroup\$ fantastic...! With regards to point 5, where do you get your font asset (liberationSans SDF) from, I have none? This is in fact my first game, I am used to programming, but this is obvioulsy something else. Please bear with me. \$\endgroup\$ Oct 23, 2023 at 15:10
  • \$\begingroup\$ Updated from where it comes, it should be set automatically once you click import of essentials. Normally you dont need to set that at all, if you have a folder TextMesh Pro under Assets, you can find it under TextMesh Pro/ Resources/ Fonts & Materials \$\endgroup\$
    – Zibelas
    Oct 23, 2023 at 15:19
  • \$\begingroup\$ I can't thank you enough for all of this:) \$\endgroup\$ Oct 23, 2023 at 16:35
  • \$\begingroup\$ I don't understand nr.8. I have added the script, right under a script which already existed...Now, how do I assign over the editor the two text fields...? \$\endgroup\$ Oct 23, 2023 at 22:38
0
\$\begingroup\$

As the comments say, maybe your text object is too small relative to its parent. Maybe is the font size of your Text Mesh pro component, or the scale of the object (I can't say why it is scaled down). You can try to change the anchor presets on the Rect transform component of your text object, using alt + shift, and select the 'expand' option:

Expand to parent size option

\$\endgroup\$
1
  • \$\begingroup\$ yes, I tried that, unfortunately, I just get a transparent square with blue pointed corners and a little white square in the middle of each side..When I have a look at game, I don't een see the white tile \$\endgroup\$ Oct 22, 2023 at 18:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .