├── ProjectSettings ├── ProjectVersion.txt ├── TagManager.asset ├── AudioManager.asset ├── InputManager.asset ├── NavMeshAreas.asset ├── TimeManager.asset ├── DynamicsManager.asset ├── EditorSettings.asset ├── NetworkManager.asset ├── ProjectSettings.asset ├── QualitySettings.asset ├── GraphicsSettings.asset ├── Physics2DSettings.asset ├── ClusterInputManager.asset ├── EditorBuildSettings.asset └── UnityConnectSettings.asset ├── Example.gif ├── FancySpeechBubble.unitypackage ├── Assets ├── FancySpeechBubble │ ├── Background.png │ ├── Example.unity │ ├── Example.unity.meta │ ├── FancySpeechBubble.cs.meta │ ├── Background.png.meta │ └── FancySpeechBubble.cs └── FancySpeechBubble.meta ├── .gitignore └── README.md /ProjectSettings/ProjectVersion.txt: -------------------------------------------------------------------------------- 1 | m_EditorVersion: 5.5.2f1 2 | -------------------------------------------------------------------------------- /Example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/Example.gif -------------------------------------------------------------------------------- /FancySpeechBubble.unitypackage: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/FancySpeechBubble.unitypackage -------------------------------------------------------------------------------- /ProjectSettings/TagManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/TagManager.asset -------------------------------------------------------------------------------- /ProjectSettings/AudioManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/AudioManager.asset -------------------------------------------------------------------------------- /ProjectSettings/InputManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/InputManager.asset -------------------------------------------------------------------------------- /ProjectSettings/NavMeshAreas.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/NavMeshAreas.asset -------------------------------------------------------------------------------- /ProjectSettings/TimeManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/TimeManager.asset -------------------------------------------------------------------------------- /ProjectSettings/DynamicsManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/DynamicsManager.asset -------------------------------------------------------------------------------- /ProjectSettings/EditorSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/EditorSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/NetworkManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/NetworkManager.asset -------------------------------------------------------------------------------- /ProjectSettings/ProjectSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/ProjectSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/QualitySettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/QualitySettings.asset -------------------------------------------------------------------------------- /Assets/FancySpeechBubble/Background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/Assets/FancySpeechBubble/Background.png -------------------------------------------------------------------------------- /Assets/FancySpeechBubble/Example.unity: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/Assets/FancySpeechBubble/Example.unity -------------------------------------------------------------------------------- /ProjectSettings/GraphicsSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/GraphicsSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/Physics2DSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/Physics2DSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/ClusterInputManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/ClusterInputManager.asset -------------------------------------------------------------------------------- /ProjectSettings/EditorBuildSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/EditorBuildSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/UnityConnectSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/solosodium/FancySpeechBubble/HEAD/ProjectSettings/UnityConnectSettings.asset -------------------------------------------------------------------------------- /Assets/FancySpeechBubble/Example.unity.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: ae3c3280667fc4205b884d7f2d03f50b 3 | timeCreated: 1490230988 4 | licenseType: Free 5 | DefaultImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/FancySpeechBubble.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 0cabdf192281b413c8dffc3d3e248c17 3 | folderAsset: yes 4 | timeCreated: 1490230968 5 | licenseType: Free 6 | DefaultImporter: 7 | userData: 8 | assetBundleName: 9 | assetBundleVariant: 10 | -------------------------------------------------------------------------------- /Assets/FancySpeechBubble/FancySpeechBubble.cs.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 1babbc28eebfb4c81a539d2a2c772d82 3 | timeCreated: 1490233948 4 | licenseType: Free 5 | MonoImporter: 6 | serializedVersion: 2 7 | defaultReferences: [] 8 | executionOrder: 0 9 | icon: {instanceID: 0} 10 | userData: 11 | assetBundleName: 12 | assetBundleVariant: 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /[Ll]ibrary/ 2 | /[Tt]emp/ 3 | /[Oo]bj/ 4 | /[Bb]uild/ 5 | /[Bb]uilds/ 6 | /Assets/AssetStoreTools* 7 | 8 | # Visual Studio 2015 cache directory 9 | /.vs/ 10 | 11 | # Autogenerated VS/MD/Consulo solution and project files 12 | ExportedObj/ 13 | .consulo/ 14 | *.csproj 15 | *.unityproj 16 | *.sln 17 | *.suo 18 | *.tmp 19 | *.user 20 | *.userprefs 21 | *.pidb 22 | *.booproj 23 | *.svd 24 | *.pdb 25 | 26 | # Unity3D generated meta files 27 | *.pidb.meta 28 | 29 | # Unity3D Generated File On Crash Reports 30 | sysinfo.txt 31 | 32 | # Builds 33 | *.apk 34 | -------------------------------------------------------------------------------- /Assets/FancySpeechBubble/Background.png.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 7c3c83d66396241ae99736439b9826a0 3 | timeCreated: 1490238554 4 | licenseType: Free 5 | TextureImporter: 6 | fileIDToRecycleName: {} 7 | serializedVersion: 4 8 | mipmaps: 9 | mipMapMode: 0 10 | enableMipMap: 0 11 | sRGBTexture: 1 12 | linearTexture: 0 13 | fadeOut: 0 14 | borderMipMap: 0 15 | mipMapFadeDistanceStart: 1 16 | mipMapFadeDistanceEnd: 3 17 | bumpmap: 18 | convertToNormalMap: 0 19 | externalNormalMap: 0 20 | heightScale: 0.25 21 | normalMapFilter: 0 22 | isReadable: 0 23 | grayScaleToAlpha: 0 24 | generateCubemap: 6 25 | cubemapConvolution: 0 26 | seamlessCubemap: 0 27 | textureFormat: 1 28 | maxTextureSize: 2048 29 | textureSettings: 30 | filterMode: -1 31 | aniso: -1 32 | mipBias: -1 33 | wrapMode: 1 34 | nPOTScale: 0 35 | lightmap: 0 36 | compressionQuality: 50 37 | spriteMode: 1 38 | spriteExtrude: 1 39 | spriteMeshType: 1 40 | alignment: 0 41 | spritePivot: {x: 0.5, y: 0.5} 42 | spriteBorder: {x: 20, y: 20, z: 20, w: 20} 43 | spritePixelsToUnits: 100 44 | alphaUsage: 1 45 | alphaIsTransparency: 1 46 | spriteTessellationDetail: -1 47 | textureType: 8 48 | textureShape: 1 49 | maxTextureSizeSet: 0 50 | compressionQualitySet: 0 51 | textureFormatSet: 0 52 | platformSettings: 53 | - buildTarget: DefaultTexturePlatform 54 | maxTextureSize: 2048 55 | textureFormat: -1 56 | textureCompression: 1 57 | compressionQuality: 50 58 | crunchedCompression: 0 59 | allowsAlphaSplitting: 0 60 | overridden: 0 61 | spriteSheet: 62 | serializedVersion: 2 63 | sprites: [] 64 | outline: [] 65 | spritePackingTag: 66 | userData: 67 | assetBundleName: 68 | assetBundleVariant: 69 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FancySpeechBubble 2 | A fancy speech bubble based on Unity UI Text 3 | 4 | ![Example.gif](./Example.gif) 5 | 6 | ## How to use this 7 | 8 | Just download the Unity package [FancySpeechBubble.unitypackage](./FancySpeechBubble.unitypackage). I also have a [blog post](http://solosodium.github.io/2017-03-23-fancy-speech-bubble) about this. 9 | 10 | ## What's important 11 | 12 | Everything happens in the script [FancySpeechBubble.cs](./Assets/FancySpeechBubble/FancySpeechBubble.cs). The script needs to be attached to a GameObject with **UI.Text** and **UI.ContentSizeFitter**. There are a few configurable parameters for the script: 13 | 14 | | Parameter | Type | Description | 15 | | :--------------------------- | :----- | :------------------------------------------------------------------------------- | 16 | | **characterStartSize** | int | starting font size of character scale-up animation (default is 1) | 17 | | **characterAnimateSpeed** | float | charater scale-up animation speed (font size change / second) (default is 1000f) | 18 | | **rawText** | string | *readonly*: raw text of the speech bubble | 19 | | **processedText** | string | *readonly*: processed text with '\n' indicating line breaks | 20 | | **bubbleBackground** | Image | *optional*: speech bubble background | 21 | | **backgroundMinimumHeight** | float | *optional*: speech bubble background minimm height | 22 | | **backgroundVerticalMargin** | float | *optional*: speech bubble background top and bottom margin combined | 23 | 24 | To see it in action, try run the [Example scene](./Assets/FancySpeechBubble/Example.unity). 25 | 26 | ## MIT Licence 27 | 28 | Copyright 2017 solosodium 29 | 30 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 31 | 32 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 33 | 34 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 35 | -------------------------------------------------------------------------------- /Assets/FancySpeechBubble/FancySpeechBubble.cs: -------------------------------------------------------------------------------- 1 | using System.Collections; 2 | using System.Collections.Generic; 3 | using UnityEngine; 4 | using UnityEngine.UI; 5 | 6 | [RequireComponent(typeof(Text))] 7 | [RequireComponent(typeof(ContentSizeFitter))] 8 | public class FancySpeechBubble : MonoBehaviour { 9 | 10 | /// 11 | /// Character start font size. 12 | /// 13 | public int characterStartSize = 1; 14 | 15 | /// 16 | /// Character size animate speed. 17 | /// Unit: delta font size / second 18 | /// 19 | public float characterAnimateSpeed = 1000f; 20 | 21 | /// 22 | /// The bubble background (OPTIONAL). 23 | /// 24 | public Image bubbleBackground; 25 | 26 | /// 27 | /// Minimum height of background. 28 | /// 29 | public float backgroundMinimumHeight; 30 | 31 | /// 32 | /// Vertical margin (top + bottom) between label and background (OPTIONAL). 33 | /// 34 | public float backgroundVerticalMargin; 35 | 36 | /// 37 | /// A copy of raw text. 38 | /// 39 | private string _rawText; 40 | public string rawText { 41 | get { return _rawText; } 42 | } 43 | 44 | /// 45 | /// Processed version of raw text. 46 | /// 47 | private string _processedText; 48 | public string processedText { 49 | get { return _processedText; } 50 | } 51 | 52 | /// 53 | /// Set the label text. 54 | /// 55 | /// Text. 56 | public void Set (string text) { 57 | StopAllCoroutines(); 58 | StartCoroutine(SetRoutine(text)); 59 | } 60 | 61 | /// 62 | /// Set the label text. 63 | /// 64 | /// Text. 65 | public IEnumerator SetRoutine (string text) 66 | { 67 | _rawText = text; 68 | yield return StartCoroutine(TestFit()); 69 | yield return StartCoroutine(CharacterAnimation()); 70 | } 71 | 72 | /// 73 | /// Test fit candidate text, 74 | /// set intended label height, 75 | /// generate processed version of the text. 76 | /// 77 | private IEnumerator TestFit () 78 | { 79 | // prepare targets 80 | Text label = GetComponent(); 81 | ContentSizeFitter fitter = GetComponent(); 82 | 83 | // change label alpha to zero to hide test fit 84 | float alpha = label.color.a; 85 | label.color = new Color(label.color.r, label.color.g, label.color.b, 0f); 86 | 87 | // configure fitter and set label text so label can auto resize height 88 | fitter.horizontalFit = ContentSizeFitter.FitMode.Unconstrained; 89 | fitter.verticalFit = ContentSizeFitter.FitMode.PreferredSize; 90 | label.text = _rawText; 91 | 92 | // need to wait for a frame before label's height is updated 93 | yield return new WaitForEndOfFrame(); 94 | // make sure label is anchored to center to measure the correct height 95 | float totalHeight = label.rectTransform.sizeDelta.y; 96 | 97 | // (OPTIONAL) set bubble background 98 | if (bubbleBackground != null) { 99 | bubbleBackground.rectTransform.sizeDelta = new Vector2( 100 | bubbleBackground.rectTransform.sizeDelta.x, 101 | Mathf.Max(totalHeight + backgroundVerticalMargin, backgroundMinimumHeight)); 102 | } 103 | 104 | // now it's time to test word by word 105 | _processedText = ""; 106 | string buffer = ""; 107 | string line = ""; 108 | float currentHeight = -1f; 109 | // yes, sorry multiple spaces 110 | foreach (string word in _rawText.Split(' ')) { 111 | buffer += word + " "; 112 | label.text = buffer; 113 | yield return new WaitForEndOfFrame(); 114 | if (currentHeight < 0f) { 115 | currentHeight = label.rectTransform.sizeDelta.y; 116 | } 117 | if (currentHeight != label.rectTransform.sizeDelta.y) { 118 | currentHeight = label.rectTransform.sizeDelta.y; 119 | _processedText += line.TrimEnd(' ') + "\n"; 120 | line = ""; 121 | } 122 | line += word + " "; 123 | } 124 | _processedText += line; 125 | 126 | // prepare fitter and label for character animation 127 | fitter.horizontalFit = ContentSizeFitter.FitMode.Unconstrained; 128 | fitter.verticalFit = ContentSizeFitter.FitMode.Unconstrained; 129 | label.text = ""; 130 | label.rectTransform.sizeDelta = new Vector2(label.rectTransform.sizeDelta.x, totalHeight); 131 | label.color = new Color(label.color.r, label.color.g, label.color.b, alpha); 132 | } 133 | 134 | private IEnumerator CharacterAnimation () 135 | { 136 | // prepare target 137 | Text label = GetComponent(); 138 | 139 | // go through character in processed text 140 | string prefix = ""; 141 | foreach (char c in _processedText.ToCharArray()) { 142 | // animate character size 143 | int size = characterStartSize; 144 | while (size < label.fontSize) { 145 | size += (int)(Time.deltaTime * characterAnimateSpeed); 146 | size = Mathf.Min(size, label.fontSize); 147 | label.text = prefix + "" + c + ""; 148 | yield return new WaitForEndOfFrame(); 149 | } 150 | prefix += c; 151 | } 152 | 153 | // set processed text 154 | label.text = _processedText; 155 | } 156 | 157 | } 158 | --------------------------------------------------------------------------------