<\/span><\/h2>\nSuppose you want to scale the player’s input.\u00a0 For example, if the player touches slightly right, the player’s avatar might walk.\u00a0 If the player touches the far right, the player’s avatar might run.\u00a0 This allows 5 possible states for X, and 5 possible states for Y:<\/p>\n
![\"\"](\"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-content\/uploads\/VPad_5x5_Directions-300x300.png\")
<\/p>\n
The resulting structure is a 5×5 grid, where there are two possible magnitudes for each of the 8 basic directions, plus there are 8 additional directions (16 total).<\/p>\n
XI = X * 5 \/ ControlWidth - 2\r\nYI = Y * 5 \/ ControlHeight - 2<\/pre>\n![\"\"](\"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-content\/uploads\/VPad_5x5-300x292.png\")
<\/p>\n
This can be scaled up to any number of slices:<\/p>\n
XI = X * GridWidth \/ ControlWidth - INT(GridWidth\/2)\r\nYI = Y * GridHeight \/ ControlHeight - INT(GridHeight\/2)<\/pre>\nCompared to a VPad, which supports 8 basic directions and an idle state, a VAPad can be scaled up using any odd number, to support N*N possible states.<\/p>\n
X States: N\r\nY States: N\r\nTotal States: N * N\r\nTotal Directions: N * 2 + (N-2) * 2\r\nSensitivity: INT(N \/ 2)<\/pre>\n <\/p>\n
<\/span>The effects of Clamping<\/span><\/h3>\nClamping limits the range of an output variable.<\/p>\n
For example, let’s say that we want a smaller dead zone without changing the range of inputs.<\/p>\n
![\"\"](\"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-content\/uploads\/VPad_5x5_Clamped-300x300.png\")
<\/p>\n
A clamping function works like this:<\/p>\n
XI = MIN( RangeX, MAX( -RangeX, X * GridWidth \/ ControlWidth - INT(GridWidth \/ 2) )\r\nYI = MIN( RangeY, MAX( -RangeY, Y * GridWidth \/ ControlWidth - INT(GridHeight \/ 2) )<\/pre>\nClamping makes the dead zone smaller.\u00a0 For example, if we start with a Grid size of 5 x 5, we can implement clamping at -1 to 1:<\/p>\n
XI = MIN( 1, MAX( -1, X * 5 \/ ControlWidth - INT(5 \/ 2))\r\nYI = MIN( 1, MAX( -1, Y * 5 \/ ControlHeight - INT(5 \/ 2))<\/pre>\nClamping allows you to reduce the dead zone, and combine possible output states.<\/p>\n
<\/p>\n
<\/span>Creating Acceleration<\/span><\/h3>\nWe can create a non-linear relationship between input and output.<\/p>\n
For example, we can use the same linear grid to feed an exponentiation function.<\/p>\n
Capture the sign (in pseudocode):\r\nIF X=0\r\n SX=0\r\nELSE\r\n IF X<0 \r\n SX=-1\r\n ELSE\r\n SX=1\r\n\r\nIf your compiler supports the conditional operator (C, Java):\r\nSX = (X=0)?0:((X<0)?-1:1)\r\n\r\nUse the Absolute value of X, then apply the sign.\r\nXI = ABS(X)^N * SX<\/pre>\nSince there is no square root of a negative number, you must separate the sign of the value from its magnitude.<\/p>\n
Once the magnitude has been exponentiated, multiply by the sign in order to obtain directionality.<\/p>\n
![\"\"](\"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-content\/uploads\/Acceleration_Table.png\")
<\/p>\n
![\"\"](\"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-content\/uploads\/Acceleration_Chart.png\")
<\/p>\n
Exponential scaling can provide the feeling of acceleration, where the player’s input is linear, but the magnitude is raised to some specific power.<\/p>\n
For example, if X is in the range of -5 to +5, and we raise that to the 1.7 power, the resulting output will be X in the range of -15 to +15.<\/p>\n
If the player touches (3,5), the resulting output is (3^1.7, 5^1.7) = (6,15), creating the impression of acceleration.<\/p>\n
<\/p>\n
<\/span>Conclusion<\/span><\/h2>\nUsing a VAPad provides a quick and simple way to allow the player to have responsive and intuitive controls in a mobile game.<\/p>\n","protected":false},"excerpt":{"rendered":"
Many mobile games need arcade-like controls, and implementing a virtual joystick is a quick and easy solution. Here is a quick and simple way to implement a virtual joystick.<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-4157","post","type-post","status-publish","format-standard","hentry","category-tech-support"],"_links":{"self":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/4157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/comments?post=4157"}],"version-history":[{"count":8,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/4157\/revisions"}],"predecessor-version":[{"id":4180,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/4157\/revisions\/4180"}],"wp:attachment":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/media?parent=4157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/categories?post=4157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/tags?post=4157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}