2

I'm new to Unity and to game development in general. I would like to make a text-based game. I'm looking to reproduce the behavior of an instant messenger like messenger or whatapp.

I made the choice to use the Unity UI system for the pre-made components like the rect scroll. But this choice led me to the following problem:

I have "bubbles" of dialogs, which must be able to grow in width as well as in height with the size of the text. Fig.1

  1. I immediately tried to use VectorGraphics to import .svg with the idea to move runtime the points of my curves of Beziers. But I did not find how to access these points and edit them runtime.
  2. I then found the "Sprite shapes" but they are not part of the "UI", so if I went with such a solution, I would have to reimplement scroll, buttons etc...
  3. I thought of cutting my speech bubble in 7 parts Fig.2 and scaling it according to the text size. But I have the feeling that this is very heavy for not much.
  4. Finally I wonder if a hybrid solution would not be the best, use the UI for scrolling, get transforms and inject them into Shape sprites (outside the Canvas).

If it is possible to do 1. and then I would be very grateful for an example. If not 2. 3. 4. seem feasible, I would like to have your opinion on the most relevant of the 3.

Thanks in advance.

Cros Edgard
  • 23
  • 3

1 Answers1

0

There is a simpler and quite elegant solution to your problem that uses nothing but the sprite itself (or rather the design of the sprite).

Take a look at 9-slicing Sprites from the official unity documentation. With the Sprite Editor you can create borders around the "core" of your speech bubble. Since these speech bubbles are usually colored in a single color and contain nothing else, the ImageType: Sliced would be the perfect solution for what you have in mind. I've created a small Example Sprite to explain in more detail how to approach this: The sprite itself is 512 pixels wide and 512 pixels high. Each of the cubes missing from the edges is 8x8 pixels, so the top, bottom, and left borders are 3x8=24 pixels deep. The right side has an extra 16 pixels of space to represent a small "tail" on the bubble (bottom right corner). So, we have 4 borders: top=24, bottom=24, left=24 and right=40 pixels. After importing such a sprite, we just have to set its MeshType to FullRect, click Apply and set the 4 borders using the Sprite Editor (don't forget to Apply them too). The last thing to do is to use the sprite in an Image Component on the Canvas and set the ImageType of this Component to Sliced. Now you can scale/warp the Image as much as you like - the border will always keep its original size without deforming. And since your bubble has a solid "core", the Sliced option will stretch this core unnoticed.

Edit: When scaling the Image you must use its Width and Height instead of the (1,1,1)-based Scale, because the Scale might still distort your Image. Also, here is another screenshot showing the results in different sizes.

ge.go
  • 65
  • 1
  • 10
  • Sounds perfect to me, it's exactly the kind of functionality I was looking for. I can't believe I didn't find it. Note to self, read the doc for each gameObject. Thanks! – Cros Edgard Oct 10 '22 at 09:17
  • It takes some time to get a good overview of what Unity has to offer. 9-Slicing sprites are an incredible tool that can be used for all sorts of things. They are great for creating menus and buttons, especially if you use a repeatable pattern as the "core" of your sprite - you can find a demo of this in the documentation under "Tiled". – ge.go Oct 10 '22 at 10:47