[{"data":1,"prerenderedAt":1707},["ShallowReactive",2],{"tutorial-2022-01-visual-scripting-201-transform":3},{"tutorial":4,"series":370,"author":1696},{"id":5,"title":6,"author":7,"body":8,"category":350,"cover":351,"date":354,"description":355,"extension":356,"meta":357,"navigation":358,"path":359,"seo":360,"series":361,"stem":362,"tags":363,"youtube":366,"youtubeRange":367,"__hash__":368,"slug":369},"posts\u002Fposts\u002F2022\u002F01\u002Fvisual-scripting-201-transform.md","Transform","danielle",{"type":9,"value":10,"toc":334},"minimark",[11,19,24,27,32,43,49,53,60,65,69,80,85,104,109,112,116,126,143,148,172,177,181,186,189,208,215,220,223,227,250,255,262,267,284,288,291,311,316,328,331],[12,13,14,15,18],"p",{},"In this article, we will get to know how we can move, rotate and scale Game Objects in Unity’s Visual Scripting. We’ll explore all the nodes Unity offers for working with the ",[16,17,6],"em",{}," component.",[20,21,23],"h2",{"id":22},"properties","Properties",[12,25,26],{},"When working with Game Objects, we want to move and change them by accessing the Transform component’s properties.",[28,29,31],"h3",{"id":30},"position","Position",[12,33,34,35,38,39,42],{},"To access the position of a Game Object in the world, we use the ",[16,36,37],{},"Get Position"," node. To modify it, we’ll use the ",[16,40,41],{},"Set Position"," node.",[44,45,48],"article-image",{"src":46,"alt":47},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-1.jpg","Unity Visual Scripting – Get Position, Set Position","\nGet\u002FSet Position nodes.\n",[28,50,52],{"id":51},"scale","Scale",[12,54,55,56,59],{},"We can use the ",[16,57,58],{},"Get Lossy Scale"," node to get the Object’s actual size.",[44,61,64],{"src":62,"alt":63},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-2.jpg","Unity Visual Scripting – Get Loosty Scale","\nGet Loosty Scale node.\n",[28,66,68],{"id":67},"rotation","Rotation",[12,70,71,72,75,76,79],{},"When we want to rotate an Object, we have the ",[16,73,74],{},"Get Euler Angles"," & ",[16,77,78],{},"Set Euler Angles"," nodes; we can retrieve and modify the Object’s rotation angle through them.",[44,81,84],{"src":82,"alt":83},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-3.jpg","Unity Visual Scripting – Get\u002FSet Euler Angles","\nGet\u002FSet Euler Angles nodes.\n",[12,86,87,88,91,92,95,96,99,100,103],{},"If we want to increase or decrease the existing rotation angle, we can use the ",[16,89,90],{},"Transform Rotate"," node. It also allows us to configure the ",[16,93,94],{},"Relative To"," option, which we can set to ",[16,97,98],{},"World"," or ",[16,101,102],{},"Self"," – determining whether to rotate the Object relative to itself or to the parent Game Object it is under.",[44,105,108],{"src":106,"alt":107},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-4.jpg","Unity Visual Scripting – Rotate","\nRotate node.\n",[110,111],"article-assets",{},[20,113,115],{"id":114},"parenting","Parenting",[12,117,118,119,122,123,125],{},"When we nest Objects in the hierarchy, we refer to them as a parent and child.",[120,121],"br",{},"\nWe have access to various nodes dedicated to controlling the Objects’ hierarchy.",[120,124],{},"\nIn some cases, we will set a Game Object as a child affected by its parent, such as the case of a tank’s turret. We want the turret to rotate and move along with the tank’s body, so we’ll set it as a child of the body Object.",[12,127,128,129,75,132,135,136,138,139,142],{},"In the graph, we use the ",[16,130,131],{},"Get Parent",[16,133,134],{},"Set Parent"," nodes to control the Object’s parent and retrieve it.",[120,137],{},"\nWe got another node for setting the parent, ",[16,140,141],{},"Set Parent (World Position Stays)"," node, and with it, as its name suggests, we can choose to retain the Object’s world position, rotation, and scale when changing the parent.",[44,144,147],{"src":145,"alt":146},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-5.jpg","Unity Visual Scripting – Get\u002FSet Parnet","\nGet\u002FSet Parnet nodes.\n",[12,149,150,151,154,155,42,158,160,161,164,165,167,168,171],{},"A parent Object may have multiple children; we can ask for a specific child using the ",[16,152,153],{},"Get Child"," node or count them with the ",[16,156,157],{},"Get Child Count",[120,159],{},"\nCombing these nodes with the ",[16,162,163],{},"For Loop"," node, we access all the parent’s children.",[120,166],{},"\nThe ",[16,169,170],{},"Detach Children"," node allows us to disconnect all the parent’s child Game Objects.",[44,173,176],{"src":174,"alt":175},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-6.jpg","Unity Visual Scripting – Get Child, Get Child Count, Detach Children","\nGet Child, Get Child Count, Detach Children nodes.\n",[28,178,180],{"id":179},"local-vs-world","Local vs World",[12,182,183,184],{},"We already know we can get and set the different properties of the Transform component; we can also transform Game Objects relative to their parent.",[120,185],{},[12,187,188],{},"We can use nodes similar to those we met earlier:",[190,191,192,198,203],"ul",{},[193,194,195],"li",{},[16,196,197],{},"Get\u002FSet Local Position",[193,199,200],{},[16,201,202],{},"Get\u002FSet Local Scale",[193,204,205],{},[16,206,207],{},"Get\u002FSet Local Euler Angles",[12,209,210,211,214],{},"These nodes differ from the previous nodes we learned about in such they are retrieving or changing the properties based on the parent. For example, ",[16,212,213],{},"Get Local Position"," provides us the distance from the parent instead of the position in the world.",[44,216,219],{"src":217,"alt":218},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-7.jpg","Unity Visual Scripting – Transform local","\nTransform local nodes.\n",[221,222],"article-affiliate-group",{},[20,224,226],{"id":225},"moving-objects","Moving Objects",[12,228,229,230,167,232,235,236,239,240,242,243,246,247,249],{},"Moving a Game Object is a fundamental part of creating any game in Unity, and as such, there are many ways to do so.",[120,231],{},[16,233,234],{},"Translate"," node moves a Game Object in the direction and distance based on the ",[16,237,238],{},"vector"," input. It’s a shortcut for a graph built of ",[16,241,37],{}," and ",[16,244,245],{},"Add"," nodes connected to ",[16,248,41],{},".",[44,251,254],{"src":252,"alt":253},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-8.jpg","Unity Visual Scripting – Translate","\nTranslate node.\n",[12,256,257,258,261],{},"Another valuable node is ",[16,259,260],{},"Look At",". With this node, we can rotate to follow another Game Object as it moves.",[44,263,266],{"src":264,"alt":265},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-9.jpg","Unity Visual Scripting – Look At","\nLook At node.\n",[12,268,269,270,272,273,276,277,279,280,283],{},"For example, we can make the game’s camera follow another Game Object.",[120,271],{},"\nWe add a Script Graph to the camera Game Object and connect the ",[16,274,275],{},"Update"," event to the ",[16,278,260],{}," node. We attach the Game Object to the Target input using the ",[16,281,282],{},"Game Object Find"," node. When we move the Game Object at runtime, the camera will follow it around.",[28,285,287],{"id":286},"movement-direction","Movement Direction",[12,289,290],{},"We can get the direction axis the Transform faces with the Get Up, Get Right, and Get Forward nodes:",[190,292,293,299,305],{},[193,294,295,298],{},[16,296,297],{},"Get Up"," is for the green arrow.",[193,300,301,304],{},[16,302,303],{},"Get Right"," is for the red arrow.",[193,306,307,310],{},[16,308,309],{},"Get Forward"," is for the blue arrow.",[44,312,315],{"src":313,"alt":314},"\u002Fposts\u002F2022\u002F01-18\u002Fvs-transform-10.jpg","Unity Visual Scripting – Transform Get Up, Get Right, Get Forward","\nGet Up, Get Right, Get Forward nodes.\n",[12,317,318,319,321,322,324,325,327],{},"When it comes to controlling the movement direction of a Game Object, these nodes come in handy.",[120,320],{},"\nFor example, connecting the ",[16,323,297],{}," node to the ",[16,326,234],{}," node will move the Object one unit in the direction of the green arrow.",[329,330],"hr",{},[12,332,333],{},"Thank you for following along!",{"title":335,"searchDepth":336,"depth":336,"links":337},"",3,[338,344,347],{"id":22,"depth":339,"text":23,"children":340},2,[341,342,343],{"id":30,"depth":336,"text":31},{"id":51,"depth":336,"text":52},{"id":67,"depth":336,"text":68},{"id":114,"depth":339,"text":115,"children":345},[346],{"id":179,"depth":336,"text":180},{"id":225,"depth":339,"text":226,"children":348},[349],{"id":286,"depth":336,"text":287},"tutorial",{"480w":352,"960w":353},"\u002Fposts\u002F2022\u002F01-18\u002Fvisual-scripting-transform-480w.jpg","\u002Fposts\u002F2022\u002F01-18\u002Fvisual-scripting-transform-960w.jpg","2022-01-18","Learn how to move, rotate and scale Game Objects in Unity’s Visual Scripting. We’ll explore all the nodes Unity offers for working with the Transform component.","md",{},true,"\u002Fposts\u002F2022\u002F01\u002Fvisual-scripting-201-transform",{"title":6,"description":355},"2022-visual-scripting-components","posts\u002F2022\u002F01\u002Fvisual-scripting-201-transform",[364,365],"unity","visual-scripting","tNscZ8J01bY",null,"s7AU_c_zcKThF0urqTPDHyDUtAw2QaowRZLuJnjiqfA","visual-scripting-201-transform",{"id":371,"title":372,"description":373,"extension":374,"hideParts":375,"meta":376,"shortTitle":377,"stem":378,"__hash__":379,"posts":380},"tutorials\u002Ftutorials\u002F2022-visual-scripting-components.yaml","Unity Components in Visual Scripting ","Work with Unity’s components with Visual Scripting without writing code!","yaml",false,{},"Visual Scripting Components","tutorials\u002F2022-visual-scripting-components","nczLJ9oCc3kuYTXk5dWn9p8njSXer0a-bK-UVFxrIMs",[381,583,1066,1439],{"id":5,"title":6,"author":7,"body":382,"category":350,"cover":579,"date":354,"description":355,"extension":356,"meta":580,"navigation":358,"path":359,"seo":581,"series":361,"stem":362,"tags":582,"youtube":366,"youtubeRange":367,"__hash__":368,"slug":369},{"type":9,"value":383,"toc":566},[384,388,390,392,394,400,402,404,408,410,412,418,420,430,432,434,436,442,452,454,468,470,472,476,478,492,496,498,500,502,516,518,522,524,534,536,538,552,554,562,564],[12,385,14,386,18],{},[16,387,6],{},[20,389,23],{"id":22},[12,391,26],{},[28,393,31],{"id":30},[12,395,34,396,38,398,42],{},[16,397,37],{},[16,399,41],{},[44,401,48],{"src":46,"alt":47},[28,403,52],{"id":51},[12,405,55,406,59],{},[16,407,58],{},[44,409,64],{"src":62,"alt":63},[28,411,68],{"id":67},[12,413,71,414,75,416,79],{},[16,415,74],{},[16,417,78],{},[44,419,84],{"src":82,"alt":83},[12,421,87,422,91,424,95,426,99,428,103],{},[16,423,90],{},[16,425,94],{},[16,427,98],{},[16,429,102],{},[44,431,108],{"src":106,"alt":107},[110,433],{},[20,435,115],{"id":114},[12,437,118,438,122,440,125],{},[120,439],{},[120,441],{},[12,443,128,444,75,446,135,448,138,450,142],{},[16,445,131],{},[16,447,134],{},[120,449],{},[16,451,141],{},[44,453,147],{"src":145,"alt":146},[12,455,150,456,154,458,42,460,160,462,164,464,167,466,171],{},[16,457,153],{},[16,459,157],{},[120,461],{},[16,463,163],{},[120,465],{},[16,467,170],{},[44,469,176],{"src":174,"alt":175},[28,471,180],{"id":179},[12,473,183,474],{},[120,475],{},[12,477,188],{},[190,479,480,484,488],{},[193,481,482],{},[16,483,197],{},[193,485,486],{},[16,487,202],{},[193,489,490],{},[16,491,207],{},[12,493,210,494,214],{},[16,495,213],{},[44,497,219],{"src":217,"alt":218},[221,499],{},[20,501,226],{"id":225},[12,503,229,504,167,506,235,508,239,510,242,512,246,514,249],{},[120,505],{},[16,507,234],{},[16,509,238],{},[16,511,37],{},[16,513,245],{},[16,515,41],{},[44,517,254],{"src":252,"alt":253},[12,519,257,520,261],{},[16,521,260],{},[44,523,266],{"src":264,"alt":265},[12,525,269,526,272,528,276,530,279,532,283],{},[120,527],{},[16,529,275],{},[16,531,260],{},[16,533,282],{},[28,535,287],{"id":286},[12,537,290],{},[190,539,540,544,548],{},[193,541,542,298],{},[16,543,297],{},[193,545,546,304],{},[16,547,303],{},[193,549,550,310],{},[16,551,309],{},[44,553,315],{"src":313,"alt":314},[12,555,318,556,321,558,324,560,327],{},[120,557],{},[16,559,297],{},[16,561,234],{},[329,563],{},[12,565,333],{},{"title":335,"searchDepth":336,"depth":336,"links":567},[568,573,576],{"id":22,"depth":339,"text":23,"children":569},[570,571,572],{"id":30,"depth":336,"text":31},{"id":51,"depth":336,"text":52},{"id":67,"depth":336,"text":68},{"id":114,"depth":339,"text":115,"children":574},[575],{"id":179,"depth":336,"text":180},{"id":225,"depth":339,"text":226,"children":577},[578],{"id":286,"depth":336,"text":287},{"480w":352,"960w":353},{},{"title":6,"description":355},[364,365],{"id":584,"title":585,"author":7,"body":586,"category":350,"cover":1053,"date":1056,"description":1057,"extension":356,"meta":1058,"navigation":358,"path":1059,"seo":1060,"series":361,"stem":1061,"tags":1062,"youtube":1063,"youtubeRange":367,"__hash__":1064,"slug":1065},"posts\u002Fposts\u002F2022\u002F01\u002Fvisual-scripting-202-input.md","Input",{"type":9,"value":587,"toc":1044},[588,594,598,601,608,613,665,670,681,683,687,693,697,705,723,726,757,762,780,787,792,795,817,846,848,884,889,903,925,930,937,942,973,991,996,1000,1009,1014,1027,1032,1040,1042],[12,589,590,591,249],{},"In this article, we will learn how to react to user input in Unity Visual Scripting; we’ll explore the nodes Unity offers for working with keyboard and mouse input and manage it through the ",[16,592,593],{},"Input Manager",[20,595,597],{"id":596},"keyboard-input","Keyboard Input",[12,599,600],{},"Let’s move a character right and left!",[12,602,603,604,607],{},"To react to a keyboard keypress, we use the ",[16,605,606],{},"On Keyboard Input"," node, select a key and an action to respond to. All the keys are available, but we choose the right arrow key for this example.",[44,609,612],{"src":610,"alt":611},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-0.jpg","Unity Visual Scripting – On Keyboard Input event node","\nOn Keyboard Input node.\n",[12,614,615,616,619,620,623,624,627,628,630,631,633,634,636,637,639,640,642,643,645,646,648,649,656,657,659,660,664],{},"As for the action, we can choose from ",[16,617,618],{},"Hold",", ",[16,621,622],{},"Down",", and ",[16,625,626],{},"Up",". We select ",[16,629,622],{}," when we only care for the exact frame the key is pressed, ",[16,632,626],{}," when the key is released, and ",[16,635,618],{}," for as long as the key is pressed.",[120,638],{},"\nFor moving a character right as long as the right arrow key is held down, we select the ",[16,641,618],{}," action.",[120,644],{},"\nWe’ll use the ",[16,647,234],{}," node to move the character. We covered this node in the ",[650,651,653,655],"a",{"href":652},"\u002Ftutorials\u002F2022\u002F01\u002Fvisual-scripting-201-transform",[16,654,6],{}," article"," – check it out if you’re unfamiliar with it.",[120,658],{},"\nInsert the value ",[661,662,663],"code",{},"0.1"," at the X-axis, and now, by holding down the right arrow, the character will move along the X-axis.",[44,666,669],{"src":667,"alt":668},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-1.jpg","Unity Visual Scripting – Keyboard input and Translate nodes","\nMoving an object by keyboard input.\n",[12,671,672,673,676,677,680],{},"By duplicating this graph section while modifying the key to ",[16,674,675],{},"Left Arrow"," and value to ",[661,678,679],{},"-0.1",", we can move the character in both directions.",[110,682],{},[20,684,686],{"id":685},"mouse","Mouse",[12,688,689,690,249],{},"To learn about mouse input, we will use a new Game Object name ",[16,691,692],{},"Button",[28,694,696],{"id":695},"colliders","Colliders",[12,698,699,700,702,703],{},"To recognize input coming from the player’s mouse, we need the Game Object to have a physical presence in the world by adding a collider component.",[120,701],{},"\nColliders come in many shapes and aren’t actually visible in the game. We use them to define the object’s form in the Scene’s physics.",[120,704],{},[12,706,707,708,716,717,719,720,18],{},"For now, just ",[709,710,711,712,715],"strong",{},"remember to use a ",[16,713,714],{},"Collider 2D"," for 2D objects and regular colliders for 3D objects."," It is common to mix up those, so always double-check yourself.",[120,718],{},"\nFor our button, we add a ",[16,721,722],{},"Box Collider 2D",[28,724,585],{"id":725},"input",[12,727,728,729,732,733,735,736,739,740,743,744,746,747,750,751,619,753,623,755,249],{},"In the button’s ",[16,730,731],{},"Script Graph",", we have a few nodes available for mouse input.",[120,734],{},"\nWhen the player presses the mouse button over a Game Object with a collider, the event ",[16,737,738],{},"On Mouse Down"," is triggered. When the mouse is released, the ",[16,741,742],{},"On Mouse Up"," event node will be called.",[120,745],{},"\nIf we want to react to a player pressing a specific mouse button, we can use the ",[16,748,749],{},"On Mouse Input"," event node to specify which button to react to and to which action – ",[16,752,618],{},[16,754,622],{},[16,756,626],{},[44,758,761],{"src":759,"alt":760},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-2.jpg","Unity Visual Scripting – On Mouse Down, On Mouse Up, and On Mouse Input event nodes","\nOn Mouse Down, On Mouse Up, and On Mouse Input event nodes.\n",[12,763,764,765,768,769,772,773,775,776,779],{},"The ",[16,766,767],{},"On Mouse Over"," event node executes every frame as long as the mouse is over the Game Object’s collider. The ",[16,770,771],{},"On Mouse Exit"," event is triggered at the moment the mouse is no longer over the collider.",[120,774],{},"\nWe use the ",[16,777,778],{},"On Mouse Drag"," event for reacting to a player clicking on a collider while still holding down the button.",[12,781,782,783,786],{},"And finally, the ",[16,784,785],{},"On Mouse Up As Button"," node is called when the player presses the mouse button and releases it over the exact same collider.",[44,788,791],{"src":789,"alt":790},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-3.jpg","Unity Visual Scripting – On Mouse Over, On Mouse Exit, On Mouse Drag, and On Mouse Up As Button event nodes","\nOn Mouse Over, On Mouse Exit, On Mouse Drag, and On Mouse Up As Button event nodes.\n",[20,793,593],{"id":794},"input-manager",[12,796,797,798,801,802,249,805,807,808,811,812,811,815,249],{},"Unity provides us ",[16,799,800],{},"Input Axes"," predefined with an intended action at the ",[16,803,804],{},"Input Manager window",[120,806],{},"\nTo access it, go to ",[16,809,810],{},"Edit"," → ",[16,813,814],{},"Project Settings",[16,816,593],{},[12,818,819,820,823,824,249,827,829,830,832,833,836,837,839,840,842,843,845],{},"Virtual axes are mapped to physical controls, like a mouse button or a keyboard’s key. When a player activates the control, the axis receives a value between ",[661,821,822],{},"-1"," to ",[661,825,826],{},"1",[120,828],{},"\nThe axis value depends on the type of the physical control; for example, a keyboard’s key has a value of ",[661,831,826],{}," when the key is pressed down and a value of ",[661,834,835],{},"0"," when it’s isn’t pressed.",[120,838],{},"\nWhile for a gamepad joystick, a value of ",[661,841,826],{}," means the stick is pushed all the way in one direction, and a value of ",[661,844,822],{}," means it’s all the way in the other direction; a fractioned value would mean the joystick is somewhere between those extremes.",[221,847],{},[12,849,850,851,854,855,858,859,861,862,865,866,865,869,865,872,875,876,879,880,883],{},"Two of the predefined virtual axes we’ll cover are the ",[16,852,853],{},"Horizontal axis"," and the ",[16,856,857],{},"Vertical axis"," – one for actions relevant to the X-axis and the other for actions relevant to the Y-axis.",[120,860],{},"\nWhen we open the Horizontal axis, we can see how it’s defined for both the arrow keys and the alternative ",[661,863,864],{},"W"," ",[661,867,868],{},"A",[661,870,871],{},"S",[661,873,874],{},"D"," keys. The ",[16,877,878],{},"Positive Button"," is the control that yields a positive axis value, while the ",[16,881,882],{},"Negative Button"," is the control that will produce a negative value.",[44,885,888],{"src":886,"alt":887},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-4.jpg","Unity Visual Scripting – Input Manager","\nInput Manager.\n",[12,890,891,892,895,896,899,900,902],{},"Jumping to the ",[16,893,894],{},"Jump axis",", you will see it’s already set with the ",[16,897,898],{},"Space"," key as its control.",[120,901],{},"\nThere are also other properties, but we will not go into them at this point, as we’ll just use the predefined axes as they are.",[12,904,905,906,908,909,912,913,915,916,918,919,921,922,924],{},"Back to our ",[16,907,731],{},", we got the ",[16,910,911],{},"On Button Input"," event; With this node, we can react to an input of the axis that exists in the ",[16,914,593],{},". We will use it with a virtual axis like Jump.",[120,917],{},"\nFor example, let’s connect it to the ",[16,920,234],{}," node with a Y value of ",[661,923,826],{},". When we enter play mode, we can press the Space key on our keyboard, and the character will jump.",[44,926,929],{"src":927,"alt":928},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-5.jpg","Unity Visual Scripting – On Button Input and Translate nodes","\nJumping while an input button is pressed.\n",[12,931,932,933,936],{},"Another node we can use is ",[16,934,935],{},"Input Get Axis","; with it, we can get the value of the virtual axis.",[44,938,941],{"src":939,"alt":940},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-6.jpg","Unity Visual Scripting – Get Axis node","\nGet Axis node.\n",[12,943,944,945,947,948,950,951,42,953,955,956,958,959,961,962,965,966,823,968,249,970,972],{},"For example, let’s make the character move right and left using the keyboard.",[120,946],{},"\nWe start with the ",[16,949,275],{}," event node, as we constantly want to react to the player and connect it to the ",[16,952,234],{},[120,954],{},"\nWe want the character to move on the X-axis, so we will use the ",[16,957,935],{}," node, name it according to the predefined Horizontal axis, and connect it to the ",[16,960,234],{}," node using a ",[16,963,964],{},"Vector 3 Create"," node. This will provide the X-axis of Translate values between ",[661,967,822],{},[661,969,826],{},[120,971],{},"\nNow our character can move horizontally.",[12,974,975,976,978,979,981,982,865,984,865,986,865,988,990],{},"Let’s also make this character move vertically on the Y-axis. We duplicate the ",[16,977,935],{}," node, name it according to the predefined Vertical axis, and connect it to the Y input.",[120,980],{},"\nWe now have a character able to move on both the X and Y axes, powered by the arrow keys and the ",[661,983,864],{},[661,985,868],{},[661,987,871],{},[661,989,874],{}," keys.",[44,992,995],{"src":993,"alt":994},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-7.jpg","Unity Visual Scripting – Moving an object in all directions with Input Axes","\nMoving an object in all directions with Input Axes.\n",[20,997,999],{"id":998},"mouse-position","Mouse Position",[12,1001,1002,1003,1005,1008],{},"The last topic we’ll cover is reacting to the mouse pointer’s position.",[120,1004],{},[16,1006,1007],{},"Get Mouse Position"," node provides us the current pixels screen position of the mouse.",[44,1010,1013],{"src":1011,"alt":1012},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-8.jpg","Unity Visual Scripting – Get Mouse Position node","\nGet Mouse Position node.\n",[12,1015,1016,1017,1019,1020,1023,1024,1026],{},"Let’s use it to make an object face the mouse pointer. We got familiar with the ",[16,1018,260],{}," node in the ",[650,1021,1022],{"href":652},"previous article","; We’ll use it to rotate the object to face the mouse as it moves.",[120,1025],{},"\nWe’ll also use two camera nodes to convert the screen’s pixels location of the mouse into a Unity World position.",[44,1028,1031],{"src":1029,"alt":1030},"\u002Fposts\u002F2022\u002F01-25\u002Fvs-input-9.jpg","Unity Visual Scripting – Looking at the mouse pointer","\nLooking at the mouse pointer.\n",[12,1033,1034,1035,42,1037,1039],{},"We set the graph as shown. On every frame, we pass the converted Z mouse position to the ",[16,1036,260],{},[120,1038],{},"\nPressing play, we can see how the object faces the mouse pointer. In the Scene window, we can observe how the blue arrow gizmo always points to the pointer position in the Game window.",[329,1041],{},[12,1043,333],{},{"title":335,"searchDepth":336,"depth":336,"links":1045},[1046,1047,1051,1052],{"id":596,"depth":339,"text":597},{"id":685,"depth":339,"text":686,"children":1048},[1049,1050],{"id":695,"depth":336,"text":696},{"id":725,"depth":336,"text":585},{"id":794,"depth":339,"text":593},{"id":998,"depth":339,"text":999},{"480w":1054,"960w":1055},"\u002Fposts\u002F2022\u002F01-25\u002Fvisual-scripting-input-480w.jpg","\u002Fposts\u002F2022\u002F01-25\u002Fvisual-scripting-input-960w.jpg","2022-01-25","Learn how to react to user input in Unity Visual Scripting. We’ll explore the nodes Unity offers for working with keyboard and mouse input and manage it through the Input Manager.",{},"\u002Fposts\u002F2022\u002F01\u002Fvisual-scripting-202-input",{"title":585,"description":1057},"posts\u002F2022\u002F01\u002Fvisual-scripting-202-input",[364,365],"wCJYrI65kxo","Q8TiLwXtTCYDpAWGPoidRQ-TW5-iZJBg_hC_sMWXst4","visual-scripting-202-input",{"id":1067,"title":1068,"author":7,"body":1069,"category":350,"cover":1426,"date":1429,"description":1430,"extension":356,"meta":1431,"navigation":358,"path":1432,"seo":1433,"series":361,"stem":1434,"tags":1435,"youtube":1436,"youtubeRange":367,"__hash__":1437,"slug":1438},"posts\u002Fposts\u002F2022\u002F01\u002Fvisual-scripting-203-timing.md","Timing",{"type":9,"value":1070,"toc":1414},[1071,1074,1078,1081,1084,1089,1113,1118,1120,1124,1128,1133,1138,1150,1152,1183,1188,1213,1218,1236,1240,1246,1251,1270,1274,1278,1284,1289,1314,1319,1323,1332,1337,1350,1354,1366,1371,1378,1388,1393,1409,1411],[12,1072,1073],{},"In this article, we’ll learn how to utilize timing in Unity Visual Scripting; We will explore all the nodes Unity offers for working with time.",[20,1075,1077],{"id":1076},"waiting","Waiting",[12,1079,1080],{},"In some cases, we may want to suspend the execution of the rest of the graph flow. For example, we may wish to delay the appearance of a Game Object to give it the dramatic entrance it deserves.",[12,1082,1083],{},"To create such a delay, we can use one of the Wait nodes. A delay can be a given number of seconds or a condition that must be fulfilled before moving on.",[44,1085,1088],{"src":1086,"alt":1087},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-1.jpg","Unity Visual Scripting – Wait node","\nWait node.\n",[12,1090,1091,1094,1095,1097,1098,1101,1102,249,1105,1107,1108,42,1110,1112],{},[16,1092,1093],{},"Wait For Seconds"," is a straightforward wait node and probably the most common. With this node, we can set the delay time by a number of seconds.",[120,1096],{},"\nWhen using a ",[16,1099,1100],{},"Wait"," node, it is essential to mark the initial event that starts the flow as a ",[16,1103,1104],{},"Coroutine",[120,1106],{},"\nWith a Coroutine, we can run an iteration over multiple frames instead of completing the task immediately. Without this setting, our script won’t support the ",[16,1109,1100],{},[120,1111],{},"\nWe mark the event as a Coroutine by selecting it and enabling the Coroutine checkbox. Notice how a small dual-arrow icon appears on the event, indicating that it runs as a Coroutine.",[44,1114,1117],{"src":1115,"alt":1116},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-2.jpg","Unity Visual Scripting – On Start node with Coroutine","\nOn Start node with Coroutine option.\n",[110,1119],{},[20,1121,1123],{"id":1122},"progression","Progression",[28,1125,1127],{"id":1126},"timer","Timer",[12,1129,764,1130,1132],{},[16,1131,1127],{}," node allows us to delay the main action and run another action with each frame tick until the timer completes.",[44,1134,1137],{"src":1135,"alt":1136},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-3.jpg","Unity Visual Scripting – Timer node","\nTimer node.\n",[12,1139,1140,1141,1143,1144,167,1146,1149],{},"We set the timer’s duration at the duration input.",[120,1142],{},"\nThe timer will start its counting when the Start input is called by a flow, which in turn triggers the Started output flow.",[120,1145],{},[16,1147,1148],{},"Tick"," output flow will get called at every frame while a timer is active. And finally, when the timer is completed, it will call the Completed output flow once.",[221,1151],{},[12,1153,1154,1155,1158,1159,1162,1163,167,1165,1168,1169,1172,1173,1175,1176,1179,1180,1182],{},"In the example below, we have a Start event connected to the Start input of the timer. The ",[16,1156,1157],{},"Started"," output flow is connected to a Set Local Scale node with a value of ",[661,1160,1161],{},"2"," at both the X and Y, which will double the Game Object’s size.",[120,1164],{},[16,1166,1167],{},"Completed"," output flow is connected to a ",[16,1170,1171],{},"Sprite Renderer Set Color"," node, which tints the sprite black.\nAs for the ",[16,1174,1148],{}," output flow, it’s connected to the ",[16,1177,1178],{},"Toggle Value"," node, and with each toggle, it will switch between the red and green colors.",[120,1181],{},"\nAt Play Mode, the Game Object’s sprite will increase in size, recolor from white to flickering red and green, and finally, settle with black.",[44,1184,1187],{"src":1185,"alt":1186},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-4.jpg","Unity Visual Scripting – Using Timer and Toggle Value nodes to change sprite colors","\nUsing Timer and Toggle Value nodes to change sprite colors.\n",[12,1189,1190,1191,1193,1194,242,1197,1200,1201,1204,1205,242,1207,1209,1210,1212],{},"A ",[16,1192,1127],{}," node also features the ",[16,1195,1196],{},"Pause",[16,1198,1199],{},"Resume"," input flows, which halts the duration countdown and resumes it, while the ",[16,1202,1203],{},"Toggle"," input flow alternates between the ",[16,1206,1196],{},[16,1208,1199],{}," behavior.",[120,1211],{},"\nIn the following example, we pause and resume the timer by pressing the Space button.",[44,1214,1217],{"src":1215,"alt":1216},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-5.jpg","Unity Visual Scripting – Toggle a Timer using Pause and Resume","\nToggle a Timer using Pause and Resume.\n",[12,1219,1220,1221,1224,1225,1228,1229,1231,1232,242,1234,249],{},"To retrieve the time passed since the timer has started counting, we use the ",[16,1222,1223],{},"Elapsed"," output, and to receive the time remaining till the timer completes, we use the ",[16,1226,1227],{},"Remaining"," output.",[120,1230],{},"\nWe can get both of these values in a number of seconds or in percents, which will return a float between ",[661,1233,835],{},[661,1235,826],{},[28,1237,1239],{"id":1238},"cooldown","Cooldown",[12,1241,1242,1243,1245],{},"A similar node we have is the ",[16,1244,1239],{}," node. With it, we can limit an action to happen at most once every few seconds. It can be used to restrict the number of gunshots in a given time frame or enforce a sufficient delay from one jump to another.",[44,1247,1250],{"src":1248,"alt":1249},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-6.jpg","Unity Visual Scripting – Cooldown node","\nCooldown node.\n",[12,1252,1253,1254,1256,1257,1259,1260,1262,1263,99,1266,1269],{},"In this node, the duration number sets the time it takes for the cooldown to be completed.",[120,1255],{},"\nWhen the cooldown is completed, it will trigger the ",[16,1258,1167],{}," output flow. Till completion, the Tick flow will run every frame.",[120,1261],{},"\nWhen we trigger the main input flow, the node will invoke either the ",[16,1264,1265],{},"Ready",[16,1267,1268],{},"Not Ready"," output flows, depending on whether or not the cooldown timer is over.",[20,1271,1273],{"id":1272},"current-time","Current Time",[28,1275,1277],{"id":1276},"delta-time","Delta Time",[12,1279,1280,1283],{},[16,1281,1282],{},"Get Delta Time"," node provides us the time in seconds that passed since the previous frame – usually, it will be a fraction of a second.",[44,1285,1288],{"src":1286,"alt":1287},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-7.jpg","Unity Visual Scripting – Get Delta Time node","\nGet Delta Time node.\n",[12,1290,1291,1292,1294,1295,1297,1298,1300,1301,1303,1304,1306,1307,1310,1311,1313],{},"It’s a critical node that we’ll use to make our game smooth and independent of the frame rate.",[120,1293],{},"\nFor example, in the following graph, we got an ",[16,1296,275],{}," event node connected to a ",[16,1299,234],{}," node, which will move a Game Object on the X-axis ",[661,1302,1161],{}," units per frame. Multiplying the ",[661,1305,1161],{}," by ",[16,1308,1309],{},"Time Delta Time"," will move the Game Object on the X-axis ",[661,1312,1161],{}," units per second. This way, we can guaranty constant motion throughout the game’s lifetime.",[44,1315,1318],{"src":1316,"alt":1317},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-8.jpg","Unity Visual Scripting – Moving an object smoothly","\nMoving an object smoothly.\n",[20,1320,1322],{"id":1321},"counters","Counters",[12,1324,1325,1326,242,1329,249],{},"Two utility nodes we should know are ",[16,1327,1328],{},"Get Time",[16,1330,1331],{},"Get Frame Count",[44,1333,1336],{"src":1334,"alt":1335},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-9.jpg","Unity Visual Scripting – Get Time, and Get Frame Count nodes","\nGet Time, and Get Frame Count nodes.\n",[12,1338,764,1339,1341,1342,1344,1346,1347,1349],{},[16,1340,1328],{}," node provides the time the game has run in total.",[120,1343],{},[16,1345,1331],{}," node is the number of frames passed since the start of the game. It starts with zero and increases by ",[661,1348,826],{}," with each frame.",[20,1351,1353],{"id":1352},"time-scale","Time Scale",[12,1355,764,1356,1359,1360,1362,1363,1365],{},[16,1357,1358],{},"Set Time Scale"," node allows us to change the rate at which time progress in the game. We can use it for slow-motion effects or speed up. By default, the ",[16,1361,1353],{}," is set to ",[661,1364,826],{},", which means the time passes by just like in real life.",[44,1367,1370],{"src":1368,"alt":1369},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-10.jpg","Unity Visual Scripting – Set Time Scale node","\nSet Time Scale node.\n",[12,1372,1373,1374,1377],{},"You may have noticed that some of the nodes covered in this artice have the ",[16,1375,1376],{},"Unscaled"," input. Enabling this option will make the node’s time pass in real-time, even if we change the Time Scale.",[12,1379,1380,1381,854,1384,1387],{},"The last nodes for this article are the ",[16,1382,1383],{},"Get Unscaled Delta Time",[16,1385,1386],{},"Get Realtime Since Startup"," nodes.",[44,1389,1392],{"src":1390,"alt":1391},"\u002Fposts\u002F2022\u002F01-31\u002Fvs-timing-11.jpg","Unity Visual Scripting – Get Unscaled Time, and Get Realtime Since Startup nodes","\nGet Unscaled Time, and Get Realtime Since Startup nodes.\n",[12,1394,764,1395,1397,1398,1400,1401,1403,1404,167,1406,1408],{},[16,1396,1383],{}," node is like the ",[16,1399,1282],{}," node, but it’s unaffected by ",[16,1402,1353],{}," changes.",[120,1405],{},[16,1407,1386],{}," node is the real-time seconds since the game started, ignoring the time scale.",[329,1410],{},[12,1412,1413],{},"Thanks for following along!",{"title":335,"searchDepth":336,"depth":336,"links":1415},[1416,1417,1421,1424,1425],{"id":1076,"depth":339,"text":1077},{"id":1122,"depth":339,"text":1123,"children":1418},[1419,1420],{"id":1126,"depth":336,"text":1127},{"id":1238,"depth":336,"text":1239},{"id":1272,"depth":339,"text":1273,"children":1422},[1423],{"id":1276,"depth":336,"text":1277},{"id":1321,"depth":339,"text":1322},{"id":1352,"depth":339,"text":1353},{"480w":1427,"960w":1428},"\u002Fposts\u002F2022\u002F01-31\u002Fvisual-scripting-timing-480w.jpg","\u002Fposts\u002F2022\u002F01-31\u002Fvisual-scripting-timing-960w.jpg","2022-01-31","Learn how to utilize timing in Unity Visual Scripting; We will explore all the nodes Unity offers for working with time.",{},"\u002Fposts\u002F2022\u002F01\u002Fvisual-scripting-203-timing",{"title":1068,"description":1430},"posts\u002F2022\u002F01\u002Fvisual-scripting-203-timing",[364,365],"_e0smtK7knY","u8LzmiT8XG568UbbdzOrDFU6vdn6yM1IH8TNAerllpA","visual-scripting-203-timing",{"id":1440,"title":1441,"author":7,"body":1442,"category":350,"cover":1682,"date":1685,"description":1686,"extension":356,"meta":1687,"navigation":358,"path":1688,"seo":1689,"series":361,"stem":1690,"tags":1691,"youtube":1693,"youtubeRange":367,"__hash__":1694,"slug":1695},"posts\u002Fposts\u002F2022\u002F03\u002Fvisual-scripting-204-sprites.md","Sprites",{"type":9,"value":1443,"toc":1668},[1444,1447,1450,1454,1488,1493,1496,1500,1511,1515,1535,1540,1544,1550,1552,1556,1566,1570,1573,1577,1587,1592,1596,1605,1610,1614,1623,1628,1630,1634,1648,1653,1664,1666],[12,1445,1446],{},"In this article, we’ll learn how to use Sprites with Unity Visual Scripting.",[12,1448,1449],{},"But before jumping into scripting, let’s quickly overview using Unity Sprites...",[20,1451,1453],{"id":1452},"sprites-texture","Sprite’s Texture",[12,1455,1456,1457,1460,1461,1464,1465,1467,1468,1471,1472,99,1474,1476,1477,1479,1480,1483,1484,1487],{},"A Sprite is a 2D Game Object connected to a texture, either a ",[661,1458,1459],{},"JEPG"," or a ",[661,1462,1463],{},"PNG"," file.",[120,1466],{},"\nWhen we set up our project in ",[16,1469,1470],{},"2D mode",", any ",[661,1473,1459],{},[661,1475,1463],{}," texture we import will automatically be set as a Sprite.",[120,1478],{},"\nIf our project is in ",[16,1481,1482],{},"3D mode",", we can set the texture as Sprite by changing the ",[16,1485,1486],{},"Texture Type"," in the Inspector.",[44,1489,1492],{"src":1490,"alt":1491},"\u002Fposts\u002F2022\u002F03-01\u002Fvs-sprites-1.jpg","Unity Visual Scripting – Texture Inspector","\nTexture Inspector\n",[12,1494,1495],{},"We can also edit some of the texture’s properties:",[28,1497,1499],{"id":1498},"sprite-mode","Sprite Mode",[12,1501,1502,1503,1506,1507,1510],{},"We can set how to extract the Sprite from the texture at the Sprite Mode. The ",[16,1504,1505],{},"Single Mode"," uses the texture as-is, and the ",[16,1508,1509],{},"Multiple Mode"," is for splitting the texture into two sprites or more.",[28,1512,1514],{"id":1513},"sprite-editor","Sprite Editor",[12,1516,1517,1518,1520,1521,1524,1525,1527,1528,1530,1531,1534],{},"When we are in ",[16,1519,1509],{},", we can open the Sprite Editor, separate the texture into multiple sprites, and redefine their outline shapes. We can either do that manually by clicking on the surface and dragging to create a rectangular selection or automatically by selecting one of the different slicing options in the ",[16,1522,1523],{},"Slicing"," menu.",[120,1526],{},"\nWhen selecting one of the created outlines, we can change its Sprite’s name, position, size, and pivot.",[120,1529],{},"\nEnsure the ",[16,1532,1533],{},"2D Sprite package"," is installed to use the Sprite Editor.",[44,1536,1539],{"src":1537,"alt":1538},"\u002Fposts\u002F2022\u002F03-01\u002Fvs-sprites-2.jpg","Unity Visual Scripting – Sprite Editor","\nSprite Editor\n",[28,1541,1543],{"id":1542},"pixels-per-unit","Pixels Per Unit",[12,1545,1546,1547,1549],{},"Back to the Inspector, using the ",[16,1548,1543],{}," option, we can determine how many pixels fit inside a single grid unit. A higher number means the rendered Sprite will be smaller in dimension but higher quality.",[110,1551],{},[20,1553,1555],{"id":1554},"sprites-scenes","Sprites & Scenes",[12,1557,1558,1559,1562,1563,1565],{},"We add a Sprite into a Scene by adding an empty Game Object and attaching a ",[16,1560,1561],{},"Sprite Renderer"," component. We can assign the Sprite we want to render with this component.",[120,1564],{},"\nAnother more straightforward approach to adding a Sprite is simply dragging it into the Scene.",[20,1567,1569],{"id":1568},"sprites-scripting","Sprites Scripting",[12,1571,1572],{},"Finally, inside a Script Graph, we can access and change the different properties of a Sprite Renderer component.",[28,1574,1576],{"id":1575},"rendered-sprite","Rendered Sprite",[12,1578,1579,1580,854,1583,1586],{},"We use the ",[16,1581,1582],{},"Get Sprite",[16,1584,1585],{},"Set Sprite"," nodes to retrieve or swap the rendered Sprite.",[44,1588,1591],{"src":1589,"alt":1590},"\u002Fposts\u002F2022\u002F03-01\u002Fvs-sprites-3.jpg","Unity Visual Scripting – Get & Set Sprite nodes","\nGet & Set Sprite nodes.\n",[28,1593,1595],{"id":1594},"tint-color","Tint Color",[12,1597,1598,1599,242,1602,1387],{},"We can also retrieve and change the Sprite’s color by using the ",[16,1600,1601],{},"Get Color",[16,1603,1604],{},"Set Color",[44,1606,1609],{"src":1607,"alt":1608},"\u002Fposts\u002F2022\u002F03-01\u002Fvs-sprites-4.jpg","Unity Visual Scripting – Get & Set Color nodes","\nGet & Set Color nodes.\n",[28,1611,1613],{"id":1612},"flipping","Flipping",[12,1615,1616,1617,242,1620,1387],{},"And flip the Sprite horizontally or vertically with the ",[16,1618,1619],{},"Set Flip X",[16,1621,1622],{},"Set Flip Y",[44,1624,1627],{"src":1625,"alt":1626},"\u002Fposts\u002F2022\u002F03-01\u002Fvs-sprites-5.jpg","Unity Visual Scripting – Get & Set Flip X\u002FY nodes","\nGet & Set Flip X\u002FY nodes.\n",[221,1629],{},[20,1631,1633],{"id":1632},"sorting","Sorting",[12,1635,1636,1637,1640,1641,1644,1645,1647],{},"At the ",[16,1638,1639],{},"Additional Settings"," of a Sprite Renderer, we can change a Sprite’s rendering order priority by using the ",[16,1642,1643],{},"Sorting Layer"," settings.",[120,1646],{},"\nWe can use Sorting Layers, for example, to separate the game’s environment into background, midground, and foreground.",[44,1649,1652],{"src":1650,"alt":1651},"\u002Fposts\u002F2022\u002F03-01\u002Fvs-sprites-6.jpg","Unity Visual Scripting – Get & Set Sorting Order, and Get & Set Sorting Layer Name nodes","\nGet & Set Sorting Order, and Get & Set Sorting Layer Name nodes.\n",[12,1654,1655,1656,1659,1660,1663],{},"In the Script Graph, we modify the rendering order inside a layer with the ",[16,1657,1658],{},"Get & Set Sprite Sorting Order"," nodes. Alternatively, we can also use the ",[16,1661,1662],{},"Get & Set Sorting Layer Name"," nodes to change the Sorting Layer itself.",[329,1665],{},[12,1667,1413],{},{"title":335,"searchDepth":336,"depth":336,"links":1669},[1670,1675,1676,1681],{"id":1452,"depth":339,"text":1453,"children":1671},[1672,1673,1674],{"id":1498,"depth":336,"text":1499},{"id":1513,"depth":336,"text":1514},{"id":1542,"depth":336,"text":1543},{"id":1554,"depth":339,"text":1555},{"id":1568,"depth":339,"text":1569,"children":1677},[1678,1679,1680],{"id":1575,"depth":336,"text":1576},{"id":1594,"depth":336,"text":1595},{"id":1612,"depth":336,"text":1613},{"id":1632,"depth":339,"text":1633},{"480w":1683,"960w":1684},"\u002Fposts\u002F2022\u002F03-01\u002Fvisual-scripting-sprites-480w.jpg","\u002Fposts\u002F2022\u002F03-01\u002Fvisual-scripting-sprites-960w.jpg","2022-03-01","Learn how to use Sprites in Unity and control them with Visual Scripting; We’ll start with a basic workflow and then manipulate the sprites through a script.",{},"\u002Fposts\u002F2022\u002F03\u002Fvisual-scripting-204-sprites",{"title":1441,"description":1686},"posts\u002F2022\u002F03\u002Fvisual-scripting-204-sprites",[364,365,1692],"2d","xUZzTRspc70","jB5AwTvAI5qcir4dO8s9xAvAtlDlFPDTKvKIDenLUEk","visual-scripting-204-sprites",{"id":1697,"authorPage":358,"extension":374,"meta":1698,"name":1699,"social":1700,"stem":1705,"__hash__":1706},"team\u002Fteam\u002Fdanielle.yaml",{},"Danielle Elias",{"twitter":1701,"instagram":1702,"linkedin":1703,"website":1704},"ddanielleelias","https:\u002F\u002Fwww.instagram.com\u002Fdanielle_elias_","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdanielle-elias-847a1816a","https:\u002F\u002Fwww.danielleelias.com","team\u002Fdanielle","P4cpTrFv0g83_T48iFqh7voUrrlvEAlt5tc_ZtZvusk",1790297819926]