{"id":846,"date":"2020-11-10T13:40:32","date_gmt":"2020-11-10T03:40:32","guid":{"rendered":"http:\/\/www.nickdu.com\/?p=846"},"modified":"2020-11-10T13:40:32","modified_gmt":"2020-11-10T03:40:32","slug":"odometer-in-unity","status":"publish","type":"post","link":"https:\/\/nickdu.com\/?p=846","title":{"rendered":"Odometer in Unity"},"content":{"rendered":"\n

To create a odometer in Unity is not easy. I couldn’t find a better one for my project.<\/p>\n\n\n\n

Prepare all possible characters in a spinning roll and then stack them<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
 void Prepare()\n {\n     \/\/keep the orginal text vector for future use\n     Meter.ForceMeshUpdate();\n     sourceVertices = (Vector3[])Meter.textInfo.CopyMeshInfoVertexData()[0].vertices.Clone();\n     Meter.textInfo.Clear();\n     var templateString = string.Empty;\n     foreach (var s in SpinStrip)\n     {\n         templateString += s + \"\\n\";\n     }\n\n     \/\/Update text to spinning text\n     Meter.text = templateString;\n     Meter.ForceMeshUpdate();\n     cachedMeshInfo = Meter.textInfo.CopyMeshInfoVertexData();\n\n     HideSpinCharacters();\n     Spin(Meter.textInfo.characterInfo[currentValue], centerOfRotation, 0);\n     Apply();\n }\n\n void HideSpinCharacters()\n {\n     for (var i = 0; i < Meter.textInfo.characterCount; i++)\n     {\n         var charInfo = Meter.textInfo.characterInfo[i];\n         if (charInfo.isVisible)\n         {\n             Spin(charInfo, centerOfRotation, -90);\n         }\n     }\n }<\/code><\/pre>\n\n\n\n
Spin each character one by one<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
...\n IEnumerator Spin(Tuple<int, int, float> param)\n {\n     for (var curChar = param.Item1; curChar < param.Item2;curChar += 2)\n     {\n         var curCharInfo = Meter.textInfo.characterInfo[curChar];\n         var nextCharInfo = Meter.textInfo.characterInfo[curChar + 2];\n\n         for (float degree = -90; degree <= 0; degree += param.Item3)\n         {\n             Spin(curCharInfo, centerOfRotation, (degree + 90) < 90 ? (degree + 90) : 90);\n             Spin(nextCharInfo, centerOfRotation, degree);\n             Apply();\n             yield return null;\n         }\n         yield return null;\n     }\n }\n\nvoid Spin(TMP_CharacterInfo charInfo, Vector3 centerOfRotation, float angleOfRotation)\n {\n     \/\/ Get the index of the material used by the current character.\n     int materialIndex = charInfo.materialReferenceIndex;\n\n     \/\/ Get the index of the first vertex used by this text element.\n     int vertexIndex = charInfo.vertexIndex;\n\n     \/\/ Get the cached vertices of the mesh used by this text element (character or sprite).\n\n     \/\/ Determine the center point of each character at the baseline.\n     \/\/ Determine the center point of each character.\n     Vector2 charMidBasline = (sourceVertices[0] + sourceVertices[2]) \/ 2;\n\n     \/\/ Need to translate all 4 vertices of each quad to aligned with middle of character \/ baseline.\n     \/\/ This is needed so the matrix TRS is applied at the origin for each character.\n     Vector3 offset = charMidBasline;\n\n     Vector3[] destinationVertices = Meter.textInfo.meshInfo[materialIndex].vertices;\n\n     destinationVertices[vertexIndex + 0] = sourceVertices[0] - offset;\n     destinationVertices[vertexIndex + 1] = sourceVertices[1] - offset;\n     destinationVertices[vertexIndex + 2] = sourceVertices[2] - offset;\n     destinationVertices[vertexIndex + 3] = sourceVertices[3] - offset;\n\n\n     \/\/ This should calculate the matrix, which helps to roate odometer\n     Matrix4x4 translationToCenterPoint = Matrix4x4.Translate(centerOfRotation);\n     Matrix4x4 rotation = Matrix4x4.Rotate(Quaternion.AngleAxis(angleOfRotation, Vector3.right));\n     Matrix4x4 translationBackToOrigin = Matrix4x4.Translate(-centerOfRotation);\n\n     Matrix4x4 matrix = translationToCenterPoint * rotation * translationBackToOrigin;\n\n     destinationVertices[vertexIndex + 0] = matrix.MultiplyPoint3x4(destinationVertices[vertexIndex + 0]);\n     destinationVertices[vertexIndex + 1] = matrix.MultiplyPoint3x4(destinationVertices[vertexIndex + 1]);\n     destinationVertices[vertexIndex + 2] = matrix.MultiplyPoint3x4(destinationVertices[vertexIndex + 2]);\n     destinationVertices[vertexIndex + 3] = matrix.MultiplyPoint3x4(destinationVertices[vertexIndex + 3]);\n\n     destinationVertices[vertexIndex + 0] += offset;\n     destinationVertices[vertexIndex + 1] += offset;\n     destinationVertices[vertexIndex + 2] += offset;\n     destinationVertices[vertexIndex + 3] += offset;\n }\n...<\/code><\/pre>\n\n\n\n
The complete Unity project can be found at my github<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
To create a odometer in Unity is not easy. I couldn’t find a better one for my project. Prepare all possible characters in a spinning roll and then stack them Spin each character one by one The complete Unity project can be found at my github.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,2],"tags":[],"class_list":["post-846","post","type-post","status-publish","format-standard","hentry","category-net","category-it"],"_links":{"self":[{"href":"https:\/\/nickdu.com\/index.php?rest_route=\/wp\/v2\/posts\/846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nickdu.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nickdu.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nickdu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nickdu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=846"}],"version-history":[{"count":0,"href":"https:\/\/nickdu.com\/index.php?rest_route=\/wp\/v2\/posts\/846\/revisions"}],"wp:attachment":[{"href":"https:\/\/nickdu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nickdu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nickdu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}